Gumbo - A Corona Level Design Tool

I made a topic about this about a week ago in the "New Users Start Here" sub-forum, but I think it belongs better here or in the Game forum (and I couldn't move/edit the old one because of some forum bug). I called it "Corona Rapid Prototype", but the name was confusing and I wasn't really happy with it.
You can find the original post here.

I now call it Gumbo. Okay, that might be confusing too, but at least it sounds good. And tasty.

Gumbo is a drag and drop tool for creating Corona maps/levels/GUI. You can easily create objects that you give properties, images and physics. You then click a button to generate Lua code, which you can copy and paste into your project. Within minutes you can have a working prototype.

The result:

Features including:
* Create objects and move them around
* Resize/crop objects
* Rotate objects
* Clone objects
* Add physics
* Keyboard shortcuts
* Create Lua
* Polygon Shape Editor

Limitations including:
* No saving. Waiting for a more complete structure before I implement that.

Try it here:
http://www.nerderer.com/Gumbo

What's new in the latest version of Gumbo is the Polygon Shape Editor. It lets you create your shape simply by clicking where you want the polygons to be placed.

How to use it in some simple steps:

1. Add a new object by clicking the Plus icon (or shortcut N on the keyboard when the canvas area is selected)
2. (Check "Resize to image size". This will resize your object to the dimensions of your imported image.)
3. Import the image you want to use
4. Check "Use physics"
5. For Body shape, select Polygon
6. Click "Edit shape"
7. A window for editing your shape will now show. Click on the image to start creating your shape.
8. Save and Close
9. To export your shape and object click the Lua icon at the top of the page

Hey the polygon shape editing looks really cool!

I assume you're limited to 8 points shapes like Corona. Anyway you can add more than 1 complex body to a single image seamlessly?

Yes, only a maximum of 8 points.

At the moment there is no support of multiple shapes in one object. However, I do agree that it would be very useful, and I've already been thinking about adding support for it.

I f@*#ing love you Gumbo! (that lines from a film in case anyones wondering)

Seriously though, this tools looking better all the time. Any plans for an offline version in the future?

Nerderer, this is pretty cool!
I agree with offline version.
Once your webapp becomes more popular, it could bring your site down.

Try compiling all into Adobe AIR.

Keep up the good work :)

RD

Adobe Air probably wouldn't work, but that's okay.

There's built in support for "detatching" your application in Silverlight 4. This will make it work outside of the browser, and it'll behave more like a normal desktop app. There are some things I'd have to do to make it work, but I promise that I will look into it. You can also include an icon for it when it's offline, so if anybody feels like drawing a nice Gumbo-icon...

Hi,

Just had an idea for a logo and thought you may like it.

It is a highly simplified shrimp (one of the main ingredients of Gumbo) in the shape of a G.

It's more of a brain fart really but I can work on it if you are interested.

Damn i was just making something similar to this.

Edit : I see yours is online based, my program is a native mac osx application.

Maybe i should finish it, no harm in a little competition right? :)

@Nerderer, use the gamesalad bowl and fill it with shrimp ;)
hahaha...sorry, couldn't help it :P

On a serious note, I would like to know how we could utilize your tool with 'Lime'.

