How to make a Sliding Picture Puzzle

じ☆ve冰风

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

Spoiler





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.

Spoiler





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

Spoiler





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.

Spoiler





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.

Spoiler





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:

Spoiler





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.


本贴来自国际rpgmaker官方论坛作者:Shaz处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/how-to-make-a-sliding-picture-puzzle.19854/