Introduction to Mobile Game Programming with Cocos2d-JS
•
6 likes•6,665 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (13)
Viewers also liked
Viewers also liked (15)
Similar to Introduction to Mobile Game Programming with Cocos2d-JS
Similar to Introduction to Mobile Game Programming with Cocos2d-JS (20)
More from Troy Miles
More from Troy Miles (20)
Recently uploaded
Recently uploaded (20)
Introduction to Mobile Game Programming with Cocos2d-JS
- 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
- 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?
- 12. Text Family Guy: The Quest for Stuff TinyCo, Inc.
- 15. BADLAND Frogmind
- 18. 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
- 19. Cocos2d-JS Cocos2d-x JavaScript version Full Cocos2d-x functionality Simplified JavaScript friendly API Code Once, Run Everywhere Mobile Native, Desktop, Web
- 22. Mac OS X iOS Android HTML 5 Mac OS X
- 23. Windows Windows 7 Android HTML5 Windows Phone 8 (soon)
- 24. Prerequisites
- 25. Android Java 6 or 7 Android ADT (NOT Android Studio) Android NDK
- 26. iOS Xcode
- 28. 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
- 29. 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/
- 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 Project Files & Folders Terminology Coordinate system
- 34. 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
- 35. 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
- 36. Demo time
- 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 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
- 42. Program editor I used WebStorm 8 It is available for Windows, Mac, and Linux It has a Chrome extension, JetBrains IDE Support, allows debugging
- 43. Deploying Choose Right click on index.html Click Debug “index.html”
- 44. 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
- 45. 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
- 46. Let’s look at a game Parts Scenes Player User Input Physics plug-in Collision detection
- 48. File formats All of the devices can play mp3 Only some of the browsers can
- 50. Playing sounds Playing sounds is 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 tough since there is no readily available JS module AdMob / AdSense iAds Microsoft Ads
- 54. 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
- 55. Android $25 for a lifetime Anyone can put apps on a device
- 57. Promoting Family and Friends Social Media Web site Advertising
- 58. 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