We start off by creating a new project in Xcode using the “OpenGL Game” template under iOS. This gives us a good start with all the basic window creation and OpenGL set calls taken care off.

This should get us set us up with a new Xcode project with all the references to OpenGL set-up. Upon running this project we should be able to see (either in the iOS simulator or device, if you have that set-up) two rotating cubes. The first thing we will do is completely remove all the code that is drawing the cubes. This will give us a nice clean OpenGL project to start programming our stuff in.

NOTE: One quirk that I have found is that we need rename all the class files to .mm from .m since we will be adding c++ classes later on. The .m files will create problems with even something as simple as #include<iostream>. Also we will be integrating Box 2D later on which requires us to rename all the .m files to .mm anyway to avoid linker errors so we might as well keep the files in this extension.

All the code related to the cubes can be found in the ViewController.mm class.  Once you remove all the cube related code your class would look like this:

</pre>
</div>
<div>#import "ViewController.h"

@interface ViewController ()

{

}

@property (strong, nonatomic) EAGLContext *context;

- (void)setupGL;

- (void)tearDownGL;

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

if (!self.context) {

NSLog(@"Failed to create ES context");

}

GLKView *view = (GLKView *)self.view;

view.context = self.context;

view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

[self setupGL];

}

- (void)dealloc

{

[self tearDownGL];

if ([EAGLContext currentContext] == self.context) {

[EAGLContext setCurrentContext:nil];

}

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

if ([self isViewLoaded] && ([[self view] window] == nil)) {

self.view = nil;

[self tearDownGL];

if ([EAGLContext currentContext] == self.context) {

[EAGLContext setCurrentContext:nil];

}

self.context = nil;

}

// Dispose of any resources that can be recreated.

}

- (void)setupGL

{

[EAGLContext setCurrentContext:self.context];

glEnable(GL_CULL_FACE);

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

glEnable(GL_BLEND);

}

- (void)tearDownGL

{

[EAGLContext setCurrentContext:self.context];

}

#pragma mark - GLKView and GLKViewController delegate methods

- (void)update

{

}

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect

{

glClearColor(0.65f, 0.65f, 0.65f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

}

@end</div>
<div>

After you have completed this, running the code will give you an empty grey screen. We now have an empty OpenGL Project that we can use as a template for creating new projects from.

Lets try and display a quad on the screen with some texture applied to it.

First we start off by creating a new class, from this point on we will try and use only C++ code so that when we decide to port the application to a different platform we can hopefully just copy over the classes. To create a new class right click / cmd + click on your project / a folder within your project on the “Project navigator View”. Select “New File…” from the context menu. Select to create a C++ class:

Name the new class as GameMain. Once you are through making the class you should be able to find GameMain.h and GameMain.cpp files in you project navigator window. Rename the GameMain.cpp file to GameMain.mm. I have created a basic game loop class which as the Initialize(), Update() and Draw() functions with just a print command in each of them.

</pre>
</div>
<div>
#ifndef __Game2D_OGL__GameMain__

#define __Game2D_OGL__GameMain__

#include <iostream>

/*

This class will be our main game loop class

All the other classes that will be required by the game will be created here.

The viewcontroller class will only contain calls to this class's initialize, update and draw

*/

class GameMain

{

private:

public:

GameMain();

virtual ~GameMain();

void Initialize();

void Update(float elapsedTime);

void Draw();

void CleanUp();

};

#endif /* defined(__Game2D_OGL__GameMain__) */</div>
<div>

</pre>
</div>
<div>
#include "GameMain.h"

GameMain::GameMain()

{

fprintf(stderr, "\nGame Main Constructor");

}

GameMain::~GameMain()

{

fprintf(stderr, "\nGame Main Destructor");

}

//Game Loop Initialization done here

void GameMain::Initialize()

{

fprintf(stderr, "\nGame Main Initialize");

}

void GameMain::Update(float elapsedTime)

{

fprintf(stderr, "\nGame Main Update");

}

void GameMain::Draw()

{

fprintf(stderr, "\nGame Main Draw");

}

void GameMain::CleanUp()

{

}</div>
<div>

Once we have this class set-up we call its functions in the ViewController class to get the control into our Game Loop.

First we start of by creating a pointer to our game loop class in the viewController class

 GameMain *_Main

In the ViewController’s “ViewDidLoad” method we add

_Main = new GameMain();

_Main->Initialize();

after

[self setupGL];

In the “dealloc” method we add

_Main->CleanUp();

Here are the Update and Draw Methods

- (void)update{

_Main->Update(self.timeSinceLastUpdate);

}

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect

{

glClearColor(0.65f, 0.65f, 0.65f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

_Main->Draw();

}

I have created a public GIT repository for this project. You can checkout the project https://bitbucket.org/manjithkrishnappa/gdr-opengl-ios-2d-project Make sure to grab vOGL_2D.001 for the final version of this post.

Running this project should show you a blank screen with the logs being printed in the console.

Next Post will show you drawing a quad with texture on it.

Please leave comments and let me know what you think about my first post!

Thank You,

DarkRyder