Languages
Pages
Legal
Intro to Mobile Game Programming with Cocos2d-JS2014 - So Cal Code Camp - San Diego Troy Miles
Troy MilesTroy Miles aka the RocknCoder
Over 30 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.blogspot.com/
https://github.com/Rockncoder
https://www.youtube.com/user/rockncoder
Agenda, Session 1
What is Cocos2d-JS?
Setting Up Your Environment
Parts is Parts
Workflow
Agenda, Session 2Let’s look at a game
Audio
Cocos Studio + Other Tools
Ads
Publishing
Promoting
Why make mobile games?
Titles using Cocos2d-x
Text
Avengers AllianceMarvel Entertainment
Text
Family Guy: The Quest for StuffTinyCo, Inc.
Diamond DashWooga
Star Wars: Tiny Death StarLucasArts
BADLANDFrogmind
Cocos2d-JS
History
Cocos2d-JS
Platforms and Restrictions
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
Platforms
Mac OS X
Windows
Mac OS X
iOS
Android
HTML 5
Mac OS X
Windows
Windows 7
Android
HTML5
Windows Phone 8 (soon)
Prerequisites
Android
Java 6 or 7
Android ADT (NOT Android Studio)
Android NDK
iOS
Xcode
HTML5
No extra prerequisites
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 and/or compiles 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
Parts is Parts
Project Files & Folders
Terminology
Coordinate system
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
Demo time
The code flow
index.html
main.js's
app.js
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
Workflow
Program Editor
Deploying
Modifying
Debugging
Program editorI used WebStorm 8
It is available for Windows, Mac, and Linux
It has a Chrome extension, JetBrains IDE Support, allows debugging
Deploying
Choose
Right click on index.html
Click Debug “index.html”
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
Let’s look at a gameParts
Scenes
Player
User Input
Physics plug-in
Collision detection
Audio
File formats
Sounds
Music
File formats
All of the devices can play mp3
Only some of the browsers can
Playing sounds
Playing sounds is easy
Simply call the audioEngine’s playEffect method
Cocos Studio + Other Tools
Animation Editor
UI Editor
Scene Editor
Data Editor
Tiled
Ads
Ads are tough since there is no readily available JS module
AdMob / AdSense
iAds
Microsoft Ads
Publishing
Becoming a developer
Materials
Deploying
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
Android
$25 for a lifetime
Anyone can put apps on a device
MaterialsSigned app
Icons
Screenshots
Big Images
Descriptions
Website
Videos
Promoting
Family and Friends
Social Media
Web site
Advertising
Summary
Cocos2d-JS allows you to create fast cross platform games
Installation and setup can be a bit tough
Monetizing with Ads is also tough
Top Related