Composer GUI Beta

Composer GUI Beta

[UPDATE: A new Composer GUI Beta is now available]

Today, we are seeding out a new product that we call the “Composer GUI”, a visual editor that allows you to rapidly create scenes, user interfaces, and game levels!

It allows you to visually design in a drag-and-drop GUI interface. And as the name suggests, the Composer GUI is designed to work in conjunction with the Composer API.

Here’s a quick video to give you a sense for what you’ll be able to do with the Composer GUI:

In addition, we designed the Composer GUI to be an integrated part of Corona Simulator. When you edit scenes in Composer, the Simulator automatically refreshes just like when you edit/save Lua files. You’ll also be able to preview individual scenes within Composer itself for even faster iteration.

As you can see, there are lots of great features. For example, timeline animation and physics body editing will dramatically speed up your app development. We envision Composer GUI being used in many different ways:

  • First, it makes Corona even more accessible by allowing people with no coding experience to get up and running very quickly.
  • Second, it allows experienced developers to design UIs or levels in a fast and visual way and then refine/augment by further coding.
  • Third, it improves team workflow by allowing members like designers to lay a scene out visually before passing it on to developers.

Early Beta Access

Before I tell you how to get access, I want to mention that the Composer GUI is very much a work in progress. It’s beta, but a really early beta. So even though we’ve integrated it into the daily builds, it won’t be visible by default. It’s something you’ll have to “unlock”.

To play with (and unlock) Composer GUI, you’ll need to have a Pro (or higher) subscription:

  1. Download daily build 2014.2264 (Mac only for now)
  2. In Terminal, run the following command:
  3. Run the Corona Simulator and you’ll see an option for ‘Corona Composer’ on the Welcome window. It’s also accessible from the menu: ‘Window’ => ‘Corona Composer’.

Docs

The best way to get up to speed is to go through the tutorial walkthrough which parallels the video, and shows you how to take a starter project and turn it into a really cool sample.

A list of known issues is available at the bottom of the preliminary Composer GUI docs site.

Feedback

We’ve created a special forum for your feedback/comments.

The Composer GUI furthers our vision of making Corona the tool of choice for designing, developing and distributing rich interactive content. It is still very early in its lifecycle, but we are looking forward to seeing how you use it and to your feedback!

