Defold Polygon Editor

The Defoldmine
#1

Hey all,

Since it’s possible to use convex polygon collision shapes with Defold, but the Editor doesn’t yet support creating and editing them, I wrote a little program(with Defold) to fill that gap. So you no longer have to make a text file and write in vertex coordinates, in counter-clockwise order, by hand!

Web version available here: https://rossgrams.itch.io/defold-polygon-editor
Project source files here: https://github.com/rgrams/defold_polygon_editor

It’s very, very simple and unpolished. Here is a short list of features:

  • Load an image as a reference for your polygon (unscaled and centered at origin).
  • Open and save polygon files.
    • Uses Def-Diags for native file dialogs on Windows and Mac, and tries to use Zenity on Linux.
    • Can still save polygons in the application folder if none of those work.
  • Highlights convex (and therefore invalid) vertices in red.
  • Hold shift to snap vertices to an adjustable, even-pixel grid size.

Here are screenshots of the editor and some of the resulting bodies in a Defold test project.

screenshot_2021-04-13_10-40-12
screenshot_2021-04-13_10-40-12.png1000×450 38.2 KB

Defold Polygon Editor_polygon bodies.jpg800×450 27.9 KB

I hope someone besides myself finds this useful! (until the editor does this stuff . . . hint hint)

43 Likes
Is there a possibility to make a custom shape for collider?
Collision 2D Polygons To capture Mouse Input
I know custom shapes have been requested for collision calculations. What about for now a triangle shape?
Polygon Gui button
Coordinates within Defold
Does defold support only three shapes for collision? (SOLVED)
Experienced Defold developer available for work
#2

Mind = blown!

9 Likes
#3

Wow awesome!

4 Likes
#4

Haha, thanks guys! It really is a very simple thing! I put the source up on github if anyone wants it: https://github.com/rgrams/defold_polygon_editor and added and tweaked a couple things. I’m really not a programmer, so I’m sure the code is pretty questionable. If anyone has any suggestions or anything, let me know or make a github issue or pull request.

Cheers!

9 Likes
#5

OK, now we’re getting somewhere! Now you can load in an image as an underlay and make your polygon to fit. Then, assuming you haven’t scaled or changed the pivot of your sprite, the collision polygon you made should perfectly match the sprite’s position and size in-engine.

Defold Polygon Editor_underlay image.gif990×440 1.14 MB

Result:

Unfortunately, as I understand it, right now Defold has no way to load in arbitrary image files at runtime, so to use this feature you have to download the project from github, throw your images into the main folder, and build-and-launch from the editor. Of course as I see it, anyone using this will be using the editor already anyway, so it’s not a big deal. And Editor 2’s ability to open projects directly from disk makes it very easy.

12 Likes
#6

Bullshit! Really great work, keep it up! :astonished:

8 Likes
#7

I’m super excited about stuff like this, really great work!!

I should fix my dialogs and menu libraries to be a real native extensions, then you should be able to have “Save as” dialogs. :smiley:

8 Likes
#8

This is really really brilliant stuff @ross.grams! Keep it up! Combine this with @sven’s Save/Load extension and a png extension using lodepng to decode a png and return it as a buffer that can be set on the sprite and we have a real winner!

5 Likes
#9

Thanks a lot guys!

@Ragnar_Svensson - Hehe, yeah, I suppose you’re right. Thanks a lot! Same to you! :smile:

@sven - Ooh, nice I didn’t know about your native dialogs library. I will check that out.

@britzl - Aha! Thanks for the roadmap, I will check that stuff out. Yeah, I was kind of fighting against the gui stuff, having to use it for the loaded texture, but then I realized I could just use another gui component and give it the sprite material (or a slight variant of it). Then, bam!, it pretty much behaved like a sprite, as I wanted it to.

4 Likes
#10

This is brilliant!

Looking forward to the day where we’ll be able to create things like this that work directly in Editor 2 - hint hint -

6 Likes
#11

Nice work Ross, thumbs up!

1 Like
#12

Thanks for the nice comments guys!

I worked some more on this in the last couple days. I finally got rid of the total garbage mouse world pos stuff I had before and plugged in my code from my perspective-camera, screen-to-world transform project. So now that’s done properly and it never gets messed up from too much zooming and panning. And I cleaned up some other little things so stuff works better under the hood.

The other thing I did was grab pngLua to decode PNGs directly. It’s pretty slow and synchronous, so it just freezes the program for a while, but, it means you can load in any PNG with the bundled program, you don’t have to run it from the Defold editor.

Does anyone know if it’s possible with Defold to run some Lua code in a separate thread? I wouldn’t mind the slow decoding if I could do it asynchronously and have a progress bar. Otherwise I guess I’m waiting for Native Extension support to be able to improve this feature.

6 Likes
#13

Excellent work Ross!
There currently aren’t any way of implementing threading through lua that would suit your needs as described above. There are coroutines, but that is not the same thing as threading and won’t really work in your case. You can otherwise read up on those in documentation and examples.
What you can do at this point is to use native extensions and create your own working thread(s) and add your own png decompression library (hint, check whether the lib in itself is supporting threading internally).

Note that we will eventually support WebP compression asynchronously, like ZLib compressed images are now.
It doesn’t help the case of png here, but if we see a need of supporting png likewise, it should be added in a ticket.

4 Likes
#14

Thanks Andreas, that’s good info. I can’t wait (!!!) until Native Extensions are working on windows so I can start messing around with them.

I made some significant usability improvements to this in the last couple days. I started using it for my asteroids game and realized it was almost unusable for small-scale stuff and had a bunch of pretty bad bugs, so I made it much better.

  • Zooming is fixed to be proportional instead of additive so it works nicely at any zoom level.
  • The vert and edge sprites scale with zoom so they remain the same screen-size no matter what.
  • Mouse collision detection for dragging verts is also zoom-independent now.
  • Fixed bugs with multiple verts appearing hovered.
  • Made verts actually snap to the grid. (before it was just the cursor, the vert maintained its offset)
  • Made coordinate display match the vert’s pos when dragging.
  • Added checking if the polygon is concave! It will highlight any verts that are an issue.
7 Likes
#15

I took another pass at this today . . .

  • Way Better Image Loading! - Thanks to Britzl I learned I just need file:read() and image.load() to quickly and easily load images from disk and put them onto a GUI node. The files don’t need to be bundled in or any of that nonsense, it loads as fast as anything (about 32000x faster than my old code…), and it supports most jpegs (non-progressive ones), gifs, and possibly other formats?
  • Premultiplied image colors so transparency displays correctly.
  • Native Save/Load Dialogs & broke Linux compatibility - I hooked up Sven’s Def-Diags extension to make saving polygon files and loading overlay images waaay nicer. Unfortunately this breaks compatibility with Linux until Native Extensions are available for Linux. If you want to use it on Linux just grab the repo from the commit before I did this. But for everyone else, it’s really nice! Now you can actually save your polygon files wherever you want, name them, overwrite old ones, etc. Also you don’t have to laboriously type in the exact file path to load in overlay images.
  • A few other little bug fixes and usability improvements.
9 Likes
#16

So is it on the Asset Portal yet? http://defold.com/community/
Because it very well should be :stuck_out_tongue:

6 Likes
#17

Awesome that you are using the Def-Diags library, makes me happy! :slight_smile: I’ll look into the Linux support as soon as we have support for it in native extensions. I know the library I use has Linux support, so hopefully it shouldn’t be too hard.

4 Likes
#18

@Oleg_The_Evangelist Haha. Hey, it’s only 7:30 AM here! It’ll get there.

@sven Having native dialogs makes me pretty happy too! It’s so awesome. Yeah, I saw that the library has Linux support, which is great. I decided to go ahead with it, figuring it would only be temporary breakage. Thanks for making the native extension!

1 Like
#19

Hey @ross.grams, you should add this to the Asset Portal!

6 Likes
#20

Oof, how the heck has it been 25 days?!

It’s up! https://www.defold.com/community/projects/58981/

9 Likes