Is it hard to build games? No, at least not with Cocos2D-x, the free, cross-platform framework that makes it easy to create high-performance games in JavaScript. How easy? Come and watch me make a simple, but complete old school platformer in 60 minutes. I will show you how to get started. Installation is the worst part of Cocos2D-x, but it isn't too tough. Then we'll put the app together, running it on my laptop as we go. We will also add music, sound, and show you where to find cheap sources for both. Once our game is running, I will blow your minds by porting the game to both iOS and the web. That's right, one app running on a laptop, an iPhone, and on a web page. As I build, I will talk about all of the things that make Cocos2D-x magical. Things like graphic layers, sprite animation, collision detection, resource management and physics. I'll also demo debugging since bugs are an inevitable part of programming. While made especially for games, you can build any app, which needs to be fast or cross-platform, Please keep in mind, that Cocos2D-x makes it easy for programmers to create games. If you know JavaScript excellent, but you should be okay so long as you know a curly brace language, like C, Java, or C#. If you don't know how to program, take a programming class first.

1. Build a Game in 60 minutes
PeopleSpace, Irvine CA 24 May 2016

3. Code and Slides
http://www.slideshare.net/rockncoder/build-a-game-
in-60-minutes
https://github.com/Rockncoder/oldschool

4. Troy Miles
Troy Miles
Over 37 years of
programming experience
Speaker and author
Author of jQuery Essentials
rockncoder@gmail.com
@therockncoder

6. Cocos2d-x: Introduction

7. What is Cocos2d-x?
Open source game engine under MIT license
It is optimized for 2D graphics using OpenGL
Used by more than 400,000 developers worldwide

8. History
2008 Ricardo Quesada in Argentina creates Cocos2d
Ported to iPhone with the opening of the iPhone App
Store
2010 Zhe Wang in China forks it creating Cocos2d-x
2013 Ricardo joins Cocos2d-x team
12 May 2016 version 3.11 released

9. Target Platforms
Android
iOS (iPhone + iPad)
Mac OS X
Windows Phone 8
Windows 7

10. Development Platforms
Visual Studio 2012+ (Windows)
Xcode 4.6+ (Mac)
CMake 2.6+ (Ubuntu)
All platforms need Python v2.7.x (not 3!)

11. Development Languages
C++
Lua
JavaScript (all except WP8)

12. Why JavaScript?
Arguably the most popular programming language
It is universal
It is fast
Way easier to learn than C++

13. Mandatory Tools
iOS / Mac OS X apps require Xcode and a Mac
Windows / WP8 apps require VS and a PC

14. Titles using Cocos2d-x

15. Text
Avengers Alliance
Marvel Entertainment

16. Text
Family Guy: The Quest for Stuff
TinyCo, Inc.

17. Diamond
Dash
Wooga

18. Star Wars:
Tiny Death
Star
LucasArts

19. BADLAND
Frogmind

21. Key Points
Cocos2d has been around since 2008
Cocos2d-x uses C++ for speed
A lot of big name titles use it
It has always been free and always will be

22. Cocos2d-x: Installation

23. Keep in mind…
I am using a Mac, but Cocos2D-x is cross platform
Everything will work on Windows and Linux

24. Mac Development
Python 2.7.x
Apple Xcode
(Jetbrains’ AppCode)

25. Windows Development
Python 2.7.x
Visual Studio 2012+
Windows Phone SDK 8

26. cocos2d-x.org
Tutorials
Forum
Blog
Downloads

27. Download
http://www.cocos2d-x.org/download
Under the column, Cocos2d-x,
Click, “DOWNLOAD V3.11”
Unzip it

28. Installation
From terminal or command prompt
cd to the root of the directory
setup.py
(will modify your path and other env variables)
open the project for your environment

29. Key Points
Installing cocos2d-x is pretty easy
Everything is done from the command line

30. Cocos2d-x: Feature Overview

32. JavaScript
Uses Mozilla’s SpiderMonkey JS Engine v33
Released 14 Oct 2014
Same engine used in FireFox 33
Support a lot of ES6 features
(except templates strings)

33. Widgets
Button
CheckBox
ListView
Slider
TextField