On a side scrolling / platform / RPG game, we need to make big backgrounds, your tool only shows iphone/ipad sizes, no room to properly layout (I tried adding an image 1024px width on iphone mode but the scrollbars didn't work).

@infusedreams, perhaps you could add the missing pieces that GS needs into yours.

Just a thought.

RD

Hey, that shrimp is not too bad. I was really thinking more about a bowl with gumbo, but this might just work too.

Yes, I'm aware that the scrollbars won't show when you add something that's bigger than the canvas area. I just noticed it yesterday, but I'll try to fix it within a few days.

Rdcube : Mine is for Corona not GS :P

Whoa. This is awesome! And love the suggested logo - it's very appealing (and tasty-looking)... +1 vote :)

How does this differ to SpriteDeck?

Well, it was released a week before SpriteDeck and it's free. When I started making this tool there was not anything similiar, besides Lime, which is in a way very different. To be honest I believe that SpriteDeck was released earlier just because they saw my tool.

SpriteDeck seems like a really nice tool though, and probably has lots of functions that Gumbo is missing.

Cheers Nerderer.
I'm just starting my adventures with Corona and have a SpriteDeck licence, so I'll try put both applications through their paces and see how they stack up!

I'm sure that SpriteDeck is more more competent in most areas.

However, I started building this since there was no other tool available. I started doing that three weeks ago, on my free time. I thought that other people might enjoy it too, so I shared it.

SpriteDeck on the other hand is built by, I quote, "one full time and one part time developer". That's a lot more time to develop.

I have one more positive thing about Gumbo, besides that it's free, that you can't do with SpriteDeck - you can use it on any computer that's connected to the web.

First of all. Really great app for what it does.

There are three things I would like to see though.

The ability to add more than one physics shape to an object. That would be perfect.
Secondly I really would like to see an offline version that I can just run locally on my computer.
Finally the ability to import multiple png files at once and drag and drop them into the stage.

For simple layout work it is very good.

Thank you

Mike R

I've just fixed one of those requests.

Gumbo now works offline!

To install it, right click anywhere in the application and select "Install...". Automatic updates should also work, even from the stand-alone version. If you want to uninstall it again, just right click anywhere and select the uninstall option.

I had to make a minor change to the keyboard buttons though. In Mac, in the offline version, you'll have to use Cmd/Apple to rotate objects instead of CTRL. In the webversion you can use both, though.

Oh, and the offline version works both for Windows and for Mac. You'd still have to have the Silverlight runtime installed (which you must have to be able to install Gumbo in the first place...).

Thank you very much. Off to play around.

Cheers

Mike R

First of all this tool is amazing, thank you for your hard work.
I was wondering, can you add the ability to scroll in the gumbo workspace? for example i have a racing game, the length of a level can get rather long, so once my track goes off to the right of the work space i cant scroll over to add more track (hopefully that makes sense) could this be added? or is it there already and im just retarded?
thanks!

I used your icon, mrmdesign, it works really well. Thank you! If I'd done it myself it would probably look like a pink banana.

Yes, the scrolling part that won't scroll is a known bug. I'm working on it. Hopefully I'll have a fix this weekend.

If anyone has considered using Gumbo they have probably seen that there have been some comparisons of Gumbo and Spritedeck (which has been getting a lot of attention in the passed couple of days) so I wanted to give my 2 cents.

Spritedeck is also a nice tool. There a couple of things I like about it that Gumbo doesn't do (to my knowledge): Rotation of images (by entering r value) and handling of animations.

I like that Gumbo will let you just draw an image. I can't do that in Spritedeck. I'm trying to lay invisible touch points (buttons) over some text in an ebook app and this has been tremendously helpful. Editing physics properties and polygon shapes are also welcome features.

I'm sure I've missed a few things about both of these app but I just wanted to give my 2 cents and share in the love of Gumbo.

Thanks for the hard work on it, Nerderer

EDIT: Oops I see that Gumbo also has image rotation. Sweet!

Great!

An offline version was one of my biggest wants / needs for Gumbo at the moment.

I am glad you like the logo and decided to use it. I can improve on it if you want though. It was just a brain fart initially but I am happy I have contributed to the project in some way.

Well done on creating a great tool!

All the Best,

Marc

Well, I'm quite satisfied with it, but if you yourself feel like improving it then go ahead. I mean maybe there's something about it that you're just not happy with, and it annoys you so much that you just can't sleep at night.

Anyway. New update again. The scrolling part should now work. You can define the size of the canvas area (the gray part outside of the black display), so there's plenty of room to add objects. The new button beside the size textfields centers the display area on the screen, so if you make a huge canvas and you can't find your way back home again, just press that button.

I'm thinking about adding support for z-index/depth on the objects, but I'm not sure how it should work in the Lua code. I believe there are some functions for bringing objects to the front or sending them to the back, but that's pretty much it. An solution would be to render the code for the objects after which z-index they have, so the items with the lowest z-index will be rendered first in the code. Is there any better solution?

Fantastic work as usual.
With regard to your last comment-
"Well, I'm quite satisfied with it, but if you yourself feel like improving it then go ahead. I mean maybe there's something about it that you're just not happy with, and it annoys you so much that you just can't sleep at night."

I would love to try and help out if possible. Just tell me whats needed and I will see what I can do.

Cheers

Mike R

We're talking about the icon. The shrimp. ;)

lol. Of course you are after I re-read it. I thought maybe you were in a ummm bad place for now. :D.

Cheers

Mike R

Any chance of the ability to move objects back and forth through the layers? Not really important as I can swap the code positions later but nice when building levels if I suddenly decide I want to adjust the positioning of an item.

Also no idea if its possible but how about the ability to save the project as set up for re-editing later.

Thank you again for this.

Mike R

Hi Mike, I think that's what he meant by "support for z-index/depth". I also requested that feature. I second your idea to save a project as well.

I totally agree that Save/Load is a very important feature. It wouldn't really be hard to program. It would of course be saved in its own format, probably XML, since i'm sure that parsing Lua code would be a lot harder.

The problem though, at this moment, is that newer versions of the application might break the parsing of older save files. Especially since I might make some radical changes in the code. So, that's a risk you'd have to take.

@Nerderer, I love you so much.

I guess I am a nightmare person always wanting more. :D

Anyway is there a chance for a new text field that I can enter a group name into.

This is so that for each object it will insert it into the stated group and save me having to go through it all doing it manually. (lazy I know.)

So basically there will be a final line generated by the code similar to the following

"group taken from text field":insert(name of object)

Thank you

Mike R

@Evna. Thank you. You are my biggest fan. Well, no, actually I believe that mykyl66 is my biggest fan.

@mykyl66. Greed is good. That's what Gordon Gekko said. So it's okay to ask for more functions. It's not a bad idea, so I'll keep it in mind. I have some higher priorities though.

This is fantastic! I'm already messing around with it some using the physics engine and such. This is an extremely important tool and I will probably be using this a lot now!

Thanks!

Oh dear, I have yet another thought. :) How about a way to add your own fields into an object.

