Downloaded 91 times
Uploaded byTroy Miles
Introduction to Mobile Game Programming with Cocos2d-JS
This document discusses an introductory presentation on mobile game programming with Cocos2d-JS. It provides an overview of the speaker's background and experience, outlines the agenda which includes an introduction to Cocos2d-JS, setting up the environment, terminology, workflow, looking at a sample game, audio, tools, ads and publishing. It also discusses platforms supported, prerequisites, installation, common commands, game development parts and terminology, the coordinate system, debugging and promoting games.
More Related Content
Similar to Introduction to Mobile Game Programming with Cocos2d-JS
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to Mobile Game Programming with Cocos2d-JS
- 1. Intro to MobileGame Programming with Cocos2d-JS 2014 - So Cal Code Camp - San Diego Troy Miles
- 2. Troy Miles Troy Milesaka 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.
- 4.
- 5. Agenda, Session 1 Whatis Cocos2d-JS? Setting Up Your Environment Parts is Parts Workflow
- 6. Agenda, Session 2 Let’slook at a game Audio Cocos Studio + Other Tools Ads Publishing Promoting
- 7. Why make mobilegames?
- 10.
- 11.
- 12. Text Family Guy: TheQuest for Stuff TinyCo, Inc.
- 13.
- 14.
- 15.
- 17.
- 18. History 2008 - RicardoQuesada, 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
- 19. Cocos2d-JS Cocos2d-x JavaScript version FullCocos2d-x functionality Simplified JavaScript friendly API Code Once, Run Everywhere Mobile Native, Desktop, Web
- 21.
- 22. Mac OS X iOS Android HTML5 Mac OS X
- 23.
- 24.
- 25. Android Java 6 or7 Android ADT (NOT Android Studio) Android NDK
- 26.
- 27.
- 28. Desktops You can alsobuild desktop apps for Windows and Mac OS X You will need Visual Studio and Xcode respectively I won’t speak further about this
- 29. Python 2 The cocoscommand line needs python to run python 2.7.5+ It won’t work with python 3 https://www.python.org/ downloads/
- 30.
- 31. 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
- 32. cocos new cocos new-l js cocos new -l js —no-native cocos new projectName -l js -d ./Projects cocos new projectName -l js
- 33. Parts is Parts ProjectFiles & Folders Terminology Coordinate system
- 34. Project files andfolders frameworks/runtime/tools res - your resources src - your JS source code project.json - configuration main.js - JS boot code index.html - HTML markup
- 35. project.json debug - thecurrent 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
- 36.
- 37.
- 38. 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
- 39. More terminology Action -an order given to a node, like animations Menu - Creates an onscreen menu LabelTTF - The simplest option for displaying text
- 40. Right handed coordinatesystem 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
- 41.
- 42. Program editor I usedWebStorm 8 It is available for Windows, Mac, and Linux It has a Chrome extension, JetBrains IDE Support, allows debugging
- 43. Deploying Choose Right click onindex.html Click Debug “index.html”
- 44. Modifying Double tap afile to open it in the editor Modify the text as desire Click the refresh icon to run the code again
- 45. Debugging To set abreak 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
- 46. Let’s look ata game Parts Scenes Player User Input Physics plug-in Collision detection
- 47.
- 48. File formats All ofthe devices can play mp3 Only some of the browsers can
- 50. Playing sounds Playing soundsis easy Simply call the audioEngine’s playEffect method
- 51. Cocos Studio +Other Tools Animation Editor UI Editor Scene Editor Data Editor Tiled
- 52. Ads Ads are toughsince there is no readily available JS module AdMob / AdSense iAds Microsoft Ads
- 53.
- 54. iOS $99 a yearfor an individual in the local currency $299 for an enterprise Free for the university program Only developers can put apps on devices
- 55. Android $25 for alifetime Anyone can put apps on a device
- 56.
- 57. Promoting Family and Friends SocialMedia Web site Advertising
- 58. Summary Cocos2d-JS allows youto create fast cross platform games Installation and setup can be a bit tough Monetizing with Ads is also tough
- 59.