使用OpenGL从spritesheet渲染精灵？

Question

想象一下以下场景：您有一组PNG格式的RPG角色spritesheets，并且您希望在OpenGL应用程序中使用它们。

单独的字符（通常）大小为16乘24像素（即24像素高），并且可以处于任何宽度和高度而不留下填充。有点像：

（来源：kafuka.org）

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

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)，假设它的右/底与宽度/高度相对。

实际的问题

现在，给定一个剪切矩形和一个X / Y坐标来放置精灵，我该如何在OpenGL中绘制它？在左上角具有零坐标是优选的。

Answer 1

你必须开始考虑坐标在[0,1]范围内的“纹理空间”。

所以，如果你有一个精灵表：

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：

    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);
    }

};

Answer 2

弗兰克斯解决方案已经很好了。

只是一个（非常重要的）旁注，因为有些评论建议不然。

请不要使用glBegin / glEnd。不要告诉别人使用它。

唯一可以使用glBegin / glEnd的是你的第一个OpenGL程序。

数组并不难处理，但......

• ......他们更快
• ......他们仍然可以使用更新的OpenGL版本。
• ......他们将与GLES合作。
• ...从文件加载它们要容易得多。

Answer 3

我假设你正在学习OpenGL，只需要以某种方式让它工作。如果你需要原始速度，那就是着色器和顶点缓冲区以及各种简洁和复杂的东西。

最简单的方法是将PNG加载到纹理中（假设你有能力将图像加载到内存中，你确实需要htat），然后使用四边形设置适当的纹理坐标绘制它（它们从浮点坐标0到1） ，所以你需要相应地除以纹理宽度或高度）。

使用glBegin（GL_QUADS），glTexcoord2f（），glVertex2f（），glEnd（）来绘制这个最简单（但不是最快）的方法。

要使左上角为零，要么使用gluOrtho（）来设置视图矩阵，与普通GL不同（查找该函数的文档，将top设置为0，将bottom设置为1或如果需要整数coords则设置screen_height）或者只是进行更改你的绘图循环，只需要glVertex2f（x / screen_width，1-y / screen_height）。

有更好更快的方法，但如果您从头开始学习原始OpenGL，这可能是最简单的方法之一。

Answer 4

一个建议，如果可以的话。我使用SDL加载我的纹理，所以我做的是：1。我加载了纹理2.我决定如何将spritesheet分成单独的sprite。 3.我将它们分成不同的表面4.我为每个表面制作一个纹理（我有一个精灵类来管理它们）。 5.释放表面。这显然需要更多时间（显然）加载，但需要付费。这样，它更容易（也更快），因为您只需要计算要显示的纹理的索引，然后显示它。然后，您可以根据需要缩放/翻译它，并调用显示列表将其呈现为您想要的任何内容。或者，您可以立即模式，要么工作:)