SG Tech

[smallgaming-tech]

The end phase one

This is a retrospect of what I called phase one of the development of my action/adventure with the working title The Epic Quest. In this post I will tell what are the goals of this phase, how I am developing for this game and which tools I am using. Inspiration But first what is an action/adventure game for me. Well, the easy answer is games like The Legend of Zelda. This series is the main inspiration for my game. I just love Zelda games. I finished most of them. When I have time, I will play through the few I did not finish. But there are more games inspiriting me like Monster Hunter, Demon - and Dark Souls. Maybe Monster Hunter more then Dark Souls. I player Monster Hunter United for more then 700 hours, maybe even more then 1000 hours. The thrill of killing a big bad monster is what kept me playing this game. The fighting mechanics never bored me. The same for the mechanics of Demon - and Dark Souls. What I find really powerful of Demon - and Dark Souls is the atmosphere of danger. Death surrounds the player every where. Another atmosphere which I find really good was the one of the town of MH3rd on the PSP. It has a really positive relaxed vibe. It was a place where the player could rest. I really aiming to put those kinds of atmospheres and vibes into my game. Functional Document I started working on The Epic Quest in December last year. I did not start with writing code, but started with writing a functional document and the first background story for the game. The functional document is useful for me. First all my ideas for the game are all in one place and online. For this document I am using Google Drive. Sometimes this bites me in the a… because you need an internet connection. Not all trains I take have wifi yet. Still this document is still growing, but there are set borders. So the ideas will only be within these borders. The biggest border is the fixed sizes of the game world. What also puts up borders are the actions the player can do within the game. This is also written down in my functional design. Of course the world itself needs rules. Another set of rules are for the combat. Since combat is a big part of the game and the rules must be clear for me during the development. The rules for combat are an influence for the enemy design. Drawing and Prototyping When most of the current functional design was written, I started making tiles and character animations with Sprite Something. The best thing is what I draw with Sprite Something can be easily be imported by Tiled. So the first map I made was in Tiled. I exported the maps to JSON. I did not use the exported map for a month. When I started using Cocos2d-x I wrote the parser for the JSON with Boost C++ Library. The parser of Boost works well and it works on Android also. I still did not work on the prototype I made for phase one. Requirements All the requirements for the game became more and more clear when I was writing the functional design. Those requirements turned into different test fields. I knew Nintendo does the same for the games they make. Still I never done it before. But the blog post from Kynan Pearson about Metroidvania Style Games pushed me into the direction of making a link of test fields. For each test field I wrote down what was tested and what should and should not happen. This really helped me to find bugs. It is just like I tweeted before, these test fields are the unit tests for games. Now I had the plans for the first prototype on paper. I also used it to review what I made as prototypes. The first conclusion was that map structure from Tiled was not sufficient. I want the map structure to define also triggers, where and which monsters, but also reuse images for tiles and dynamic tiles. With dynamic tiles I mean tiles for a closed door which can be opened. I do not want to code this. Now I can define this within my level structure. The phase one prototype I start working on the prototype on April. I took my time and kept all documentation up to date. But working with the requirement list for each test level kept me focused on finishing this prototype. I start with an iPad version, but after a week I really wanted to work only on my Mac. Cocos2d-x does not come with keyboard support, so I made this possible with a very elegant fix. The keyboard support really boosted the speed of debugging. The best part of the keyboard support is I could release the game when ready on the Mac too. Phase two For phase two I am going to focus on Android, the fighting mechanics and polish what I already made. The prototype is really raw except for the level structure. I already refactored most of the code, but there can always be more refactoring of code. Before I can do all that, I must document the code. So I do not forget how it all works. So there will also be a technical design based on the current code. Of course more information and ideas will be added to the functional design. For example I only defined 1 monster. There will be lots more in the game. So there is still a lot of work to do for me. I hope you enjoyed reading this. Follow me on twitter @smallgaming because I will tweet about what I am doing. And I hope you are making awesome games yourself, if not go try it. You can do it! References http://www.zelda.com http://www.demons-souls.com/ http://www.preparetodie.com/ http://www.capcom.co.jp/monsterhunter/P3rd/ http://terriblegames.com/spriteSomething/ http://www.mapeditor.org/ http://www.boost.org/ http://subtractivedesign.blogspot.nl/2013/01/guide-to-making-metroidvania-style.html

[smallgaming-tech]

The Epic Quest

