but what... is it good for? ?

Dracoo leveleditor 101

Already since march 2013, our free of charge download game Dracoo the Dragon awaits you in Googles Play store. Now, we are planning on releasing him on iOS/iPhone/iPad as well. I took this opportunity to explain the level editor in more detail. After all, it is public and free accessible and we treated it shabbily after the release. We did not talk about it very much. In fact, we did not talk about it at all I guess. It is quite simple to understand and equally simple to operate. One creates a new level with a certain levelpack online, pushes it to the game server and trys it out in the very instant, still being in the browser. Maybe some of you want to distribute a new and challanging level for Dracoo the Dragon yourself. Or you just play around a little while and get comfortable with the editor.

If you send me some nice levels in JSON format, I will probably set myself to work and review your levels, pack them in a new and free Dracoo community edition or just add them to the existing levels within the actual game. Given they provide our high quality standard.

It would give me great pleasure, if you grapple with the editor and the game itself. The game is created to be played and to have fun with eventually.

So, enough said. How to create a level?

Following this link, you find yourselfes in the editor already. You should see something like this:

In the upper toolbar, you find the levelpack selection, the various mode-switches to set the editor in another mode and on the right hand side everything connected with importing and exporting of your levels. In the main area below the toolbar, you find on the left side the panel to set the level details where you can set the basic settings of the level like flying-speed and level-duration. In this very accordion you can activate a panel named level items. There resides the available elements for your chosen levelpack. Right alongside the akkordion sidebar is the main area, a visualisation of the actual level. This area is empty at first. After you created your canvas, you can start drag'n'dropping the elements into the world and thus create your level.

First, choose your levelpack for the new level. It sets the available elements and the graphic style.

In the level details panel, you need to determine the settings of your level. The flight-speed in m/s and the level duration in seconds. This two settings combined represents the size of the level. The higher the speed and the higher the time (duration) until the level ends, the bigger your canvas will be.

The chili-random-time and open leftside settings are originally designed for boss levels, but can also used in normal levels:

  • If the chili-random-time (n) is not set to 0, it means, randomly generated chili-powerups pop up every 0 to n seconds on a randomly generated position on the screen.
  • The open-leftside setting is activated per default. Deactivating it means, a invisible wall is added on the left side behind dracoo, preventing him and the enemies to leave the screen.
    Anyway, use this settings with caution (or, better, leave them as they are) because it is most likely they do not add to the fun factor.

Last but not least you should pick a background track for your level with the music drop down. Once these settings are done, press on 'create canvas'. Now you're good to go.

In the main area the grid where you put your objects appears. The distance between the grid-lines are exactly 0.5m in the game world.

After your canvas is created, the level details panel disappeares, while the level items panel appears. These objects are ready for use in your level. Select an element in this list to insert in the level.

Be sure to have the creator mode active. If so, every click in the canvas creates the selected object from the level items panel.

In this image, we created 3 square elements. Of course we not only want to create, but also align elements and put them in the right spot within the world. To do so, end the creator mode by clicking the 'creator mode' button once more.

If no special mode is active, you are free to grab the objects on the canvas and pull them wherever you like. simple drag'n'drop.

Caution: The creation-order determines, which objects are in front of other ones. If some objects overlaps, you can only manipulate the foremost object. An object is always a full rectangle. Even if parts of the object are translucent or not visible at all, the object behind the foremost rectangle cannot be touched.

If you activate the erasor mode, your mouse works as rubber. Clicking an object removes it from the canvas.

Overlapping elements are a little bit problematic once again. The foremost object will be erased first.

Not all, but many objects are able to hold more settings and thus can be edited further. Therefor the editing mode is in charge.

Manipulation in this context means, change of behaviour. On enemies for example one can change the direction, the speed and the flight pattern.

If you click on an enemy in edition mode, a setting panel is opened.

