MELODIE is available for iOS and Android!

Remember the game of Simon? MELODIE is a similar but more challenging game of sound and memory, in which you have to memorize an expanding sequence of tiles in the correct order, and tap on them when it’s your turn. Your high scores will be stored on a Game Center leaderboard and you can show the world how awesome your memory is!

Download from App Store:

Download from Google Play:

Conversion to Dalvik error while Exporting APK

Sometimes while trying to export an APK using Eclipse, it gives the error “Conversion to Dalvik format failed with error 1.” However meanwhile if you try to run the project normally on a debug device, it launches just fine. For example, this often happens when you try to make an APK out of a Cocos2d-x project.

This error is due to the crapball design of Eclipse (let’s pile more crap on a crap to increase functionality), but fortunately, there’s an easy solution to fix this problem: All you need to do to fix this problem is to disable automatic build from the Project menu, clean everything and retry exporting the APK.

Gotchas: Using Cocos2d-x libExtensions and libNetwork

This tutorial is compatible with Cocos2d-x 3.0.

Some features of Cocos2d-x such as EditBox and HttpClient are not in the main libCocos2d project and in order to access them, other projects should be imported to the solution first. In this post, I am going to explain how to import and link external projects to the main game project. This post can also help people with general problems regarding referencing C++ projects in Visual Studio.

First, we need to import the libExtensions and libNetwork projects to our solution. To do this, right click on your Solution in the Solution Explorer window, hover over the Add item and press Existing Project….

The libExtensions.vcxproj project file is located at cocos2dextensionsproj.win32 and the libNetwork.vcxproj is located at cocos2dcocosnetworkproj.win32. After importing them, you need to link them to your main project.

To add references to other projects, you need to go to the property pages of your main project. Right click on your project and press Properties.

From Common Propertiesclick on the Add New Reference…button and check the boxes next to libExtensions and libNetwork.

One last thing that you need to do before using libExtensions, is to add $(EngineRoot) to your projects include directories. In Property Pages, open Configuration Properties>C/C++>General, and add $(EngineRoot); to Additional Include Directories.

There is one additional dependency that you probably might need to add to the libNetwork project. It requires the libcurl_imp.lib file to build, and we can set this by opening the Property Pages of libNetwork, locating Additional Dependencies at Configuration Properties>Librarian>General and adding $(EngineRoot)externalcurlprebuiltwin32libcurl_imp.lib; to the beginning of it.


Now you are all set to use libExtensions and libNetwork. For example, to create an EditBox, after adding the #include “extensions/GUI/CCEditBox/CCEditBox.h” line to the top of your file, you can use this code:

nameBox = cocos2d::extension::EditBox::create(Size(width, height), Scale9Sprite::createWithSpriteFrameName(“editBox”));

nameBox->setPosition(CP(0.5f, 0.45f));

nameBox->setFont(“Arial”, 42.0f);

nameBox->setLabelAnchorPoint(Point(-0.1f, 0.5f));



Note that the classes in libExtensions are located in the cocos2d::extension namespace, and for libNetwork you’d want to look into the cocos2d::network namespace. As an example for libNetwork, in the next section I will show how to send a simple POST request using the HttpRequest and HttpClient classes.

Sending a POST request with Cocos2d-x

To use HttpRequest and HttpClient, you first need to include their header files:s

#include “network/HttpClient.h”

#include “network/HttpRequest.h”

using namespace cocos2d::network;

Now, let’s assume that we want to send some std::string containing our POST data called data to We can use the following code snippet to do that:

HttpRequest* request = new HttpRequest();

request->setUrl(“ “);


request->setRequestData(data.c_str(), data.size());



It’s that easy. Sending GET, PUT and DELETE requests is also very similar, you just need to pass a different HttpRequest::Type to the setRequestType(…) method.

Gotchas: Repeating textures in Cocos2d-x

This tutorial is compatible with Cocos2d-x v3.1.

Repeating textures can be used to make tiled backgrounds, floors, and for many other purposes. The stars in the image shown above are an example of this. The easiest way to repeat a texture is to put it in a separate file with power-of-two dimensions (also known as a POT texture), and display it using a Sprite with its wrapS and wrapT TexParams values set to GL_REPEAT. This is how to do that:

Texture2D::TexParams texParams;

texParams.magFilter = GL_LINEAR;

texParams.minFilter = GL_LINEAR;

texParams.wrapS = GL_REPEAT;

texParams.wrapT = GL_REPEAT;