34. Audio
Sound effects
Background music
CocosDenshion library (Open AL)
Support audio is platform dependent

35. Physics
Chipmunk2D
Portable 2-dimensional real-time rigid body physics engine
Written in C99 by Scott Lembcke
Box2d
Free open source 2-dimensional physics simulator engine
Written in C++ by Erin Catto
Published under the zlib license

36. Network
HTTP + SSL
WebSocket API
XMLHttpRequest API

37. User Input
Touch/Accelerometer on mobile devices
Touch/Mouse/Keyboard on desktop
Game controller support

38. 2D Graphics
Transitions between scenes
Sprites and Sprite Sheets
Effects: Lens, Ripple, Waves, Liquid, etc.
Transformation Actions: Move, Rotate, Scale, Fade, Tint,
etc.
Composable actions: Sequence, Spawn, Repeat,
Reverse

39. 2D Graphics
Ease Actions: Exp, Sin, Cubic, Elastic, etc.
Misc actions: CallFunc, OrbitCamera, Follow, Tween
Particle system
Skeleton Animations: Spine and Adobe DragonBone
Fast font rendering using Fixed and Variable width fonts

40. 2D Graphics
TrueType fonts
Tile Map support: Orthogonal, Isometric and
Hexagonal
Parallax scrolling
Motion Streak
Render To Texture

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

42. Let’s make a game

43. Cocos command options
new - creates a new game
run - compile, deploy, and run on game on target
deploy - deploy game to target
compile - compiles game
luacompile - minifies Lua files and compiles
jscompile - minifies JS files and compiles

44. Cocos command options
-h, —help - Shows the help
-v, —version - Shows the current version

45. Creating a new game
Open the cmd window
Validate that cocos is in your path, cocos <enter>
cocos new gamename -p com.company.name -l js

46. new command explained
MyGame: name of your project
-p com.mycompany.mygame: package name
-l js: programming language used for the project, valid
values are: cpp, lua, and js

47. Directory Structure
Classes
cocos2d
Resources
Platform directories

48. Class Directory
AppDelegate initializes
cocos2d-x
HelloWorldScene is
where your game begins

49. Hello World
Cocos2D-x ships as
source code
Build it to compile the
libraries

50. Bootup on Mac
launches from main.cpp
calls AppDelegate.cpp
(starts up Cocos2D-x)
calls main.js
(launches your scene)

51. Graphics Diagnostics
configured in project.json
82 <-- number of draw calls
0.016 <-- time it took to render the frame
60.0 <-- frames per second

52. Don’t forget
Add JavaScript files to the project.json
Add resources (images/sound/music) to resources.js
Forgetting to add them is a very common bug

53. Lexicon
Director
Node
Scene
Layer
Sprite
Action
Particle
Event

54. Adding Scenes
Scenes are actually derived from the Layer class
Add scene for main, game, pause, end game
Add colors to scenes
Add transitions

55. The Game Loop
The central component of any game
Allows game to run smoothly regardless of user input
Allows game to run at same speed regardless of
machine

56. Game Loop Reality
In the scene init add,
this.scheduleUpdate()
Add an update method,
HelloWorld::update(float dt)
The update method should be as fast as possible

57. Steps
Add a background
Add a hero
Move the hero
Detect touches
Fire bullets
Add enemy
Animate enemy
Detect collision
Give points
Detect end of game

58. Steps
Adding sound
Adding music
Adding scenes

59. Resources
http://www.nosoapradio.us/
http://www.freesound.org/
http://spritedatabase.net/
http://opengameart.org/
http://www.lostgarden.com/search/label/free%20game
%20graphics

60. More resources
http://www.spriters-resource.com/
https://github.com/cocos2d/cocos2d-js-tests/tree/
master/games
https://github.com/dalinaum/chukong-cocos-docs/
tree/master/tutorial/framework/html5/parkour-game-
with-javascript-v3.0

61. Code and Slides
http://www.slideshare.net/rockncoder/build-a-game-
in-60-minutes
https://github.com/Rockncoder/oldschool

62. Summary
Cocos2d-x is a free open source game engine
It supports Android, iOS, Windows and Mac

63. Questions?