What will The Epic Quest be about? The short answer is: survival and discovery. But so many games are about survival and discovery, so here is the long answer: The Epic Quest (working title) is a single player action adventure. The looks are like the 2d Zelda games, top down view. There will be a non-linear world full with history to discover. There will dungeons to wipe clean and loot to gather. The gameplay involves challenging fights with multiple enemies and big boss monsters. The player will be aided by folk for the right price. Maybe they will drop hints about magical armour and weaponry. Now you vaguely know what this game is about. Keep following this blog for more information about The Epic Quest (working title).

[smallgaming-tech]

Where is the love? #1GAM

I am not going to do one game a month anymore. I will tell you why. In the last few weeks I done some soul-searching. You see, my father made the decision he does not want to live anymore. This made me think about what I am doing at this moment in my own life. Asked myself questions like; "What do I really want to do before giving up on my own life?", "Am I doing the things I really want to do?". All those kind of questions. I did more then just asking some hard questions. Last week I went to the Festival of Games in Amsterdam. I met some great people. Those people had real passion and their games reflected their passion. But what really opened my eyes was when I spoken with Rami, Jan Willem and Rami are Vlambeer, and Jasper Byrne. Jasper made Lone Survivor. Rami and I had a short talk about The Indie Megabooth and his role at Vlambeer. He told me he did not want to waste his time on people who did not contributed something useful. I think the same counts for what must be done. If it does not contribute, stop doing it. Jasper and I had a quite long talk about all kinds of subjects. We also talked about the cloners and the love for the game during the development. Because players will notice there is no love if you make the games just for money or other false reason. So, why I am done with #1GAM? I am not making the game I want to make. I started weeks before committing to #1GAM with the project I always wanted to make. I wrote the first version of the store for the game. I started making the first version of the tiles for the game and wrote a function document for the game. The two prototypes I made for #1GAM did contribute to the project. I am going to use some of the tech for those prototypes. I do not regret spending time on #1GAM, I would if I continue on with #1GAM. The working title of the project is called: "The Epic Quest". It is about Freedom, Exploring, Engagement and Family. For the looks of the game I am looking at Zelda for the NES. Where is a screenshot of a test level I made. http://t.co/rgDZNNZedD I will still post tutorials for Cocos2d-x. For those who do #1GAM with a passion, keep up the good work!

Martijn Thorig

[smallgaming-tech]

#1GAM the first 3 months

After 3 months I can say One game a month is a great stimulant for building games in the most optimal manner. Also the use of best practises helped me a lot and still is. I am having fun with one game a month and I sold a few copies of Bouncing Alien Pixel. Not bad for a little game which mixes a few classics into one. Also this game was featured on the iTunes store within the Arcade, Action and Game Center sections. For coding this means reuse of code. At the current time I am working on 3 new games which all use the Cocos2d-x engine. Using an not in house made engine saves me a lot of time of course, but the engine did not come with the social media integration I wanted to have. So I wrote a small code base for this purpose. The code is not done yet, but the finished code will ship with the next update of Bouncing Alien Pixel. Also I have to redo a small part of this code so I can use it in on Android also. Another issue which hold back Bouncing Alien Pixel up until now is how collision detection is done. The ball now does not go really fast, well it is fine for beginners. I want to make this game a real challenge for every gamer out there. So I wrote a collision grid which uses the inner workings of a ray caster. This grid really helped with speeding up the gameplay of Bouncing Alien Pixel. The grid will also be used by two upcoming games. Also I could use the grid for all kinds of collision checks within a 2d space. Some of the other code from Bouncing Alien Pixel is also reused by the three games which are in development. Code for settings and saving high scores are all reused without redoing any of the code itself. I did not only wrote games with Cocos2d-x. I wrote two games or tools for helping out my son with his schoolwork and I used Javascript. The first game was to make an easy to use game for learning to read a analog clock. The tool is really easy to use, but the parent must also be actively involved. Since the parent must check the answer and must handle the input. The reason why the parent must be involved is I believe a kid should learn as much from the parents as possible. The parents shows they care about their offspring when the parent is actively involved. The little math tool/game is written with the same mind set as the clock game/tool. Still there can be some improvements to this game. Like an overview of all (in)correct answers after all questions have been answered. It only shows how many correct answers are given. I did use both tools and made games out of them. My son learned his maths and how to read a clock, so for me those Javascript games were perfect. Check my profile of one game a month here: http://www.onegameamonth.com/SmallGaming And remember: "You can do it!!"

