Nona Blog

Creating a Maze for the Pac-man game in Figma using masks

I have just recently started looking into Figma as an alternative for sprite / asset creation for 2D games.

Figma forces you to dive relatively deep into vector creation from the start so I thought I’d share some of my findings while actually trying to build assets for the Pac-Man game.

The Maze

One of the first things that tripped me up was trying to create the rounded corners on the maze.

My solution:

I figured the best way to solve this is by using masks.

For the walls of the maze I created a Rectangle (300 x 300), set the fill to 0% and added an inside stroke with a width of 10. I labelled this the “Maze Rectangle”.

I then set the corner radius of the rectangle to 30.

The result looked something like this:

I then added a smaller rectangle with no customised properties and converted it to a mask. I labelled this “Maze Slice”

I then moved the Maze Rectangle into the Maze Slice mask and positioned the Maze Slice to the top left corner of the Maze Rectangle.

A single wall with the mask covering one of the corners

By duplicating the mask group (Maze Wall) and moving the maze slice around I was able to recreate the various parts of the maze.

Two walls the bisect at diagonal corners
Two walls that mirror each other with a solid bottom third wall
A single wall with the mask covering the top half of the rectangle

You can obviously also scale or rotate the pieces as needed.

I then downloaded a copy of the pac-man maze as a reference and added the rest of the pieces by tracing them on top. I also made the background of the scene black and the walls white.

For the centre area I repeated the process without the rounded corners.

What you may also want to do is group the various pieces together and add effects to them such as a glow or shadow.

I would be interested to see if anyone has any comments on alternative ways of creating the Maze.

Nona helps funded businesses accelerate their software projects. If you’d like to soundboard your tech project or your development team, book a consultation with us and we can chat through it! 

Richard Miles

Richard Miles

Fullstack Developer - Nona

Add comment