Important to know: Enemies are, like all other objects as well, created right outside the visible view window shortly before the player reaches this area. Enemies will start their behaviour from the very beginning. This means direction and flight pattern are already executed when the player does not see the enemy. So, at first contact, the enemy might not be where you placed it in the editor. A slight time (<1.5s) has passed and the enemy has moved on. Maybe you should consider this when you place your enemies in the level.

  • ySpeed: The speed, the enemy is moving on the y axe. The up- and down movement if you like. Motion pattern is not considered here. The values are in m/s. Positive values let the enemy move up, negative down.
  • xSpeed: Take care, some important little information is necessary for this one: The game is made in a way where not the dragon moves, but the world moves at him at a certain speed.  The dragon itself is not moving at all (except the directions you make him move, but not constantly forward). The speed, the world moves torward Dracoo is already set in the level details panel (remember?) at the start of this tutorial. So, to move an enemy faster ahead, its speed needs to be higher than the rest of the world. When you create an enemy, a default xSpeed difference of 2m/s is set. So, if the world is in a speed of 6m/s, a new enemy is created with 8m/s xSpeed to move him forward with 2m/s. If you set 4m/s on the enemy, it seems he is flying backwards. Best to try this out yourself. You get used to this very quickly. Enemies which are rooted and locked to the world, like spitting flowers for example, need to have the same speed as the level.
  • Motion Duration: Every enemy has, independent from its trajectory and its speed, a motion pattern to give it more dynamic and unpredictability. The motion-duration is the time in seconds, a full cycle of this movement takes from start to end to start again. Example: If the enemy flies a simple sine wave pattern, a smaller motion duration makes the enemy flie more hectically up and down. A higher duration makes the movement more chill.
  • Motion Peculiarity: How far the enemy moves away from its origin. Equal to the amplitude in a sine curve linear.inout. Given in metres. If the enemy is to fly a straight line without up and down motion, 0 is to set here. This is important on enemies grounded in and locked to the level like spitting flowers for example.
  • Motion Equation: A selection of various flight patterns and ease methods. Try them out and spot the differences.
  • Motion Infinite: If activated, the enemy constantly does its motion pattern appropriately to its duration, peculiarity and equation. If deactivated, the enemy only does his motion a single and flies streight ahead afterwards.

You have the option to force a break in the game and give some story elements or short text. For tutorial purposes or to communitcate a message to the user.

In editor mode, the pause element can be provided with text, wich will be shown ingame. However, you should consider the limited resolution on some devices. If the text is to wide, it will be cut of left and right. Breaks need to be added manually.

Load, Save, Try

In the upper right corner of the editor, some more important controls are hidden. You need them to export your level as JSON code (for example to send it to me), import it again in the editor or try your level in the browser.

First and foremost I need to give you some information about the level selector and the buttons 'load level' and 'push level'. There is a tryout-version of the game on my webserver waiting for you. This version has, af course, 2 levelpacks with 15 levels each. By choosing the levelpack in the editor and by selecting the levelnumber (1-15), you can replace the level on the webserver with your newly created level by hitting the button 'push level'. You push your level to the webserver in a way. From this moment, everybody who starts the game from the webserver is able to see and try your game.  Of course, everybody is able to simply overwrite your level with his own. Therefor, keep your level in JSON form on your local harddrive. Do not trust your level will be there next time you visit. 

To test your level, you simply press the 'Try' Button.

The game will be opened in a new browser tab. To play the game in the browser, you need the WebGL Plugin for your browser. 

Choose the levelpack, where you have created your new level.

Choose the level slot, where you have pushed your level to.

Try your level. If it is no fun, get back to the drafting board and change it. Then try again. Do this until you have the feeling, somebody else might have fun playing it.

If you have pushed your level to the webserver and want to try it, you unconditionally need to wipe your browsercache beforehand. Most browsers allow you to do this by the shortcut ctrl + shift + del. Otherwise you may not see the changes in your level, because the client does not load the new data from the server but gives you the old data in the browser cache.

Load level is the opposite. This button fetches the level from the server and creates it in your editor.

The export JSON button gives you the level in text form. You might want to save this code somewhere on your hard drive. If you input this code via the button 'Load JSON', your level will be in the editor again, ready to be modified.


Have a nice day creating levels for Dracoo. It would be my pleasure. I'm really looking forward to receive some fun levels. By email, for example.


Last modified onTuesday, 26 March 2019 11:59
Michael Wagner

...is a software developer (focus on App/Webdev, UX/UI, IoT) located in Lower Austria.  When he is not working on new app ideas, web applications or game designs, he teaches webdevelopment at the university of applied sciences St. Pölten. In his spare time he usually plays and streams videogames, tinkers with various webdev tools, does some sports, is making music with cubase and his electric guitar or hitting the fields with his cam. Since 2010, he is certified business administrator for applied computer science, in October 2020 he achieved his Master of Sciences (M.Sc.) degree in "Web and Mobile Media Design" at the Danube University Krems.

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
FaLang translation system by Faboba