Edge로 만든 웹앱의 소스를 보면, CSS 기반이다. SVG이나 Canvas를 쓰지 않았이다. 좋은 기능 많은데, 왜 안썼을까 하는 의구심이 있었는데, 다행히 저의 궁금증을 풀어주는 글을 발견했다.
http://forums.adobe.com/thread/884525
왜 Edge는 SVG이나 Canvas를 쓰지 않았나? 하는 질문이다. Adobe 직원이 말하기를 가장 쉬운 지점부터 시작했다. CSS3를 먼저 하고, 추후 SVG와 Canvas 모두를 지원할 예정이며, 지금 나온 Free beta가 마지막 버전은 아니고 계속 바뀔 것 같다. file->import 하면 svg 파일을 가져올 수도 있다.
해당 싸이트의 리플을 보면서 추측컨데, 현재 Canvas나 SVG보다 훨씬 DOM/CSS 렌러링이 빠르며, compatible 이슈가 없다. 따라서 이 지점에서 시작한 것 같다. 결국 SVG와 Canvas를 지원할 생각으로 제품을 내놓은 것으로 생각된다. 이렇게 계속된 피드백은 어도브사에게 자극과 좋은 기대(?)를 줄 수도 있겠구나 하는 생각이 든다.
Posted by 김용환 '김용환'
Adeboe 사에서 야심차게 HTML5 저작 도구 Edge를 공개했다. (2011.8.1)
http://www.tuaw.com/2011/08/01/adobe-introduces-edge-1-0-the-html-5-tool-with-an-eye-towards-o/
webkit 기반이며 플래쉬와 포토샵의 장점을 상당히 포함하여 완성도 높은 툴과 HTML5 페이지 소스를 제공한다. 현재는 Free beta이다.
애니메이션 효과가 상당히 인상적이다. 어도브의 역장인 플래쉬에서 많은 개념을 차용한 흔적이들이 보인다.
preview 기능을 쓰면, html5 로 만든 웹앱을 볼 수 있다. 로컬 서버의 54321포트로 동작되는지 확인해볼 수 있다.
샘플파일 중의 하나를 받아서 확인해보았다. 플래쉬 느낌이 난다.
소스 보기 하니, jquery 와 자체적으로 만든 edge js 가 보인다. (역쉬 jquery)
소스를 살펴보면, 굉장히 깔끔하다...
이번에는 가장 감명깊게 본 html5 앱이다.
훌륭하다.
소스를 보면 상당히 깔끔하게 만든것이 눈에 띄인다.
* 다운로드 -
http://labs.adobe.com/technologies/edge/
* 샘플파일 -
http://labs.adobe.com/technologies/edge/resources/
Posted by 김용환 '김용환'
문명 게임을 클론으로 하는 HTML5 게임
http://www.freeciv.net/
HTML5로 만든 1인칭 간단한 게임
http://rawkets.com/
impactJS javascript Game Engine (유료)
http://impactjs.com/
Craftyjs javscript Game Engine
http://craftyjs.com/
웹기반 MMO 게임 엔진 - 심시티처럼 만들 수 있음
http://www.isogenicengine.com/
box2dweb - 유명한 물리엔진을 html5로 포팅. Angry Bird가 사용했던 Box2d 물리엔진의 하나.
http://code.google.com/p/box2dweb/
Enchantjs
http://enchantjs.com/en/
motionjs - 멀티 유저 게임을 하면서 client-server간의 예측 이슈(prection)을 해결하기 위한 라이브러리.
아직은 초기 단계이지만, 상당히 주목받고 있음
https://github.com/tmpvar/motionjs/
cross platform game abstraction library
http://code.google.com/p/forplay/
Posted by 김용환 '김용환'
2011년 7월 9일 미국 뉴욕에서 발표한 자료.
Posted by 김용환 '김용환'
under world magazine에서 발표한 'html5와 css3로 만든 개발된 17개의 추천 웹싸이트' 입니다.
http://www.underworldmagazines.com/weekly-inspiration-17-websites-developed-with-html5-and-css3-n-27/
17개의 웹 싸이트를 다 봤는데. 이렇게 메뉴구성을 할 수 있겠구나 하는 생각이 들면서 많은 도전이 되네요!!!
참신하고 눈이 즐거운 메뉴 구성이 앞으로의 비전을 보여주고 있는 것 같네요~^^
크롬이나 파이어폭스, 사파리, IE9에서 함 보세요..~~!!!!
보시 때, 메뉴를 눌러보시거나, 아래로 스크롤 해보시면 어떤 변화가 일어나는지 보세요~
http://firefoxtweetmachine.com/#facebook
개인적으로 이것이 제일 예뻤습니다!! facebook이라고 검색한 결과가 공장에서 나옵니다.
다른 검색어도 함 눌러보세요~
http://1minus1.com
http://www.vertaaverkkoja.fi/
http://www.birrificioirpino.it/
http://www.touchtech.co.nz
http://worryfreelabs.com/
http://u.volunteerlouisiana.gov/#media
http://www.rays-lab.com
Posted by 김용환 '김용환'
HTML5 게임 저작도구가 있다고 해서 함 다운도 받고 직접 실행해봤다.
다운은 여기서 받고..
http://www.scirra.com/construct2/releases/r47.2
tutorial을 보고
http://www.scirra.com/tutorials/37/beginners-guide-to-construct-2/comments
테스트해보았다.
그냥 데모 프로젝트 다운받아서 적용해봐도 된다.
동영상은 다음과 같다.
전작 construct 저작도구는 directX 기반이며, construct이나 construct2 의 결과포맷은 비슷하다. ^^;;
1인칭 FPS이면 좋았을 수도 있었다.
construct2의 화면이다. 저작도구는 기본적으로 Layer , Sprite (개체), behaviour, property 개념이 필요한데..Scene의 개념은 tab으로 표현되었다.
개념은 다 있고, UI가 MS 필이라서 좀 편했다.
그리고, 시스템 또는 Sprite 에 대한 Event 처리에 로직을 잘 정의할 수 있었다.
마지막 화면에 대해서도 잘 그려낼 수 있었다.
실제 크롬 브라우져에서 동작하는 화면이다. 저작도구에서 테스트 버튼을 누르니 preview.html 화면으로 연동하게 했다.
실제로 테스트해보니.. 예전 게임생각이 났다.
profile 기능이나 디버깅 기능, 오디오 기능은 없다.
게임의 한계도 굉장히 협소한 느낌이 있다. event 자체를 보면 약간 한계성이 있는 게임정도로만 개발될 것으로 보인다..
하지만, 창의성이 샘솟는다..
Posted by 김용환 '김용환'
Wheel_edge.js
댓글을 달아 주세요
어도브 x
어도비 o