Using LWJGL and Slick2d, how do I load and display sprites from a sprite atlas?

dah01 · December 19, 2011, 2:14am

So I’ve got this small amount of code to load a grass tile and tile it over and over again on the screen and draw one tree in the top left, what I’d like to do is load a sprite sheet for a character. I’ve got one sheet with green as the transparent background and I want to load an image from that, how do I chop the image up, and should I still use a quad to draw it?

Summary:

Should I be using a quad with a texture to draw a sprite, same as I draw my tile?
How should I load the sprite atlas?
Once I have the sprite atlas loaded, should I then make a hasmap of subimages made from the spritesheet or do I load the whole image each time and have to tell it to ignore all but one section
Am I proceeding about this in the right way?
How can I teach this stuff to myself without posting? I can’t find anything for animating sprites with these libraries and when I look at the javadoc, half the methods are undocumented. Do I need to get a book on just openGL or what? Should I know opengl first? I’d hate to think that I’d have to ask a question every time I try to draw something different but honestly I’d really like to know how to teach this stuff to myself. I’m not sure what the workflow for working with lwjgl is anyway.

Here is the little bit I’ve been working on.

package com.hadesvine.tiledgame.examples;

import java.io.IOException;
import java.util.Random;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.newdawn.slick.Color;
import org.newdawn.slick.opengl.Texture;
import org.newdawn.slick.opengl.TextureLoader;
import org.newdawn.slick.util.ResourceLoader;

public class TextureExample {

    public static final int SCREENWIDTH = 1024;
    public static final int SCREENHEIGHT = 768;
    public static int numberOfTimesRun = 0;
    /** The texture that will hold the image details */
    private Texture grassTexture;
    private Texture treeTexture;
    /**
     * Start the example
     */
    public void start() {

        initGL(SCREENWIDTH, SCREENHEIGHT);
        init();

        while (true) {
            GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
            drawTiled(SCREENWIDTH, SCREENHEIGHT);
            drawSprite();
            //render();



            Display.update();
            Display.sync(100);

            if (Display.isCloseRequested()) {
                Display.destroy();
                System.exit(0);
            }
        }
    }

    /**
     * Initialise the GL display
     * 
     * @param width The width of the display
     * @param height The height of the display
     */
    private void initGL(int width, int height) {
        try {
            Display.setDisplayMode(new DisplayMode(width, height));
            
            Display.create();
            Display.setVSyncEnabled(true);
        } catch (LWJGLException e) {
            e.printStackTrace();
            System.exit(0);
        }

        GL11.glEnable(GL11.GL_TEXTURE_2D);

        GL11.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

        // enable alpha blending
        GL11.glEnable(GL11.GL_BLEND);
        GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);

        GL11.glViewport(0, 0, width, height);
        GL11.glMatrixMode(GL11.GL_MODELVIEW);

