- Joined
- Mar 2, 2012
- Messages
- 43,882
- Reaction score
- 15,375
- First Language
- English
- Primarily Uses
- RMMV
In response to this request, this tutorial shows you how to set up a sliding picture puzzle in Ace.
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 3
Use a region to draw over the area occupied by your puzzle (including the missing piece in the lower right corner). Make a note of the region 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.
Step 4
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 region 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 5
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 6
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, and write a little Call Script command to make each event remember its position.
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).
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.
Use a region to draw over the area occupied by your puzzle (including the missing piece in the lower right corner). Make a note of the region 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.
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 region 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.
- 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 5
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 6
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:
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, and write a little Call Script command to make each event remember its position.
Last edited by a moderator:
.