So lets say I want to add a name field into my MainCharacter object.

if there are two text fields I can add into the left hand one name and the right hand one the name I want to add to that object. You then pres a button or whatever to store that information.

so the output would have added a line from those two fields as MainCharacter.name = "MyName" when you generate the lua code.

Perhaps I want to add a field called id. In the left hand text field I would add the word Number and in the right text field whatever it will be called, perhaps MyNumber.

This would generate a line of code as
MainCharacter.Number = MyNumber.

So we can add our own extra sections that we may need for an object.

So as an example your code currently outputs the following per object

local dispObj_1 = display.newImage( "Funnel.png" )
dispObj_1.width = 128
dispObj_1.height = 114
dispObj_1.x = 248
dispObj_1.y = 204
local dispObj_1Shape = { -60,-54, 60,-53, 25,-22, -26,-20 }
physics.addBody( dispObj_1, "static", { density=0, friction=0, bounce=0, shape=dispObj_1Shape } )

The above request would have added
dispObj_1.name = "MyName"
dispObj_1.Number = MyNumber

I hope that all makes sense and would once again enable the minimal editing of the setup code for a game.

Thanks

Mike R

You mean like a list with custom properties? Not a bad idea.

Yes. That would be really powerful.

Cheers

Mike R

p.s. I have other ideas but will wait to reveal and gel them in my mind. lol

Is anyone else once building the iOS app and putting it on your phone having it be like 1/3 the actual size? I put in a config.lua and it centered it on my screen but everything seems to be 50% or so the size of what I designed it as, and that is displaying in the iPhone simulator.

Edit:

It only happens in iPhone simulator, everything else including iPhone 4 will display the small scaled down version.

Not seen that issue at all.

Thinking.

my config.lua looks like this.

Mike

1
2
3
4
5
6
7
8
9
10
11
12
13
application =
{
        content =
        {
                width = 320,
                height = 480,
                scale = "letterbox",
                fps = 60,
                xalign = "center",
                yalign = "center"
        }
}
<code>

This is great. Thanks so much nerderer. I just bought spritedeck yesterday. Now I wish I would of seen this first, lol

No, they are both great tools, but honestly I just pull the code out of the lua files that spritedeck makes anyway so this is actually better for me in some aspects, but I've yet to explore all of spritedecks functionality.

Lets all donate to nerderer to help him keep motivated on this great program.

Sounds like a great idea! Everybody should donate! ;)

Anyway, the next update will give you some wanted features. Here's a teaser:

I've been evaluating the windows version of the SDK for about a week now, and I wrote my own little tool (in lua) to do the polygons. Wished I'd spotted this before I did mine (but hey! it was a good learning exercise)

Loving this tool, I'm sure it will be good to convert my flatmate away from a certain other game system, as that has what's been stopping him from moving over.

A small request (apart from your planned load & save :) ) is for guidelines: I'm making the canvas size very long (portrait) and positioning lots of objects off screen, so I can scroll them into view, it would be nice to be able to drag guidelines onto the display so I can ensure that objects placed very low down will not extend off the screen when they are moved up. This may also be nice for aligning objects by eye too.

I am noticing from time to time that it is not allowing me to type any text in. e.g. I want to change the name of an object I can select the text and delete it but it wont allow me to type anything back in. This also happens with the fields for adding density etc.

Thanks

Mike R

Just to let you know ticking "Resize to image size" doesn't appear to do anything.

Tick it before you load the image and it will resize. Like you I had expected it to resize the actual image but at least that is a work around.

Cheers

Mike R

@futurefreak: Yes, I agree that guidelines or some kind of background grid would be nice. I'll see what I can do.

@mykyl66: I never seen this problem myself. Do you know if it happens in just some special cases, or is it more sporadic? Anyone had problems with the textfields?

@futurefreak: I've changed that checkbox in the upcoming version, so it's less confusing. From now on all imported images will resize the object by default. But, yes, it would be nice to have a button to resize already imported images.

views:4377 update:2011/9/19 13:40:57
corona forums © 2003-2011