Sprite* bgwrap = Sprite::create(“stars.png”, Rect(0, 0, visibleSize.width, visibleSize.height));


bgwrap->setPosition(visibleSize.width * 0.5f, visibleSize.height * 0.5f));

In this case, the screen size is larger than the size of the image file, therefore (in line 6) we try to reference points in the image file that do not exist. In situations like this, OpenGL needs to know how we want it to interpret such coordinates. We tell the engine how we want it to react by setting the values of wrapS and wrapT, where S is for the x-axis and T is for the y-axis.

We can either set these values to GL_CLAMP which means we want the texture edges to be repeated, or GL_REPEAT which means we want the whole texture to be repeated.

Animating the background

With a bit of GLSL goodness, we can animate the background and bring it to life. Here’s a fragment shader code that slowly moves the background for us:

precision highp float;

varying vec4 v_fragmentColor;    

varying vec2 v_texCoord;

//CC_Time[1] is time

void main()            


    vec2 new_uv = v_texCoord;

    new_uv.x = fract(new_uv.x + CC_Time[1] * 0.03);

    new_uv.y = fract(new_uv.y + CC_Time[1] * 0.01);

    gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, new_uv);    


We just need to render our background with this program:

auto p = GLProgram::createWithFilenames(“generic.vsh”, “uv.glsl”);            


Voila, now we have a moving repeated background!

Gotchas: Post shader effects in Cocos2d-x

This tutorial is compatible with Cocos2d-x v3.1.

There might be times that you want to apply an effect to the whole scene and not just an object. For example, you might want to make your scene black and white or add a noise, vignette or glow to your game. In such cases, setting the same GLProgram to each single node in the game probably wouldn’t give you the desired outcome, because for each different node, the effect will run independently and is limited to the edges of the node, and thus you can detect a non-homogeneity in the resulting image.

A good solution to achieve the desired outcome is to first render everything as normal, then apply a single effect to the whole scene, a technique known as multi-pass rendering. I will explain how to do this in Cocos2d-x, and in the end I will give you a pre-written code that you can use to quickly do full screen effects without going into any trouble.

As I mentioned, you need to first render everything as usual somewhere. We will create a RenderTexture (which is basically an off-screen texture) to hold the output of our first render pass. Then we switch back to the normal buffer, and we render our RenderTexture with the GLProgram that we want on the screen. Basically here’s a step by step guide to do all this:

Step 1: Create the RenderTexture

We need to create a RenderTexture which is the same size of our game. To do this, we first get the game size (in Cocos2d Point unit) from the Director, then we create a RenderTexture object called renderTexture with the acquired size.

Size visibleSize = Director::getInstance()->getVisibleSize();

renderTexture = RenderTexture::create(visibleSize.width, visibleSize.height);


Step 2: Activate the RenderTexture and draw the nodes

We want to draw our nodes on the RenderTexture that we just created. To do this, we will simply call the beginWithClear(…) method of renderTexture. This way, we make sure that renderTexture is completely blank (and totally transparent) when we start drawing.

renderTexture->beginWithClear(0, 0, 0, 0);

Now we draw our nodes by calling their visit method:

node->visit(renderer, parentTransform, parentTransformUpdated);

Finally, we finish drawing on renderTexture by calling its end() method:


Step 3: Draw renderTexture with an effect

The last step is to create a sprite that draws the contents of renderTexture. We call this sprite rendTexSprite and we position it to the bottom left corner of the screen. Since renderTexture is the same size of our game, this is going to cover all the screen.

rendTexSprite = Sprite::create();


rendTexSprite->setTextureRect(Rect(0, 0, rendTexSprite->getTexture()->getContentSize().width, rendTexSprite->getTexture()->getContentSize().height));






Note that we flipped this texture vertically. This is due to the fact that the rendered image is stored backwards in memory and we need to flip it in order to show it correctly.

ShaderLayer class

Following all these steps can be painful, so I made a subclass of Layer that handles all this stuff for you. To use it, you make an instance of it and add it to your scene. Then you simply add your nodes to it instead of your top-level layer. ShaderLayer will handle all the complicated stuff and in the end it will show you a neat output with your effect.

Here’s how to use it:

First, include it in your code file by adding #include “ShaderLayer.h” at the top of your code. Then make a ShaderLayer object and pass to it your GLSL files:

auto shaderLayer = ShaderLayer::create(“game.glsl”);


Now by adding your sprites and other nodes to shaderLayer, you apply a full screen effect on them. You can get the ShaderLayer code from this github link: