Using the mesh component for 2D

I am trying to make a soft object similar to : Puffy Cat - game with soft-body physics

I have points linked by elastic connections. This works well. However, I don’t know how to apply a bitmap to this object. I don’t seem to fully understand how to use the mesh component.

Do any of you have a simple example showing how to overlay a physical object 2D like this, with a texture ?

Have you seen this example?

In this example, the “position”, “normal” and “texcoord0” are names that need to be in the buffer. I tried removing normal, but then it stopped working.
I think this is because the shaders are using normal, perhaps you can remove that. Or simply keep a normal for now.

We have also introducing a new vertex attribute setup on materials, and are implementing support for it on our components one-by-one. We should add it to the mesh component too for sure.

2 Likes

@Mathias_Westerdahl Yes, I have seen this example. I have no experience with 3D and openGL, so not everything is understandable to me.

I am reading your tutorials about rendering, hopefully it will be easier for me to understand this example

If you check the buffers in the example, it contains a “texcoord0” array of UV coordinates.
These coordinates are in the range [0, 1], which represents the unit space of a texture.
0,0 is the top left corner, and 1,1 is the bottom right corner (iirc).

You can try to change the texture in the example to another texture (e.g. your own)
and then start playing with the texcoord0 array to get more of a feel for it.

2 Likes

That’s right. This is incomprehensible to me. How does such a board come about? It is generated from some external program ?

If by board, you mean texture?
Yes, textures are often created in programs like Photoshop or Krita (a lot of alternative if you google Photoshop alternative)

Sorry. I did not make myself clear. I meant and the contents (array) of the file e.g. “box.buffer” .

The buffer format is .json, which we use so that you can either create it manually, or produce via use of scripts or exporter from e.g. Blender (see the example above).

The main point with the mesh component is that you get full freedom to create a mesh as you like. And also be able to manipulate the mesh at runtime.
A more complex example is the tool described here:

3 Likes

I have come to the conclusion that my main problem is that the image is not being rendered.

  1. I created myself a rhombus with vertex coordinates:

0,0,0 | 0.5,1,0 | 0.5,-1,0 | 1,0,0

image

  1. In the component the rhombus shape displays correctly. I just don’t know why the texture is so dark and not blue.

  1. in the main collection also fine

However, after compilation, I get a black screen. Not even the regular sprite appears.
Attached is my example. Is anyone able to tell me what I am doing wrong ?

mesh_test2.zip (1.9 MB)

I’m getting errors when running the project:

ERROR:GAMESYS: Trying to get stream data outside of input DDF array.

If you look at your buffer the streams are not of equal length. You have 6 entries (3 floats each) in your position stream, but the others have more. Trim the surplus values in the other streams and you’re good!

Also, remove/comment the identity view and projection matrices when rendering the mesh:

    --     render custom meshes
    --render.set_projection(vmath.matrix4())
    --render.set_view(vmath.matrix4())
    render.draw(self.model_pred)

1 Like

Here’s the updated buffer:



[
    {
        "name": "position",
        "type": "float32",
        "count": 3,
        "data": [
            0.5, 1, 0,
            0, 0, 0,
            0.5, -1, 0,
            
            0.5, 1, 0,
            0.5, -1, 0,
            1,0,0,
          
      
        ]
    },
    {
        "name": "normal",
        "type": "float32",
        "count": 3,
        "data": [
            -1.0,
            -0.0,
            -0.0,
            
            -1.0,
            -0.0,
            -0.0,
            
            -1.0,
            -0.0,
            -0.0,
            
            -1.0,
            -0.0,
            0.0,
            
            -1.0,
            -0.0,
            0.0,
            
            -1.0,
            -0.0,
            0.0
        ]
    },
    {
        "name": "texcoord0",
        "type": "float32",
        "count": 2,
        "data": [
            0.0,
            0.0,
            
            0.0,
            1.0,
            
            1.0,
            1.0,
            
            0.0,
            0.0,
            
            1.0,
            1.0,
            
            1.0,
            0.0

        ]
    },
    {
        "name": "color0",
        "type": "float32",
        "count": 4,
        "data": [
            1.0,
            1.0,
            1.0,
            1.0,
            
            1.0,
            1.0,
            1.0,
            1.0,
            
            1.0,
            1.0,
            1.0,
            1.0,
            
            1.0,
            1.0,
            1.0,
            1.0,
            
            1.0,
            1.0,
            1.0,
            1.0,
            
            1.0,
            1.0,
            1.0,
            1.0
        ]
    }
]
3 Likes

@britzl

Thank you very much. !!!

1 Like

In the video below I show what I have currently managed to do. I have 20 points connected to each other by a flexible connection. A texture has been applied to this object. Overall, I’m close. I have two questions / problems

  1. why is the texture, not updating correctly. From a certain point it is all blue. The coordinates of the texcoord0 (U,V) are always the same value as the coordinates of the (X,Y) position.

  2. Why does the superimposed texture move slightly faster than physical objects, with the result that at the bottom the texture no longer coincides with the points in the image.

1 Like

Guys, can anyone help me with this topic ?
I don’t know how to deal with it.

  1. changing the buffer data mimics the objects movement, but the texture refreshes incorrectly. Is this a problem in the rendering script ? The coordinates of the texcoord0 (U,V) are always the same value as the coordinates of the (X,Y) position.

  2. i don’t understand how changing the content of the Mesh component is done. The content changes shape and moves down, but the mesh component itself, stays in the same place all the time.
    How do I correctly overlay the contents of the Mesh component onto the object on the right ?

I would be grateful for any suggestions

1 Like

This is what causes your texture to “move”.
A texture has its coordinate space in [0.0, 1.0], whereas your XY coordonates are in the local space (of the component). I think each of your assigned “balls”, should get an UV coordinate assigned at start, and then use it. That will make it look more “squishy”.

As for the XYZ coordinates, you need to decide in which space you want to work with.
The XYZ coords of the mesh are by default defined in local space. That is, they’re offsets from the component.

5 Likes

Well yes , it is even logical. But silly of me. Thank you very much for your help !

With this coverage, I don’t quite understand everything yet, but I will struggle. :wink: