14. coc os2d-html5
현재 버전은 2.0
● files must load from HTTP server
● Google Closure Compiler surpport
● Unified Javascript API style
● DOM Menu/UI
● Updated API to Cocos2d-x V2.0
15. Closure Co mpiler - 1
Google
Javascript를 최적화 해서 브라우져에서 다운로
드와 실행 속도를 향상
16. Closure Co mpiler - 2
Google
"Advanced mode" 적용
● 게임 로직과 묶어서 하나의 파일로 패키징
가능
● 코드 최소화(주석 및 비칸 제거 등)
● 사용하지 않는 코드 제거
● 코드 난독화
17. DOM M enu / UI
html DOM 방식으로 메뉴 구성 가능
● 정적인 메뉴를 구성시 매 프레임 다시 그리
지 않아 속도향상
● 텍스트 출력 속도 향상
18. d Javascript API style
Uni fie
cocos2d-iphone 및 cocos2d-x의 JS-Binding
의 스크립트와 cocos2d-html5 코드가 같음
For example:
var sprite = cc.Sprite.spriteWithFile(s_grossini_dance_atlas, cc.RectMake(x, y, 85, 121)); //is changed to...
var sprite = cc.Sprite.create(s_grossini_dance_atlas, cc.RectMake(x, y, 85, 121));
19. cocos2d -html5 1/2
cocos2d-x 와
cocos2d-x 기반 제작
비슷한 구조로 비교 분석이 쉽다.
● Cocos2d-html5-v2.0.zip 안의 cocos2d폴더
와 cocos2d-2.0-x의 cocos2dx 폴더가 비슷
한 구조로 구성 되어 있음
25. 게 임의 구성
html 파일 + js 파일 로 구성
● html 파일은 canvas 정의 - id와 크기 지정
● js 파일은 어플리케이션 로직 및 엔진
26. 파일 구성
index.html - 캔버스 정의 및 cocos2d.js 로딩
cocos2d.js - 엔진 초기화 및 게임 코드 파일 로딩
main.js - 엔진에 게임 객체 생성 및 전달
resource.js - 리소스 목록 정의
myApp.js - 'Hello World' 메시지 및 이미지 출력
build.xml - google closure compiler를 이용한 통합 파일 생성을 위한
ant 빌드 스크립트
33. JS 파일 - r esource.js
리소스 과련 매직 넘버 정의
전체 리소스 목록
34. 파일 - myA pp.js 1/2
JS
Hello World
화면 갱신 알림
엔진 로고
엔진 정보 종료 버튼
35. 파일 - myA pp.js 2/2
JS
CircleSprite (화면 갱신 알림)
● 매 프레임 갱신되는 객체
● 기본 도형 그리는 함수로 그림
Helloworld (cc.Layer 확장)
● 종료 버튼 이미지 및 이벤트 정의
● 'Hello World' 문구, 화면 갱신 알림 및 엔진 로고 이미지 객체 생성 및 에이
메이션 정의
HelloworldScene (cc.Scene 확장)
● Helloworld 레이어 생성 및 등록
39. ant 빌드 1/2
ant 빌드 실패
엔진 파일 목록에 존재하지 않는 파일이 있어 빌드 실패
<file name="keypad_dispatcher/CCKeypadDelegate.js"/>
<file name="keypad_dispatcher/CCKeypadDispatcher.js"/>
40. ant 빌드 2/2
ant 빌드 성공
!! 정상적인 결과 파일을 만들기 위해 build.xml 을 수정해야 합니다. !!
<file name="keypad_dispatcher/CCKeypadDelegate.js"/>
<file name="keypad_dispatcher/CCKeypadDispatcher.js"/>
를
<file name="touch_dispatcher/CCTouchDelegateProtocol.js"/>
<file name="touch_dispatcher/CCTouchHandler.js"/>
<file name="touch_dispatcher/CCTouchDispatcher.js"/>
<file name="keyboard_dispatcher/CCKeyboardDelegate.js"/>
<file name="keyboard_dispatcher/CCKeyboardDispatcher.js"/>
로 수정해야 합니다.
44. - cocos2d- x win32 2/3
b oot engine
mainLoop() 호출
45. - cocos2d- x win32 3/3
b oot engine
1. main.cpp
a. CCApplication::sharedApplication()->run();
2. platform/CCApplication.cpp - run()
b. applicationDidFinishLaunching()
c. looping CCDirector::sharedSirector()->mainLoop()
52. - cocos2d- html5 7/8
b oot engine
1. index.html
a. cocos2d.js 로딩
2. cocos2d.js
b. 즉시 실행 함수에서 DOM로딩 직후 jsloader.js 로딩
3. jsloader.js - (여러 js을 읽는 경우)
c. 즉시 실행 함수에서 모든 엔진 코드 및 main.js 로딩
53. - cocos2d- html5 8/8
b oot engine
4. main.js - ctor()
a. cc.Loader.shareLoader().onload 이벤트로 cc.
AppController.shareAppController().
didFinishLaunchingWithOptions() 호출
5. AppControl.js - didFinishLaunchingWithOptions()
b. cc.Application.sharedApplication().run();
6. CCApplication.js - run()
c. applicationDidFinishLaunching()
d. looping cc.Director.getInstance().mainLoop();
54. boot up 비교
cocos2d-x
● 플랫폼 별 다른 엔트리 포인트에서 CCApplication.cpp
의 run() 호출
● 윈도의 경우 platform/win32/CCApplication.cpp 의
run() 에서 mainLoop() 호출
cocos2d-html5
● 엔진 및 어플리케이션 코드 로딩
● 로딩 과정에서 즉시 실행 함수로 초기화
● 로딩 완료 이벤트 수신 후 platform/CCApplication.js
의 run() 에서 mainLoop() 호출
55. 2개의 main Loop() ??
etc -
mainLoop() 호출
Looping
callback 등록 mainLoop() 호출
Looping
callback 등록
61. lay - Canva s vs WebGL
Disp
Canvas
● 모든 시스템에서 지원
● 상대적으로 느리지만 지속적으로 개선
WebGL
● gles 2.0 과 비슷한 사양
● Canvas에 비해 매우 빠르고 동작 한다면 호환성 이슈 적
음
● WebGL tutorial - Opera 개발자(Erik Moller)
● WebGL Terrain Editor
62. performanc e test 1/2
Display -
2012-3-19 internet-explorer-10-fast-and-native-has-gone-to-other-browsers
63. performanc e test 2/2
Display -
2011-11-18 html5-2d-gaming-performance-analysis
65. Input
addEventHandler
● 첫번째 인자로 원하는 이벤트를 지정
○ 'keyup', 'keydown'
○ 'mousedown', 'mouseup', 'mousemove'
○ 'touchstart', 'touchmove', 'touchend', 'touchcancel'
● 두번째 인자로 이벤트 처리 함수 지정
● 세번째 인자로 캡쳐 방식의 이벤트 처리
○ 일반적인 경우 부모 객체에게 이벤트 전달
○ 캡쳐 방식의 경우 부모객체에게 이벤트 전달을 하지
않음
73. o rk - Web so cket client
Netw
Web socket - client
● TCP 기반의 실시간 양방향 통신 가능
● 다수의 사용자와 통신 가능
● 사용하기 쉽다
안드로이드 계열에서는 지원하지 않음 ;;;
● iframe 나 Ajax 등 비동기 JS 계열의 기술을 이용
74. o rk - Web so cket server
Netw
Web socket - server
● 기존 TCP 소켓 서버와 약간 다른 구현이 필요
● 다양한 언어를 위한 오픈 소스 서버 프레임 존재
○ jwebsocket
○ pywebsocket
○ phpwebsocket
○ web-socket-ruby
○ socket.io-node
○ ...
75. high p erformance
변수 선언 위치
성능 향상을 위한 코딩 패턴
...
● Extreme JavaScript Performance
참고자료
● JavaScript 자바스크립트 성능 최적화
76. multi browser
브라우져 마다 특성 다름...;;
● 시각적 결과
● 지원 기능
● 성능
● 개개의 브라우져에 대응하도록 소스 코드 튜닝
● 특정 브라우져만 지원, 해당 브라우져 설치 유도
77. - html5 & javascript
debug
Firefox - Firebug
Chrome - Chrome developer tool
● 브레이크 포인터, 라인 단위 실행 등 디버깅 기능
● 변수값 표시
● 로그 출력
● 성능 프로파일링
● 호출 스텍 표시
● 리소스 로딩 모니터링
● 기타 등등
78. IDE - C onstruct 2
Make HTML5 games with Construct 2