Tutorial Downloads

File Size
omnomnomagon-returns.capx408KB

Translations

Know another language? Translate this tutorial!

Stats

8.5K visitors
145K page views
1,560 translation visitors
9.1K translation page views

Cloning the Classics: PacMan

Favourite 130 favourites
Tutorial written by stemkoskiOriginally published on 23rd, May 2012 - 8 revisions

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

Comments

3
sassyyellobrat 2,311 rep

Cool. I was looking for this :D

Wednesday, May 23, 2012 at 11:00:20 PM
3
stemkoski 19.9k rep

@sassyyellobrat ...looking for PacMan in particular, or one of the techniques in general?

Thursday, May 24, 2012 at 9:37:04 PM
3
EyeHawk 7,762 rep

Wow, amazing work @Stemkoski!! This plays just like the original! Like sassy I was looking around for a tutorial too for a while. Are you also planning on cloning other classic games like space invaders, defender, etc? :)

Friday, May 25, 2012 at 10:10:48 PM
8
stemkoski 19.9k rep

@EyeHawk How did you get into my head?! As a matter of fact, that is my master plan. I'm actually a college professor in real life (mathematics and computer science), and one of the elective courses I teach regularly is "Video Game Programming". I used to use Java exclusively, but this past semester I switched to mostly Construct 2 and the Blender Game Engine (for 3D). I plan on a set of tutorials for the games we covered in class, which also includes Asteroids, Breakout, Bubble Bobble (one of my all-time favorites!), and Super Mario Bros. So stay tuned!

Saturday, May 26, 2012 at 3:48:56 AM
3
EyeHawk 7,762 rep

Fantastic, this is just like Christmas all over again :) I'm keenly looking forward to more retro classics - keep up the excellent work Prof Stemkoski! :D

Saturday, May 26, 2012 at 5:13:06 AM
2
stemkoski 19.9k rep

@EyeHawk I'm at your service. :)

Saturday, May 26, 2012 at 6:08:57 PM
2
sassyyellobrat 2,311 rep

@stemkoski - Yes I was looking for pacman tutorial. Glad I found it :)

Tuesday, May 29, 2012 at 2:10:10 PM
2
gamekill 2,690 rep

Awesome, love how your logic sequence is so precise, efficient and clean!!

Wednesday, May 30, 2012 at 8:57:40 PM
2
jmoore965 2,062 rep

Very cool! Can't wait for the rest of the tutorial!

Saturday, June 02, 2012 at 3:40:44 AM
1
AarongamerX 5,960 rep

But how does the enemies know when to turn? I'm making a game and when i tell my character to turn on a corner the character goes through the object a little and the alignment is way off. Also it seems if i add two characters moving at the same speed 1 could catch up to the one in front. Weird stuff.

Friday, June 15, 2012 at 6:21:50 PM
1
milkyw 2,749 rep

wow brilliant. I like the logic you used. simple yet very efficient and makes ghosts smart. thanks!

Monday, July 23, 2012 at 5:43:36 AM
1
rahulkathet 2,395 rep

how pacman character move automatically

Thursday, August 16, 2012 at 4:25:36 PM
1
winsontan520 2,664 rep

Thanks for the grid movement guides~!

Monday, August 20, 2012 at 10:10:22 AM
1
kenli 7,828 rep

wow my childhood game, really like this :)

Saturday, September 15, 2012 at 9:56:49 AM
2
rahulkathet 2,395 rep

Nice tutorials, but have some doubt that, in original game pacman run automatically just user needs to give him a direction, and one more thing on collision pacman stop at any area.

is there is any way of these points?

Monday, September 17, 2012 at 11:29:21 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.