Cloning the Classics: PacMan

11

Index

Attached Files

The following files have been attached to this tutorial:

.capx

omnomnomagon-returns.capx

Download now 408.05 KB

Contributors

Stats

30,970 visits, 89,899 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 23 May, 2012. Last updated 26 Feb, 2019

(Updated June 6th)

In this tutorial, we will create a PacMan clone using the free edition of Construct 2 (version 90).

(The capx file is available for download.)

Setting up a tile-based map

First, you should right-click and save the following spritesheets and images:

When starting a new project, I typically start by going over to the Layers tab, and creating 3 layers: "Background", "Main", and "GUI" (short for "Graphical User Interface"). Right-click in the Layout window and insert a Tiled Background; personally, I prefer a seamless texture with a subtle pattern, such as this:

Just keep in mind that for the player's sake, you probably want some contrast between your sprites and your background.

Back in the Properties panel: for this project, change the Layout Size to 640 by 640 pixels, and then in Project Settings, change the Window Size to 640 by 640 to match. Change the size of the tiled background to match the window size, make sure it is on the "Background" layer, and then in the Layers panel, click the "lock" icon. This makes the objects in the corresponding layer unselectable, which will save us some headaches later when clicking around in the Layout window. Left-click somewhere in the margins of the layout window so that the Properties panel displays Layout Properties once again, and change Active Layer to "Main".

In the toolbar that runs along the top of the Construct 2 window, under View, check the box next to "Snap to grid", and enter 32 for both the grid width and grid height. (This is because the images we will use for the walls and characters are all 32 pixels square.)

Create a new Sprite called "Wall". In the Animation Frames window that will pop-up, right-click in the window and choose "Import sprite strip...". Select the image containing the blue walls from above, and in the following window, you will enter "10" for the number of horizontal cells and "3" for the number of vertical cells. Back in the animation frames window, delete each frame that does not contain a wall, and you should end up with something like this:

(By this point, you are probably wondering why we are loading all these images into a single animation rather than separate animations with a single frame each, or even into separate sprites. Mainly for convenience; this method was a work-around before the introduction of Families in Construct 2, and even with that option available, for non-animated sprites this method may prove easier to work with.)

In the Animation list window, there should just be "Default" listed. Click on the word "Default" and in the Properties panel, under Animation 'Default' Properties, change Speed to "0". Then go ahead and close the Image Editor.

In the Layout window, there should be a single Wall sprite. Drag it into the top margin area of the Layout window. (You should notice as you drag it around that it snaps into locations whose X and Y coordinates are multiples of 32. If this is not happening, re-read the section above about "Snap to grid".)

Now, for one of my favorite keyboard shortcuts: with the Wall sprite selected, hold down Ctrl, click the wall sprite, and drag to create a duplicate copy of the sprite. Repeat until you have as many copies of the Wall sprite as you do frames of animation (in our case, 25). Space them out a bit. Then click on each one in turn, and in the Properties panel, change the number in "Initial frame" so that one sprite is frame 0, another is frame 1, another is frame 2, etc., up to frame 25. Arrange them conveniently (perhaps as in the original spritesheet layout). The top part of my Layout window now looks like this:

Now to set up your maze in the main window part of the Layout window, all you need to do is hold down Ctrl, and click and drag to make a copy of the wall sprite image you want, and position it as desired; it will snap into place. Create your dream PacMan maze level, and in the next part we will create a PacMan character that moves from grid-square to grid-square.

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • One question: I have done everything to the letter but when I touch an arrow on my keyboard the pacman character just disappears, what did I do wrong?