使用OpenGL从Spritesheet渲染精灵? [英] Rendering sprites from spritesheet with OpenGL?

问题描述

想象一下以下情况:您拥有一组PNG格式的RPG字符精灵表，并且想要在OpenGL应用程序中使用它们.

Imagine the following scenario: you have a set of RPG character spritesheets in PNG format and you want to use them in an OpenGL application.

(通常)单独的字符为16 x 24像素大小(即24像素高)，并且可以任意宽度和高度放置而不会留下填充.有点像这样:

The separate characters are (usually) 16 by 24 pixels in size (that is, 24 pixels tall) and may be at any width and height without leaving padding. Kinda like this:

_{(来源: kafuka.org )}

_{(source: kafuka.org)}

我已经有了确定给定帧索引和大小的基于整数的裁剪矩形的代码:

I already have the code to determine an integer-based clipping rectangle given a frame index and size:

int framesPerRow = sheet.Width / cellWidth;
int framesPerColumn = sheet.Height / cellHeight;
framesTotal = framesPerRow * framesPerColumn;
int left = frameIndex % framesPerRow;
int top = frameIndex / framesPerRow;
//Clipping rect's width and height are obviously cellWidth and cellHeight.

使用frameIndex = 11, cellWidth = 16, cellHeight = 24运行此代码会返回一个cliprect (32, 24)-(48, 48)，假定它的Right/Bottom与Width/Height相对.

Running this code with frameIndex = 11, cellWidth = 16, cellHeight = 24 would return a cliprect (32, 24)-(48, 48) assuming it's Right/Bottom opposed to Width/Height.

实际问题

现在，给定一个裁剪矩形和一个X/Y坐标来放置精灵，我该如何在OpenGL中绘制它?最好将 top 的坐标设置为零.

Now, given a clipping rectangle and an X/Y coordinate to place the sprite on, how do I draw this in OpenGL? Having the zero coordinate in the top left is preferred.

推荐答案

您必须开始在坐标位于[0，1]范围内的纹理空间"中进行思考.

You have to start thinking in "texture space" where the coordinates are in the range [0, 1].

因此，如果您有一张精灵表:

So if you have a sprite sheet:

class SpriteSheet {
    int spriteWidth, spriteHeight;
    int texWidth, texHeight;

    int tex;

public:
    SpriteSheet(int t, int tW, int tH, int sW, int sH)
    : tex(t), texWidth(tW), texHeight(tH), spriteWidth(sW), spriteHeight(sH)
    {}

    void drawSprite(float posX, float posY, int frameIndex);
};

您要做的就是将顶点和纹理顶点都提交到OpenGL:

All you have to do is submit both vertices and texture vertices to OpenGL:

    void SpriteSheet::drawSprite(float posX, float posY, int frameIndex) {
        const float verts[] = {
            posX, posY,
            posX + spriteWidth, posY,
            posX + spriteWidth, posY + spriteHeight,
            posX, posY + spriteHeight
        };
        const float tw = float(spriteWidth) / texWidth;
        const float th = float(spriteHeight) / texHeight;
        const int numPerRow = texWidth / spriteWidth;
        const float tx = (frameIndex % numPerRow) * tw;
        const float ty = (frameIndex / numPerRow + 1) * th;
        const float texVerts[] = {
            tx, ty,
            tx + tw, ty,
            tx + tw, ty + th,
            tx, ty + th
        };

        // ... Bind the texture, enable the proper arrays

        glVertexPointer(2, GL_FLOAT, verts);
        glTexCoordPointer(2, GL_FLOAT, texVerts);
        glDrawArrays(GL_TRI_STRIP, 0, 4);
    }

};

这篇关于使用OpenGL从Spritesheet渲染精灵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！