Intro to Mobile Game
Programming with Cocos2d-JS
2014 - So Cal Code Camp - San Diego
Troy Miles
Troy Miles
Troy Miles aka the RocknCoder
Over 30 years of programming experience
Wrote a few games for Interplay in the 80...
Contacting Me
@therockncoder
rockncoder@gmail.com
http://therockncoder.blogspot.com/
https://github.com/Rockncoder
https:/...
Text
https://bitly.com/bundles/rockncoder/5
Agenda, Session 1
What is Cocos2d-JS?
Setting Up Your Environment
Parts is Parts
Workflow
Agenda, Session 2
Let’s look at a game
Audio
Cocos Studio + Other Tools
Ads
Publishing
Promoting
Why make mobile games?
Titles using Cocos2d-x
Text
Avengers Alliance
Marvel Entertainment
Text
Family Guy: The Quest for Stuff
TinyCo, Inc.
Diamond
Dash
Wooga
Star Wars:
Tiny Death
Star
LucasArts
BADLAND
Frogmind
Cocos2d-JS
History
Cocos2d-JS
Platforms and
Restrictions
History
2008 - Ricardo Quesada, a game developer in Argentina,
writes a game framework named Cocos2d
2009 - After the iPho...
Cocos2d-JS
Cocos2d-x JavaScript version
Full Cocos2d-x functionality
Simplified JavaScript friendly API
Code Once, Run Ever...
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...
Python 2
The cocos command
line needs python to run
python 2.7.5+
It won’t work with
python 3
https://www.python.org/
down...
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 proje...
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 folders
frameworks/runtime/tools
res - your resources
src - your JS source code
project.json - configurati...
project.json
debug - the current debug setting
showFPS - whether or not to show the frame rate
frameRate - the desired fra...
Demo time
The code flow
index.html
main.js's
app.js
Terminology
cc - Cocos2d, most classes prepended with this
Director - takes care of navigation between scenes
Node - Almos...
More terminology
Action - an order given to a node, like animations
Menu - Creates an onscreen menu
LabelTTF - The simples...
Right handed coordinate system
Different than web
Origin (0,0) located at lower
left hand of screen
x position increases g...
Workflow
Program Editor
Deploying
Modifying
Debugging
Program editor
I used WebStorm 8
It is available for
Windows, Mac, and
Linux
It has a Chrome
extension, JetBrains IDE
Supp...
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 i...
Let’s look at a game
Parts
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 develop...
Android
$25 for a lifetime
Anyone can put apps on a device
Materials
Signed 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 wit...
Text
https://bitly.com/bundles/rockncoder/5
Introduction to Mobile Game Programming with Cocos2d-JS
Introduction to Mobile Game Programming with Cocos2d-JS
Introduction to Mobile Game Programming with Cocos2d-JS
Introduction to Mobile Game Programming with Cocos2d-JS
Introduction to Mobile Game Programming with Cocos2d-JS
Upcoming SlideShare
Loading in...5
×

Introduction to Mobile Game Programming with Cocos2d-JS

3,995

Published on

We will explore using Cocos2d-JS, an open source game engine, to build games for the two major smart phone platforms - Android and iOS. Cocos2d-JS is free and it runs on many platforms giving you the ability to port your game not only to the most popular phone platforms, but to HTML5 browsers, Windows and Mac OS X.

Published in: Technology

Introduction to Mobile Game Programming with Cocos2d-JS

  1. 1. Intro to Mobile Game Programming with Cocos2d-JS 2014 - So Cal Code Camp - San Diego Troy Miles
  2. 2. Troy Miles Troy 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
  3. 3. Contacting Me @therockncoder rockncoder@gmail.com http://therockncoder.blogspot.com/ https://github.com/Rockncoder https://www.youtube.com/user/rockncoder
  4. 4. Text https://bitly.com/bundles/rockncoder/5
  5. 5. Agenda, Session 1 What is Cocos2d-JS? Setting Up Your Environment Parts is Parts Workflow
  6. 6. Agenda, Session 2 Let’s look at a game Audio Cocos Studio + Other Tools Ads Publishing Promoting
  7. 7. Why make mobile games?
  8. 8. Titles using Cocos2d-x
  9. 9. Text Avengers Alliance Marvel Entertainment
  10. 10. Text Family Guy: The Quest for Stuff TinyCo, Inc.
  11. 11. Diamond Dash Wooga
  12. 12. Star Wars: Tiny Death Star LucasArts
  13. 13. BADLAND Frogmind
  14. 14. Cocos2d-JS History Cocos2d-JS Platforms and Restrictions
  15. 15. History 2008 - 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
  16. 16. Cocos2d-JS Cocos2d-x JavaScript version Full Cocos2d-x functionality Simplified JavaScript friendly API Code Once, Run Everywhere Mobile Native, Desktop, Web
  17. 17. Platforms Mac OS X Windows
  18. 18. Mac OS X iOS Android HTML 5 Mac OS X
  19. 19. Windows Windows 7 Android HTML5 Windows Phone 8 (soon)
  20. 20. Prerequisites
  21. 21. Android Java 6 or 7 Android ADT (NOT Android Studio) Android NDK
  22. 22. iOS Xcode
  23. 23. HTML5 No extra prerequisites
  24. 24. 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
  25. 25. Python 2 The cocos command line needs python to run python 2.7.5+ It won’t work with python 3 https://www.python.org/ downloads/
  26. 26. Installation http://cocos2d-x.org/ download Unzip the file execute ./setup.py
  27. 27. 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
  28. 28. cocos new cocos new -l js cocos new -l js —no-native cocos new projectName -l js -d ./Projects cocos new projectName -l js
  29. 29. Parts is Parts Project Files & Folders Terminology Coordinate system
  30. 30. Project files and folders frameworks/runtime/tools res - your resources src - your JS source code project.json - configuration main.js - JS boot code index.html - HTML markup
  31. 31. 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
  32. 32. Demo time
  33. 33. The code flow index.html main.js's app.js
  34. 34. Terminology cc - 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
  35. 35. More terminology Action - an order given to a node, like animations Menu - Creates an onscreen menu LabelTTF - The simplest option for displaying text
  36. 36. 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
  37. 37. Workflow Program Editor Deploying Modifying Debugging
  38. 38. Program editor I used WebStorm 8 It is available for Windows, Mac, and Linux It has a Chrome extension, JetBrains IDE Support, allows debugging
  39. 39. Deploying Choose Right click on index.html Click Debug “index.html”
  40. 40. 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
  41. 41. 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
  42. 42. Let’s look at a game Parts Scenes Player User Input Physics plug-in Collision detection
  43. 43. Audio File formats Sounds Music
  44. 44. File formats All of the devices can play mp3 Only some of the browsers can
  45. 45. Playing sounds Playing sounds is easy Simply call the audioEngine’s playEffect method
  46. 46. Cocos Studio + Other Tools Animation Editor UI Editor Scene Editor Data Editor Tiled
  47. 47. Ads Ads are tough since there is no readily available JS module AdMob / AdSense iAds Microsoft Ads
  48. 48. Publishing Becoming a developer Materials Deploying
  49. 49. 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
  50. 50. Android $25 for a lifetime Anyone can put apps on a device
  51. 51. Materials Signed app Icons Screenshots Big Images Descriptions Website Videos
  52. 52. Promoting Family and Friends Social Media Web site Advertising
  53. 53. 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
  54. 54. Text https://bitly.com/bundles/rockncoder/5
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×