Game Design and Development Workshop Day 1
3 likes500 views
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.
![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);
});](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-38-320.jpg)
![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);](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-39-320.jpg)
![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);](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-40-320.jpg)
![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);](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-41-320.jpg)
![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);](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-42-320.jpg)
![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}`);
}](https://image.slidesharecdn.com/gddw-day1-160709152503/85/Game-Design-and-Development-Workshop-Day-1-53-320.jpg)
Ad
More Related Content
What's hot (18)
Similar to Game Design and Development Workshop Day 1 (20)
Ad
More from Troy Miles (20)
Ad
Recently uploaded (20)
Game Design and Development Workshop Day 1
- 1. Game Design & Development Workshop with Cocos2d-x PeopleSpace 9 & 10 July 2016
- 3. Troy Miles Troy Miles Over 37 years of programming experience Speaker and author Author of jQuery Essentials [email protected] @therockncoder
- 4. Introduction
- 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
- 8. Development Platforms Visual Studio 2012+ (Windows) Xcode 4.6+ (Mac) CMake 2.6+ (Ubuntu) All platforms need Python v2.7.x (not 3!)
- 11. Why JavaScript? Arguably the most popular programming language It is universal It is fast Easier to learn than C++
- 12. OS specific limitations iOS / Mac OS X apps require Xcode and a Mac Windows apps require Visual Studio and a PC
- 13. Prerequisites
- 14. Mac Development Python 2.7.x Apple Xcode (Jetbrains’ AppCode)
- 15. Windows Development Python 2.7.x Visual Studio Studio Community
- 16. 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
- 17. Installation
- 19. Download http://www.cocos2d-x.org/download Under the column, Cocos2d-x, Click, “DOWNLOAD V3.12” Unzip it
- 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
- 21. Hello World
- 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
- 23. Cocos command options -h, —help - Shows the help -v, —version - Shows the current version
- 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
- 30. Falsey Type Results null FALSE undefined FALSE Number if 0 or NaN, FALSE String if length = 0, FALSE Object TRUE
- 31. Immediately Invoked Function Expression (IIFE) Has no name Immediately executed Used to create a namespaces Use in many JS libraries
- 32. IIFE (continued) (function() { /* Nothing inside of the function can be seen on on the outside, unless we want it to */ }());
- 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
- 34. Object Literals var empty = {}; var name = { “first-name”: “Alan”, “last-name”: “Turing” };
- 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);
- 43. ES6 aka ES2015 for-of let const Template strings Arrow functions
- 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
- 56. Hello World Cocos2D-x ships as source code Build it to compile the libraries
- 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
- 62. Let’s build a game together
- 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
- 64. Steps Adding sound Adding music Adding scenes
- 65. Vote: Tomorrow’s Game A match 3 puzzle game (think Bedazzled) A mini platformer (think Mario Land)