DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for A-Frame : Pac-Man XR Game Clone & Overview
Minty Crisp
Minty Crisp

Posted on

A-Frame : Pac-Man XR Game Clone & Overview

Table of Contents

Summary
Controls
How to Play
Game Clone Info
Components
Favorites
Difficulties
Future Builds

Open Game >

Open Github Repo >


Summary

An XR clone of the original Pac-Man video game. Play on Desktop, Mobile and in VR!


Controls

Movement

  • Desktop - Keyboard [WASD] [Arrows]
  • Desktop - Mouse Hover X Controller
  • Mobile - Tap X Controller
  • VR - 3DoF Controller

How to Play

Move Pac-Man Up, Right, Left or Down around the maze to eat all dots on the screen while avoiding four colored ghosts to advance to the next level. Eat Power Pellets to turn the tide on your enemies.


Game Clone Info

Using only aframe.js, all graphics, animations and controls are built from within the webxr framework. Allowing this 1 game to played in a variety of ways including an immersive large screen version in VR with classic Joystick like controls. Not all elements match the original perfectly and some need a bit of improvement like even more diverse ai, better collision and the unique Pac-Man turning radius. Working on more accurate designs to improve those systems in the future for a more authentic experience. The amount of overall entities as well are pretty high (about 800), but brainstorming ways to optimize further while keeping the customizable nature of the system intact.

Another interesting tidbit about the system is that the map and dot creator are customizable to allow for a variety of maps, sizes and colors as well. Currently only the original basic map and theme are loaded, but more to come later.


Components

Built

  • game_control : Contains all of the game logic and controls. Has a customizable map builder and dot builder that allows for obstacle and dot hit checking, so that more maps can be created and played. The player can be controled in a variety of ways and compatible with many hardware systems. The ghosts have scattering logic and adjusted ai personality's for when/how to chase the player. Many other small details have been created to attempt to match the original game as close as possible like the points system, level progression, power ups, tunnels, etc...

Public


Favorites

The graphics. The ghosts themselves turned out really interesting and main logo really pops with style. All graphics are built from internal geometry, no imported 3D models.


Difficulties

With a huge project such as this, there were many roadblocks. Thankfully I was able to get through them all. Some of the more difficult ones were the collision system, state management and pathfinding. The collision system itself is not perfect and a few instance where the ghost and player move at the same time can cause it to hiccup and not detect hits. It works well enough, but working on a better overall design to use smaller increments and detect groups of positions to check for hits for ideally perfect accuracy.


What I want to build upon this, in the future...

This is really the start of some interesting projects I want to build. Mostly old school games that I grew up and love that can be enjoyed in a variety of mediums. For OG arcade projects such as this, I would love to optimize it much more place the maze inside an arcade cabinet with the VR controller being an actual joystick in a vaporwave environment. A fully immersive Arcade is the dream!

Credits :

  • Original game and sounds by Namco
  • Dot and PowerUp hit sounds by LittleRobotSoundFactory

  • This is my first huge project as I am still learning the ways of Web Development and Web XR, so please be kind when reviewing or sharing. Otherwise, I hope you enjoy the game and thank you for taking a look.

  • More Dev Articles

  • My homepage mintycrisp.com

  • View my Github Repositories

  • Peruse my Tweets

  • Spy on my Reddit comments

  • I am available for Web XR work if you are interested in hiring me or collaborating on future projects.

  • You can reach me via socials or email : minty-crisp @ proton . me

  • If you really enjoy my work and want to support me making more of these types of projects, you can help me out with a Ko-fi or just by sharing the game.
  • - Minty Crisp ^-^

    Top comments (0)

    🀯

    "I made 10x faster JSON.stringify() functions, even type safe"

    ☝️ Must read for JS devs