Wednesday, May 26, 2010

Working on Blobs&Globs

I have decided to work on OpenGL by porting a game one of my friends and I designed to the iPhone. The game, called Blobs&Globs, will utilize the iPhone's accelerometer to move onscreen objects through tilt controls.

Other than for a few minor glitches (some flickering and texture overlaps), I have completed the OpenGL portion of the game. Below, I have listed each of the stages I went through to develop the App (I apologize for the odd video sizes; they got stretched somehow):

1. Stagecast Mockup
(Stagecast Creator, a graphical programming environment, was used for prototyping)

2. Starting the App:
-Setting up an orthogonal viewport
-Drawing a moving square from two triangles
-Making multiple squares all use the same geometry to save memory

3. Accelerometer input
-Setting object velocity based on device tilt
video


4. Handling basic collisions
-Idealist method (test every object for collisions with every object; prevent objects from moving if doing so would make them collide)
video

5. Texturing
-Making every object appear to be a circle rather than a square
video

6. Improved Collisions
-Creating a collision grid to prevent slow frame-rates (only objects within the same grid square are tested for collisions)

Future Plans:
-Improve collisions so that they are based on vectors properly
-Finish implementing Blobs&Globs gameplay

My most valuable resources were Beginning iPhone Development: Exploring the iPhone SDK by Dave Mark and Jeff LaMarche and http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-table-of.html

Sunday, January 17, 2010

Textures, Lighting, and Future Approach

I had intended to make updates much more frequently, yet I encountered several difficulties revolving around accessing OpenGL with Objective C. While OpenGL itself is relatively straightforward and is very similar regardless of operating system, performing tasks such as loading textures for use by OpenGL is very complicated. Furthermore, most online OpenGL tutorials are intended for Windows only or are outdated.

By using the "NeHe" OpenGL tutorials and adapting them to the Mac OS X desktop platform, I was able to create a rotating cube and map a texture onto it. However, I was unable to load the texture into the program. I contacted a fellow iPhone programmer I met over the summer, and he helped me find the error in my code.

video

He also suggested that I switch from the desktop version of OpenGL to OpenGL ES through the iPhone, which uses most of the same OpenGL commands but simplifies the Objective C aspect of OpenGL programming. Many more relevant tutorials exist for the iPhone platform, such as http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-table-of.html.

Since then, I learned how to apply lighting to a 3D scene:

video

Next, I will explore materials and textures with OpenGL ES on the iPhone.

Sunday, December 6, 2009

Drawing Rotating Pyramids (Tutorial)

As promised, code with comments on how it works:

Step 1: Add the OpenGL framework to an empty cocoa application.

Step 2: Open the .xib file for the application and drag an NSOpenGLView into the window. Bring up the inspector and click on the identity tab. The Class name should be changed to 'MyOpenGLView'.

Step 3:
.h file:

#import

#include

#include

//Color Depth

#define BITS_PER_PIXEL 32.0

//Depth of Z Buffer

#define DEPTH_SIZE 32.0

//Frames per Second

#define DEFAULT_FRAME_RATE 60.0f


@interface MyOpenGLView : NSOpenGLView

{

//The timer that runs 60 times/second

NSTimer *renderTimer;

}


//Keep track of rotation angle

float rotTri = 0.0f;


//Initialization function for OpenGL

- (void)initGL;


//Function to draw a pyramid

static void drawAnObject();



@end


Step 4:
.m file:

//Run at start

-(void)awakeFromNib

