Intro to Mobile Game Programming with Cocos2d-JS2014 - So Cal Code Camp - San Diego Troy Miles

Troy MilesTroy 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

Contacting Me

@therockncoder

rockncoder@gmail.com

http://therockncoder.blogspot.com/

https://github.com/Rockncoder

https://www.youtube.com/user/rockncoder

Text

https://bitly.com/bundles/rockncoder/5

Agenda, Session 1

What is Cocos2d-JS?

Setting Up Your Environment

Parts is Parts

Workflow

Agenda, Session 2Let’s look at a game

Audio

Cocos Studio + Other Tools

Ads

Publishing

Promoting

Why make mobile games?

Titles using Cocos2d-x

Text

Avengers AllianceMarvel Entertainment

Text

Family Guy: The Quest for StuffTinyCo, Inc.

Diamond DashWooga

Star Wars: Tiny Death StarLucasArts

BADLANDFrogmind

Cocos2d-JS

History

Cocos2d-JS

Platforms and Restrictions

History2008 - 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

Cocos2d-JS

Cocos2d-x JavaScript version

Full Cocos2d-x functionality

Simplified JavaScript friendly API

Code Once, Run Everywhere

Mobile Native, Desktop, Web

Platforms

Mac OS X

Windows

Mac OS X

iOS

Android

HTML 5

Mac OS X

Windows

Windows 7

Android

HTML5

Windows Phone 8 (soon)

Prerequisites

Android

Java 6 or 7

Android ADT (NOT Android Studio)

Android NDK

iOS

Xcode

HTML5

No extra prerequisites

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

Python 2The cocos command line needs python to run

python 2.7.5+

It won’t work with python 3

https://www.python.org/downloads/

Installation

http://cocos2d-x.org/download

Unzip the file

execute ./setup.py

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

cocos new

cocos new -l js

cocos new -l js —no-native

cocos new projectName -l js -d ./Projects

cocos new projectName -l js

Parts is Parts

Project Files & Folders

Terminology

Coordinate system

Project files and foldersframeworks/runtime/tools

res - your resources

src - your JS source code

project.json - configuration

main.js - JS boot code

index.html - HTML markup

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

Demo time

The code flow

index.html

main.js's

app.js

Terminologycc - 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

More terminology

Action - an order given to a node, like animations

Menu - Creates an onscreen menu

LabelTTF - The simplest option for displaying text

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

Workflow

Program Editor

Deploying

Modifying

Debugging

Program editorI used WebStorm 8

It is available for Windows, Mac, and Linux

It has a Chrome extension, JetBrains IDE Support, allows debugging

Deploying

Choose

Right click on index.html

Click Debug “index.html”

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

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

Let’s look at a gameParts

Scenes

Player

User Input

Physics plug-in

Collision detection

Audio

File formats

Sounds

Music

File formats

All of the devices can play mp3

Only some of the browsers can

Playing sounds

Playing sounds is easy

Simply call the audioEngine’s playEffect method

Cocos Studio + Other Tools

Animation Editor

UI Editor

Scene Editor

Data Editor

Tiled

Ads

Ads are tough since there is no readily available JS module

AdMob / AdSense

iAds

Microsoft Ads

Publishing

Becoming a developer

Materials

Deploying

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

Android

$25 for a lifetime

Anyone can put apps on a device

MaterialsSigned app

Icons

Screenshots

Big Images

Descriptions

Website

Videos

Promoting

Family and Friends

Social Media

Web site

Advertising

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

Text

https://bitly.com/bundles/rockncoder/5