[Guide] Level Editor

The Level Editor Guide

The Level Editor is one of CodeCombat’s key editors, along with the Thang Editor. All of the levels featured in the campaign are built using the level editor. This guide will give you a brief introduction on the interface and some of the important features of it.

Creating a Level

  1. To start creating a level, you must first create a CodeCombat account. If you’re already logged in, please skip this step.
  2. After you finished creating the level, access the editor. It should look something like below:
  3. Press Create a New Level and choose a level name of your choice and press create.
  4. The editor should look something like the following:

Building the Level

  1. Start by adding a “Hero Placeholder” thang into the level. (Located in “Units”) Click on the icon, then click anywhere on the gray-screen to place one.
  2. Choose a floor from the “Floor” category. Place them in the level and make sure they don’t overlap.
  3. At this stage, it should look like this:
  4. Next, add some “outline” in the level. This is to prevent units from going outside the level zone. Choose “clumps/stands” or “obstacles”
  5. To test what the level looks like, press the play button(Play)
  6. Next, add some enemies to the level. Start by adding a munchkin and press play again.
  7. Now go back to the editor and go to the “settings” tab and open “goals”
  8. By default there is a “defeat ogres” and “save hero” goal. Select. “hidden” in “humans-survive” goal and press delete/backspace and press play. After the level loads, put code to kill the munchkin. You should see “success” show up.

    Voila! You just finished making your first working level! Let’s go on to polish the level.

Polishing the Level

Starter Code

  1. Starter code is vital in providing players with a sense of direction when attempting a level. Go to the “Thangs” tab and double-click Hero Placeholder. Go to the “Programmable” component and open up “plan”
  2. Press the :heavy_plus_sign: button and select “Comments”. Name the comment “Intro”, and type something you want the player to know.
  3. Then, in the source code editor, replace “Should fill in some default source” with <%= intro %>(Keep the //)
  4. Open up “languages” and do the same for the python code.
  5. Press play and press the Refresh button. You should see the comment now in the player starter code!

    Congrats! Now you can provide players with starter code!

Hints Guide

  1. Another useful way to assist players is via. the Hints Guide. Go back to the “settings” tab and open “Documentation”
  2. Select specific articles
  3. Press :heavy_plus_sign:
  4. Choose a name, and add “content”
  5. In the content, you should provide some help if the player is stuck.
  6. Press play, and you should see the “Hints” button show up!

    Woo! Now you can provide players with hints in-case they are stuck.


  1. Without some set decoration, the level will look bland. Go back to the thangs tab, and add some decoration. To prevent collision, select the added decoration, and press Alt/Option + C to toggle off collision! With just a few minutes of adding decoration, your level will look much better!


  1. The referee is a special thang that can control various aspects of the level, including waves, gold spawns, etc. If you are not familiar with JavaScript or Coffeescript, then it is recommended that you review levels using those languages before going forward. Begin by adding a referee in the editor.
  2. Double click the referee and go to misc.Referee. Press :heavy_plus_sign: and add extraCode. (Or extraCodeJS if you’re using JS)

    setUpLevel: Set up level, such as adding thangs before the level loads.
    onFirstFrame: Put actions to happen in the very first frame of the level here.
    chooseAction: Put actions to happen every frame here.
    checkVictory: Useful to check if a condition is met for a victory.
  3. To start off, uncomment onFirstFrame, and add the following code in it and press play.
    Coffeescript: @hero.say("Hello World!")
    JS: this.hero.say("Hello World!");
  4. On the first frame, your hero should say “Hello World!”
  5. Here’s a list of some useful methods in the referee:
  • Getting world time: CS: @world.age JS: this.world.age
  • Defining a hero: CS: @hero JS: this.hero
  • Choosing a thang by ID: CS: @world.getThangByID("ID") JS: this.world.getThangByID("ID")
  • Array of all thangs: CS: @world.thangs JS: this.world.thangs
  • Building a thang: CS: @instabuild("buildable",x,y) JS: this.instabuild("buildable",x,y)
  • Deal damage: CS: thang.takeDamage(damage) JS: thang.takeDamage(damage)
  • Remove from game: CS: thang.setExists(false) JS: thang.setExists(false)
  • Set goal state: CS: @world.setGoalState("goal", "state") JS: this.world.setGoalState("goal", "state")

If you have any questions regarding level design, please let me know in this thread.


Where can I go to level editor?

1 Like

Go to this link:https://codecombat.com/editor/level


Thank a lot.:slightly_smiling_face:

1 Like

You are welcome. @Minh, it will be nice if you could give me some feedback on this topic.


Ok but this is my first time editing so I’m a noob. Cleaver idea to make that topic.

1 Like

Thanks now making a level for you to play to get the basic idea of level editing.


Thank. Also how do you restart?

In what ways? Restart your project?


20 characters…

1 Like

You can undo by clicking here:37


I tried that but it doesn’t work :sob:

1 Like

Try deleting the thang instead of undoing. WARNING: You cannot delete a background.


Damn I mess the back ground up soooo much :sob::sob::sob::sob::sob::sob::sob::sob::sob::sob::scream::scream::scream::scream::scream::confounded::confounded::confounded::confounded:

It’s all right @Minh you can learn from those mistakes. Try making a new level then.


Is there a way I can delete the level?

1 Like

I don’t think you can. :sob:




I know how it feels.


@Minh play this. I made this level for you: Level