walter
38 Comments
  • Peter
    Posted at 08:05h, 17 April

    Yay! It’s early still, but since something similar was demoed over 2 years ago, I’d thought you’d abandoned this idea. Having a GUI like this will attract so many more people to Corona. This is great! I’ll get to work on using this and finding as many bugs and workarounds as I can. Thank you, Corona!

  • Harry Tran
    Posted at 08:23h, 17 April

    This is an awesome feature and I can’t wait for it to roll out for everyone to use. Amazing!

  • Thiago
    Posted at 08:24h, 17 April

    FINALLY, GUYS. Congratulations! And adiรณs, LevelHelper!

    • Andreas
      Posted at 09:01h, 17 April

      While I love Corona and the ease & speed of development the SDK gives me I guess it will be a long way till this is as mature as LevelHelper & SpriteHelper. I did my last game “Freeze!” (six million downloads so far) using these tools, and the features are awesome. Couldn’t have done it without them.

      But on the other hand I understand completely why Corona Labs has to do this and has to offer a GUI, it is absolutely needed to attract more junior developers and to speed up the normal development process for all people not using 3rd party tools so far.

      I just don’t understand why Corona Labs is doing this themselves and why they are not doing a cooperation with e.g. the developer of LevelHelper – I myself hate to re-invent the wheel. And to code a complete GUI that needs to support physics, spritesheets, ideally custom classes for objects, bezier paths for movement, etc. is really a lot of work.

      So I congratule Corona for doing this, but I will not remove LevelHelper & SpriteHelper from my workflow right now (if ever).

      Best,
      Andreas

    • Walter
      Posted at 12:37h, 17 April

      I think Bogdan’s LevelHelper and SpriteHelper are fantastic tools. Lots of power features for game developers. I don’t see Composer GUI needing to be a replacement for that.

      Our approach has been to add functionality to the Lua API (e.g. composer API), and then build GUI features on top of that. This way, anyone can take advantage of them. A good example is when we added particle emitter support (display.newEmitter) to the API. While the parameters are based on properties defined by the ParticleDesigner GUI, the API itself can be leveraged by any 3rd party tool.

  • Dan J.
    Posted at 08:25h, 17 April

    Not having a visual editor was the biggest weakness of Corona, in my opinion… and now there’s this! Wooo

  • rarmstrong5
    Posted at 08:25h, 17 April

    Boom. This is huge, can’t wait to play around with it!

  • Leonardo
    Posted at 08:53h, 17 April

    This is great!! Finally! Thanks !

  • shawn
    Posted at 08:56h, 17 April

    This is Great news. Any chance all of the widgets will be “drag and dropable” that would be an amazing time saver.

  • MarinK
    Posted at 09:28h, 17 April

    Great work, congrats guys! This is one of the biggest things corona sdk was missing!
    I’m gonna test it out in a next couple of days, looking forward to it.

    P.S.
    Does LevelHelper even work on Mavericks? Developer isn’t responding to emails and isn’t updating his apps any more.

    • Andreas
      Posted at 09:35h, 17 April

      Yes, I work with LH & SH on Mavericks and all is fine, even with Graphics 2.0.

      As far as I know he is hard at work on LevelHelper 2 with timeline support (think Flash, so you can add komplex scripted animations etc.) and other stuff, I got a beta version from him because I used LH so much. ๐Ÿ™‚

      Best,
      Andreas

  • Dave baxter
    Posted at 09:31h, 17 April

    Drag and drop widgets would be fantastic as shawn says. Am doing a business type app now and doing the layouts the slowest part.

    Dave

  • David
    Posted at 10:02h, 17 April

    This looks nice Walter. The demo was very well done. I’m sure ya’ll are busy but if anyone ever has the time it would be very informative to know how to accomplish horizontal and/or vertical scrolling. For example, the demo video shows a road – how would this new tool be used to implement the flying saucers chasing the mice in what would appear as left-to-right motion?

    Thanks in advance,
    David

  • MarinK
    Posted at 10:39h, 17 April

    @Andreas
    I sent email to vladu back in october, never anything back from him. Since it works on Mavericks (trial version doesn’t, you cant go to register as trial) I’ve just bought the app. And all works like a charm. Thank you for the info ๐Ÿ™‚

    Will use LevelHelper and coronalabs app for the time being, and I also hope that corona will manage to squeeze widgets in this composer gui ๐Ÿ™‚

  • Alessandro Grigiante
    Posted at 10:55h, 17 April

    WOWWWWW….. Finally Corona has an official GUI tool!!
    This is a very good news and a great step ahead for Corona SDK.
    I can not wait to use the new Corona Composer for the next Corona workshops I hold around the Italy.
    The next one will be in May in Turin and I will change all my presentation with the new Corona Composer ๐Ÿ™‚
    Thanks Walter, very good job!

  • Hector
    Posted at 10:57h, 17 April

    This is a great start, well done!

    I followed the tutorial and I see the use of “getObjectByTag” like this:

    self:getObjectByTag( “plasma” )

    is this a feature of the new scene editor? Where can I learn more from it? I imagine there has to be something to grab an item by its id like self:getObjectById( “plasma” ) or something like that

    Regards
    Hector

  • George
    Posted at 11:38h, 17 April

    That is great news! I was missing that thing so much!
    If you do it it will be great job guys!

  • Benny
    Posted at 11:41h, 17 April

    Looks fantastic. I really needed this when I tried to make an adventure game last year ๐Ÿ™‚ Loooots of pixel corrections.

  • Mo
    Posted at 12:03h, 17 April

    Same question as David above. Is is possible to setup scrolling of the background in a parallax way? (Ie: multiple layers) Also, is it possible to work on a bigger scene than the screen size selected?

    Thanks.

    Mo

    • J. A. Whye
      Posted at 19:54h, 17 April

      Mo, as far as parallax scrolling goes, I used the timeline feature today to create a scrolling foreground and background. By moving them at different rates I got a parallax effect.

      Of course, at this point there’s no “onComplete” or loop or anything like that so once it scrolls one time you’re done, but it can be done. ๐Ÿ™‚

      Jay

  • Peter Dwyer
    Posted at 17:43h, 17 April

    Right off the bat, while I like this, it could really use a tile editor or Tiled map importer.

  • Joe
    Posted at 20:21h, 17 April

    Bug fixing is much more important than this.

  • Mo
    Posted at 22:41h, 17 April

    That’s SUPER cool J.A! I will try it as soon as I get a chance.

    Mo.

  • 17Studio
    Posted at 03:02h, 18 April

    Cool, but still very damp:(

  • miguel
    Posted at 09:09h, 18 April

    amazing!
    How can i import assets?
    thx!

    • J. A. Whye
      Posted at 13:05h, 18 April

      It will pick up assets from folders in the project (and from the root of the project, I believe). So you don’t import assets, they just show up based on images that are in the same location (and below) as the .ccscene file you’re making.

  • GregH
    Posted at 14:15h, 19 April

    Would this be the tool to use when laying out widgets & objects in a business app (non-game) then I’m wondering, which is tedious at the moment? Can you align widgets up against each other or the side/top of the screen such that for whichever device they’ll set themselves accordingly?

    Idea: Would be good if it supported laying out the same view/screen in both Portrait and then Horizontal, so when the user swaps orientation that widgets realign themselves accordingly in the way that makes most sense. (thinking of business apps/widgets here)

  • Gabriel Sieben
    Posted at 09:11h, 21 April

    Wow, great job! I actually only started out with the Starter version of Corona SDK about a month ago. I was hoping this would be available for me to try out with Starter, but I guess I just need to wait 2-3 months. I could just update to Pro, but I (sadly) have no reason for paying that much, especially after I do not know if Corona SDK is for me.

  • Alex
    Posted at 14:17h, 22 April

    If you want to check for complementary options, you should check this posting/tutorial: http://kwiksher.com/2014/04/22/composer-gui/

    Feedback is welcome!
    Alex

  • Ahmed
    Posted at 20:59h, 27 April

    Thanks Walter,
    I can see that Composer GUI is built using Lua!
    have you used Corona SDK desktop for that? if not, would you mind telling us about the framework you have used!?
    Best regards
    Ahmed

    • alexf
      Posted at 05:58h, 28 April

      Hey Ahmed,

      It’s a pure LUA implementation using only Corona SDK.

      alex

  • Ding
    Posted at 19:49h, 12 June

    This is awesome feature. The UI widgets is pure Lua implementation?

  • Athan
    Posted at 02:58h, 20 July

    Hi

    when will this be available for Windows 7 or 8.1?

    Athan

  • KingFerretDino
    Posted at 15:21h, 07 December

    How do i do this on windows 10

    • Rob Miracle
      Posted at 16:45h, 07 December

      It’s only available on OS-X at the moment.