Rpg Maker Developers Group

Hi everyone, as the title says this is a tutorial to make a sliding puzzle. It needs a couple of events, pictures and a lot of patience, because it has a lot of conditional branches and requires some effort to picture visually where every piece of the puzzle is. Just keep in mind that the more number of pieces you use, the longer the event will be. As an example I will make a 9 pieces puzzle.

• First take your picture and chop it down into pieces. For this kind of puzzle the pieces need to share the same proportions (I made a square to keep it simple, 187x187cm), if you want to make a sliding puzzle like a klotski I guess you could take this tutorial as a base and modify it according to the different sizes piece by piece.
  

• Then assign a fictional number to the positions of the pieces on the screen ("screen numbers"). This number will represent the X and Y position of every picture(piece) on the screen.
  • To know easily which X and Y you should use, just place the upper left piece wherever you like and add its width or height to the next piece. For example, I placed the first one at 30X and 30Y. Since all my pieces measure 187x187cm, the second picture will be at 217X(30+187) and 30Y, the third at 404X(217+187) and 30Y... if you get lost with numbers is easier to visualise the puzzle and write down these coordinates as a reference, since you will need them to move around the pictures. You will have to determinate your own coordinates according to the dimensions of your pieces, and it is advisable to check that the puzzle looks good in game before making the whole event.

• Now create a variable for every piece of the puzzle, including the "invisible one" (piece#9) (so nine variables). I named them piece#1, piece#2, piece#3... to make it easier. (on the example pictures piece#11, piece#12...)
  

• On the first Common Event (or first page of a normal event, I just like to make the puzzle templates on a CE but it can be done on a map event), control the nine variables you just made, and assign a "screen number" to each of them. The variables CAN'T share the same screen number. The main point of this is that all the pieces of the puzzle (variables) will always have a different number assigned to them, so they can't coincide on the same spot at the screen.
• Then show all the pictures on their respective positions (X and Y). You can add a base for the puzzle as long as the number of the picture in rpg maker is lower than the number of the pictures of the pieces.
• Finally turn on a switch (or a self-switch if you are making it on a map event) to activate a new autorun common event.

Now is time to fill the main autorun common event we just created. We will use the variable piece#9 (the invisible one) as the referent/"pivot", because it is the one that will always exchange positions with another piece.

• First make 9 different conditional branches, one for every position or "screen number" the invisible piece can be and make one extra for the Cancel button, to exit the puzzle:

Inside the Cancel conditional create a label (here named "Exit"), erase all the pictures shown and turn off the switch or the self-switch of this autorun event.

• Now inside every conditional branch (except the cancel one) create a loop. Inside every loop create a new conditional branch for every direction button we need to press in order to move the pieces around, and finally one for the cancel button. Insert a break loop inside every directional button condition and a jump to label "Exit" inside every cancel.

This is how the event would look for now:

Protected download

• Next step: inside "If direction button X is pressed down" and before the "break loop" you have to make (again) 8 new conditional branches, one for each piece except for the piece#9, and all of them will be set to the same screen number location, always keeping in mind the whole picture of the puzzle and the position of the pictures on the screen (check the example ahead, at the end I will include a full picture).
  • We have no way to know what piece of the puzzle will be next to the invisible one when we push the direction buttons, because the player might have moved them all around, so we need to create a command for every single piece (that is why the more pieces you use for a puzzle the longer the event will be).

• Finally inside those new conditional branches we will move the pictures and modify the variables accordingly: for example if variable piece#9 (the invisible one) is at position 1 (30X, 30Y) and variable piece#3 is at position 2 (217X, 30Y), we will switch their locations with "move picture" command (send picture#3 to 30X, 30Y and send picture#9 to 217X, 30Y), then set the variable piece#9 to 2 and set the variable piece#3 to 1. (I suggest changing the time to move the pictures to 10 frames and set a small waiting time after it instead of "waiting" for the picture to finish moving. Either way the first picture to move should never have a waiting time, so the two of them can move at the same time.)

Once you have done one full conditional branch you will see a very schematic pattern, and is easy to copy-paste most of the branches just modifying the coordinates and the variables keeping in mind the puzzle screen positions (the most important part).

This is how the full first conditional branch would look in the rpg maker event:

• Finally, once we have filled all the conditional branches of the event, we need to add another command to let the game know that the puzzle is "done" when playing. On the last conditional branch tree (*If variable piece#9 is = 9) we will do an "ultimate" condition: if piece#8 = 8, if piece #7 = 7, if piece#6 =6.... as in: if every piece is where it is supposed to be, we will turn on a new switch, or modify another variable, or make whatever we want as a prize for completing the puzzle (for example opening a secret door, or making an npc to give you a special item). Then we will erase all the pictures shown, break the loop and turn off the autorun switch. Optionally we could turn on a new switch or self-switch to make it impossible to access the puzzle again to repeat it.

This is how it would look like:


Now that the puzzle is done you can go back to change the initial position of your pieces on the first common event. If you want to check the puzzle freely just change any number in the "ultimate condition" (for example piece#1 = 1000) so the completion switch won't turn on.

And that is it

If you have any doubt or need more examples let me know.