Your SlideShare is downloading. ×
Introduction to Mobile Game Programming with Cocos2d-JS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Mobile Game Programming with Cocos2d-JS


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 …

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Intro to Mobile Game Programming with Cocos2d-JS 2014 - So Cal Code Camp - San Diego Troy Miles
  • 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. Contacting Me @therockncoder
  • 4. Text
  • 5. Agenda, Session 1 What is Cocos2d-JS? Setting Up Your Environment Parts is Parts Workflow
  • 6. Agenda, Session 2 Let’s look at a game Audio Cocos Studio + Other Tools Ads Publishing Promoting
  • 7. Why make mobile games?
  • 8. Titles using Cocos2d-x
  • 9. Text Avengers Alliance Marvel Entertainment
  • 10. Text Family Guy: The Quest for Stuff TinyCo, Inc.
  • 11. Diamond Dash Wooga
  • 12. Star Wars: Tiny Death Star LucasArts
  • 13. BADLAND Frogmind
  • 14. Cocos2d-JS History Cocos2d-JS Platforms and Restrictions
  • 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. Cocos2d-JS Cocos2d-x JavaScript version Full Cocos2d-x functionality Simplified JavaScript friendly API Code Once, Run Everywhere Mobile Native, Desktop, Web
  • 17. Platforms Mac OS X Windows
  • 18. Mac OS X iOS Android HTML 5 Mac OS X
  • 19. Windows Windows 7 Android HTML5 Windows Phone 8 (soon)
  • 20. Prerequisites
  • 21. Android Java 6 or 7 Android ADT (NOT Android Studio) Android NDK
  • 22. iOS Xcode
  • 23. HTML5 No extra prerequisites
  • 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. Python 2 The cocos command line needs python to run python 2.7.5+ It won’t work with python 3 downloads/
  • 26. Installation download Unzip the file execute ./
  • 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. 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. Parts is Parts Project Files & Folders Terminology Coordinate system
  • 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. 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. Demo time
  • 33. The code flow index.html main.js's app.js
  • 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. More terminology Action - an order given to a node, like animations Menu - Creates an onscreen menu LabelTTF - The simplest option for displaying text
  • 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. Workflow Program Editor Deploying Modifying Debugging
  • 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. Deploying Choose Right click on index.html Click Debug “index.html”
  • 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. 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. Let’s look at a game Parts Scenes Player User Input Physics plug-in Collision detection
  • 43. Audio File formats Sounds Music
  • 44. File formats All of the devices can play mp3 Only some of the browsers can
  • 45. Playing sounds Playing sounds is easy Simply call the audioEngine’s playEffect method
  • 46. Cocos Studio + Other Tools Animation Editor UI Editor Scene Editor Data Editor Tiled
  • 47. Ads Ads are tough since there is no readily available JS module AdMob / AdSense iAds Microsoft Ads
  • 48. Publishing Becoming a developer Materials Deploying
  • 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. Android $25 for a lifetime Anyone can put apps on a device
  • 51. Materials Signed app Icons Screenshots Big Images Descriptions Website Videos
  • 52. Promoting Family and Friends Social Media Web site Advertising
  • 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. Text