Build a Game in 60 minutes
•
1 like•641 views
Is it hard to build games? No, at least not with Cocos2D-x, the free, cross-platform framework that makes it easy to create high-performance games in JavaScript. How easy? Come and watch me make a simple, but complete old school platformer in 60 minutes. I will show you how to get started. Installation is the worst part of Cocos2D-x, but it isn't too tough. Then we'll put the app together, running it on my laptop as we go. We will also add music, sound, and show you where to find cheap sources for both. Once our game is running, I will blow your minds by porting the game to both iOS and the web. That's right, one app running on a laptop, an iPhone, and on a web page. As I build, I will talk about all of the things that make Cocos2D-x magical. Things like graphic layers, sprite animation, collision detection, resource management and physics. I'll also demo debugging since bugs are an inevitable part of programming. While made especially for games, you can build any app, which needs to be fast or cross-platform, Please keep in mind, that Cocos2D-x makes it easy for programmers to create games. If you know JavaScript excellent, but you should be okay so long as you know a curly brace language, like C, Java, or C#. If you don't know how to program, take a programming class first.
Report
Share
Build a Game in 60 minutes
- 1. Build a Game in 60 minutes PeopleSpace, Irvine CA 24 May 2016
- 4. Troy Miles Troy Miles Over 37 years of programming experience Speaker and author Author of jQuery Essentials rockncoder@gmail.com @therockncoder
- 7. 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
- 8. 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
- 9. Target Platforms Android iOS (iPhone + iPad) Mac OS X Windows Phone 8 Windows 7
- 10. Development Platforms Visual Studio 2012+ (Windows) Xcode 4.6+ (Mac) CMake 2.6+ (Ubuntu) All platforms need Python v2.7.x (not 3!)
- 11. Development Languages C++ Lua JavaScript (all except WP8)
- 12. Why JavaScript? Arguably the most popular programming language It is universal It is fast Way easier to learn than C++
- 13. Mandatory Tools iOS / Mac OS X apps require Xcode and a Mac Windows / WP8 apps require VS and a PC
- 16. Text Family Guy: The Quest for Stuff TinyCo, Inc.
- 19. BADLAND Frogmind
- 21. 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
- 23. Keep in mind… I am using a Mac, but Cocos2D-x is cross platform Everything will work on Windows and Linux
- 24. Mac Development Python 2.7.x Apple Xcode (Jetbrains’ AppCode)
- 25. Windows Development Python 2.7.x Visual Studio 2012+ Windows Phone SDK 8
- 27. Download http://www.cocos2d-x.org/download Under the column, Cocos2d-x, Click, “DOWNLOAD V3.11” Unzip it
- 28. 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
- 29. Key Points Installing cocos2d-x is pretty easy Everything is done from the command line
- 32. 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)
- 34. Audio Sound effects Background music CocosDenshion library (Open AL) Support audio is platform dependent
- 35. Physics Chipmunk2D 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
- 36. Network HTTP + SSL WebSocket API XMLHttpRequest API
- 37. User Input Touch/Accelerometer on mobile devices Touch/Mouse/Keyboard on desktop Game controller support
- 38. 2D Graphics Transitions 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
- 39. 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
- 40. 2D Graphics TrueType fonts Tile Map support: Orthogonal, Isometric and Hexagonal Parallax scrolling Motion Streak Render To Texture
- 41. 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
- 42. Let’s make a game
- 43. 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
- 44. Cocos command options -h, —help - Shows the help -v, —version - Shows the current version
- 45. 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
- 46. 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
- 48. Class Directory AppDelegate initializes cocos2d-x HelloWorldScene is where your game begins
- 49. Hello World Cocos2D-x ships as source code Build it to compile the libraries
- 50. Bootup on Mac launches from main.cpp calls AppDelegate.cpp (starts up Cocos2D-x) calls main.js (launches your scene)
- 51. 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
- 52. 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
- 54. Adding Scenes Scenes are actually derived from the Layer class Add scene for main, game, pause, end game Add colors to scenes Add transitions
- 55. 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
- 56. 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
- 57. 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
- 58. Steps Adding sound Adding music Adding scenes
- 62. Summary Cocos2d-x is a free open source game engine It supports Android, iOS, Windows and Mac
- 63. Questions?