Archive

Posts Tagged ‘spritesheet’

A new Project is started

February 14, 2012 Leave a comment

I’ve always wanted to develop a game, though the lack of time, art skill and game ideas always stopped me. Recently i made up my mind and decided to get it started. I settled for making a small rpg dungeon crawler, though i have yet to define the fine detail specifics.

I started this project as a hobby, a way to have some fun doing something i like and as a learning instrument. Through out this project i will make many mistakes and end up refactoring the code base, i have already done a lot of that and i have yet to scratch the surface of the game.

Currently this is what i have

Ignore the game name, i just felt the whole path would be filled with trials and tribulations. As of this time i have managed to generate the dungeon, a simple 60×30 array of floor, water and wall tiles. I also have player movement and wall collision setup.

The art you see above is a placeholder for something i intend to make further down the road (as i said no art skill) and can be found here.

Framework

It took me more time than it should’ve to decide what language and framework to use for this little hobby. I looked at python and pygame, ruby, xna, c++, java. Ended up choosing java, because it allows me to avoid relearning the other languages. For framework i chose Slick2D, which is  set of tools wrapped around the LWJGL OpenGL binding for Java.

Dungeon Generation

I decided early on that the dungeons needed to be procedurally generated so I set out to learn how to do just that. I found the Procedural Content Generation Wiki and thanks to them i ended up settling on a Cellular Automata method that would allow me to generate cave like levels.

During generation i just place tiles that end up living or dying during the 3 generations i allow them. I place two types of tile, wall and water. All the other tiles are automatically considered to be floor. This is a simplistic approach that i will need to refine, for instance you will easily find isolated water tiles inside walls or even situations like you see on the screen above where there are just a couple of tiles that bring nothing to the dungeon.

Rendering Art

After generating the tiles its time to draw them. My first attempt slowed down my screen to a crawl. The reason was twofold: rendering all the map and using the wrong api from Slick2D.

At first i was simply iterating all the map and drawing images to the screen with SpriteSheet.getSprite(x, y).

SpriteSheet is a wrapper for an image that contains all your tiles. when you do getSprite it creates an Image object with the appropriate tile. A good explanation taken from StackOverflow:

There is a SpriteSheet class in Slick that does exactly this.

SpriteSheets, in Slick, are large images made up of a series of uniformly sized tiles. Each tile is typically an animation frame in a Sprite. In the SpriteSheet constructor you specify the image (which has all the tiles), and the width/height of the tiles in the sheet, along with any spacing and margin, if you have/need that.

Finally, the getSprite(x, y) method allows you to retrieve the specified tile, as if it were an element in a 2D array. In other words, if you have a SpriteSheet of 16 tiles, that are arranged in a 4×4 grid of tiles, then to get the tile in column 3, row 2, you would call getSprite(3, 2);

I believe the indexes in getSprite(x, y) are zero-based, just like arrays in Java.

Unfortunately this solution has really bad performance when you are rendering a tile map iteratively. The best option is to use the renderInUse method of the spritesheet, you can see a simple example bellow.

Also in the code bellow you can see that i fixed the my other problem (rendering all the map), initially i was rendering the whole 60×30 array independently of whether or not the map could be seen on the screen. The trick was to determine the view area of the map and only render those tiles.

    sh.startUse();
    for (int i = startingY; i < endingY; i++) {
        String[] columns = map[i];
        for (int j = startingX; j < endingX; j++) {
            int xp = (int) x + ((j - startingX) * 32);
            int yp = (int) y + ((i - startingY) * 32);
            if (columns[j].equals("#")) {
                sh.renderInUse(xp, yp, 8, 3);
            } else if (columns[j].equals("$")) {
                sh.renderInUse(xp, yp, 1, 2);
            } else {
                sh.renderInUse(xp, yp, 4, 3);
            }
        }
    }
    sh.endUse();

A little warning, this method of drawing does not play well if you try and do other things in between (GL calls, drawing other images not in this sprite).

That is it for now, i will probably put player movement and collision in it’s own post. For now i will say it gave me much more trouble i ever expected it to.

Since this is a pet project and i’m using it to learn i don’t really have a pre defined path of what i will code next. I go with what i feel like doing, as of now i figure the next steps will be:

  • Fog of War
  • New Art
  • Mob Spawning
Advertisements