A-Frame : Pac-Man XR Game Clone & Overview
Tags: aframe, gamedev, javascript, webdev
Published: 2022-09-16 04:11:18

<span id="#articleText">

<h2>Table of Contents</h2>
<a href="#summary" target="_blank">Summary</a>
<a href="#controls" target="_blank">Controls</a>
<a href="#how-to-play" target="_blank">How to Play</a>
<a href="#game-clone-info" target="_blank">Game Clone Info</a>
<a href="#components" target="_blank">Components</a>
<a href="#favorites" target="_blank">Favorites</a>
<a href="#difficulties" target="_blank">Difficulties</a>
<a href="#future-builds" target="_blank">Future Builds</a>

<!-- Demo -->
<h3><a href="https://minty-crisp.github.io/Pac-Man-XR_A-Frame/" target="_blank">Open Game &gt;</a></h3>
<h4><a href="https://github.com/Minty-Crisp/Pac-Man-XR_A-Frame" target="_blank">Open Github Repo &gt;</a></h4>
<!-- Line Break -->
<hr />

<h2 id="summary">Summary</h2>
<p>An XR clone of the original Pac-Man video game. Play on Desktop, Mobile and in VR!</p>
<!-- Line Break -->
<hr />
<h2 id="controls">Controls</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h4>Movement</h4>
<ul>
	<li>Desktop - Keyboard [WASD] [Arrows]</li>
	<li>Desktop - Mouse Hover X Controller</li>
	<li>Mobile -  Tap X Controller</li>
	<li>VR - 3DoF Controller</li>
</ul>
</div>
</div>


<!-- Line Break -->
<hr />

<h2 id="how-to-play">How to Play</h2>
<p>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.</p>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="game-clone-info">Game Clone Info</h2>
<p>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.</p>
<p>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.</p>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<div class="col-12 col-12-medium">
<h2 id="components" class="tal">Components</h2>
<h4 class="tal">Built</h4>
<ul class="alt">
	<li><i>game_control : </i>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...

</li>
</ul>
<h4 class="tal">Public</h4>
<ul>
	<li><a href="https://github.com/aframevr/aframe/" target="_blank">A-Frame 1.3.0</a></li>
</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>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.</p>

</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>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.</p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>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!</blockquote>
<!-- Line Break -->
<hr />

<div class="row">
<h2>Credits :</h2>
<li>Original game and sounds by Namco</li>
<li>Dot and PowerUp hit sounds by <a href="https://freesound.org/people/LittleRobotSoundFactory/">LittleRobotSoundFactory</a></li>

</div>

<!-- Line Break -->
<hr />

<div class="row">
<p>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.</p>
<li>More <a href="https://dev.to/mintycrisp">Dev</a> Articles</li>
<li>My homepage <a href="https://mintycrisp.com" target="_blank" >mintycrisp.com</a></li>
<li>View my <a href="https://github.com/Minty-Crisp" target="_blank" >Github</a> Repositories</li>
<li>Peruse my <a href="https://twitter.com/minty_crisp" target="_blank" >Tweets</a></li>
<li>Spy on my <a href="https://www.reddit.com/user/Minty-Crisp/" target="_blank" >Reddit comments</a></li>
<li>I am available for Web XR work if you are interested in hiring me or collaborating on future projects.</li>
<li>You can reach me via socials or email : minty-crisp @ proton . me</li>
<li>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 <a href="https://ko-fi.com/mintycrisp" target="_blank" >Ko-fi</a> or just by sharing the game.</li>
<h2> - Minty Crisp ^-^</h2>
<a href="https://minty-crisp.github.io/Pac-Man-XR_A-Frame/"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

<!-- End Article Text -->
</span>