[smallgaming-tech]

Tutorial 011 - Touch Events

This tutorial is about touch events within Cocos2d-x. You will learn to track the multiple touch inputs. The complete code for this tutorial can be downloaded from Github. C++11 settings Before we start coding it is important to set the correct c++ dialect. So open the "Build Settings" and look for c++. Next look up the "Apple LLVM compiler 4.1 - Language". Under this header we can set the C++ Language Dialect to "C++11 [-std=c++11] and the C++Standard Library to "libc++ (LLVM C++ standard library with c++11 support". See also the following screenshot. Your first touch event In Cocos2d-x an input from an user on a phone or tablet will trigger an event. These inputs are interrupts and are via special functions. In the basic project these interrupts are not handled, so the programmer must add those themselves. So lets start with enabling of the support for touch events. Open this file called HelloWorldScene.cpp and go to the end of the init function and add on line 74 the following code.

//Enable touch this->setTouchEnabled(true);

Now the layer knows touch events will be passed to the layer, but it can not handle them. So the following functions can be implemented for handling touch events.

virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent) virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent) virtual void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent) // optional virtual void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent)      virtual void ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent) virtual void ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent)      virtual void ccTouchesCancelled(CCSet *pTouches, CCEvent *pEvent)

There is a choose or the layer will handle only one touch with the first three functions or handle more touches with the other four functions. For this tutorial the multi touch events will be used. Open the header file called HelloWorldScene.h and add the following lines to the class as public.

virtual void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent);     virtual void ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent); virtual void ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent);      virtual void ccTouchesCancelled(CCSet *pTouches, CCEvent *pEvent);

After adding this lines all cocos2d-x related classes will not be found. To fix this add the following line right after the includes of the header files on line 6.

using namespace cocos2d;

The next step is add the functions to the source file of the class. Open the HelloWorldScene.cpp file and add the following code to the end of the file.

void HelloWorld::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent) {     } void HelloWorld::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent) {     } void HelloWorld::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent) {     } void HelloWorld::ccTouchesCancelled(CCSet *pTouches, CCEvent *pEvent) {     }

Now if the code is run the functions will be trigger when the screen is touched. It would be nice if the touch events can be tracked. So to track the first two touches add the following members to our layer in the HelloWorldScene.h.

private:     cocos2d::CCPoint touchOne;     cocos2d::CCPoint touchTwo;

Now the source file HelloWorldScene.cpp go to the init function. Above the touch enable line add the following lines of code.

    this->touchOne.x = -1.0f;     this->touchOne.y = -1.0f;         this->touchTwo.x = -1.0f;     this->touchTwo.y = -1.0f;

Next go into the ccTouchesBegan function. In this function we will iterate over the CCSet called pTouches. This is done with the following code.

for( auto it = pTouches->begin(); it != pTouches->end(); it++) { }

Now the iterator must be casted to a CCTouch within the loop like this.

CCTouch* touch = dynamic_cast<CCTouch*>(*it);

So, now we have the touch as Cocos2d-x gets it from iOS, but we like to touch coordinates within the Cocos2d-x space. To calculate this we need to add a helper function. Open the header file HelloWorldScene.h and add the following line.

virtual CCPoint touchToPoint(CCTouch* touch);

And add the following code to the source file HelloWorldScene.cpp.

CCPoint HelloWorld::touchToPoint(CCTouch* touch) {     // convert the touch object to a position in our cocos2d space     return CCDirector::sharedDirector()->convertToGL(touch->getLocationInView()); }

Now the CCTouch object can be turned into a CCPoint with the coordinates of the touch within the Cocos2d-x space. This function can be used to set the members touchOne and touchTwo if they are available.

void HelloWorld::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent) {     for( auto it = pTouches->begin(); it != pTouches->end(); it++)     {         CCTouch* touch = dynamic_cast<CCTouch*>(*it);                 if(this->touchOne.x == -1.0f && this->touchOne.y == -1.0f)         {             this->touchOne = this->touchToPoint(touch);             printf("touchOne location is: %f %f\n", touchOne.x, touchOne.y);         }         else if(this->touchTwo.x == -1.0f && this->touchTwo.y == -1.0f)         {             this->touchTwo = this->touchToPoint(touch);             printf("touchTwo location is: %f %f\n", touchTwo.x, touchTwo.y);         }     } }

