Hello Guest

How do I load from a sprite atlas?

  • 1 Replies
  • 6525 Views
How do I load from a sprite atlas?
« on: December 19, 2011, 02:52:52 »
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();
    }
}

Re: How do I load from a sprite atlas?
« Reply #1 on: December 20, 2011, 05:27:02 »
A sprite atlas is a BIG image that you load tiled. So your code may handle tiling by loading each sprite from the same resource file with ImageIO into opengl memory. Your animation handler may load the entire sprite atlas in one full GL_Texture_3D, by calling glsubtexture3d, or you can load the atlas in separate 2D textures. (3D texture allows you to render your animations in a smoother fashion, by "sliding" the r-coord (float) from 0 to end "layer" value (consider using 2 "layers" for one sprite, so that it displays the sprite correctly) . Anyway, OpenGL will handle texture caching automatically, so that binding with the correct texture name (glgenbuffer), will display the character's sprite when desired.
ImageIO will load tiles from its imagereaderparam.sourcegregion or with readtile. AFAIK, the latter works only if your atlas image file is tiled with a compatible image file format (usually jpeg2000 or tiff in Java ImageIO Tools extension; I use TIFF).
 8)
« Last Edit: December 20, 2011, 05:29:03 by broumbroum »