        GL11.glMatrixMode(GL11.GL_PROJECTION);
        GL11.glLoadIdentity();
        GL11.glOrtho(0, width, height, 0, 1, -1);
        GL11.glMatrixMode(GL11.GL_MODELVIEW);
    }

    /**
     * Initialise resources
     */
    public void init() {

        try {
            // load texture from PNG file
            grassTexture = TextureLoader.getTexture("PNG", ResourceLoader.getResourceAsStream("com/hadesvine/alone/tiles/seamlessgrass.png"));
            treeTexture =  TextureLoader.getTexture("PNG", ResourceLoader.getResourceAsStream("com/hadesvine/alone/tiles/tree64x96.png"));

            System.out.println("Texture loaded: " + grassTexture);
            System.out.println(">> Image width: " + grassTexture.getImageWidth());
            System.out.println(">> Image height: " + grassTexture.getImageHeight());
            System.out.println(">> Texture width: " + grassTexture.getTextureWidth());
            System.out.println(">> Texture height: " + grassTexture.getTextureHeight());
            System.out.println(">> Texture ID: " + grassTexture.getTextureID());
            
            System.out.println("Texture loaded: " + treeTexture);
            System.out.println(">> Image width: " + treeTexture.getImageWidth());
            System.out.println(">> Image height: " + treeTexture.getImageHeight());
            System.out.println(">> Texture width: " + treeTexture.getTextureWidth());
            System.out.println(">> Texture height: " + treeTexture.getTextureHeight());
            System.out.println(">> Texture ID: " + treeTexture.getTextureID());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * draw a quad with the image on it
     */
    public void render() {
        Color.white.bind();
        grassTexture.bind(); // or GL11.glBind(texture.getTextureID());

        GL11.glBegin(GL11.GL_QUADS);
        GL11.glTexCoord2f(0, 0);
        GL11.glVertex2f(100, 100);
        GL11.glTexCoord2f(1, 0);
        GL11.glVertex2f(100 + grassTexture.getTextureWidth(), 100);
        GL11.glTexCoord2f(1, 1);
        GL11.glVertex2f(100 + grassTexture.getTextureWidth(), 100 + grassTexture.getTextureHeight());
        GL11.glTexCoord2f(0, 1);
        GL11.glVertex2f(100, 100 + grassTexture.getTextureHeight());
        GL11.glEnd();
    }

    /**
     * Main Class
     */
    public static void main(String[] argv) {
        TextureExample textureExample = new TextureExample();
        textureExample.start();
    }

    public void drawTiled(int screenWidth, int screenHeight) {
        Color.white.bind();
        grassTexture.bind(); // or GL11.glBind(texture.getTextureID());
        int numberPerRow = (int) screenWidth / (int) grassTexture.getTextureWidth();
        double numberOfRows = screenHeight / grassTexture.getTextureHeight();
        GL11.glBegin(GL11.GL_QUADS);
        for (int j = 0; j < numberOfRows; j++) {
            //System.out.print("{");
            for (int i = 0; i < numberPerRow; i++) {

                //top left
                GL11.glTexCoord2f(0, 0);
                GL11.glVertex2f(grassTexture.getTextureWidth() * i, grassTexture.getTextureHeight() * j);

                //top right
                GL11.glTexCoord2f(1, 0);
                GL11.glVertex2f(grassTexture.getTextureWidth() * (i + 1), grassTexture.getTextureHeight() * j);

                //bottom right
                GL11.glTexCoord2f(1, 1);
                GL11.glVertex2f(grassTexture.getTextureWidth() * (i + 1), grassTexture.getTextureHeight() * (j + 1));

                //bottom left
                GL11.glTexCoord2f(0, 1);
                GL11.glVertex2f(grassTexture.getTextureWidth() * i, grassTexture.getTextureHeight() * (j + 1));
                //System.out.print("[]");
            }
            //System.out.println("}");
        }
        //close gl


        GL11.glEnd();
        System.out.println("numberOfTimesRun" + ++numberOfTimesRun);
    }

    public void drawSprite() {
        Color.white.bind();
        treeTexture.bind();
        GL11.glBegin(GL11.GL_QUADS);
        

        
        
        int i = 0;
        int j = 0;
        
        
        
        GL11.glTexCoord2f(0, 0);
        GL11.glVertex2f(treeTexture.getTextureWidth() * i, treeTexture.getTextureHeight() * j);

        //top right
        GL11.glTexCoord2f(1, 0);
        GL11.glVertex2f(treeTexture.getTextureWidth() * (i + 1), treeTexture.getTextureHeight() * j);

        //bottom right
        GL11.glTexCoord2f(1, 1);
        GL11.glVertex2f(treeTexture.getTextureWidth() * (i + 1), treeTexture.getTextureHeight() * (j + 1));

        //bottom left
        GL11.glTexCoord2f(0, 1);
        GL11.glVertex2f(treeTexture.getTextureWidth() * i, treeTexture.getTextureHeight() * (j + 1));
        GL11.glEnd();
    }
}

ra4king · December 19, 2011, 4:12am

Slick’s SpriteSheet class

dah01 · December 19, 2011, 5:11pm

We talked about this last night, thanks for posting it in the thread though so that other people will know. ;D

marcuiulian13 · April 19, 2012, 10:18pm

What about LWJGL? Is there any (easy) way?

sproingie · April 19, 2012, 10:53pm

LWJGL is just a thin wrapper around OpenGL, so unless you consider reimplementing SpriteSheet by hand to be the easy way, then the answer is “no”.

davedes · April 19, 2012, 10:57pm

Like sproingie said, you’d have to implement it yourself.

I linked to a simple Image2D wrapper in this post:

Then sprite sheets can be made like this:

... init the sprite sheet:
sheet = new Image2D(texture);
sprite1 = sheet.getSubImage(0, 0, 32, 32); //(x, y) and (width, height)
sprite2 = sheet.getSubImage(32, 32, 32, 32);

... render the sprite sheet:
sheet.begin();
//draw some sprites
sprite1.draw(50, 50); 
sprite2.draw(25, 25);
sprite2.draw(100, 100);
sheet.end();

Or you could emulate Slick’s SpriteSheet by splitting a texture into a two-dimensional ‘grid’ of uniform sprites, i.e.:

int spriteWidth = 32; //width of each sprite
int spriteHeight = 32; //height of each sprite
int spacing = 0; //0 px between sprites
sheet = new SpriteSheet(sheetImage, spriteWidth, spriteHeight, spacing); //creates multiple Image2D objects via getSubImage
sprite1 = sheet.getSprite(0, 0); //gets sprite at index (0, 0)

If your sprites are different sizes, you might want to define them in a text file, i.e. by name. I’ve used the Properties format in the past:

#sprite sheet file...
player = 0,0,32,32
button = 45,10,32,10
fonts = 45,30,256,256

Of course, if you’re using Slick2D/SlickUtil then there’s no need to reinvent the wheel regarding SpriteSheet/PackedSpriteSheet/XMLPackedSheet.