Next is tracking which of the two points are moving. This is done in the ccTouchesMoved function.

void HelloWorld::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent) {     for( auto it = pTouches->begin(); it != pTouches->end(); it++)     {         CCTouch* touch = dynamic_cast<CCTouch*>(*it);                 // set the new touch position         if( touch && touch->getPreviousLocation().x == this->touchOne.x            && touch->getPreviousLocation().y == this->touchOne.y )         {             this->touchOne = this->touchToPoint(touch);             printf("touchOne new location is: %f %f\n", touchOne.x, touchOne.y);         }         if( touch && touch->getPreviousLocation().x == this->touchTwo.x            && touch->getPreviousLocation().y == this->touchTwo.y )         {             this->touchTwo = this->touchToPoint(touch);             printf("touchTwo new location is: %f %f\n", touchTwo.x, touchTwo.y);         }     } }

The last thing we will track is if the finger which started to event is not touching the screen anymore. To do this the implementation of the ccTouchesEnded function will be as follow.

void HelloWorld::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent) {     for( auto it = pTouches->begin(); it != pTouches->end(); it++)     {         CCTouch* touch = dynamic_cast<CCTouch*>(*it);                 // set the new touch position         if( touch && touch->getPreviousLocation().x == this->touchOne.x            && touch->getPreviousLocation().y == this->touchOne.y )         {             this->touchOne.x = -1.0f;             this->touchOne.y = -1.0f;             printf("touchOne new location is: %f %f\n", touchOne.x, touchOne.y);         }         if( touch && touch->getPreviousLocation().x == this->touchTwo.x            && touch->getPreviousLocation().y == this->touchTwo.y )         {             this->touchTwo.x = -1.0f;             this->touchTwo.y = -1.0f;             printf("touchTwo new location is: %f %f\n", touchTwo.x, touchTwo.y);         }     } }

So if the touch events correspond with one of the members the values of the coordinates are set to -1.0f. When a new touch event is fired it will be tracked by the member which is reset. The last function ccTouchesCancelled is implemented as follow.

void HelloWorld::ccTouchesCancelled(CCSet *pTouches, CCEvent *pEvent) {     ccTouchesEnded(pTouches, pEvent); }

Now you know how to track touches within a Cocos2d-x program.

[smallgaming-tech]

Tutorial 010 - Menu

In this tutorial you will learn to make a menu using Cocos2d-x. Cocos2d-x is a framework for making 2d games. C++ is the language used to write games with this framework. In this tutorial I will focus on making the games for iPhone. Still this code should work also on Android if the project is setup for Android. Cocos2d-x comes with a bunch of standard classes which can be used to make 2d games. This tutorial will focus on making a menu, so you can make all kinds of menus for your games. We will start with making a main menu and from here you can make your own menus. The minimum for a main menu is to have the following buttons: Start Game, About, Settings. The first step is to setup the project for this tutorial. How to setup a Cocos2d-x project can be found in the Bouncing Ball tutorial. The complete code for this tutorial can be downloaded from Github. After creating a new project open the HelloWorldScene.cpp file. Go to line 32 and you will see there is already a menu with a button. This button will close the app. Remove line 49 to line 73 and your code will look like the following image. The CCMenu object which is called pMenu will be reused. A CCMenu uses instances of CCMenuItem and its child classes as items to build up the menu. The first button to make is the about button. It will be an instance of CCMenuItemImage. The CCMenuItemImage has 3 states:  - unselected image  - selected image  - disabled image The disabled state is not use in this tutorial. What is needed are two images for the button. One which will be the unselected image for the about button and the other will be the selected image for the about button. Please start making your own buttons in your favorite pixel editing software. When the images are done, add them to the Resources group of the project by dragging the images to the Resources group. For this tutorial the images are named: "about-button.png" and "about-button-selected.png". The dimensions of all images created for this tutorial are 295x60 pixels. The next step is to write the following code for the about button. Starting from line 49:

    // add the about button. it's an autorelease object     CCMenuItemImage *pAboutItem = CCMenuItemImage::create(                                                           "about-button.png",                                                           "about-button-selected.png",                                                           this, menu_selector(HelloWorld::menuCloseCallback) );     pAboutItem->setPosition( ccp(CCDirector::sharedDirector()->getWinSize().width/2, CCDirector::sharedDirector()->getWinSize().height/2) );         pMenu->addChild(pAboutItem, 1, 1);

If the two images are not the same the selected button will be shown when the about button is pressed. The button is placed in the middle of the screen. The button is added to the CCMenu instance. The CCMenu is the container which will hold all the CCMenuItems. The other two parameters used for adding the CCMenuItem are Z ordering and the tag. Tags and Z ordering are handy in their own ways. Both will be used often in the tutorials and more information about those two parameters will given in later tutorials. Now the callback function for the about button will be add. For this the HelloWorldScene needs a new function, which will act as the callback function for the about button. This function will be called when the about button is pressed. Open the header HelloWorld.h and add the following code at line 21:

    // Callback function for the about button     void aboutCallback(CCObject* pSender);

And open HelloWorld.cpp and add at line 71 the following code:

// Callback function for the about button void HelloWorld::aboutCallback(CCObject* pSender) {     //All Cocos2d applications are build via a CCScene holding one are more layers.     //The CCDirector object will hold the active CCSene, so this CCScene object will be requests from the CCDirector.     CCDirector *pDirector = CCDirector::sharedDirector();     CCScene *scene = pDirector->getRunningScene();         //Now the current CCLayer will be popped from the CCScene object.     scene->removeChild(this);         //The about layer will be pushed to the CCScene object.     // 'layer' is an autorelease object     AboutLayer *layer = AboutLayer::create();         // add layer as a child to scene     scene->addChild(layer); }

Now there is a new class needed for the about layer, but before creating the class add the following code at line 3 #include "AboutLayer.h" Also replace at line 55 menuCloseCallback with aboutCallback, so the about button will call the correct callback function. Now create a new C++ class called AboutLayer.

#include "cocos2d.h" class AboutLayer : public cocos2d::CCLayer { public:     // Method 'init' in cocos2d-x returns bool, instead of 'id' in cocos2d-iphone (an object pointer)     virtual bool init();         // there's no 'id' in cpp, so we recommend to return the class instance pointer     static cocos2d::CCScene* scene();         // a selector callback     void menuCloseCallback(CCObject* pSender);         // preprocessor macro for "static create()" constructor ( node() deprecated )     CREATE_FUNC(AboutLayer);         void backCallback(CCObject* pSender); };

#include "AboutLayer.h" #include "HelloWorldScene.h" #include "SimpleAudioEngine.h" using namespace cocos2d; using namespace CocosDenshion; CCScene* AboutLayer::scene() {     // 'scene' is an autorelease object     CCScene *scene = CCScene::create();         // 'layer' is an autorelease object     AboutLayer *layer = AboutLayer::create();         // add layer as a child to scene     scene->addChild(layer);         // return the scene     return scene; } // on "init" you need to initialize your instance bool AboutLayer::init() {     //////////////////////////////     // 1. super init first     if ( !CCLayer::init() )     {         return false;     }         /////////////////////////////     // 2. add a menu item with "X" image, which is clicked to quit the program     //    you may modify it.         // add the about button. it's an autorelease object     CCMenuItemImage *pBackItem = CCMenuItemImage::create(                                                           "back-button.png",                                                           "back-button-selected.png",                                                           this, menu_selector(AboutLayer::backCallback) );     pBackItem->setPosition( ccp(CCDirector::sharedDirector()->getWinSize().width/2, CCDirector::sharedDirector()->getWinSize().height/2) );         // create menu, it's an autorelease object     CCMenu* pMenu = CCMenu::create(pBackItem, NULL);     pMenu->setPosition( CCPointZero );     this->addChild(pMenu, 1);             return true; } void AboutLayer::menuCloseCallback(CCObject* pSender) {     CCDirector::sharedDirector()->end();     #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)     exit(0); #endif } // Callback function for the about button void AboutLayer::backCallback(CCObject* pSender) {     //All Cocos2d applications are build via a CCScene holding one are more layers.     //The CCDirector object will hold the active CCSene, so this CCScene object will be requests from the CCDirector.     CCDirector *pDirector = CCDirector::sharedDirector();     CCScene *scene = pDirector->getRunningScene();         //Now the current CCLayer will be popped from the CCScene object.     scene->removeChild(this);         //The about layer will be pushed to the CCScene object.     // 'layer' is an autorelease object     HelloWorld *layer = HelloWorld::create();         // add layer as a child to scene     scene->addChild(layer); }

If you run the code now, the about button will work as excepted. Example code bonus! The example code will also have a CCLabelBMFont object added to the aboutLayer. This object is a label. This is not a child of CCMenuItem, so do not add a CCLabelBMFont object to the CCMenu object, but add it to the CCLayer itself. For more information about the CCLabelBMFont object see http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:labels. The .fnt file is created with Hiero. The example code for this tutorial will also have a settings layer. The settings layer comes with two CCMenuItemToggle objects. Creating these objects are almost the same as creating a CCMenuItemImage. The big difference is the use of two CCMenuItemImage for creating one CCMenuItemToggle. I hope you will make really good looking menus for your games with what Cocos2d-x has to offer. You can also make the pause button for your game in the same manner. I really like to know if you like the tutorials. Let me know via Twitter: @smallgaming

The complete code for this tutorial can be downloaded from:

https://github.com/OneGameAMonth/Cocos2d-x

[smallgaming-tech]

My first week of One Game a Month Part 2

Jan 9 2013 The other part of One Game a Month I totally forgotten to mentioned! The social media part. I really like to read the tweets of others on twitter. I try to stay positive when replying. Giving positive energy and receiving positive energy, it makes me energetic. McFunkypants is really good at it and I try to follow by his example. The IRC chat room is great! There are always people to chat with or helpful people. I hope the good spirit will always be on IRC. For more information about One Game a Month or the IRC room go to http://onegameamonth.com/      Wish it, dream it, do it If you want to know how the game will next week, follow me on twitter @smallgaming and I will let you know when my next blog post is online!

[smallgaming-tech]

My first week of One Game a Month

Jan 9 2013 It was a good start for me. Besides working on the game for this month, I also written a basic tutorial for Cocos2d-x. The code can be found on Github of OneGameAMonth. The second tutorial is almost done. The progress for the game is good enough. The first game will be a Pong clone mixed with elements from other games and it is for the iPAd. There is a single- and multiplayer option. The single player is a combination of Pong, Space Invader and Arkanoid. The player moves around a paddle, can "shoot down" Aliens with the ball and there are power ups like Arkanoid. There are no lives, the player just collects points until the ball hit its maxed speed. When the player pick ups a power up there be multiplier going up. The multiplier is for the points of course. The ball will go faster over time. When it hits the screen behind the player the multiplier will go down until there is no multiplier is left. The same will happen when a bonus hits the same side of the screen. The multiplayer is not via Wifi, but a local multiplayer on the iPad. There is still lots of work to do to finish this mode. The basic is just like Pong. I hope to finish this week the gameplay of the multiplayer and start beta testing the game. Today I played the multiplayer game with a kid during the Kung Fu lesson of my son. The kid liked it, so that is extra boost for me to finish it. The kid also played the single player game and looking at him seeing his reactions was really nice. It told me the game is on the correct way to become a full game. Next week during beta testing I will finish the menu and redo all assets of the game. Wish it, dream it, do it If you want to know how the game will next week, follow me on twitter @smallgaming and I will let you know when my next blog post is online!

[smallgaming-tech]

Tutorial 001 - The bouncing ball

Jan 1 2013

In this tutorial you will learn to make a ball bounce around on the screen using Cocos2d-x. Cocos2d-x is a framework for making 2d games. C++ is the language used to write games. In this tutorial I will focus on making the games for iPhone. To begin using Cocos2d-x you must first install the templates.

If you don't know the basics of Cocos2D, you should read this page first.

Installing on the mac for iPhone First you will have to download Cocos2d-x from here: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download The current stable version is: cocos2d-2.0-x-2.0.4 and it is the version used for this tutorial. or get it from github: http://github.com/cocos2d/cocos2d-x/ After getting the code the next step is to install the templates for iPhone. To install the templates open a terminal. Go to the directory of Cocos2d-x. Next is to execute the following:

cd "directory where you placed Cocos2d-x" "sudo ./install-templates-xcode.sh -f"

The Cocos2d-x templates which will be used in Xcode are installed. Now to check if the templates are working. Cocos2d-x project Open Xcode and select File->New->Project. Under iOS there will be an option for cocos2d-x. Select the cocos2d-x template and press next. Fill in the Product Name and make sure the Device Family is iPhone. For this example I used the Product Name: "bouncingball". Press next and choose the location where you want the project be created. Press create and your project will be opened. All the files are there to run the project in the simulator, so press Run and check if it is working. And it does not, but here is the fix. Add the following lines to the AppDelegate: #include "SimpleAudioEngine.h" using namespace CocosDenshion; Now the generated code will work and you can start editing this code.

Editing generated code Open the HelloWorldScene.cpp which is in the group Classes. Look up the following "3. add your codes below…". Remove the lines 52 to 73. If the example is run now, there will only be text output and a button to close the app. Now it is time to add a group called Example within the Classes group. This is done by selecting Classes and File->New->Group. Set the name of the new group and select this new group. Next do: File->New->File and under OS X select C and C++.

Select the C++ Class and press next. Select Classes and press New Folder. Name the new folder Example and press Create. Name the .cpp file Ball and press Create for saving the new files for the class. Now copy past the following code in the header file: Ball.h.

#include "cocos2d.h" using namespace cocos2d; namespace example {     class Ball : public CCSprite     {     protected:         //The traveling speed of the ball on the horizontal line.         float velocityX;                 //The traveling speed of the ball on the vertical line.         float velocityY;                 //The angle the ball is traveling in.         float angle;                 //The angle in radians the ball is traveling in.         float angleRad;                 //The speed the ball is traveling in ( pixels per update :P ).         float speed;             public:         //Constructor         Ball();                 //Destructor         ~Ball();                 //Returns a pointer to new Ball instance.         static Ball* create(const char *pszFileName);                 //Called for updating the position.         virtual void update(float dt, float screenWidth, float screenHeight);                 //Set a new angle where the ball be traveling in.         virtual void setAngle(float pAngle);                 //Bouncing against a vertical line.         virtual void verticalBounce(float pAngle);                 //Bouncing against a horizontal line.         virtual void horizontalBounce(float pAngle);                 //Shared bouncing function         virtual void bouncing(float pAngle);                 //Increase the speek the ball is traveling in.         virtual void addSpeed(float extraSpeed);     }; }

And copy past the following code in the cpp file: Ball.cpp.

#include <tr1/random> #include <tr1/functional> #include <algorithm> #include <stdint.h> #include <ctime> using namespace example; #define speedMin 5.0f #define defaultAngle 30.0f //Constructor Ball::Ball() {     //Set the default values     this->speed = speedMin;     this->angle = defaultAngle;             //Using the random implementation from C++11     std::tr1::uniform_int<int> distribution(-defaultAngle, defaultAngle);     std::tr1::mt19937 engine; // Mersenne twister MT19937         clock_t t;     t = clock();         engine.seed((float)t);         int angleTmp = distribution(engine);         //Set the new angle     this->angle = (float)angleTmp;         //Correct the angle if the angle is below 0     if(angleTmp < 0)         this->angle = 360.0f + (float)angleTmp;         //Calculate the angle in radians     this->angleRad = this->angle * M_PI/180.0f;         //Calculate the new velocity for the two axis     this->velocityX = cos(this->angleRad) * this->speed;     this->velocityY = sin(this->angleRad) * this->speed; } //Destructor Ball::~Ball() {     //Nothing to do, since there are only floats as attributes } //Returns a pointer to new Ball instance. Ball* Ball::create(const char *pszFileName) {     //Create is virtual function from CCSprite     Ball *pSprite = new Ball();     if (pSprite && pSprite->initWithFile(pszFileName))     {         // Set to autorelease         pSprite->autorelease();                 //assign your attributes here!!                 return pSprite;     }     CC_SAFE_DELETE(pSprite);     return NULL; } //Called for updating the position. void Ball::update(float dt, float screenWidth, float screenHeight) {     //Get the current position of the ball     CCPoint position = getPosition();         //Update the position of the ball     position.x += velocityX;     position.y += velocityY;         //Check if the ball bounces against the vertical border of the field     if(position.x < 0.0f || position.x > screenWidth)     {         verticalBounce(-90.0f);     }     //Check if the ball bounces against the horizontal border of the field     if(position.y < 0.0f || position.y > screenHeight)     {         horizontalBounce(-90.0f);     }         //Make sure the centre of the ball is not going beyond the border of the field     if(position.y < 0.0f)     {         position.y = 0.0f;     }     if(position.x < 0.0f)     {         position.x = 0.0f;     }     if(position.y > screenHeight)     {         position.y = screenHeight;     }     if(position.x > screenWidth)     {         position.x = screenWidth;     }         //Set the new position for the ball     setPosition(position); } //Set a new angle where the ball be traveling in. void Ball::setAngle(float pAngle) {     angle = pAngle; } //Bouncing against a vertical line. void Ball::verticalBounce(float pAngle) {     if(angle == 0.0f || angle == 180.0f)         angle += -180.0f;     else         angle = 180.0f - angle;         bouncing(angle); } //Bouncing against a horizontal line. void Ball::horizontalBounce(float pAngle) {     if(angle == 0.0f || angle == 180.0f)         angle += -180.0f;     else         angle = 360.0f - angle;         bouncing(angle); } //Shared bouncing function void Ball::bouncing(float pAngle) {     if(angle < 0.0f) angle += 360.0f;     if(angle > 360.0f) angle -= 360.0f;         this->angleRad = this->angle * M_PI/180.0f;     this->velocityX = cos(this->angleRad) * this->speed;     this->velocityY = sin(this->angleRad) * this->speed; } //Increase the speed the ball is traveling in. void Ball::addSpeed(float extraSpeed) {     speed += extraSpeed; }

Now it is time to add the Ball class to the HelloWorld class.

Place the following code in the top of the HelloWorld.cpp file on line 2.

#include "Ball.h" #define ballTagId 1 using namespace example;

the following code must be placed in the init function on line 57.

    // Ask director the window size     CCSize size = CCDirector::sharedDirector()->getWinSize();         //Create the instance of the Ball class.     CCSprite* pBall = Ball::create("ball.png");         //Set the tag for the instance     pBall->setTag(ballTagId);         //Position the ball on the center of the screen     pBall->setPosition( ccp(size.width/2, size.height/2) );         //Add the ball to the scene     this->addChild(pBall, 1);         //Make sure the update function is called every 1/60 of a second     this->getScheduler()->scheduleSelector(schedule_selector(HelloWorld::update), this, 1/60, false);

The next step is to add a function call update to the HelloWorld class. Place the following code in the header: HelloWorld.h on line 21.

void update(float dt);

Place the following code in HelloWorld.cpp on line 86.

void HelloWorld::update(float dt) {     CCSize size = CCDirector::sharedDirector()->getWinSize();         //Get the ball instance via the tag id     Ball* ball = (Ball*)getChildByTag(ballTagId);         //Update the ball position     ball->update(dt, size.width, size.height); }

Add the ball.png to the Resources group Get the image here! After downloading the image, drag it onto the Resources group. If all goes well, you will see a dialogue box with options. Check if copy if needed and the target is selected.

The code for this tutorial can be downloaded from github here!

"Wish it, Dream it, Do it!"

Let me know if you like the tutorial by tweeting me @smallgaming

[smallgaming-tech]

One Game A Month

Dec 28 2012

I will participate in the One Game A Month event. This event is organized by Breakdance McFunkypants. The main goal of this event is to make 12 games in one year. For this event I am planning on making 12 small 2d games. Framework I want to be prepared for this event, so I needed to decide which framework I will be working with. There tons of good frameworks for making games on the internet, but my first idea was to improve the framework I made this year, so I could use it for One Game A Month. I give this idea some more thought and decided it was the wrong thing to do. So instead I am going to working with Cocos2d-x. Cocos2d-x is perfect for making 2d games and since I am only going to make 2d games for this event, Cocos2d-x will do just fine. Also this framework will save me time, because I will not be working on improving a framework, so I will have more time for making games.  Another plus is I will be working with C/C++. I really like this language and C++11 has some nifty improvements. Games made with Cocos2d-x could be make multi-platform with minimal effort. Do not know if this is true, but I will know this for sure soon. Tools Beside the framework I will need more tools. For my IDE will be using X-Code mainly. When I am going to port a game, I will be using Visual C++ Express what ever version works with Cocos2d-x. To make maps, if I need to make maps, I will be using Tiled. Tiled is a nice program to make maps. You can export the maps to all kinds of formats. Cocos2d comes with support for maps made in Tiled. For making sprites I am going to use Sprite Something on the iPad. This program has everything I need to make sprites and tiles. I will be using the Gimp for making assets also. Cfxr is used for making sounds effects. Something I just can not do myself is music. If I need music I will have to buy it from the internet.

For more information about One Game A Month see http://onegameamonth.com/ and look for tweets about the with hash tags #OneGameAMonth or #1GAM