如何绘制像素化形状（LIBGDX概念）

Question

我想以像素化的风格绘制形状。

我的圆目前用shaperenderer绘制，以真实像素渲染。

但我希望它更像素化。

我试过使用摄像机和视口来达到效果，但不成功。我更喜欢使用FillViewport。

我们需要创建自己的drawLine函数并沿着线条绘制小正方形吗？或者可以保持纵横比例，在视口中完成此操作吗？

有没有简单的示例项目，展示如何创建像素化的简单形状。

我知道我可以自己编写代码，但我希望在使用框架时避免这样做。

在skretch中，您只需指定像素大小即可绘制线条，非常容易。

有什么提示吗？

public class SimpleCirleActor extends Actor {
        ShapeRenderer renderer;
        float radius;
        public SimpleCirleActor(int x , int y, float radius) {
            setBounds(0,0, Constants.pixelsPerSector(),Constants.pixelsPerSector());
            this.radius = radius;
            setX(x);setY(y);
            renderer = new ShapeRenderer();
        }

        @Override
        public void draw(Batch batch, float parentAlpha) {
            super.draw(batch, parentAlpha);
            renderer.setProjectionMatrix(getStage().getCamera().combined);
            renderer.begin(ShapeRenderer.ShapeType.Line);
            renderer.setColor(Color.CYAN);
            float x = getX();
            renderer.circle(x, getY(), radius);
            renderer.end();
        }

    @Override
    public void act(float delta) {
        super.act(delta);
    }

}

- mcfly soft

---

你可以先绘制到一个小的帧缓冲区，然后根据需要将其放大并绘制到屏幕上。只需确保将帧缓冲区的纹理过滤设置为最近像素，以保持硬边缘即可。 - funferret-com

这是唯一的方法吗？ - mcfly soft

我尝试了一下，它确实有效。但是它有一个很大的缺点，就是我们只会将一个帧缓冲区传递到屏幕上，这将覆盖之前绘制的所有内容。而且我不知道如何在帧缓冲区中绘制角色。我想这一定有更简单的解决方案。我的意思是这是一个游戏框架，我希望我们能防止任何黑客攻击。 - mcfly soft

你可以随意使用FrameBuffers，但是我记得Libgdx的支持并不是很好。当你绘制到framebuffer时，你会创建一个纹理。这个纹理可以像其他纹理一样使用，例如libgdx用于将精灵绘制到屏幕上的纹理。我可以向你保证，你可以使用framebuffers做任何你想做的事情，但不能保证它不会变得比你想象的更混乱。也许你应该发布一下你已经使用framebuffers完成的内容，我可以尝试帮助你将其绘制到屏幕上，而不会覆盖其他所有内容。 - funferret-com

好的。谢谢。我会准备一个小项目尽快展示。 - mcfly soft

Answer 1

好的，有点无聊。这里是内容。

注意：

绿色方框只是用来显示帧缓冲纹理正在绘制的位置，只需在fbo.begin()语句之后将填充颜色更改为零alpha即可清除它。

BINDING_DEPTH_FRAMEBUFFER、BINDING_DEFAULT变量来自我的代码。除非您尝试切换纹理并使用定制着色器，否则您可能不需要担心这些内容。

绘制fbo，batch.draw(fbo.getColorBufferTexture(), 20, 20, 200, 200, 0, 0, 1, 1); 希望这对您来说没问题。如果您想旋转fbo，则应该能够从您的相机创建旋转的投影矩阵。如果您想使用定制着色器，只需小心地将fbo链接为着色器的纹理即可。

package com.funferret.pixelshapes;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.FrameBuffer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.utils.ScreenUtils;

public class MyGdxGame extends ApplicationAdapter {
    ShapeRenderer shapeBatch;
    SpriteBatch batch;
    Texture img;
    FrameBuffer fbo;
    public OrthographicCamera fboCamera;

    int fboWidth=40;
    int fboHeight=40;
    int BINDING_DEPTH_FRAMEBUFFER=3;
    int BINDING_DEFAULT=0;

    void createFrameBuffer()
    {
        if (fbo!=null)
        {
            fbo.dispose();
        }
        fbo = new FrameBuffer(Pixmap.Format.RGBA8888, fboWidth, fboHeight, false);
        fbo.getColorBufferTexture().setFilter(Texture.TextureFilter.Nearest, Texture.TextureFilter.Nearest);
        fbo.getColorBufferTexture().bind(BINDING_DEPTH_FRAMEBUFFER);
        Gdx.graphics.getGL20().glActiveTexture(GL20.GL_TEXTURE0 + BINDING_DEFAULT); //make sure this is set to 0 for batch draws
        fboCamera=new OrthographicCamera();
        fboCamera.setToOrtho(false, fboWidth, fboHeight);
        fboCamera.update();
    }

    @Override
    public void create () {
        batch = new SpriteBatch();
        shapeBatch=new ShapeRenderer();
        img = new Texture("badlogic.jpg");
    }

    @Override
    public void render ()
    {
    //I had some initialisation problems with the fbo when trying to create a framebuffer. Need to be absolutely certain
        //size is correct and opengl context is set up before creating the framebuffer (as far as I remember). This if statement and the
        //createFrameBuffer function works for me and will allow you to change the size of fboWidth/fboHeight on the fly (though will cause stutters if you do)
        if ((fbo==null) || (fbo.getWidth()!=fboWidth) || (fbo.getHeight()!=fboHeight))
        {
            createFrameBuffer();
        }

        //start drawing to a small framebuffer, that we will then scale up to create a pixelated effect
        fbo.begin();
        ScreenUtils.clear(0, 1, 0, 0.5f);
        shapeBatch.begin(ShapeRenderer.ShapeType.Line);
        shapeBatch.setProjectionMatrix(fboCamera.combined);
        Gdx.gl.glDisable(GL20.GL_BLEND);
        shapeBatch.setColor(1f, 0f, 1f, 1);
        shapeBatch.circle(20,20,15,10);
        shapeBatch.end();
        fbo.end();


        ScreenUtils.clear(1, 0, 0, 1);
        batch.begin();
        batch.draw(img, 0, 0);
        batch.draw(fbo.getColorBufferTexture(), 20, 20, 200, 200, 0, 0, 1, 1);
        batch.end();
    }
    
    @Override
    public void dispose () {
        batch.dispose();
        img.dispose();
        shapeBatch.dispose();
        fbo.dispose();
    }
}

- funferret-com