: Guide: Platformer game and level editor basics  ( 3602 )

0 1


  • GameCommandoSquad's God of Programming
  • Administrator
  • Newbie
  • *****
  • : 9
  • Reputation: +4/-0
    • Velocitygames website
Guide: Platformer game and level editor basics
« : September 03, 2015, 11:05:15 PM »
I'he heard lots of times that people were struggling with the platformer, and the level editor that got added recently isn't that intuitive either.
To do something about that, I wrote this guide.

Gameplay tips and tricks
The controls are explained in the first level, so I won't go over those, but here are the three most usefull things  to know when playing the platformer:

1) The bounding box of the player is square and does not rotate. This makes it possible to stand on the very edge of a block, even though the player is round.
To make some jumps, you have to jump right before the bounding box leaves the block you are standing on. This means that you should jump when the player looks like it isn't touching the block anymore.

2) The player has momentum. You can jump faster if you run before you jump, instead of starting to run and jump at the same time. For some series of long jumps, you won't get far enough if you let go of the arrow key while in the air or while on a platform in the middle, so if you don't get far enough, remember to keep running.

3) Moving platforms have one-way collision. If you hit a platform, you'll appear at it's top, regardless of from which side you hit it.

The level editor
WARNING: The level editor can only save levels if local storage is enabled. While almost all modern browsers support it, some have it disabled by default, so make sure that it's enabled before you start working on your level.

The controls of the level editor are not explained anywhere, so I'll go over every detail I can thing about right now.
Let's first take a look at the level editor:

This is what all control elements do:
1) The play/stop button: If you click this button, a backup will be taken of the level and you can play the current level in the editor. While playing, the play button will change in to the stop button (which looks like a red square), and clicking this will stop the game, restore the backup so that all objects are at their original location again, and finally reactivate the editor.
It is not possible to edit the level while you are playing it.

2) The block/object switch: This switch changes between block editing mode and object editing mode. In this case, the word 'Block' has a yellow background, which means that we're currently in block editing mode. To switch to object editing mode, click the word 'Object'. To switch to block editing mode, click on the word 'block'.

3) The block selector: This is used to set which blocks you will place in block editing mode. Click on the green arrows to change the block. The active block will appear in between the green arrows, and it's name will appear below it. Clicking on one of the green arrows of the block selector also enables block editing mode.

4) The object selector: This works similar to the block selector, but with objects instead. Clicking on one of the green arrows here will also enable object editing mode.

5) The object properties: These boxes show the properties of the selected object in the editor view, or the properties that will be used for the next object that will be placed when no object is selected. Click on one of the boxes to change the value. All values apart from 'Text' only support numbers. To change the direction of an object, make it's speed negative.

6) The save/load buttons: When you haven't edited anything yet, clicking on any of those buttons loads the level that's stored in it's slot. If a save slot is empty, the button will be grey and not clickable.
If the level has been edited, they will change into save buttons instead. Clicking them will save the level in their slot. If there is already a level in the save slot, you'll see a warning that asks you if the slot should be overwritten.

7) The level: When you open the level editor, the level will consist of a single blue wall block. This block is the top left corner of your level. It is impossible to expand your level further to the left or up than this block.
To make the level bigger, make sure you're in block editing mode, and place a block anywhere in the level. The level will be expanded to the correct size needed to place that block. While doing so, the first block of each row is set to a standard blue wall block, and in the row where you placed your block it will fill the remaining space between the right edge of the level and your block with air (empty space) blocks. You can use this to your advantage to make rooms: start building rooms from their right side and the editor will do a lot of the filling work for you.
It will happen that you place blocks in wrong locations. To remove a wrongly placed block, simply place an other block on top of it. For inside rooms, you'll usually want to overwrite with an air block, for edges of levels, you'll usually want to overwrite it with a black wall block. Removing parts from the middle of the level is simply done by filling those area's with black wall blocks.

If your level gets bigger than the view, then you can pan the view by pressing the arrow keys. You can also enable fullscreen mode by clicking the link below the canvas, but remember to save first because that refreshes the page.

To place some objects in your level, enable object editing mode, select the object you want and set it's properties. Then you can click anywhere within the level to place your object in the level. Objects will snap to the same grid as the blocks. As long as you set the properties of an object while nothing is selected, the properties will be remembered and they will be passed on to each object you place.
You can select objects by clicking on them. When an object is selected, it will blink. The object selector will then switch to the type of the selected object and it's properties will be shown on the object properties buttons. Editing the values on those buttons will then edit the properties of the selected object, instead of setting the properties for the next object you'll place. To delete a selected object, simply press the delete key.
To deselect a selected object, switch to block editing mode, click on one of the green arrows of the object selector, or place a new object.

If your level is finished, then save it in one of your 3 save slots, then refresh the page to return to the main menu. Please also test your levels before sharing them and make sure that they have a player spawn tile and a level goal tile.

To share your level, click on 'Community levels' from the main menu to go to the cummunity hub. There, click on 'Your levels' to see your save slots. You can then play them there to do a final test if you want, and then either click the share link to generate a share code or click the upload link to upload your level to the community hub.
Share codes work completely offline (your level isn't sent to the server) and require no account to use, but, depending on your browser, they may only work for small levels. This may be changed in a later update if I can find a better way to generate the share codes.
Uploading your level to the community hub should work reliably with big levels, up to over 4 times the size of a standard level in the game (assuming that there isn't a crazy amount of objects). To upload your level, logg in to your Velocity Games forum account and click the upload link. You'll then see a form where you can enter a title and a description. If you want a custom image with that, PM one to me, make sure to include the level title, and I'll add it.

That's the end of this guide. I hope that you are able to beat the game now, and maybe make some cool levels too :) I'll personally try out any levels you upload.

If you still have any questions, please reply.
« : September 05, 2015, 01:40:58 PM ben_g »


  • Administrator
  • Newbie
  • *****
  • : 41
  • Reputation: +28/-0
  • You know that Bandos is a god, right?
    • VelocityGames
Re: Guide: Platformer game and level editor basics
« #1 : September 05, 2015, 01:02:31 PM »
Very good explanation!
Don't let your dreams be dreams, JUST DO IT