{

NSOpenGLPixelFormat *nsglFormat;

//Specify Attributes to allow screen to use various buffers

NSOpenGLPixelFormatAttribute attr[] =

{

//Enable Z sorting (make sure that polygons in front will overlap those in back)

NSOpenGLPFADoubleBuffer,

//Use Hardware Acceleration for graphics

NSOpenGLPFAAccelerated,

//Specify color depth

NSOpenGLPFAColorSize, BITS_PER_PIXEL,

//Specify Z depth

NSOpenGLPFADepthSize, DEPTH_SIZE,

//Anti-Aliasing:

NSOpenGLPFASampleBuffers, 8,

NSOpenGLPFASamples, 32,

NSOpenGLPFAMultisample,

0

};

//Set pixel format to include the attributes specified in the array attr[]

nsglFormat = [[NSOpenGLPixelFormat alloc] initWithAttributes:attr];

//Use the pixel format for the openGL view

[self setPixelFormat:nsglFormat];


//Initialize the view

[self initGL];

//Redraw view when window changes size

[self setPostsFrameChangedNotifications: YES];

//Update every 60 times a second

renderTimer = [NSTimer timerWithTimeInterval:1.0/60.0

target:self

selector:@selector(timerFired:)

userInfo:nil

repeats:YES];

//Activate timer to fire

[[NSRunLoop currentRunLoop] addTimer:renderTimer

forMode:NSDefaultRunLoopMode];

//Ensure timer fires during resize

[[NSRunLoop currentRunLoop] addTimer:renderTimer

forMode:NSEventTrackingRunLoopMode];

}


//Action to run when the timer is fired

- (void)timerFired:(id)sender

{

//Increase the rotation angle

rotTri += 1.0f;


//Tell the screen it needs to refresh

[self setNeedsDisplay:YES];

}


//Setup OpenGL view

- (void)initGL

{

printf("initGL\n");

// Synchronize buffer swaps with vertical refresh rate

GLint swapInt = 1;

[[self openGLContext] setValues:&swapInt forParameter:NSOpenGLCPSwapInterval];


//Apply Future Operations to The Projection Matrix

glMatrixMode(GL_PROJECTION);

//Reset The Projection Matrix

glLoadIdentity();

// Calculate The Aspect Ratio Of The Window

gluPerspective(45.0f,640.0f/480.0f,0.1f,100.0f);

//Select The Modelview Matrix

glMatrixMode(GL_MODELVIEW);

// Reset The Modelview Matrix

glLoadIdentity();

glShadeModel(GL_SMOOTH); //Smooth Shading

glClearColor(0.0f, 0.0f, 0.0f, 0.0f); //set clear color to black

glClearDepth(1.0f); // Depth Buffer Setup

glEnable(GL_DEPTH_TEST); // Enables Depth Testing

glDepthFunc(GL_LEQUAL); // The Type Of Depth Test To Do

glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // Really Nice Perspective Calculations

}


//Function to draw a pyramid

static void drawAnObject()

{

//Draw a 3-sided pyramid

glBegin(GL_TRIANGLES);

//DAC (counterclockwise points)

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

//DCB

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

//CAB

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

//BAD

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glEnd();


}


//Draw Loop

- (void) drawRect: (NSRect) bounds

{

//Clear the screen and depth buffer

glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

//Reset the current modelview matrix

glLoadIdentity();


//Move along the x and z axis

glTranslatef( -1.0f, 0.0f, -5.0f );

//rotate the modelview matrix by an angle of rotTri around the vector <1,>

glRotatef( rotTri,1.0f, 1.0f, 1.0f );

//Draw a pyramid to the buffers

drawAnObject();

//Reset Modelview

glLoadIdentity();

glTranslatef( 1.2f, 0.5f, -5.0f );

glRotatef( -5.0f*rotTri,0.0f, 1.0f, 0.0f );

drawAnObject();

//Display the buffer content to the screen

[ [ self openGLContext ] flushBuffer ];

}

Sunday, November 29, 2009

First Steps into 3D

Making a rotating 3d mesh proved much more difficult than I had expected. While I was able to make and display a shape, it took me a long time to figure out how to enable depth sorting so that polygons would be drawn in the correct order. Then, I needed to enable perspective mode in order to give the illusion of moving the camera. Just for fun, I looked up how to enable anti-aliasing for smoother edges. Enjoy!


video

I made the pyramids in Blender 3D and looked at the local point coordinates in order to bring them into OpenGL.:

//Draw a 3-sided pyramid

glBegin(GL_TRIANGLES);

//DAC (points must be listed in counterclockwise order)

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

//DCB

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

//CAB

glColor3f(0.0f, 0.0f,1.0f); //BLUE

glVertex3f(-1.0f, -1.0f,-0.798f); //C

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

