game design and development workshop day 1
TRANSCRIPT
Game Design & Development Workshop with Cocos2d-xPeopleSpace 9 & 10 July 2016
Troy MilesTroy Miles
Over 37 years of programming experience
Speaker and author
Author of jQuery Essentials
@therockncoder
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
7 July 2016 version 3.12 released
Target Platforms
Android
iOS
macOS
Windows
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
Why JavaScript?
Arguably the most popular programming language
It is universal
It is fast
Easier to learn than C++
OS specific limitations
iOS / Mac OS X apps require Xcode and a Mac
Windows apps require Visual Studio and a PC
Prerequisites
Mac Development
Python 2.7.x
Apple Xcode
(Jetbrains’ AppCode)
Windows Development
Python 2.7.x
Visual Studio Studio Community
Before we move on
Be sure that your dev tools are work
For Mac, build a command line tool
For Windows, build a console app
Installation
Download
http://www.cocos2d-x.org/download
Under the column, Cocos2d-x,
Click, “DOWNLOAD V3.12”
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
Hello World
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
gamename: 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
Build Hello World
From you IDE, build the code
The first time it will take a while
You will get a lot of warnings, but don’t worry about them
JavaScript Refresher
Strict mode
'use strict’; or "use strict;"
First line of file or function
Can break working code!!
More stringent checking
Enables ES5 features
Strict modeVariables must be declared
Functions defined only at the top scope level
“this” is undefined at the global level
Throws error when you forget the 'new' keyword in constructor
Can't use the same function parameter twice
Falsey
Type Results
null FALSE
undefined FALSE
Number if 0 or NaN, FALSE
String if length = 0, FALSE
Object TRUE
Immediately Invoked Function Expression (IIFE)
Has no name
Immediately executed
Used to create a namespaces
Use in many JS libraries
IIFE (continued)
(function() { /* Nothing inside of the function can be seen on on the outside, unless we want it to */ }());
Object Literals
A pair of curly braces surrounding name/value pairs
Can appear anywhere an expression can
The property’s name can be ANY string
Quotes only need when the name is not a legal variable name
Object Literals
var empty = {};
var name = { “first-name”: “Alan”, “last-name”: “Turing”};
Arrays vs. ObjectsArrays are not true arrays
Sort of a special kind of object literal
Both can mix types
Not the same
Arrays inherit from Array.prototype
Objects inherit from Object.prototype
More on objects
JavaScript objects are always dynamic
New properties can always be assigned
There is no class in JavaScript
Array functions
.isArray()
.every()
.forEach()
.indexOf()
.lastIndexOf()
.some()
.map()
.reduce()
.filter()
forEachlet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // forEach iterates over the array, once for each element, but there is no way to // break outnums.forEach(function (elem, index, arr) { console.log(index + ': ' + elem); });
maplet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // map iterates over all of the elements and returns a new array with the same // number of elementslet nums2 = nums.map((elem) => elem * 2); console.log(nums2);
filterlet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // filter iterates over the array and returns a new array with only the elements // that pass the testlet nums3 = nums.filter((elem) => !!(elem % 2)); console.log(nums3);
reducelet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // reduce iterates over the array passing the previous value and the current// element it is up to you what the reduction does, let's concatenate the stringslet letters2 = letters.reduce((previous, current) => previous + current); console.log(letters2); // reduceRight does the same but goes from right to leftlet letters3 = letters.reduceRight((previous, current) => previous + current); console.log(letters3);
everylet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // every makes sure that every element matches the expressionlet isEveryNumbers = junk.every((elem) => typeof elem === 'number'); console.log('Are all members of junk numbers: ' + isEveryNumbers);
ES6 aka ES2015
for-of
let
const
Template strings
Arrow functions
let
let allows us to create a block scoped variables
they live and die within their curly braces
best practice is to use let instead of var
let// let allows us to create a block scoped variables// they live and die within the curly braceslet val = 2; console.info(`val = ${val}`); { let val = 59; console.info(`val = ${val}`); } console.info(`val = ${val}`);
const
const creates a variable that can't be changed
best practice is to make any variable that should not change a constant
does not apply to object properties or array elements
constconst name = 'Troy'; console.info(`My name is ${name}`); // the line below triggers a type errorname = 'Miles';
Template strings
Defined by using opening & closing back ticks
Templates defined by ${JavaScript value}
The value can be any simple JavaScript expression
Allows multi-line strings (return is pass thru)
Template strings let state = 'California'; let city = 'Long Beach'; console.info(`This weekend's workshop is in ${city}, ${state}.`); // template strings can run simple expressions like addition let cup_coffee = 4.5; let cup_tea = 2.5; console.info(`coffee: $${cup_coffee} + tea: $${cup_tea} = $${cup_coffee + cup_tea}.`); // they can allow us to create multi-line strings console.info(`This is line #1.this is line #2.`);
Arrow (lambda) function
let anon_func = function (num1, num2) { return num1 + num2; }; console.info(`Anonymous func: ${anon_func(1, 2)}`); let arrow_func = (num1, num2) => num1 + num2; console.info(`Arrow func: ${arrow_func(3, 4)}`);
In a loop what do the break and continue instructions do?A. break cause the program to halt all execute and
continue resumes execution
B. break exits the loop and continue goes immediately to the top of the loop
C. break goes immediately to the top of the loop and continue exits the loop
for-offor of lets us iterate over an array
.entries() gives us the index and the element
with destructuring we can use as variables
unlike forEach, continue and break work
break stop the loop
continue stops the current iteration
for-offor (let elem of pirateArray) { console.info(elem); } // if we want the element and its index we can get it toofor (let [index, elem] of pirateArray.entries()) { if (index === 5) { break; } console.info(`${index}. ${elem}`); } // unlike forEach, continue and break workfor (let [index, elem] of pirateArray.entries()) { if (index === 5) { continue; } console.info(`${index}. ${elem}`); }
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)
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
Hello World
Cocos2D-x ships as source code
Build it to compile the libraries
Directory Structure
Classes
cocos2d
Resources
Platform directories
Startup up Sequence
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
Let’s build a game together
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
Vote: Tomorrow’s Game
A match 3 puzzle game (think Bedazzled)
A mini platformer (think Mario Land)