{"author_link":"\/users\/unless-games","author_name":"unless games","author_uid":"unless-games","comments":[],"epoch":1713454136,"event":"LD55","format":"md","ldjam_node_id":394040,"likes":1,"metadata":{"p_key":"206323","p_author":"unless games","p_authorkey":"1014843","p_urlkey":"442853","p_title":"Colliders for 3D sprites in Godot","p_cat":"LDJam ","p_event":"LD55","p_time":"1713454136","p_likes":"1","p_comments":"0","p_status":"WAYBACK","us_key":"1014843","us_name":"unless games","us_username":"unless-games","event_start":"1712966400","event_key":"120","event_name":"Ludum Dare 55"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD55","removed_author":false},"_superparent":383062,"_trust":1,"author":14843,"body":"While I work on a post-jam update for our game [The Culling](https:\/\/ldjam.com\/events\/ludum-dare\/55\/the-culling) I thought I'd share how we did the colliders for our sprites. It was the first thing I did and it's quite simple thanks to Godot's built-in helpers but it does involve a few things. Hopefully someone finds this useful!\n\nUnfortunately you can't have pixel perfect collision out-of-the-box, but you can get a pretty close approximation by generating a polygon with the [Bitmap](https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_bitmap.html) class based on your image (it uses the [Ramer-Douglas-Peucker algorithm](https:\/\/en.wikipedia.org\/wiki\/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm) under the hood).\n\n```python\n# have some image with transparency\nvar tex : Texture2D = load(\"res:\/\/path\/to\/texture.png\")\n\n# create a bitmap instance and load the texture into it\nvar bitmap := BitMap.new()\nbitmap.create_from_image_alpha(tex.get_image())\n\n# create a rectangle based on our texture size\nvar rect := Rect2i(Vector2.ZERO,tex.get_size())\n\n# generate our polygon based on the rect with a precision of 5 \n# the lower you go the more vertices you'll get\n# I take the first element from the returned list here\n# since all of our sprites have a single island\nvar polygon := bitmap.opaque_to_polygons(rect, 5)[0]\n\n# let's transform the polygon from pixel-space to world-space\n# we need to match the pixel-size property from our Sprite3D\nvar pixel_size := 0.01\n\n# and transform all vertices to the center and flip them\nfor i in polygon.size():\n  polygon[i] = (polygon[i] - rect.size * 0.5) * -pixel_size\n```\n\nLater you can assign this polygon to the `polygon` property of a [CollisionPolygon3D](https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_collisionpolygon3d.html) added to an Area3D or PhysicsBody on your Sprite3D. I didn't do it here since we generate these polygons once at launch and reuse them a lot for spawned targets.\n\nDon't forget to enable `Debug \/ Visible Collision Shapes` in Godot to see the colliders.\n\nBelow are some examples of the generated colliders from our game.\n\n![screenshot1713453220.80545.png](\/\/\/raw\/bf9\/3\/z\/6455f.png)\n![screenshot.png](\/\/\/raw\/bf9\/3\/z\/64560.png)\n![screenshot1713453245.56212.png](\/\/\/raw\/bf9\/3\/z\/64561.png)\n\n## [The Culling](https:\/\/ldjam.com\/events\/ludum-dare\/55\/the-culling)\n","comments":2,"comments-timestamp":"2024-04-18T16:06:49Z","created":"2024-04-18T14:38:23Z","files":[],"files-timestamp":0,"id":394040,"love":1,"love-timestamp":"2024-04-18T16:15:16Z","meta":[],"modified":"2024-04-18T16:15:16Z","name":"Colliders for 3D sprites in Godot","node-timestamp":"2024-04-18T15:39:00Z","parent":386166,"parents":[1,5,9,383062,386166],"path":"\/events\/ludum-dare\/55\/the-culling\/colliders-for-3d-sprites-in-godot","published":"2024-04-18T15:28:56Z","scope":"public","slug":"colliders-for-3d-sprites-in-godot","subsubtype":"","subtype":"","type":"post","version":1233320},"node_metadata":{"n_key":"394040","n_urlkey":"442853","n_parent":"386166","n_path":"\/events\/ludum-dare\/55\/the-culling\/colliders-for-3d-sprites-in-godot","n_slug":"colliders-for-3d-sprites-in-godo","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"14843","n_created":"1713451103","n_modified":"1713456916","n_version":"1233320","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/55\/the-culling\/colliders-for-3d-sprites-in-godot","text":"While I work on a post-jam update for our game [The Culling](https:\/\/ldjam.com\/events\/ludum-dare\/55\/the-culling) I thought I'd share how we did the colliders for our sprites. It was the first thing I did and it's quite simple thanks to Godot's built-in helpers but it does involve a few things. Hopefully someone finds this useful!\n\nUnfortunately you can't have pixel perfect collision out-of-the-box, but you can get a pretty close approximation by generating a polygon with the [Bitmap](https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_bitmap.html) class based on your image (it uses the [Ramer-Douglas-Peucker algorithm](https:\/\/en.wikipedia.org\/wiki\/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm) under the hood).\n\n```python\n# have some image with transparency\nvar tex : Texture2D = load(\"res:\/\/path\/to\/texture.png\")\n\n# create a bitmap instance and load the texture into it\nvar bitmap := BitMap.new()\nbitmap.create_from_image_alpha(tex.get_image())\n\n# create a rectangle based on our texture size\nvar rect := Rect2i(Vector2.ZERO,tex.get_size())\n\n# generate our polygon based on the rect with a precision of 5 \n# the lower you go the more vertices you'll get\n# I take the first element from the returned list here\n# since all of our sprites have a single island\nvar polygon := bitmap.opaque_to_polygons(rect, 5)[0]\n\n# let's transform the polygon from pixel-space to world-space\n# we need to match the pixel-size property from our Sprite3D\nvar pixel_size := 0.01\n\n# and transform all vertices to the center and flip them\nfor i in polygon.size():\n  polygon[i] = (polygon[i] - rect.size * 0.5) * -pixel_size\n```\n\nLater you can assign this polygon to the `polygon` property of a [CollisionPolygon3D](https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_collisionpolygon3d.html) added to an Area3D or PhysicsBody on your Sprite3D. I didn't do it here since we generate these polygons once at launch and reuse them a lot for spawned targets.\n\nDon't forget to enable `Debug \/ Visible Collision Shapes` in Godot to see the colliders.\n\nBelow are some examples of the generated colliders from our game.\n\n![screenshot1713453220.80545.png](\/\/\/raw\/bf9\/3\/z\/6455f.png)\n![screenshot.png](\/\/\/raw\/bf9\/3\/z\/64560.png)\n![screenshot1713453245.56212.png](\/\/\/raw\/bf9\/3\/z\/64561.png)\n\n## [The Culling](https:\/\/ldjam.com\/events\/ludum-dare\/55\/the-culling)\n","title":"Colliders for 3D sprites in Godot","wayback_source":[]}