Cross Platform Game Programming with Cocos2d-js
•
3 likes•3,754 views
In this talk we will examine Cocos2d-JS, an open source, cross-platform, game development engine in JavaScript. Don't let the JavaScript part fool you. While your games logic is written in JavaScript, the graphics core runs in supercharged C++ and takes advantage of OpenGL when running on desktops and devices. When your game runs on the web, it takes advantage of everything HTML5 has to offer to produce amazingly fluid games for the web.
Recommended
Recommended
More Related Content
Similar to Cross Platform Game Programming with Cocos2d-js
Similar to Cross Platform Game Programming with Cocos2d-js (20)
More from Troy Miles
More from Troy Miles (20)
Recently uploaded
Recently uploaded (20)
Cross Platform Game Programming with Cocos2d-js
- 1. Cross Platform Game Programming with Cocos2d-JS So Cal Code Camp - Fullerton - 8 March 2015 Troy Miles
- 4. Troy Miles Troy Miles aka the RocknCoder Over 35 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
- 8. Agenda What is Cocos2d-JS? Setting Up Your Environment Parts is Parts Workflow
- 9. Why make mobile games?
- 14. Text Family Guy: The Quest for Stuff TinyCo, Inc.
- 17. BADLAND Frogmind
- 20. 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
- 21. Cocos2d-JS Cocos2d-x JavaScript version Full Cocos2d-x functionality Simplified JavaScript friendly API Code Once, Run Everywhere Mobile Native, Desktop, Web
- 24. Mac OS X iOS Android HTML 5 Mac OS X
- 25. Windows Windows 7 Android HTML5 Windows Phone 8 (soon)
- 26. Prerequisites
- 27. Android Java 7 Android ADT/Eclipse (NOT Android Studio) Android NDK
- 28. iOS Xcode
- 30. 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
- 31. 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/
- 33. 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 js files
- 34. cocos new cocos new -l js cocos new -l js —no-native cocos new projectName -l js -d ./Projects cocos new projectName -l js
- 35. Parts is Parts Project Files & Folders Terminology Coordinate system
- 36. 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
- 37. 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
- 39. 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
- 40. More terminology Action - an order given to a node, like animations Menu - Creates an onscreen menu LabelTTF - The simplest option for displaying text
- 41. 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
- 43. Program editor I use WebStorm 9 It is available for Windows, Mac, and Linux It has a Chrome extension, JetBrains IDE Support, allows debugging
- 44. Deploying Choose Right click on index.html Click Debug “index.html”
- 45. 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
- 46. 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
- 47. Let’s look at a game Parts Scenes Player User Input Physics plug-in Collision detection
- 49. File formats All of the devices can play mp3 Only some of the browsers can
- 51. Playing sounds Playing sounds is easy Simply call the audioEngine’s playEffect method
- 52. Cocos Studio + Other Tools Animation Editor UI Editor Scene Editor Data Editor Tiled
- 53. 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
- 54. Android $25 for a lifetime Anyone can put apps on a device
- 56. Resources http://www.cocos2d-x.org/ http://www.mapeditor.org/ http://therockncoder.blogspot.com/
- 58. Summary Cocos2d-JS allows you to create fast cross platform games in JavaScript Installation & documentation are a bit rough No support for Window Phone 8