Build a Game in 60 minutesPeopleSpace, Irvine CA 24 May 2016

Code and Slides

http://www.slideshare.net/rockncoder/build-a-game-in-60-minutes

https://github.com/Rockncoder/oldschool

Troy MilesTroy Miles

Over 37 years of programming experience

Speaker and author

Author of jQuery Essentials

rockncoder@gmail.com

@therockncoder

Cocos2d-x: Introduction

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

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

Target Platforms

Android

iOS (iPhone + iPad)

Mac OS X

Windows Phone 8

Windows 7

Development Platforms

Visual Studio 2012+ (Windows)

Xcode 4.6+ (Mac)

CMake 2.6+ (Ubuntu)

All platforms need Python v2.7.x (not 3!)

Development Languages

C++

Lua

JavaScript (all except WP8)

Why JavaScript?

Arguably the most popular programming language

It is universal

It is fast

Way easier to learn than C++

Mandatory Tools

iOS / Mac OS X apps require Xcode and a Mac

Windows / WP8 apps require VS and a PC

Titles using Cocos2d-x

Text

Avengers AllianceMarvel Entertainment

Text

Family Guy: The Quest for StuffTinyCo, Inc.

Diamond DashWooga

Star Wars: Tiny Death StarLucasArts

BADLANDFrogmind

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

Cocos2d-x: Installation

Keep in mind…

I am using a Mac, but Cocos2D-x is cross platform

Everything will work on Windows and Linux

Mac Development

Python 2.7.x

Apple Xcode

(Jetbrains’ AppCode)

Windows Development

Python 2.7.x

Visual Studio 2012+

Windows Phone SDK 8

cocos2d-x.org

Tutorials

Forum

Blog

Downloads

Download

http://www.cocos2d-x.org/download

Under the column, Cocos2d-x,

Click, “DOWNLOAD V3.11”

Unzip it

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

Key Points

Installing cocos2d-x is pretty easy

Everything is done from the command line

Cocos2d-x: Feature Overview

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)

Widgets

Button

CheckBox

ListView

Slider

TextField

Audio

Sound effects

Background music

CocosDenshion library (Open AL)

Support audio is platform dependent

PhysicsChipmunk2D

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

Network

HTTP + SSL

WebSocket API

XMLHttpRequest API

User Input

Touch/Accelerometer on mobile devices

Touch/Mouse/Keyboard on desktop

Game controller support

2D GraphicsTransitions 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

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

2D GraphicsTrueType fonts

Tile Map support: Orthogonal, Isometric and Hexagonal

Parallax scrolling

Motion Streak

Render To Texture

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

Let’s make a game

Cocos command optionsnew - 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

Cocos command options

-h, —help - Shows the help

-v, —version - Shows the current version

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

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

Directory Structure

Classes

cocos2d

Resources

Platform directories

Class Directory

AppDelegate initializes cocos2d-x

HelloWorldScene is where your game begins

Hello World

Cocos2D-x ships as source code

Build it to compile the libraries

Bootup on Mac

launches from main.cpp

calls AppDelegate.cpp

(starts up Cocos2D-x)

calls main.js

(launches your scene)

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

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

Lexicon

Director

Node

Scene

Layer

Sprite

Action

Particle

Event

Adding Scenes

Scenes are actually derived from the Layer class

Add scene for main, game, pause, end game

Add colors to scenes

Add transitions

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

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

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

Steps

Adding sound

Adding music

Adding scenes

Resourceshttp://www.nosoapradio.us/

http://www.freesound.org/

http://spritedatabase.net/

http://opengameart.org/

http://www.lostgarden.com/search/label/free%20game%20graphics

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

Code and Slides

http://www.slideshare.net/rockncoder/build-a-game-in-60-minutes

https://github.com/Rockncoder/oldschool

Summary

Cocos2d-x is a free open source game engine

It supports Android, iOS, Windows and Mac

Questions?