# Using the mesh component for 2D **URL:** \ **Category:** Questions\ **Created:** [September 30, 2023, 5:59am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304 "2023-09-30T05:59:03Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [September 30, 2023, 5:59am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/1 "2023-09-30T05:59:03Z")
I am trying to make a soft object similar to : [Puffy Cat - game with soft-body physics](https://forum.defold.com/t/puffy-cat-game-with-soft-body-physics/68015) 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 ? ---
**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\ **Post date:** [September 30, 2023, 8:17am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/2 "2023-09-30T08:17:35Z")
Have you seen this example? > [@Mesh Component](https://forum.defold.com/t/mesh-component/65137): > > In this latest beta, we’ve added a quite exciting feature: the Mesh Component Although the feature isn’t 100% done, we believe it’s still usable in its current form. And we’d love to hear your feedback to this feature. For instance, we lack proper documentation for this feature (but ofc that will come soon too). So, currently, this test project will have to serve as a starting/learning point for those interested. What does it do then, you ask? Mesh This component displays a single mesh. T… 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. ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [September 30, 2023, 9:20am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/3 "2023-09-30T09:20:23Z")
@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 ---
**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\ **Post date:** [September 30, 2023, 9:40am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/4 "2023-09-30T09:40:41Z")
> [@FredZX](#): > > This works well. However, I don’t know how to apply a bitmap to this object 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. ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [September 30, 2023, 11:03am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/5 "2023-09-30T11:03:14Z")
That’s right. This is incomprehensible to me. How does such a board come about? It is generated from some external program ? ---
**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\ **Post date:** [September 30, 2023, 11:28am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/6 "2023-09-30T11:28:14Z")
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) ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [September 30, 2023, 11:33am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/7 "2023-09-30T11:33:41Z")
Sorry. I did not make myself clear. I meant and the contents (array) of the file e.g. “box.buffer” . ---
**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\ **Post date:** [September 30, 2023, 11:39am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/8 "2023-09-30T11:39:40Z")
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: > [@Building a Sync Tool for Blender to Defold](https://forum.defold.com/t/building-a-sync-tool-for-blender-to-defold/69920): > > Update - Dec 2024 Blender exporter is no longer being worked on. I have a number of new projects not using Defold anymore and they are now taking priority. As mentioned in the comment below, people are welcome to fork and use this repo. I will leave it up. Happy to provide support here and there as well if someone wants to take over the repo. Thanks to all who helped make it better! It was highly appreciated and very enjoyable. Update - 04-09-2024 Release 2.0.0 is now out. Feel free to try it… ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [October 2, 2023, 11:27am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/10 "2023-10-02T11:27:44Z")
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](https://forum-defold-uploads.b-cdn.net/original/3X/7/1/71df48a736c05333bd35c36f688ede30fc78d292.png) 1. In the component the rhombus shape displays correctly. I just don’t know why the texture is so dark and not blue. ![image](https://forum-defold-uploads.b-cdn.net/original/3X/1/5/156b7341b828aa321a4a9ab66583acb177052b99.png) 1. in the main collection also fine ![image](https://forum-defold-uploads.b-cdn.net/original/3X/7/d/7dc89bbd66537980747521f225158791eec53cb4.png) 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](https://forum.defold.com/uploads/short-url/7jfKdsi6iFAcMdtALBLr0eOvqdo.zip) (1.9 MB) ---
**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\ **Post date:** [October 2, 2023, 2:07pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/11 "2023-10-02T14:07:37Z")
> [@FredZX](#): > > Is anyone able to tell me what I am doing wrong ? I’m getting errors when running the project: ```lua ERROR:GAMESYS: Trying to get stream data outside of input DDF array. ``` ---
**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\ **Post date:** [October 2, 2023, 2:14pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/12 "2023-10-02T14:14:59Z")
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: ```lua -- render custom meshes --render.set_projection(vmath.matrix4()) --render.set_view(vmath.matrix4()) render.draw(self.model_pred) ``` ![Screenshot 2023-10-02 at 16.14.43](https://forum-defold-uploads.b-cdn.net/original/3X/c/9/c9f9a29b6cca51224a91bf0e5e3b03363af95a2e.png) ---
**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\ **Post date:** [October 2, 2023, 2:16pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/13 "2023-10-02T14:16:37Z")
> [@britzl](#): > > Trim the surplus values in the other streams and you’re good! Here’s the updated buffer: ```lua [ { "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 ] } ] ``` ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [October 2, 2023, 3:00pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/14 "2023-10-02T15:00:19Z")
@britzl Thank you very much. !!! ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [October 8, 2023, 11:59am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/15 "2023-10-08T11:59:56Z")
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. ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [October 10, 2023, 8:01pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/16 "2023-10-10T20:01:48Z")
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 ---
**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\ **Post date:** [October 10, 2023, 9:55pm UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/17 "2023-10-10T21:55:19Z")
> [@FredZX](#): > > The coordinates of the texcoord0 (U,V) are always the same value as the coordinates of the (X,Y) position. 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. ---
**Author:** ![FredZX](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/f/a9a28c/32.png) [@FredZX](https://forum.defold.com/u/FredZX)\ **Post date:** [October 11, 2023, 10:32am UTC](https://forum.defold.com/t/using-the-mesh-component-for-2d/74304/18 "2023-10-11T10:32:30Z")
> [@Mathias\_Westerdahl](#): > > 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”. 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. 😉