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
- To start creating a level, you must first create a CodeCombat account. If you’re already logged in, please skip this step.
- After you finished creating the level, access the editor. It should look something like below:
- Press Create a New Level and choose a level name of your choice and press create.
- The editor should look something like the following:
Building the Level
- 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.
- Choose a floor from the “Floor” category. Place them in the level and make sure they don’t overlap.
- At this stage, it should look like this:
- Next, add some “outline” in the level. This is to prevent units from going outside the level zone. Choose “clumps/stands” or “obstacles”
- To test what the level looks like, press the play button(
)
- Next, add some enemies to the level. Start by adding a munchkin and press play again.
- Now go back to the editor and go to the “settings” tab and open “goals”
- 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
- 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”
- Press the
button and select “Comments”. Name the comment “Intro”, and type something you want the player to know.
- Then, in the source code editor, replace “Should fill in some default source” with
<%= intro %>(Keep the //) - Open up “languages” and do the same for the python code.
- Press play and press the
button. You should see the comment now in the player starter code!
Congrats! Now you can provide players with starter code!
Hints Guide
- Another useful way to assist players is via. the Hints Guide. Go back to the “settings” tab and open “Documentation”
- Select specific articles
- Press
- Choose a name, and add “content”
- In the content, you should provide some help if the player is stuck.
- Press play, and you should see the “Hints” button show up!
Woo! Now you can provide players with hints in-case they are stuck.
Decoration
- 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!
Referee
- 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.
- Double click the referee and go to misc.Referee. Press 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. - 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!"); - On the first frame, your hero should say “Hello World!”
- Here’s a list of some useful methods in the referee:
- Getting world time: CS:
@world.ageJS:this.world.age - Defining a hero: CS:
@heroJS:this.hero - Choosing a thang by ID: CS:
@world.getThangByID("ID")JS:this.world.getThangByID("ID") - Array of all thangs: CS:
@world.thangsJS: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.
