将纹理拆分为拼图块在libgdx中 [英] Split a Texture into puzzle pieces In libgdx

问题描述

由于性能问题，我正在尝试将基于Android Canvas的游戏转换为Libgdx。目前，我必须生成拼图拼图（动态）时遇到问题。

I am trying to convert android Canvas based game to Libgdx due to performance issues. Currently I am facing issues when I have to generate jigsaw puzzle piece sprites (dynamically).

我做了什么：我使用了android位图操作（ Path和PorterDuff）并生成拼图，然后将其输入到AndroidLauncher中的Libgdx Game对象。

What I did : I used android bitmap manipulation (Path and PorterDuff) and generated puzzle pieces and then fed that to Libgdx Game object in AndroidLauncher.

问题1 ：有没有更好的方法将位图转换为libgdx核心项目中的拼图。 （见下文）

Question 1 : Is there a better way to convert a bitmap to puzzle pieces inside libgdx core project. (see below)

问题2 ：如何创建一个区域来表示拼图。
（基于边界框或宽度/高度的解决方案不适合），以便用户可以在他/她仅触摸该纹理区域时拖动它。

Question 2 : How can I create an area just to represent the puzzle piece. (bounding box or width/height based solution is not suitable), so that user can drag the piece when he/she only touches on that texture area.

问题3 ：检测相邻拼图块何时被用户移近彼此的最佳方式。

Question 3 : Best way to detect when adjacent puzzle pieces are moved closer to each other by the user.

推荐答案

在LibGdx中创建拼图游戏的最佳方法。有一种替代方法可以通过使用遮罩来实现LibGdx中Image的碎片。掩蔽是通过创建着色器程序来实现的，即对于这个问题，我们必须写一个
1.Vertex Shader
2.Fragment Shader
3.创建着色器程序
4.create自定义精灵批处理。
了解着色器的更多信息： https://github.com/libgdx/libgdx/ wiki /着色器

Best Way to create a jigsaw puzzle game in LibGdx. There is an alternative to achieve pieces from an Image in LibGdx by using masking. Masking is achieved by creating a Shader Program i.e for this problem we have to write a 1.Vertex Shader 2.Fragment Shader 3.Create A Shader Program 4.create a custom sprite batch. for more info on shaders: https://github.com/libgdx/libgdx/wiki/Shaders

着色器程序如下所示：
Vertex Shader下方用于屏蔽： -

Shader Program looks like this: Below Vertex Shader For masking:-

1. 顶点着色器：顶点着色器负责对顶点执行操作。

1. Vertex Shader: Vertex shaders are responsible for performing operations on vertices.

`
uniform mat4 u_projTrans ;

` uniform mat4 u_projTrans;

attribute vec4 a_position;

attribute vec4 a_color;

attribute vec2 a_texCoord0;

varying vec4 v_color;
varying vec2 v_texCoord0;

void main()
{
    v_color = a_color;
    v_texCoord0 = a_texCoord0;
    gl_Position = u_projTrans * a_position;
} `

2.Fragment着色器：片段着色器以与顶点着色器非常相似的方式起作用。但是不是在顶点上处理它，而是为每个片段处理一次。

2.Fragment Shader: A fragment shader functions in a very similar way to a vertex shader. But instead of processing it on a vertex it processes it once for each fragment.

`#ifdef GL_ES
    precision mediump float;
#endif

uniform sampler2D u_texture;
uniform sampler2D u_mask;

varying vec4 v_color;
varying vec2 v_texCoord0;

void main()
{
    vec4 texColor = texture2D(u_texture, v_texCoord0);
    vec4 mask = texture2D(u_mask, v_texCoord0);
    texColor.a *= mask.a;
    gl_FragColor = v_color * texColor;
}`

1. 使用Vertex和片段着色器创建着色器程序：

1. create a Shader Program using Vertex and fragment Shader:

public class MyShader {
private FileHandle fragmentShader = Gdx.files.internal("fragment.glsl");
private FileHandle vertexShader = Gdx.files.internal("vertex.glsl");
public ShaderProgram myShader = new ShaderProgram(this.vertexShader, 
this.fragmentShader);

public MyShader () {
    this.myShader .begin();
    this.myShader .setUniformi("u_texture", 0);
    this.myShader .setUniformi("u_mask", 1);
    this.myShader .end();
}

}

4.用于屏蔽的自定义精灵批次：

4.Custom Sprite Batch for Masking:

    batch.setShader(MyShader.myShader);
    this.alphaTexture.bind(1);
    this.color.getTexture().bind(0);
    batch.enableBlending();
    Color c = getColor();
    batch.draw(this.color, getX(), getY(), getOriginX(), 
    getOriginY(), 
    getWidth(), getHeight(), getScaleX(), getScaleY(), 0.0f);
    batch.setShader(null);

ShaderLesson： https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson2

ShaderLesson: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson2

这篇关于将纹理拆分为拼图块在libgdx中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！