This tutorial first shows you how to port and run the Cocos2d-x 3.0 CppTest demo on Google Glass, and illustrates how to create and run a new Cocos2d-x 3.0 app on Glass.
Porting and Running the Cocos2d-x 3.0 Demo App on Google Glass
Below are the steps to run the sample C++ demo app that comes with the Cocos2d-x 3.0 on Mac:
- Download and unzip the Android SDK (ADT bundle) at http://developer.android.com/sdk/index.html (Google Glass is based on Android);
- Launch the Eclipse from the ADT bundle’s eclipse directory, then open Window > Android SDK Manager, install SDK Platform and Glass Development Kit Preview under Android 4.4.2 (API 19);
- Connect your Google Glass and open Terminal, run /sdk/platform-tools/adb devices to verify that your Glass shows, or follow the Glass GDK Quick Start at https://developers.google.com/glass/develop/gdk/quick-start;
- Follow the how-to guide at http://www.cocos2d-x.org/wiki/How_to_run_cpp-tests_on_Android to get the sample app cpp-tests built (note – you may need to run brew update before brew install ant). You can skip the section “How to deploy it on your Android phone via command line” in the guide above as we’ll import the project to Eclipse and install the app to Glass from Eclipse, but you may also want to test it on your other non-Glass Android device first to get the feeling how the demo runs.
- Follow steps at http://www.cocos2d-x.org/wiki/How_to_Build_an_Android_Project_with_Eclipse to import the cpp-tests project and the libcocos2dx project to Eclipse.
- Select the CppTests and Run it As Android Application with your Glass connected and turned on.
Unfortunately, tap or swipe left or right won’t navigation the demo menu. And what makes it worse is if your Glass screen goes off, tap on it again would you take to the “ok glass” home screen instead of this CppTests app. You can install the Launchy app (https://github.com/kaze0/launchy) and use it to easily select the CppTests to run if the Glass goes off. - To enable user interaction for the CppTests on Glass, you need to first modify the class implementation in AppActivity.java file as shown in Listing 1.
// Listing 1. Enable and Pass Touch Event to Cocos2dx View on Glass
public class AppActivity extends Cocos2dxActivity {
Cocos2dxGLSurfaceView glSurfaceView;
public Cocos2dxGLSurfaceView onCreateView() {
glSurfaceView = new Cocos2dxGLSurfaceView(this);
glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);
return glSurfaceView;
}
public boolean onGenericMotionEvent(MotionEvent event) {
if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_POINTER_DOWN) {
finish();
return true;
}
glSurfaceView.onTouchEvent(event);
return false;
}
}
The changes are to make glSurfaceView, the view that shows each demo feature, an instance variable so in the GenericMotionEvent we can pass the touch event (except the double finger tap, which will finish the app) to the glSurfaceView.
8. To develop C++ code directly from Eclipse, we need to link the C++ source files in Classes directory to the CppTests’ Classes folder in Eclipse. To do this, open the project Properties, select C/C++ General, then Paths and Symbols, you’ll see a message “This project is not a CDT project” (CDT stands for C/C++ Development Tools).
To fix this, click Cancel in the Properties window. In Eclipse, select File ä New ä Project…, then select C/C++ ä C++ Project, enter a dummy project name and hit Finish. Now open the dummy project’s Properties ä Resource to find its location. On Terminal, copy the .cproject file from that location to your new game app’s proj.android directory (<path-to-cocos2d-x-3.0>/tests/cpp-tests/proj.android). You can delete the dummy project from both Eclipse and project contents on disk now.
9. Go back to CppTests Properties ä C/C++ General ä Paths and Symbols ä Source Location, click Link Folder…, check Link to folder in the file system, then Browse… and select the Classes folder of CppTests. Click OK twice, Eclipse will show all the source folders under Classes.
10. Next, we need to modify the AppDelegate.cpp file in the Classes folder. But as soon as you open the file, you’ll see lots of errors and you can’t build and install the CppTests on Glass anymore! This is because Eclipse, at least as of the ADT version 22.6.2, incorrectly shows the error in the CppTest project and lots of errors in the AppDelegate.cpp file.
To fix this, open the CppTests’s Properties window, then go to Code Analysis under C/C++ General, select Use project settings, and deselect Syntax and Semantic Errors – click OK and you’ll see errors are gone. This is important as otherwise you won’t be able to build the CppTests app from Eclipse after we make some C++ code change in Eclipse.
11. The changes we need to make to AppDelegate.cpp is pretty simple – inside the applicationDidFinishLaunching method, before return true; add the following two lines of code:
auto s = new Box2dTestBedScene();
s->runThisTest();
Then add #include “Box2DTestBed/Box2dView.h” in the beginning of AppDelegate.cpp. Now open a Terminal window, cd the cocos2d-x-3.0’s build directory, run the native C++ library build command:
python android-build.py -p 19 cpp-tests
After the “BUILD SUCCESSFUL” message, a new version of the CppTests library file, named libcpp_tests.so, will be available in the CppTests > libs > armeabi folder.
12. Now run the CppTests app again from Eclipse, you’ll see the CppTests’s Box2D sample running on Glass, and move your finger on the Glass touchpad you can see the box moved on Glass.
Ideally, we should be able to use gesture to go back to MainMenu and easily test all the other cool features of Cocos2d-x on Glass. It may quite likely come true by the time you read the book – if so, we’ll post the link to the updated tutorial on the book’s site. For now, you can use steps 11 and 12 above to experiment with all the other features demonstratred in the CppTests. For example, to check out how the ParticleTest runs on Glass, replace auto s = new Box2dTestBedScene(); with auto s = new ParticleTestScene(); in AppDelegate.cpp, add #include “ParticleTest/ParticleTest.h”, build the C++ library, and run the CppTests app from Eclipse
After playing with CppTests, you should check out the Cocos2d-x Wiki and API References at http://www.cocos2d-x.org for further info, before you start using it to build your next Glass game.
Now that you know how to run the demo CppTests on Glass, let’s see how you can create a new Cocos2d-x app running on Glass.
Creating a New Cocos2d-x App on Glass
Follow the steps below to create a Cocos2d-x app from scratch:
- Follow the how-to guide at http://www.cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game. To summarize, the commands I ran on my Mac are:
cd cocos2d-x-3.0
./setup.py
source ~/.bash_profile
cocos new MyGame -p com.myCompany.myGame -l cpp -d ./MyCompany
cocos run -s ./MyCompany/MyGame -p android
If you use Windows or Linux, you can use similar commands.
2. In Eclipse, import the Android project located at MyCompany/MyGame/proj.android. After importing, if you see errors on the MyGame project and the AppActivity.java, you need to fix the reference to the libcocos2dx: open the project’s Properties, go to Android’s Library section, click Add… and then select the libcocos2dx there.
3. Run the MyGame app on your Glass and you’ll see the Cocos2d-x version of Hello World on Glass.
4. If you click the Classes folder, which should contain all the C++ code for the game app, you’ll see it’s empty, but it’s located at MyCompany/MyGame, at the same level as the proj.android directory. We need to link the Classes directory to the MyGame’s Classes folder in Eclipse, as we did for the CppTests demo, in step 8 of the last section – in Eclipse, select File > New > Project…, then select C/C++ > C++ Project, enter a dummy project name and hit Finish. Now open the dummy project’s Properties ä Resource to find its location. On Terminal, copy the .cproject file from that location to your new game app’s proj.android directory (MyCompany/MyGame/proj.android).
Now go back to MyGame’s Properties ä C/C++ General ä Paths and Symbols ä Source Location, click Link Folder…, check Link to folder in the file system, then Browse… and select the Classes folder of MyGame, click OK.
5. If and only if you open AppDelegate.cpp file in Classes, you’ll see lots of errors. To fix this, follow Step 10 in the last section.
6. Now open AppActivity.java and make its content to be like Listing 1. Then open HelloWorldScene.cpp, add the following code, most of which borrowed from http://www.cocos2d-x.org/wiki/EventDispatcher_Mechanism, but with some fixes, to the end of the HelloWorld::init() method, before return true; as shown in Listing 2.
// Listing 2 Adding Sprites with Touch Even Listener for Cocos2d-x 3.0
auto size = Director::getInstance()->getWinSize();
auto sprite1 = Sprite::create("CloseNormal.png");
sprite1->setPosition(origin+Point(size.width/2, size.height/2) + Point(-80, 80));
addChild(sprite1, 10);
auto sprite2 = Sprite::create("CloseNormal.png");
sprite2->setPosition(origin+Point(size.width/2, size.height/2));
addChild(sprite2, 20);
auto sprite3 = Sprite::create("HelloWorld.png");
sprite3->setPosition(Point(0, 0));
sprite2->addChild(sprite3, 1);
auto listener1 = EventListenerTouchOneByOne::create();
listener1->setSwallowTouches(true);
listener1->onTouchBegan = [](Touch* touch, Event* event){
auto target = static_cast<Sprite*>(event->getCurrentTarget());
//Get the position of the current point relative to the button
Point locationInNode = target->convertToNodeSpace(touch->getLocation());
Size s = target->getContentSize();
Rect rect = Rect(0, 0, s.width, s.height);
//Check the click area
if (rect.containsPoint(locationInNode)) {
target->setOpacity(180);
return true;
}
return false;
};
//Trigger when moving touch
listener1->onTouchMoved = [](Touch* touch, Event* event){
auto target = static_cast<Sprite*>(event->getCurrentTarget());
//Move the position of current button sprite
target->setPosition(target->getPosition() + touch->getDelta());
};
//Process the touch end event
listener1->onTouchEnded = [=](Touch* touch, Event* event){
auto target = static_cast<Sprite*>(event->getCurrentTarget());
target->setOpacity(255);
//Reset zOrder and the display sequence will change
if (target == sprite2)
sprite1->setZOrder(100);
else if(target == sprite1)
sprite1->setZOrder(0);
};
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener1, sprite1);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener1->clone(), sprite2);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener1->clone(), sprite3);
That’s all the code change you need to make.
7. Open a Terminal window, cd MyGame’s proj.android directoty, run the “python build_native.py” command, you should see messages as follows:
[armeabi] Compile++ thumb: cocos2dcpp_shared <= HelloWorldScene.cpp
[armeabi] SharedLibrary : libcocos2dcpp.so
[armeabi] Install : libcocos2dcpp.so => libs/armeabi/libcocos2dcpp.so
We’re all set.
8. Back to Eclipse, run the MyGame app on Glass. This time, you can move around the image on the top on the Glass touchpad.
If you have any Cocos2d game development background, or even if you don’t, you can come up to speed with Cocos2d-x quickly – it has well documented online resources and examples. What I hope to offer here is to show you how to run the engine and samples on Google Glass and interact with the engine, so you can see the possibility and potential of using the great engine for your next Glass game project – to get inspired, take another look at many great games developed with the engine at http://www.cocos2d-x.org/games.