//BAD

glColor3f(1.0f, 0.0f,1.0f); //Violet

glVertex3f(0.0f,1.0f,-0.798f); //B

glColor3f(0.0f, 1.0f,0.0f); //GREEN

glVertex3f(0.0f, -0.333f,0.798f); //A

glColor3f(1.0f, 0.0f,0.0f); //RED

glVertex3f(1.0f, -1.0f,-0.798f); //D

glEnd();


Next week, I plan to look through the code I hacked together in order to truly understand how it works. I will post an explanation so that anyone getting started with OpenGL and Cocoa will not have the same problems I did.

Beginning OpenGL

It has been a long time since my last update, but I have finally found the time to start learning OpenGL. There seems to be very few online tutorials directed at Objective-C specifically, so I have had to cobble together information from many different sources. However, I have now managed to create a very simple application that draws an OpenGL scene and updates it 60 times a second. Behold the rotating triangle:

video

Using this framework, I can now use general OpenGL tutorials. Soon, I hope to post experiments with more complicated meshes.

Saturday, April 18, 2009

CINGO! Version 1.0 is in the App Store!

Hurrah! CINGO! was released on the App Store this morning. Sadly, it does not show up in the App Store under new releases since its "release date" is April 3, but it can still be found by searching for "cingo."


Visit http://cingothegame.blogspot.com/ for an iTunes link to the application and to post any questions and problems/bugs.

Friday, April 10, 2009

Post Immersion Update sqrt(9)

Guess what I found in my inbox today when I checked my email:
"Dear True Star Design,

At this time, CINGO! cannot be posted to the App Store because it is crashing on iPhone OS 2.2.1 and Mac OS X 10.5.6.

Steps to Reproduce:

1. Launch App
2. Press "Change Game Lock" and the app crashes

In order for your application to be reconsidered for the App Store, please resolve this issue and upload your new binary to iTunes Connect."
As you can see, my application was rejected from the App Store. When I tested my application, I found nothing wrong with it. Then, I deleted it from my iPhone Simulator and was able to produce the error instantly. It turns out that the file responsible for displaying the "Change Game Look" button had somehow moved to a sub-directory of my main project folder, and the OS could not locate it. I had not detected this error because the file had been present in an earlier version and was not cleared whenever I simply rebuilt the code for the application. Other than that I now probably have to wait for another week for my application to be approved, no harm done: I uploaded a new binary with the file moved to the correct folder.

Note to Self: Always delete applications and rebuild them before submitting them.


Wednesday, April 8, 2009

Post Immersion Update 0002

As I explained in my previous post, there was a presentation of all of my school's (Miami Valley School, Dayton OH) "Immersion" projects, including my own iPhone Immersion. Some images from the event are shown below:

My gigantic iPhone poster (made in Photoshop Elements). It consists of two stacked trifold boards:

My laptop running the iPhone Simulator and displaying my game's website (cingothegame.blogspot.com):

(Left to Right) Me and Mr. Collias, one of my programming advisors:

Here I am explaining my project to a younger student:

I submitted CINGO! to the App Store on the 3rd of April with the description/support website cingothegame.blogspot.com. I hope that it will become available soon. Its current price is $0.00!

Sunday, March 29, 2009

Post Immersion Update 0001

CINGO! has exited the Pre-Alpha stage, passed Alpha testing, and is now called 'Imp' Beta 0.1 (Each future release will be named after a mythical creature).

Below are some screenshots of the final product for your enjoyment:

The Game Screen (Note that pieces about to be captured are clearly denoted with a red X for the turn duration):

The Change Appearance Screen now has support for the legacy 'Alpha' look from my old version:

New Instructions View (Note the helpful images at the bottom of the screen are much clearer than in the old version):

When I present my project on the 7th of April, I will try to post some images from the event. Today, I used Photoshop Elements to create a 2ft wide iPhone that I then pasted onto two stacked poster boards. I am certain that this will draw enough attention that people will actually come to see what I did; technology-based immersion projects are generally not viewed by many people because the projects have a lack of visual appeal in comparison to those involving pictures of journeys and artistic creations.