How to make a Sliding Picture Puzzle

In response to this request, this tutorial shows you how to set up a sliding picture puzzle in VX.


Step 1


Resize and/or crop your image so the width and height are a multiple of 32x32 pixels.


Then change the canvas size to 384x256 so the image will fit, unchanged, on a default-sized character sheet. Keep the image in the top left corner, and save into your Graphics/Characters folder with a ! prefix.


For my example, I used one of Ace's RTP title screen images, resized to 167x128, and then cropped to 160x128 (to make a 5x4 tile puzzle).


With Tsukitsune's help, I even managed to pretty it up with bevelled edges for each piece (but since I'd already taken some screenshots for the tutorial before I did this, some images will sho the bevel, and others won't - hopefully it won't be too confusing).

Step 2


Create a common event in your project, and call it Move Slider. Leave the trigger as None. We'll come back to this later.


Step 3


Create an event on your map for each piece of the puzzle, except the lower right piece, and set the graphic to the appropriate part of your image. Initially, we'll place the events so the pieces are in the correct places (the image is complete). This tutorial assumes you have NO other events on your map yet, so the top left event will be EV001, the one to the right of it will be EV002, etc (place them from left to right, completing a row at a time).


Give the event the following settings:


Walking Anim - OFF


Direction Fix - ON


Priority - Below Player


Trigger - Action Button


Command - Call Common Event - Move Slider (the common event you created in the previous step)


You may also want to increase the movement speed to the highest value.

Here's how it will look in the editor, and in-game, when all the events have been set up:

Step 4


Create a new area on the map that covers the puzzle tiles (including the missing piece in the lower right corner). Make a note of the area id, as we'll use it in the common event. This is how we'll know whether a piece can be moved to an empty slot. I created Area 1.

Step 5


Set up the common event.


We are going to check one direction at a time - if the tile in that direction is in the puzzle area and there is not already an event there, that means this tile can be moved there.


As soon as we find a valid move, we'll make it, then check if all the pieces are in the correct place. If they are, we'll process the "puzzle complete" logic.


If no moves can be made in any direction (either the tile under the player cannot be moved because there are other tiles in all 4 directions, or if the only places it can be moved would put it outside of the puzzle area), we'll play a buzzer.

In addition to the variable and switch IDs, you will need to change these values in the Call Script command at the bottom of the event:


- top - the y coordinate of EV001, the first tile in the puzzle


- left - the x coordinate of EV001, the first tile in the puzzle


- width - the number of tiles going across the puzzle


- the id of the switch that indicates the puzzle has been solved


Step 6


Test your game and ensure you can walk over the puzzle pieces and move them around by pressing the space bar. Any tile that is adjacent to the empty spot should move into that empty spot when you stand on it and press space. Any tile that is not adjacent to the empty spot should give you a buzzer SE when you stand on it and press space. If this does not happen, go back and recheck your event settings and the common event.


Step 7


Now you have to move the pieces to their real starting position. You cannot just move them around randomly and put them in any position - that will give you a 50% chance of ending up with a puzzle that's correct apart from two pieces that need to be swapped, which is an impossible move. So you have to begin with a completed puzzle, and move pieces around until you have it as mixed up as you need it to be.


To do this, simply click and drag the events around in the editor, as if you were actually playing the puzzle, only making valid moves. So only move an event that is adjacent to the empty spot, into the empty spot, until the puzzle is as mixed up as you want it to be.


Here's the puzzle, ready to be solved:

Where to go from here?


Well, you might want something a bit more special to happen when the puzzle is solved, instead of just showing a text message. Just replace the Show Text command with whatever you want to happen instead.


You might want to stop the player from moving the pieces around after the puzzle has been solved. In that case, turn on a new switch, then for each puzzle piece event, add a second event page conditioned by that switch, with all the same settings, but no event commands.


You might want to fill in the missing piece when all the others are in the correct place. If you want to do that, add an extra event that contains the missing piece and is conditioned by the new switch used above. Put it out of the way (if you put it in its correct position, the "blank" spot will be occupied, and no pieces will be able to be moved), and in the "puzzle complete" section of the common event, do a Set Event Location to move it to its correct spot, before turning on the new switch.


It might be nice to visually change the puzzle once it's been solved. If you've set up your image so each individual piece is bevelled, you could create a second image of the "completed" puzzle, where the image as a whole has a bevel, but the individual pieces do not. They can fit onto the same character sheet. Then on the second tab of each event (conditioned by the new "puzzle complete" switch), take the graphic from the second version of the image.


If you want to change the player's graphic while over the puzzle pieces (let's say instead of the player's sprite, you just want a 'selector' type sprite), add a new event somewhere out of the way and give it 3 event pages:


