Grid-based movement
Now, we will set up the PacMan sprite.
Create a new Sprite, and rename it PacMan. In the Animation frames window, right-click and choose "Import sprite strip...", and choose the image from the beginning of this tutorial containing the PacMan and Ghost images. The number of horizontal cells is 14; the number of vertical cells is 4. Delete all the frames that do not contain an image of PacMan. In the Properties panel, set Speed to 8 and Loop to "Yes". Then in the Animations window, right-click on "Default" and choose "Duplication". Do this a total of three times, so that you have 4 animations. (This saves you the bother of recreating each animation from the original spritesheet.) Right-click each of the animations and rename them "A0", "A90", "A180", "A270". In the A0 animation, delete all the frames except the two where PacMan is facing to the right (facing an angle of 0 degrees). Similarly, for the A90, A180, and A270 animations, delete all the frames except the ones where PacMan faces Down, Left, and Up respectively. Close the Image Editor; we're done here.
Next, add the Bullet behavior to the PacMan sprite, and set the default value of Speed to 0. Also, add the following instance variables to PacMan:
* Direction (number) - this stores the angle of movement that PacMan currently has. Set the initial value to 0.
* MoveDuration (number) - this stores the number of seconds required for PacMan to travel the width of 1 grid tile. Set the initial value to 0. (Feel free to adjust this later if desired.)
* TargetX (number) - this stores the X coordinate of the grid square that PacMan is travelling towards. Set the initial value to 0.
* TargetY (number) - same as above, but for the Y coordinate.
Next, add a Keyboard object to the layout. Also add another sprite and rename it to "CollisionDetector" (or something similar). For the image, you can use the square below:
However, any square image smaller than your grid squares will work. In the properties panel, set the initial visibility of the CollisionDetector sprite to "invisible".
Finally, we will head over to the Event Sheet. First, add a global variable called "TileSize" and set it equal to 32 (the width, in pixels, of each grid square).
Then right-click to add a Group, rename it to "PacMan Movement". Even if you have a limited number of events, using Groups to organize your code is fundamental to keeping it organized and readable.
Rather than type out all the events by hand, below is a screenshot showing you the events you need to enter. Pay careful attention to which events are subevents of others, and the code will be explained after the image.
We control PacMan's movement by "turning the bullet speed on and off", that is, by setting it to zero and nonzero values. Since PacMan can only move by entire grid squares, we only process keyboard input when he has finished a move and is centered on a grid square, which is signaled by PacMan's bullet speed being equal to zero.
Therefore, when his bullet speed equals zero, we check to see if any of the directional arrows have been pressed. If so, we set the instance variable "Direction" to the corresponding angle (0 = right, 90 = down, 180 = left, 270 = up). Next, if any of the arrow keys have been pressed (note the use of an OR block here), we calculate the target X and Y coordinates of PacMan, store them in the corresponding instance variables, and set the coordinates of CollisionDetector to that location. If the CollisionDetector sprite overlaps with a Wall sprite, then PacMan cannot move in this direction and nothing else occurs.
However, if there is no overlap, then the magic happens. In this case, we set PacMan's bullet speed to the value necessary to cover TileSize amount of pixels in MoveDuration amount of seconds. We also set the bullet angle of motion so that PacMan is moving in the correct direction. Converting the Direction to a string, we also activate the corresponding animation of PacMan traveling in that direction (this was why we named the animations in the way we did, rather than using the more obvious "Up", "Left", etc.) And then we use the System wait command. The really great thing about this command is that the following events in the event sheet will run (so, for example, the ghosts we will add later will continue moving); only the actions following the wait command are delayed. (For more information, see the tutorial http://www.scirra.com/tutorials/56/how-to-use-the-system-wait-action.) We wait for MoveDuration seconds, exactly the amount of time PacMan needs to complete travelling to the next grid square. Because his bullet speed is not zero during this time, the above events will not take place again until the move is complete. Finally, after the system wait command completes, we set PacMan's X and Y coordinates to what they should be (which corrects for any fractional errors, essentially "snapping PacMan to the grid"), and we set bullet speed back to zero, which allows the event sheet to process additional keyboard input for moving PacMan.