Download - Hub102 - Lesson 6 - Cocos2d-js
![Page 1: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/1.jpg)
Lesson 6cocos2d-js
![Page 2: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/2.jpg)
Cocos2d-JS
• History
• Family
• Cocos2d-JS
![Page 3: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/3.jpg)
History• 2008 - Ricardo Quesada, a game developer in
Argentina, writes a game framework named cocos2d (written in Python)
• 2009 - After iPhone SDK release, cocos2d rewritten in Objective-C to become cocos2d-iphone
• 2010 - Zhe Wang, a developer in China, created a fork, cocos2d-x (Written in C++)
• Chukong Technologies Inc, Zhe’s company, develops cocos2d-JS, -HTML5, and -Lua
![Page 4: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/4.jpg)
Family
![Page 5: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/5.jpg)
Cocos2d-JS
• Cocos2d-x JavaScript version
• Full cocos2d-x functionality
• Simplified JavaScript friendly API
• Code One, Run Everywhere
• Mobile Native, Web, Desktop
![Page 6: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/6.jpg)
![Page 7: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/7.jpg)
Cocos2d-js setup• Install python 2.7.x
• Extract Android SDK, Android NDK
• Add environment PATH
• JAVA
• Ant
• run setup.py on console
• Test: run command cocos on console
![Page 8: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/8.jpg)
Cocos Command
• new - Creates new project
• compile - Compiles the current project library
• deploy - Deploy project to target
• run - Compiles & Deploy project and then runs it on the target
• jscompile - minifies and/or compiles js fiels
![Page 9: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/9.jpg)
Project files & folders• frameworks/runtime-src -
where you can build native client
• res - your assets
• src - your JS source code
• project.json - project configuration
• main.js - JS boot code
• index.html - html markup
![Page 10: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/10.jpg)
Runing demo• cocos run -p web
![Page 11: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/11.jpg)
cocos2d basic concept
![Page 12: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/12.jpg)
cocos2d basic concept
![Page 13: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/13.jpg)
cocos2d basic concept
![Page 14: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/14.jpg)
cocos2d basic concept
![Page 15: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/15.jpg)
Director & Scene
• Game made up of “game screens” called Scenes
• Each Scene can be considered a separate app
• Director handle main window and executes Scenes
![Page 16: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/16.jpg)
Layers
• Each Scene contains several full screen Layers
• Layers contain Sprites which are game elements
• Layers useful for Controls, Background, Labels, Menus
![Page 17: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/17.jpg)
Nodes• Nodes are anything that can gets drawn or
contains things that get drawn (= Scene, Layer, Sprite…)
• Can:
★ Contains other Nodes
★ Schedule periodic callback
★ Execute Actions
![Page 18: Hub102 - Lesson 6 - Cocos2d-js](https://reader035.vdocuments.net/reader035/viewer/2022081515/55cf6ca4bb61eb26588b47fe/html5/thumbnails/18.jpg)