You can either watch this tutorial on Youtube below, or otherwise skip past it and read the text version (not all of the Puzzlescript tutorials are on Youtube yet but I plan to do that eventually).
This tutorial is an introduction to Puzzle Script. Puzzle Script is a free to use program that runs in a web page and is used to create free, small puzzle games that are easy to share. It’s most well known for creating block pushing puzzle games in a similar style to Puzzledorf. You can also use it as a prototyping tool for bigger projects as a quick way to test ideas, which is exactly what I did with Puzzledorf. Below is a quick example of the Puzzledorf prototype.
You’ll notice that Puzzlescript has very basic graphics, which is part of what makes it a quick prototyping tool, because you can get straight into programming and designing levels. Now below is an example of the same level in Puzzledorf. I made some modifications between the prototype and final version, which is exactly why it was useful to get those ideas out in Puzzlescript and modify them; experiment.
In this tutorial you will make a game, learning the basic functions of Puzzle Script. The next tutorial will begin covering programming.
Visit the puzzle script website here. Click Make a Game to enter the Puzzle Script editor.
First let’s look at some examples. At the top of the screen, go to ‘Load Example’ and select the first one, ‘Basic’. Now click ‘Run’.
You will notice there is now a game screen. Click within the game and press ‘Enter’ on your keyboard.
Play the game. Your goal is to push the orange crates onto the black square targets. When each target has a crate on it, you pass. You can press ‘Z’ on the keyboard to undo, or ‘R’ to restart the level.
Now we’re going to make some levels. I’ll design one with you, and then I encourage you to experiment by creating more. Click on ‘Level Editor’ in the top menu.
If you don’t see the level editor screen, click ‘Run’ and start the game. Once you’re inside a level, press the ‘Level Editor’ button again. It will now allow you to edit the level you were just in.
Up top are your game objects. Left click will draw the selected object. Right click will draw the ‘background’ object. Left clicking the edge of the map will increase the mapsize – right clicking will decrease the size.
To pass a level you need to have a crate on all of the targets, so every level needs to have a minimum of:
For now, turn everything to grass with the Right Click. Then, left click the left edge of the level to make it bigger, and finally draw a level that looks like mine below.
When a level is finished, we add it to our level list. In the level editor, click the white ‘S’ next to the game object list to save your design.
Underneath your level editor it should say there was a successful compilation and have a grid of funny symbols, as below.
Those funny symbols represent the level you just designed. Each symbol is a different object. On the left hand side of the screen, scroll down until you see LEGEND. You should see an explanation for each of the symbols:
. = Background # = Wall P = Player * = Crate @ = Crate and Target O = Target
Everything on the left hand side of the screen is the game’s code, split into different sections such as OBJECTS and LEGEND. Scroll down to LEVELS. What you see are the levels that came with the example.
To add a new level, create a new blank line at the bottom of the levels. Then, copy the symbols you generated for your level and paste them in. Your level is now added.
Test it. After making a new level, you have to press the ‘Run’ button again at the top of the screen to reload the game with the new level. Sometimes it doesn’t work as expected, so you have to press the ‘Rebuild’ button, then try pressing ‘Run’ again.
Try making some new levels. When you are ready to save your game, scroll up to the top of the code and type in your own title, author name and homepage; then click the ‘Save’ button.
A limited number of saves get stored under the ‘Load’ menu on the computer you’re using. There is, however, a ‘Share’ button at the top of the screen. Clicking this generates a message with two web links.
One is a link to the source code of your project. The other is a link to a playable version of the game that you can share with your friends. I recommend periodically creating a new link to your source code and saving it in a text document somewhere so that you have a permanently stored version of your project.
You can also export the game as a html5 file which can be uploaded to games portals such as itch.io, Kongregate or Newgrounds. Just press ‘Export’ and upload the downloaded html file to the games portal.
You can see the sample project here. The next tutorial covers the basics of programming in Puzzle Script.
If you enjoyed reading, try my game Puzzledorf.