Cocos2d for iPhone 0.99.4 – OpenGL ES Transparent Layer

Raphael Petegrosso — Tue, 27 Jul 2010 18:07:25 +0000

Overview

According to Cocos2d website, Cocos2d for iPhone is a framework for building 2D games, demos, and other graphical/interactive applications. It is based on the cocos2d design: it uses the same concepts, but instead of using Python it uses Objective-C.

Their website says that Cocos2d for iPhone is:

Easy to use: it uses a familiar API, and comes with lots of examples
Fast: it uses the OpenGL ES best practices and optimized data structures
Flexible: it is easy to extend, easy to integrate with 3rd party libraries
Free: is open source, compatible both with closed and open source games
Community supported: cocos2d has an active, big and friendly community (forum, IRC)
AppStore approved: More than 550 AppStore games already use it, including many best seller games.

Cocos2d comes with an API that makes it simple to create an OpenGL ES based project, even if you are not an expert with OpenGL programming, once it has a nice encapsulation of some functionalities that are mostly used.

One negative point of using this kind of tool is that sometimes you get lost when it automates something that you didn’t want to be done for you. When trying to create a transparent OpenGL ES Layer with Cocos2d we saw that lot of people had this problem so we resolved to post about it.

Creating a Transparent OpenGL ES Layer with Cocos2d

Creating a transparent OpenGL ES Layer with Cocos2d v 0.99.4 was not an easy job, once its template code use a Macro to initialize a set of variables.

If you see the CC_DIRECTOR_INIT() macro, located on the ccMacros.h file, we have the following:

#define CC_DIRECTOR_INIT()                                                        \
do {                                                                              \
                                                                                  \
    window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];     \
                                                                                  \
    if( ! [CCDirector setDirectorType:kCCDirectorTypeDisplayLink] )               \
        [CCDirector setDirectorType:kCCDirectorTypeNSTimer];                      \
                                                                                  \
     CCDirector *__director = [CCDirector sharedDirector];                        \
     [__director setDeviceOrientation:kCCDeviceOrientationPortrait];              \
     [__director setDisplayFPS:NO];                                               \
     [__director setAnimationInterval:1.0/60];                                    \
                                                                                  \
     EAGLView *__glView = [EAGLView viewWithFrame:[window bounds]                 \
                                      pixelFormat:kEAGLColorFormatRGB565          \
                                      depthFormat:0                               \
                               preserveBackbuffer:NO];                            \
                                                                                  \
     [__director setOpenGLView:__glView];                                         \
                                                                                  \
     [window addSubview:__glView];                                                \
     [window makeKeyAndVisible];                                                  \
                                                                                  \
 } while(0);                                                                      \

As we can see, this macro creates an EAGLView that has pixelFormat of type kEAGLColorFormatRGB565, which is 16 bits. In order to have transparency enabled in our EAGLView we need to create it using kEAGLColorFormatRGBA8 format, which is 32 bits.

We have lot of ways to solve it, such as changing that macro or initializing everything by ourselves. The important thing is to make sure to change the line:

EAGLView *__glView = [EAGLView viewWithFrame:[window bounds]                      \
                                 pixelFormat:kEAGLColorFormatRGB565               \
                                 depthFormat:0                                    \
                          preserveBackbuffer:NO];                                 \

EAGLView *__glView = [EAGLView viewWithFrame:[window bounds]                      \
                                 pixelFormat:kEAGLColorFormatRGBA8                \
                                 depthFormat:0                                    \
                          preserveBackbuffer:NO];                                 \

So, we will have a transparent layer when using:

glClearColor(0, 0, 0, 0);

In the above line, the last parameter indicates the opacity.
(http://www.khronos.org/opengles/sdk/1.1/docs/man/).

So that’s it! We hope you enjoy Cocos2d for iPhone and this tip helps you!

This post is also available in Portuguese: Cocos2d for iPhone 0.99.4 – Camada Transparente com OpenGL ES

Indigo » transparency

Cocos2d for iPhone 0.99.4 – OpenGL ES Transparent Layer

Overview

Creating a Transparent OpenGL ES Layer with Cocos2d