Archive for the ‘2D Graphics’ Tag

OpenGL ES Texture2D: Power of two

As most of you have figured out, OpenGL ES doesn’t like textures to be non power of two, and I really didn’t want to have to force all of my textures to be powers of two before loading them into my game. This presented me with a problem that had to be solved in-code.

To really understand texture mapping, especially if you’re doing iPhone development or OpenGL ES development in general, it is a good idea to visit Jeff’s blog on the subject located: HERE, and look up chapter 6 on Texture Mapping. I’ll wait, its a great read and should be glanced over at the very least!

Back? OKAY! So the problem is only powers of two can be used in OpenGL ES, so how do we convert our texture to a power of two? There are several ways to do this, but I chose to look at apples version of a texture file and learn from them.

They came up with the following to convert the width and height into a power of two:

//     Adjust the width and height to be a power of two
if( (_width != 1) && (_width & (_width - 1)) ) 
        {
                i = 1;
                while((sizeToFit ? 2 * i : i) < _width)
                        i *= 2;
                _width = i;
        }
        
        if( (_height != 1) && (_height & (_height - 1)) ) 
        {
                i = 1;
                while((sizeToFit ? 2 * i : i) < _height)
                        i *= 2;
                _height = i;
        }
&#91;/sourcecode&#93;

The first portion of the code will convert the texture to a power of 2. Since the texture will be stretched, and never shrunk, apple had to figure out a way  to shrink the texture if it became larger than the max texture size of 1024. The following code will do just that:

&#91;sourcecode="cpp"&#93;
        //      scale down an image greater than the max texture size
        while((_width > kMaxTextureSize) || (_height > kMaxTextureSize)) 
        {
                _width /= 2;
                _height /= 2;
                transform = CGAffineTransformScale(transform, 0.5, 0.5);
                imageSize.x *= 0.5;
                imageSize.y *= 0.5;
        }

the ‘transform’ is nothing more than a CGAffineTransform; in case you were confused with that. So, now that you’ve glanced over the code, you remember in the article where Jeff was talking about S and T coordinates? We’ll take care of those like this:

        _maxS = imageSize.x / (float)_width;
        _maxT = imageSize.y / (float)_height;

This will give us a number between 0 and 1, depending if the texture was re-sized or not. _maxS and _maxT will also be used in our textureCoordinates array for drawing the texture to screen. This should only render the portion of the texture that has any data, and not the padding we added to the texture.

While I am still learning OpenGL, I figured that a lot of people would be interested in the following solution.. especially if you did what I had, and had thrown out the Apple Texture2D file and re-wrote your own. Full source code to the Texture2D, or any other file within the D’Jinn Engine can be found HERE.

Hope this was informative! If anyone has any further information they would like to add, feel free!

Happy Coding Everyone!

Advertisements

Testing out some 2D concepts, Dynamic Background

Few hours of boredom, and wanting to play around with some new ideas and just a 2D program, and a very basic “space” shooter was born.

And while this game isn’t overly complex, it was fun to just put together a small, very simple game while not having to worry about 3D math and graphics :) I think my next project will not be a game, really.. but more so a particle engine or a more complex editor for putting together a 2d terrain. We’ll see how it goes. I would like to eventually put together a mini-RPG like game (think Secret of mana style) eventually, but learning 3D is priority for me at the moment.

So one of the cool things I was trying out with the screenshots above, was a dynamic sky background. I kinda wanted to see how many stars you could get on screen before the game started dropping frames left and right… and to my surprise even when putting 10,000 stars in the background (which didn’t look good AT ALL) and having each one of those stars update every frame with random modifiers for velocity and intensity, the game still ran at a silky smooth 60fps. In case you’re wondering, the cut-off before I got any sort of frame drops was around 35,000 stars in the sky. It really isn’t that complex of code either.. but here is the stars Update method;

public void Update(GameTime gameTime)
{
//Updates the stars position in the sky
_position.X -= (float)(gameTime.ElapsedGameTime.TotalSeconds * RNG.GetRandomFloat(.1f, 10f));

//if the star goes off screen, recycle star
if (_position.X < 0)
_position.X += Globals.GraphicsDevice.Viewport.Width;
}

Now normally I wouldn’t do anything like this in a real game, I’d just create a star texture for the background and maybe a set number of dynamic stars, but to have 1000 stars in-game like this.. looks pretty cool for a small game :)

Tile Engine Map Editor

So with my first learning process into the world of programming, I have started to pick up C# and the XNA framework. For my first project? Building a tilemap engine!

Although right now I don’t have (nor do I expect) a full product to be finished anytime soon, learning the basics of engine programming is very entertaining. I may just pick up a small project and put together a small game that can be played by a lot of people, but for now I am still learning the basics.

First XNA project was codename ShackRPG, and it is basically a 2d RPG tile engine, dynamic map editor, and battle system. For a first project, although the logic behind it all is pretty simple (being that its 2D, and Super Nintendo quality tech wise) this thing was actually pretty complex for someone new to the ideas.

Screenshots:
This shows the very basic map editor when selecting a texture to paint on the ground.

Once the texture is selected, exit the texture selection screen and you can paint the map in real time directly from within the game.

Once your textures and objects are painted on the scene, you could add collision detection directly from within the map editor, ensuring that your character would be blocked from walking on tiles that they were not supposed to such as a mountain or tables.

Once the map is textured, add pre-loaded enemies into the map

Then, exit the map editor and view the game demo that has been created. Walk around the map, battle the enemies you’ve placed down, explore the different areas.

So that was my first project with learning how to program using Microsofts C Sharp programming language and the XNA framework. I’ve started moving towards 3D, but still in the back of my mind am wanting to finish a 2D project. We’ll see what happens in the next little bit with classes and work schedules.