This course teaches you how to build awesome video games using Cocos2Dx. Cocos2Dx is a feature packed, free game development engine. It is cross platform, high performance, and supports three languages: C++, Lua and JavaScript. With it, you can write games for iOS, Android, Windows, Mac, and the Web. It is nothing short of amazing and this course teaches you how to use it. We will program Cocos2Dx in JavaScript, but this is not a programming class. If you don't know how to write code in JavaScript or some other curly brace language, this is not the course for you. For those whose JavaScript is rusty, we will do quick language overview. Don't let the JavaScript part fool you. Cocos2Dx is built from highly optimized C++ and OpenGL, JavaScript is used for game logic, not graphics. Our games will run at a super fast, 60 frames a second.
5. 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
6. 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
20. 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
22. 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
24. 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
25. 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
26. 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
28. Strict mode
'use strict’; or "use strict;"
First line of file or function
Can break working code!!
More stringent checking
Enables ES5 features
29. Strict mode
Variables 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
33. 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
35. Arrays vs. Objects
Arrays 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
36. More on objects
JavaScript objects are always dynamic
New properties can always be assigned
There is no class in JavaScript
38. forEach
let 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 out
nums.forEach(function (elem, index, arr) {
console.log(index + ': ' + elem);
});
39. map
let 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 elements
let nums2 = nums.map((elem) => elem * 2);
console.log(nums2);
40. filter
let 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 test
let nums3 = nums.filter((elem) => !!(elem % 2));
console.log(nums3);
41. reduce
let 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 strings
let letters2 = letters.reduce((previous, current) => previous + current);
console.log(letters2);
// reduceRight does the same but goes from right to left
let letters3 = letters.reduceRight((previous, current) => previous + current);
console.log(letters3);
42. every
let 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 expression
let isEveryNumbers = junk.every((elem) => typeof elem === 'number');
console.log('Are all members of junk numbers: ' + isEveryNumbers);
44. 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
45. let
// let allows us to create a block scoped variables
// they live and die within the curly braces
let val = 2;
console.info(`val = ${val}`);
{
let val = 59;
console.info(`val = ${val}`);
}
console.info(`val = ${val}`);
46. 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
47. const
const name = 'Troy';
console.info(`My name is ${name}`);
// the line below triggers a type error
name = 'Miles';
48. 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)
49. 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.`);
50. 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)}`);
51. 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
52. for-of
for 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
53. for-of
for (let elem of pirateArray) {
console.info(elem);
}
// if we want the element and its index we can get it too
for (let [index, elem] of pirateArray.entries()) {
if (index === 5) {
break;
}
console.info(`${index}. ${elem}`);
}
// unlike forEach, continue and break work
for (let [index, elem] of pirateArray.entries()) {
if (index === 5) {
continue;
}
console.info(`${index}. ${elem}`);
}
54. 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)
55. 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
58. Startup up Sequence
launches from main.cpp
calls AppDelegate.cpp
(starts up Cocos2d-x)
calls main.js
(launches your scene)
59. 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
60. 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
63. 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