cross platform game programming with cocos2d-js
TRANSCRIPT
Cross Platform Game Programming with Cocos2d-JSSo Cal Code Camp - Fullerton - 8 March 2015 Troy Miles
Troy MilesTroy Miles aka the RocknCoder
Over 35 years of programming experience
Wrote a few games for Interplay in the 80's and 90’s
Speaker and writer on all things web & mobile
Contacting Me
@therockncoder
http://therockncoder.com/
https://github.com/Rockncoder
https://www.youtube.com/user/rockncoder
History2008 - Ricardo Quesada, a game developer in Argentina, writes a game framework named Cocos2d
2009 - After the iPhone SDK release, Cocos2d rewritten in Objective-C to become Cocos2d-iPhone
2010 - Zhe Wang, a developer in China, creates a fork, Cocos2d-x
Chukong Technologies Inc, Zhe's company, develops Cocos2d-JS, -HTML5, and -Lua
Cocos2d-JS
Cocos2d-x JavaScript version
Full Cocos2d-x functionality
Simplified JavaScript friendly API
Code Once, Run Everywhere
Mobile Native, Desktop, Web
Desktops
You can also build desktop apps for Windows and Mac OS X
You will need Visual Studio and Xcode respectively
I won’t speak further about this
Python 2The cocos command line needs python to run
python 2.7.5+
It won’t work with python 3
https://www.python.org/downloads/
Installation
http://cocos2d-x.org/download
Unzip the file
execute ./setup.py
cocos command options
new - Creates a new project
compile - Compiles the current project to binary
deploy - Deploy a project to the target
run - Compiles & deploy project and then runs it on the target
jscompile - minifies js files
cocos new
cocos new -l js
cocos new -l js —no-native
cocos new projectName -l js -d ./Projects
cocos new projectName -l js
Project files and foldersframeworks/runtime/tools
res - your resources
src - your JS source code
project.json - configuration
main.js - JS boot code
index.html - HTML markup
project.json
debug - the current debug setting
showFPS - whether or not to show the frame rate
frameRate - the desired frame rate
modules - cocos2d and potentially plugins
jsList - all of your source code
Terminologycc - Cocos2d, most classes prepended with this
Director - takes care of navigation between scenes
Node - Almost every element is a node
Scene - a screen in your game
Sprite - a 2D image that can be moved, rotated, scaled & more
Layer - a special node which accepts user input
More terminology
Action - an order given to a node, like animations
Menu - Creates an onscreen menu
LabelTTF - The simplest option for displaying text
Right handed coordinate system
Different than web
Origin (0,0) located at lower left hand of screen
x position increases going right
y position increases going up
max x,y at upper right hand corner
Program editorI use WebStorm 9
It is available for Windows, Mac, and Linux
It has a Chrome extension, JetBrains IDE Support, allows debugging
Modifying
Double tap a file to open it in the editor
Modify the text as desire
Click the refresh icon to run the code again
Debugging
To set a break point, click in the gutter to the left of the text
To set a conditional breakpoint, right click it and specify a condition
Click again to delete it
iOS
$99 a year for an individual in the local currency
$299 for an enterprise
Free for the university program
Only developers can put apps on devices
Resources
http://www.cocos2d-x.org/
http://www.mapeditor.org/
http://therockncoder.blogspot.com/
Sounds and Graphics
http://www.nosoapradio.us/
http://www.freesound.org/
http://spritedatabase.net/
http://opengameart.org/
Summary
Cocos2d-JS allows you to create fast cross platform games in JavaScript
Installation & documentation are a bit rough
No support for Window Phone 8