From The Blog: Using Tiled for layout and level design

Getting Started Announcements
#1

In this special video series, Michael Wilson from Ponywolf walks through installing and using Tiled as a layout and level design tool. In specific, he explains:

  • The difference between object layers and tile layers and how object layers can be used like display objects in Corona.
  • How to use Tiled to design a level by composing game elements together into a simple scene.
  • How to add custom properties to game elements within Tiled that can then be accessed in Corona for programmatic manipulation.

Michael also shares insights into the creative game design process and how his team comes up with games like Sticker Knight, Time Golf Squad, and Skipchaser.

This series is full of great tips. Don’t forget to subscribe to the Corona Labs YouTube channel for more great videos!

Using Tiled – Part 1: Installation and Tiled Basics

Using Tiled – Part 2: Object Layers versus Tile Layers

Using Tiled – Part 3: Composing Scenes

Using Tiled – Part 4: Custom Object Properties

Bonus Videos

Sticker Knight Game Design: Brainstorming Ideas

Sticker Knight Design: Game Design Checklists

The complete Sticker Knight project can be downloaded from GitHub or from the Corona Marketplace. If you found these videos valuable, please watch the Match 3 Space RPG videos covering Ponywolf’s Match 3 game template for Corona.

Questions or comments? Join us in the Corona Forums.

View the full article

#2

This is great. I can’t wait for the next ones to come out.

#3

It would be very helpful if you would release the Tiled maps for the Sticker Knight Platformer game demo on the Corona Labs git.

#4

It is here… https://github.com/coronalabs/Sticker-Knight-Platformer/

#5

@no2games

Sorry I was looking for .tmx files and did not realize that tiled can open .json files… very cool.

#6

Ah… sorry about that. Yes, JSON is just easier to work with than .lua or .tmx files. The latest version of Tiled comes with the Sticker Knight Maps in TMX format as a sample.

http://discourse.mapeditor.org/t/tiled-0-18-0-released/1897

Pretty cool.

#7

@no2games

Is there an easy way to not have the physics shapes offset when viewing in hybrid mode?

#8

I wish. It’s a known issue…

#9

nice video series.  i’d have liked to seen you take your strategy (of tagging functionality by class name within tiled) one step further and build-in the auto-wiring of button events (when using tiled as a “screen designer” like main menu) - that bit of wiring code in your menu scene is left feeling a bit kludgy, given the rest of your framework – and would seem possible with just a tiny bit more glue in your loader, fe…

imagine a subclass of a generic button called “GotoSceneButton” (with the implied behavior) and a property “sceneName” defined in tiled, set to fe “scene/game”

imagine a subclass of a generic button called “ShowLayerButton” (with the implied behavior) and a property “layerName” defined in tiled, set to fe “help”

eventually, another button subclass called “LoadLevelButton” (with the implied behavior) and a property “levelName” defined in tiled, set to fe “world3level7”, and you could even design your “level select” screens in tiled.  (perhaps in combination with a “LoadWorldButton”/“worldName” button/property if you needed a two-stage selection screen)

fwiw, cheers :slight_smile:

#10

Funny you should say that… We actually have some “button” classes but I didn’t want to confuse people by adding another layer of abstracted classes in. Our button classes do few cool things:

  1. Listen for mouse events and get scale up on mouseOver

  2. Listen to touch events and scale down on push

  3. Listen to keyPress events for a shortCut key  

  4. Broadcast “pressed” and “released” events that have an event.buttonName that pass the name of the button

So it becomes super-simple to build a UI with a single listener that has something like this in it

onUI(event) local phase, name = event.phase, event.buttonName if phase == "released" then if name == "play" then composer.gotoScene( "scene.game" ) end end end Runtime:addEventListener("UI", onUI)

In the game we are currently working on, we build all of our UI (including level select) in tiled, but I haven’t refactored it into the new UI classes. Once I do, I’ll have a nice test case to work with…

Aq2N7vk.gif

Eventually I’d like to build toggles, sliders, etc. and release a Tiled GUI project.

#11

Is that the end of the video series? Or as mentioned there are plans for more? I just don’t at the moment understand the leap from what you showed to the actual game. Is there an exporter? A tool you run the tile file through?

#12

Yes. There are more on the way… More nuts and bolts of loading files and adding properties.

#13

This is great. I can’t wait for the next ones to come out.

#14

It would be very helpful if you would release the Tiled maps for the Sticker Knight Platformer game demo on the Corona Labs git.

#15

It is here… https://github.com/coronalabs/Sticker-Knight-Platformer/

#16

@no2games

Sorry I was looking for .tmx files and did not realize that tiled can open .json files… very cool.

#17

Ah… sorry about that. Yes, JSON is just easier to work with than .lua or .tmx files. The latest version of Tiled comes with the Sticker Knight Maps in TMX format as a sample.

http://discourse.mapeditor.org/t/tiled-0-18-0-released/1897

Pretty cool.

#18

@no2games

Is there an easy way to not have the physics shapes offset when viewing in hybrid mode?

#19

I wish. It’s a known issue…

#20

nice video series.  i’d have liked to seen you take your strategy (of tagging functionality by class name within tiled) one step further and build-in the auto-wiring of button events (when using tiled as a “screen designer” like main menu) - that bit of wiring code in your menu scene is left feeling a bit kludgy, given the rest of your framework – and would seem possible with just a tiny bit more glue in your loader, fe…

imagine a subclass of a generic button called “GotoSceneButton” (with the implied behavior) and a property “sceneName” defined in tiled, set to fe “scene/game”

imagine a subclass of a generic button called “ShowLayerButton” (with the implied behavior) and a property “layerName” defined in tiled, set to fe “help”

eventually, another button subclass called “LoadLevelButton” (with the implied behavior) and a property “levelName” defined in tiled, set to fe “world3level7”, and you could even design your “level select” screens in tiled.  (perhaps in combination with a “LoadWorldButton”/“worldName” button/property if you needed a two-stage selection screen)

fwiw, cheers :slight_smile: