CheatCat's picture

Rayman 2 2D

Table of contest:

The beginning
Drawing images
Player movement

The beginning

The background to this project is this YouTube video:
I want to do a fan-game to this game because it was canceled before the game was done!

First I have to decide what I should do the game with..
CsGL : The page hasn't be updated since 2003. I want something newer.
Allegro : Hard to install and you cannot use it for C#. There is wrappers, but they are old.
AgateLib : It's slow, I want something faster!
SDL.NET : The forum is dead, I can look in the sky for help..
OpenTK http... Wait, it is this page! xD : It seems to be a great wrapper, let us try! :D

Drawing images

First I run the QuickStart example and get a stupid MS-DOS window in front of the program and I ask for help:

Now I try to make a simple game!
The first program I use was GameMaker. I just need to load a sprite/image, make a object for the sprite, put the object i a room and hit the play button. Then I have a cute window with the image. Simple.

I want do something harder so I switch to C++ with The Game Creators DarkGDK library (using DirectX). To draw a image to the screen I only need write this code:

#include "DarkGDK.h"
void DarkGDK()
  dbLoadImage("img.png", 1);
  dbSprite(1, 10, 20, 1);

And I have a image at the position 10x20 in a window.
I also try XNA and it was little harder to draw a image but it was something similar as DarkGDK. Of course I have tried other programs and libraries and you draw images with them calling simple functions.

Okey, back to OpenGL and OpenTK. To draw a image you first need to load the image. It's hard and I don't understand what the loading function do in the NeHe Examples (google it). However it load a image and it's all I need to know. I get help at and learned that I can use Objarni's TexUtil class to load images.

Now I try to draw the image and to do that you must put it on a sort of plain. You can read more at and

At last I want to put a transparent image in front of another image. But the transparent image get a blue border and cut of the red rectangle! I search for help again.

Well, it is not a very big problem. Moving on..

Player movement

Okey, let's move a image! I want add some keyboard functions that check what key the user press down. It's time for search!

Get it, Keyboard[] checks the keys! I add a wall sprite and try to check collision between it and the player. A collision function would be great and it can be inverted by myself if I don't find a pre-done function.
I do the collision function by myself since I cannot find any other. Now I should make the player to fall down if there are walls under the player. Done! (I am almost done! xD) The game go very fast, I must find a way to change the framerate or maybe move the sprite with smaller steps.

It's time to make the sprite jump when pressing Ctrl. Then I can make a level!

I get collision error now: When the player collide with a wall it cannot move! I should try to fix this...


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
objarni's picture

CheatCat: download Paint.NET. It's got good transparency control. Make sure the "checker pattern" shines through at the edges around the red circle.

objarni's picture

Better yet: go to and open the file there. It's an online, flash-based drawing program so it can be used on any OS with flash..

triton's picture
"Entropy" wrote:

It's also important to make sure you've disabled Depth Testing for Blending to have any effect. I lost a few evenings' worth of time tearing my hair out over that one (I was pretty stubborn and refused to ask for help :-p).

I also lost a few evenings with exactly this problem. Until a friend passed by and started messing with code (he didn't even know OpenGL) and disabled depth-testing by chance. :D

objarni's picture

Haha. We may all learn from this -- it's better to ask for help! (even though the expected audience does not know the answer!) :)

CheatCat's picture

So you cannot have alpha and depth test at the same time?
Maybe I can do something like this in that case for every sprite?:

GL.Translate(0, 0, depth);
//Draw stuff

But I think the it slow down the game if I switch on/off alpha and depth test whole time... Well, it don't work anyway... :(

objarni's picture

There is a big difference between "alpha masked bitmaps" (lets call them *sprites* for simplicity) and "alpha bitmaps". If you see a retro-style-2d-game, say like Mario Bros, you are looking at "alpha masked bitmaps" (kind of; actually there probably is a bitmask/colormask going on there). That is, either a pixel in the Mario bitmap will drawn (on) or it will not (off). There is no inbetween!

If instead you are looking at a 2d-explosion in a more modern game, you are probably seeing a "alpha bitmap". Then there can exist pixels that are "semi transparent" or "translucent". So the alpha value is something inbetween 0 and 1.

You can use the depth buffer with sprites without any problems. But mixing "alpha bitmaps" and the depth buffer is harder (but can be done).

So are you dealing with sprites or alpha bitmaps?

CheatCat's picture

I don't want to have semi-transparent images, just sprites! Now you maybe can tell me how to do, because I have no idea! xD

triton's picture

Use objarni's TexUtil class and it's easy.

Here's some code from my game:

        public override void Draw()
                GL.BlendFunc(BlendingFactorSrc.SrcAlpha, BlendingFactorDest.OneMinusSrcAlpha);
                GL.Color3(1.0f, 1.0f, 1.0f);
                GL.BindTexture(TextureTarget.Texture2D, texture);
                    GL.TexCoord2(0.0f, 0.0f); GL.Vertex2(min.X, max.Y);
                    GL.TexCoord2(0.0f, 1.0f); GL.Vertex2(min.X, min.Y);
                    GL.TexCoord2(1.0f, 1.0f); GL.Vertex2(max.X, min.Y);
                    GL.TexCoord2(1.0f, 0.0f); GL.Vertex2(max.X, max.Y);
CheatCat's picture

What do the GL.PushMatrix(); and GL.PopMatrix(); functions? Create and destroy a matrix??

the Fiddler's picture

Save and restore the matrix for the current MatrixMode. This is useful because you don't want the translation / rotation for model X to affect model X+1. For each model:

1. push the modelview matrix
2. rotate / translate model
3. draw model
4. pop the modelview matrix