Everyone’s Platformer: Level Editor Manual

Oct 24, 2010

What follows is an operator’s manual for the editor in Everyone’s Platformer (Article / Play / Edit), the example 2D game engine I put together for HobbyGameDev in September.

The next few articles will detail the design process and tool creation tradeoffs, but they will make more sense after the editor environment is familiar.

Learn by Exploration

Most controls are explained by mouse over within the editor. The best way to learn is to experiment. Either make changes to the example level, or press New to start with a blank stage. Restarting will fix anything: any changes made will be lost on restart, unless explicitly saved then loaded.

Navigation

Arrow Keys: Run and jump.
This is available within the editor to easily test spatial relationships. This makes it easy to test platforming spacing for distance or height, as well as to identify how quickly the player is able to move through an area.

When a level is designed in an editor that does not allow immediate play, gameplay may take a back seat to what looks nice in the editor. Appearance is important, but only as it will appear to the player: at the same level of zoom, moving at player speed, etc.

WASD Keys: Fly quickly through walls.
The downside to running and jumping in the editor is that reaching an area to edit requires playing through the level to that point. The WASD Keys work around that, making it easy to skip around in the level, whether three screens up or across a tall wall.

Picture of Editor

Red Buttons: General Editor Functions

New: Clear the level, reset the boundaries to minimum dimensions.

Load: Open a level file from the local storage (user’s drive, not my server).

Play: Test the level from the beginning.

Save: Save the current level to a file on the user’s local storage.

Help: Show the editor’s title image, which includes brief instructions.

Grid: Toggle the editor grid, which snaps piece placement to regular intervals.

Yellow Button: Player Start Placement

Player Start: Click to change where the player starts. One per level.

Green Buttons: Enemies Stamp

Note: enemies with horns/spikes cannot be defeated. All others can be jumped on.

Mine: Chases the player when the player gets close. Explodes on contact.

Bat: Clings to the ceiling, occasionally swooping downward.

Dragon Spirit: Flies horizontally in a sine wave pattern, moving through walls.

Ice Spike: Falls downward when the player gets close.

Bouncer Jaw: Moves in a 45 degree diagonal, bouncing off walls.

C. Horse: Hovers in the air, moving in short, angled spurts.

Shock Snake: Rolls on ground, occasionally flies up to the ceiling.

Skull Eye: Slowly moves toward player. Able to move through walls.

Sleepy Spring: Rests with eyes closed between occasional hops.

Slime Spirit: Bounces vertically.

Blue Buttons: Items Stamp

Water Drop: Gives 1 health to player, up to the maximum value.

Prangy Arm: What’s needed to get make a Prangy vanish. Acts as a Key.

Armless Prangy: Blocks player until brought a Prangy Arm. Acts as a Locked Door. When the player brings the last Armless Prangy in a level a Prangy Arm, the level is completed.

Gray Buttons: Level Parts Stamp

Click to stamp these into the level, then press Escape to stop stamping. While one of these shapes is highlighted, press the F Key to mirror it horizontally.

Box: 1 x 1

Pillar: 1 x 4

Ground: 4 x 0.5

Ramp: 4 x 2

Stairs: 4 x 4

Ledge: 3 x 1, with lip at edge

Lump: 5 x 1, uneven

Pole: 0.5 x 4

Purple Buttons: Level Part Controls

Decor Parts: Toggle top menu between Level Parts and Level Decorations.

Use Diff Art: Cycle art sets. The example engine comes with 3.

Piece Edit: Alter the collision data for any Level Part. This is an advanced feature, and is useful only in the downloaded version (source plus compiled swf in the same folder). See additional documentation below.

Deep Blue Buttons: Decorations Stamp

While one of these shapes is highlighted, press the F Key to mirror it horizontally, or press the G key to toggle whether it draws in front of or behind the plane of action.

Bush: Low, wide, to be placed on ground.

Mist: Floating, see-through, to be placed in air.

Tree: Tall, narrow, to be placed on ground.

Vines: Tall, see-through, intended to be near walls.

Tile Segment: Big, tiling, rectangular, intended to be used for underground/inside areas.

Keyboard Keys

Tab Key: Begin Playing from Current Location
Toggles between editor and gameplay without moving the player character.

Delete Key: Remove Highlighted Level Piece
Any level piece under the mouse can be removed by pressing the Delete key.

Mouse Clicks

Left Click: Lift/Drop Highlighted Level Piece
Click any level piece to pick it up, then click again to release it.

Left Click on Edge: Lift/Drop Level Edge
Mouse near a level edge to make the cursor a rectangle, then click to lift/drop.

Piece Edit Mode

The purple Piece Edit button in the top right corner of the editor switches into piece collision editing. This is an advanced feature of the editor, and though it’s perfectly safe for anyone to experiment with, it’s of little use unless you’re making new level art in the downloaded local version. For that you will need both the source and the compiled swf unzipped into the same local folder.

If you want to use a different set of building blocks to make your levels than the ones provided in the demo, graphics can be changed by replacing the corresponding art assets in themed folders under the themeart directory. However, at first they would function in play exactly like the original shapes did. To correct this, piece collision data can be changed in Piece Edit mode.

For example, replacing the 4x2_ramp.png file in each theme’s directory:

../themeart/dungeon/pieces/4x2_ramp.png
../themeart/snowy/pieces/4x2_ramp.png
../themeart/woods/pieces/4x2_ramp.png

…with an image of whatever shape and dimensions are desired for the new level building block, Piece Edit is used to draw a set of rectangles over that image to define its collision information.

In Piece Edit mode, the white shape buttons along the top can be selected to show that shape’s currently saved collision information. Mousing over a red region turns it green, at which point it can be selected for move via left mouse click, or deleted by the Delete Key. When changes are completed for the collision data of one or more shapes, use the green Save button (while still in Piece Edit view) to export the coll.dat file over the original one, which is found in the same directory as the game swf. Again: this is intended for local builds, since that way to can make your own level graphics; you can save/load collision data for the online version that I host, but since only I can modify the level graphics on my server there is no point to customizing collision data if you’re playing the demo on HobbyGameDev.

Note that all themes use the same collision data – i.e. changing the collision data for the snowy steps makes the same change to the forest steps. That consistency is present to allow visual themes to be switched on a level mid/after-development without undoing work put into defining layout. (For the same reason, I suggest using matching sizes and placement approaches for decoration image data.)

Once done in the Piece Edit mode, and changes to collision data have been saved if desired, the purple Back button in the top right returns to the level editor, where any changes made to collision data will be immediately observable in play.

Coming Soon

Stay tuned for the next part: Level Design Process.



Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.




Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!



6 Comments

  1. […] to us a paint brush is different than knowing what to do with it. The previous article was about how to use a level design brush – which is prerequisite to what this entry aims to cover: what to do with […]

  2. […] Platformer: Editor, 3 Level Demo, and Full Source Code(Related: Level Editor Manual and 2D Platformer Advanced Collision […]

  3. […] segments, enemies, and so on. Here is a 2D example, a game editor I created as a demonstration: Everyone’s Platformer (click “Edit” or “editor” links there to try it for […]

  4. […] 4. Tool/Editor – In the same way that Photoshop is a tool for creating or editing images, tools are built for creating and editing per-game content. Tools are used to arrange and configure an engine’s constitutive elements. Example: Everyone’s Platformer Level Editor. […]

  5. […] Everyone’s Platformer Level Editor Manual – Usage documentation for the level editor built into Everyone’s Platformer […]

  6. […] «Videogame Project Management for Hobbyists and Students »Everyone’s Platformer: Level Editor Manual […]

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.