Page 1 will be set to parallel process, and will repeatedly check the region id of the tile the player is on. If it's the puzzle's region id, change the player sprite and turn on self switch A.


Page 2 will be set to parallel process and conditioned by self switch A, and will repeatedly check the region id of the tile the player is on. If it's NOT the puzzle's region id, change the player sprite back to the original one, and turn off self switch A.


Page 3 will be conditioned by the new "puzzle solved" switch and will be set to Action Button.


Make sure you change the player's graphic back to the original one in your common event's "puzzle solved" logic - AFTER you turn on the new switch that prevents the pieces from being moved.


If you want to be able to return to this map again later and don't want the puzzle to be reset, you'll need to use a script like this one (modified for VX as needed), and write a little Call Script command to make each event remember its position.

That's the one thing about certain RPG's that I hated, was slider puzzles.  Still, well made tutorial. :thumbsup-right:

Wow, awesome tutorial, I was looking for something like this. I bet, it could work with other stuff, too. Like moving broken pieces around untill they are forming a symbol, something like this.

Step 3 I don't understand how do I cover the puzzle tiles? 

You are creating a map area. Right click on the map and choose New Area. Then draw a rectangle around the tiles taken up by your puzzle. The rest of the map will become dimmed, and the area you've highlighted (which covers the puzzle) will not be.


Areas are normally used for encounters (I think - I RARELY use VX), but they're very similar to regions in Ace, so can pretty much be used to identify "boundaries" in the same way regions can.

In addition to the variable and switch IDs, you will need to change these values in the Call Script command at the bottom of the event:
- top - the y coordinate of EV001, the first tile in the puzzle
- left - the x coordinate of EV001, the first tile in the puzzle
- width - the number of tiles going across the puzzle
- the id of the switch that indicates the puzzle has been solved

​I don't know what here, the event 1 on the puzzle piece or the common events?  I can't find the call script command either. How do I change this?

You are editing the common event. The image highlights the bits you need to change (you have to click on the spoiler button above those instructions to see the image).

On my common events after my jump to label test layout it shows a thing called else underneath of branch end I don't see that up there in your demo, what's wrong with it? 

And I can't move my pieces either, I triple checked everything I don't know if the else has something to do with it.

You get rid of the Else by unchecking the Set handling when conditions do not apply box on the Conditional Branch. If you have the Else statements, you should not have anything between the Else and Branch End statements, in ANY of the common event. If you do, that's probably got something to do with why your events don't move.


If you can't figure it out, make screenshots of your common event, and one of one of your map events (the whole event for that one, not just the code). I thought putting the entire common event as an image would give you everything you need, but I'm guessing you're not setting it up exactly as I've got there. The only things that should be different are the ids of variables and switches if you've already allocated those ones to something else, and that script at the bottom.

Quick question, do I have to change much, if I want to have something like this in Ace?

Shaz kindly also made a tut for this is Ace =]


http://forums.rpgmakerweb.com/index.php?/topic/19851-how-to-make-a-sliding-picture-puzzle/


Shaz - I am wowed by step three.


Are there areas in VX and I didn't realize? I mean _ knew they worked for battles but never thought of them outside the box in VX.- Geez - you can use areas for puzzles like this? This is so cool!!!


Thanks for making these tutorials!


Minigames are my RPG Making favorite! =D

Oh.. I ehm... *digs a hole and jumps in it*


Thanks!

I did the puzzle, (yay) but my pieces can't move left and then I get stuck, what's wrong with that? And is there someway to like reset the puzzle like you get stuck and you reset somehow, or you want to retry it? Do you know thx

Sounds like there's something wrong with your common event still. Specifically, check the bit following the "Can this piece move left?" comment - I bet there's something not quite right in there. Also check the area and make sure it's defined correctly. The script call that checks whether a move is valid, is the same for all directions. Only the setting of the variables beforehand changes. So make sure the variables are set correctly, and if you keyed in the script calls individually, just copy one from a working direction and paste it over the one you have for 'left'.


@Deb, yeah. I have used VX only a little, but I knew people raved about how much better regions were than VX's areas. I had to come up with a way to mimic regions in VX, and I figured if they're used for similar things in the RTP scripts, that I'd probably be able to use areas for this as well. It's not as easy as regions (there's no area_id in $game_map, though it wouldn't be difficult to build one), and the old gripe remains, that it must be square/rectangular shaped. So if your puzzle fits the bill, go ahead and use them.


HOPEFULLY it won't cause battles to happen unexpectedly :D

I checked it for the left in the CE and I made it a + variable instead of a - so I fixed that and now it works, I'm still trying to figure the puzzle out now lol. So I think it worked thanks :)

Its Compatible or Mv?

The script calls would need to be changed to Javascript.

Is their anyway for this thread to be updated because the png files connected to the spoilers don't work anymore?