Create a cross platform game with Cocos2DX and C++
If you like to code in C++ and you are interested in building a cross platform game, there is a library out there you can use, it is called Cocos2DX.
The cool thing about it is that “theoretically” you write the code once and it should work on any platform… In practice it gets a little complicated, but with a bit of stubbornness anything is possible.
There is a big list of games already using it and I guess now one of the most famous is Hero Academy (which I am not sure why they have not released on Android), also Glu mobile seems to like using it.
You will not be able to find huge amounts of tutorials online, and the official website is confusing at best, although there is one that is pretty good, Paralaxer.
The tutorial is free, and I believe for a few dollars you can buy the entire source code of the game, worth checking out.
For now I will limit this guide to explaining how to create an executable for Windows, got that it shouldn’t be too “difficult” to also deploy on Mac, Linux, Android and iOS.
First things first
- Make sure to download the Cocos2dX library and uncompress it somewhere you will remember.
- Install Microsoft Visual C++ 2010 Express.
Setting the Folder
Create a folder to contain the project, in my case the folder name is TestCocos2Dx so that the class files and the resources can stay outside of your Windows project, in this folder also copy “cocos2dx” and “CocosDenshion” folder that you find in the Cocos2dx library you downloaded before.
Also Download this ZIP (Contains Classes and Resources that you can modify) and uncompress it in the same folder.
Setting the Project
Open Visual Studio C++ and create a new Project.
Add the existing projects of Cocos2DX and CocosDenshion to it by clikcing on File->Add->Existing Projects… and loading the vcxproj in the proj.win32 folder.
At this point you can delete everything from the MyGame_Windows project except for External Dependencies. Although add the classes contained in the “Classes” folder and add 2 new classes:
Main.cpp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#include "Main.h" #include "../Classes/AppDelegate.h" #include "CCEGLView.h" USING_NS_CC; int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { UNREFERENCED_PARAMETER(hPrevInstance); UNREFERENCED_PARAMETER(lpCmdLine); AppDelegate app; CCEGLView* eglView = CCEGLView::sharedOpenGLView(); eglView->setViewName("Test Cocos2DX"); eglView->setFrameSize(2048, 1536); eglView->setFrameZoomFactor(0.4f); return CCApplication::sharedApplication()->run(); } |
Main.h
|
1 2 3 4 5 6 7 |
#ifndef __MAIN_H__ #define __MAIN_H__ #define WIN32_LEAN_AND_MEAN #include <windows.h> #include <tchar.h> #include "CCStdC.h" #endif |
Solution Properties
Right click on the Solution->Properties and make sure that Project MyGame_Windows has all the dependencies checked out.
Project Properties
In Project->Properties, under Common Properties -> Framework and References, add the references of libcocos2d and libCocosDenshion and set to both “Reference Assembly Output” to False.
Configuration Properties
General:
- Output Directory = $(SolutionDir)$(Configuration).win32\
- Intermediate Directory = $(Configuration).win32\
Debugging
- Working Directory = $(ProjectDir)..\..\Resources
C/C++ General
- Additional Include Directories
- ..\..\cocos2dx\platform\third_party\win32\OGLES
- ..\..\cocos2dx\platform\win32
- ..\..\cocos2dx\kazmath\include
- ..\..\cocos2dx\include
- ..\..\cocos2dx
- ..\..\Classes
C/C++ Precompiled Headers
- Precompiled Header, make sure nothing is writtein inside.
Linker Input
- Additinal Dependencies add opengl32.lib, glew32.lib and libcocos2d.lib.
At this point you should be able to run the test without a problem.
Next posts I will cover how to use the same code to compile to Android and iOS.
Air Android/iOS – Launch your App from the browser
Adobe Air gives you the opportunity on iOS and Android to create a personal URL that if called from a normal browser will launch your app instead.
This is particularly useful if you are redirecting your users from your App to a website, and then you want them to return on your App after they have completed a particular operation.
The cool part is that if you are listening for the INVOKE event on your App you can also catch some arguments that the website is sending back.
|
1 2 3 4 |
NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, onInvoke); private function onInvoke (e:InvokeEvent):void{ trace(e.arguments); } |
How to do it
Lets say your personal URL is “awesomeapp“, every time you use that name instead of the usual “http” it will open your App.
For example, if you write “http://www.google.com” in a browser, it will redirect to the Google page, instead if you write “awesomeapp://optionalArguments” it will launch your App.
Example Link
|
1 |
<a href="awesomeapp://">Launch Awesome App</a> |
The Application XML
The following XML contains both Android and iOS solutions, simply copy paste it in your Application XML before to package your Air App.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<android> <manifestAdditions><![CDATA[ <manifest android:installLocation="auto"> <uses-permission android:name="android.permission.INTERNET"/> <application> <activity> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.BROWSABLE"/> <category android:name="android.intent.category.DEFAULT"/> <data android:scheme="awesomeapp"/> </intent-filter> </activity> </application> </manifest> ]]></manifestAdditions> </android> <iPhone> <InfoAdditions><![CDATA[ <key>UIDeviceFamily</key> <array> <string>1</string> <string>2</string> </array> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string>your.app.id</string> <!-- Change this with your app id --> <key>CFBundleURLSchemes</key> <array> <string>awesomeapp</string> </array> </dict> </array> ]]></InfoAdditions> <requestedDisplayResolution>high</requestedDisplayResolution> </iPhone> |
Adobe Game Jam – San Francisco October 2012
Saturday 20 October 2012 I attended the Adobe Game Jam with a group of other people from my company.
It was the first of, I hope, a long series organized by Tom Krcha and Lee Brimelow at Adobe.
We got the theme of the game 3 days before the event started, it was decided it to be “San Francisco“.
We arrived there a little late since we had to fly from Los Angeles to San Francisco and our plane got delayed, at our arrival everyone was pretty much already there.
Each team had to have a maximum size of 5 people, we were already 5 (3 programmers and 2 artists), so we started immediately to brainstorm about possible game ideas, we knew we didn’t have too much time, we had 1 day to finish everything from start to end, so we wanted to focus on something funny with a simple game mechanic, at the same time we wanted to use some amazing libraries like Starling and Nape.
There were 3 categories to win:
- Best Game
- Best Art
- Best Technology
And to the winners a 1 year Free Adobe Cloud subscription.
The Game
The idea for the game we picked was so funny we couldn’t stop laughing while making it, we decided the name of the game to be “Alcatraz Roller Escape“.
We envisioned it as the prequel of the movie “The Rock” with Sean Connery, we wanted to understand and recreate a possible scenario of him escaping from Alcatraz, the result of that became hilarious, and we sparked the votes that made us win Best Game, here is the game, click on the image to play it
We made the game not only playable in the browser but also on iPad, iPhone and Android devices.
The people there loved it
The film grain effect was inspired by an experiment we found on Wonderfl.net, if you have never seen that site, I HIGHLY recommend to go check it out.
Few days ago I wrote a tutorial that describes how we made the physic component.
We wanted to add some funny scenes like, changing to different levels using a slow trolley to go up while the police chases you on another trolley.
And a pinball style metagame in Lombard street, although we didn’t have enough time.
This is a video made by Adobe at the event.
We had a lot of fun, and I can’t wait to do this again, thank you Adobe for the opportunity.
Tags
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Feb | ||||||
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Recent Posts
Recent Comments
- Peter on How to create your own ANE for iOS using Adobe Air
- Markel on Create an infinite scrolling world with Starling and Nape
- Tim on Build an App for iPhone or iPad with FlashDevelop
- Colin Willson on Complex Multiple Segments Inverse Kinematics
- Jonathan Hart on Adobe Game Jam – San Francisco October 2012
















