Make Your First Puzzle Script Game

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 puzzle games. It’s most well known for creating block pushing puzzle games like The Nodus. In this tutorial you will make a game, learning the basic functions of Puzzle Script. The next tutorial will begin covering programming.

Level2GIF

Visit the puzzle script website here. Click Make a Game to enter the Puzzle Script editor.

Loading Examples

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’.

SaveAndLoad

SimpleBlockPushingPuzzleGame

You will notice there is now a game screen. Click within the game and press ‘Enter’ on your keyboard.

SimpleBlockPushingPuzzleGame Lv1

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.

Make Your First Game

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.

Edit Lv 1

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.

Make a New Level

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.

usingleveleditor-gif

To pass a level you need to have a crate on all of the targets, so every level needs to have a minimum of:

  • 1 crate
  • 1 target
  • 1 player

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.

NewLevel

Add It To The Level List

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.

presss

Underneath your level editor it should say there was a successful compilation and have a grid of funny symbols, as below.

SaveDesign

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. LevelsListFirstLook

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.

LevelAdded

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.

Saving And Loading The Game

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.

TitleAuthorHomePage

SaveLoad

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.

GameShared

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.

Exporting Games

You can also export the game as a html5 file which can be uploaded to games portals such as itch.ioKongregate or Newgrounds. Just press ‘Export’ and upload the downloaded html file to the games portal.

Conclusions

You can see the sample project I made here. My next tutorial covers the basics of programming in Puzzle Script.

Next Tutorial >

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s