Published on <a href="https://blog.prototypr.io/muar-an-ar-shooting-game-to-learn-more-about-a-college-campus-d50809cec5c7?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Vichita Jienjitlert 
Mahidol University Augment Reality (MUAR) is a mobile Augmented Reality shooting game and campus guide of Mahidol University Salaya Campus. It aims to provide the users with information about the campus in an innovative and enjoyable way.
<img alt="" src="https://cdn-images-1.medium.com/max/500/1*qRlICfttDc4q5Mma32v8hQ.gif">
The application enhances user’s experience by the use of 3D graphics, special effects, sound effects, background music, and also animations. MUAR includes both the server-side database, used for high-score and data synchronization, and also a local database for off-line use.
<blockquote>My Role: Application Designer. UX/UI Designer. Game Developer. Database management. Server-side scripting. Duration: Jan to Apr 2014, Capstone Project Tools &amp; Methods: Game Design, UX/UI Design, Game development, Marker-based AR, Unity3D, SketchUp Team Members: <a href="https://www.linkedin.com/in/pichayawatt/">Pichaya Wattanasaranont</a></blockquote>
<h3>Discover</h3>
The Problem After talking to several of our cohorts, we discovered that many of us did not know a lot about the campus despite spending almost 4 years at school. Since the campus covers a large area, it is difficult to learn about where all the faculty buildings and services are located. In most cases, facility members, students, and staffs are only familiar with a few specific areas on the campus. Many lacks the motivation to explore the other areas on campus and may miss out on some great opportunities and experiences available.
Project Objectives:
<ul>
<li>To provide an innovative way of learning about the school’s campus</li>
<li>To explore the use of AR technology on mobile platform</li>
<li>To provide entertainment through game story and the challenges throughout the game</li>
</ul>
Project Goal: To use Augmented Reality as a tool in development of a mobile application to help users learn about our university in an interactive way.
<img alt="" src="https://cdn-images-1.medium.com/max/689/1*8EM2_Wc6q87-7doK1oGX5g.png">A horde of zombies attacking the victim on the school’s campus.
<h3>Define</h3>
Our users have two separate goals in using the application — to either find out specific information about the campus or to play the game (while also learning more about the campus). Hence, we define the MUAR app to include two modes: the game mode and campus guide mode — both of which utilizes AR technology.
<ul>
<li>The Information Mode offers a full 3D model of the campus in which users can select a building to view its information, select a category filter, and view tram routes.</li>
<li>The Game Mode centers on an intriguing story of the campus being invaded by zombies, where the player takes the role of the defense team. During game play, the player has to aim and shoot the zombies with the cross hair in the center of their camera on an augmented model of the campus buildings in order to complete the mission objectives.</li>
</ul>
We listed out several functions to consider for each mode, prioritized them, and finalized them as below:
<img alt="" src="https://cdn-images-1.medium.com/max/1013/1*ujmohM9sUSJK-gP8-c5JGw.png">
From the finalized list of functions, we created a flow of how the user would interact with the app, as well as how the app would respond and progress.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vdi-wMWfYE7OYXB-idTACQ.png">
<h3>Design</h3>
Interface Theme To promote playfulness, we decided to go with a cartoon-like theme. We designed the background panels in grey scale with colorful buttons and texts for better contrast and readability. This theme is used throughout the application for branding and consistency.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xawmmsi3GyS9LbBZd2g6nw.png">
Because the application is to be deployed on the mobile device platform, we focused on using big and clear fonts, with some important texts are outlined with strokes. For long texts, such as descriptions of the buildings and story of the missions, we utilized scrollbar views for minimal on-screen space usage.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7SJZwVP8lufxc8TcAhUgOQ.png">
Game Concept The Name: MUAR is an abbreviation for Mahidol University Augmented Reality. The acronym of the name (MUAR) also mimic the sounds that zombies make during the gameplay.
MUAR present the university campus with real time zombie shooting game by basing all the location of the real campus site into the game scene itself. This provides new experience for anyone who might be interested in learning more about Mahidol University campus sites.
Mission Design The story is designed to slowly advance as the player clear each mission. The objective of each mission will always be slightly different from the previous mission while also keeping the objective as realistic as possible. Each map area of every mission scene will always be based on important building and area. This will help the player learn about the area in an entertaining way.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BsaH6rA3paeMpan0md5AOw.png">
Character Design To add to the excitement and variety of the game, we designed three different types of zombies in the game — each with their target set toward the victims. Each type has its own unique status which can be identified by their color and movement behavior. For example, Creeper of the grey-colored zombie will crawl slowly to its victims, but its slow movement is compensated by its high attack point.
The zombie stats are described as below:
<ul>
<li>Vitality (VIT): amount of health points of a character</li>
<li>Strength (STR): amount of damage made by a successful attack</li>
<li>Dexterity (DEX): chance of making a successful attack</li>
<li>Agility (AGI): speed in which the zombies can move</li>
<li>Intelligence (INT): range in which the zombies can detect a victim</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1JCb-GNW4Rl3Qv7vS3-UWQ.png">
The victim is depicted by a girl character in school uniform. After the prolonged Apocalypse some victims have been weakened due to injuries, and can manage are slow wounded-walk.
<img alt="" src="https://cdn-images-1.medium.com/max/908/1*363j99JcLsJLDPbc6j-_iw.png">
Weapon Design To give the players more options during their play, we designed 3 types of weapons, each with their own strengths and weaknesses.
<img alt="" src="https://cdn-images-1.medium.com/max/1009/1*t-V7YOSg458X9fNdChDVFw.png">
Database Schemas
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QR3XZsGjzvIP5vVJLvcJNQ.png">
Client-side Database
<ul>
<li>running SQLite 3.0</li>
<li>Used for storing information on buildings (faculty, service, and restaurants)</li>
<li>Used for storing information on missions</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oUZ2DI3Pie_ijo51a2gPbg.png">
Server-side Database
<ul>
<li>Running Linux CentOs 5.1 with Apache 2.4.4, MySQL 5.1.68, and Php 5.3.27 installed</li>
<li>Scripts are written with PHP</li>
<li>Data are passed using JSON format.</li>
<li>Used for data synchronization &amp; high scores</li>
</ul>
Activity Diagrams
Login and Registration
<img alt="" src="https://cdn-images-1.medium.com/max/526/1*3dVvDJVuqtheewxmqdzjTA.png">
View Highscore
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*a9B8BHBIZbgpl_McOyABuA.png">
<h3>Prototype</h3>
Main Screen &amp; On-Boarding To facilitate first time users, we created tutorials on how to use the information mode and how to play the game. These tutorials are accessible from the main menu of the app.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fKl1dmrG-hwNSmR_lvyCww.png">
Information Mode
In 3D mode, the user navigates around the campus by moving the camera. If the user does not have a marker, he or she can choose the 2D mode to view the campus from the top-view. The user navigates in this mode by dragging on a point of the floor of the campus and zooms in and out by pinching the screen.
<ul>
<li>To view information about a particular building or area, the user taps on a building then the name panel will appear on the bottom of the screen displaying the building’s name. To view more information, the user can click on the information button on the name panel.</li>
<li>To use the filters, the user may simply press on one of the filter buttons on the left panel of the user interface. Once a filter button is selected, the appropriate buildings will be highlighted.</li>
<li>To view a tram route, the user selects their desired route color. A path would appear along with an animated tram that travels along that path.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4X7p1fcxaDbrLK-P7tJIiA.png">Sample screen shots from the Information Mode
Game Mode The player first selects a mission from the mission selection scene, where they can read the story and objectives of the mission.
<ul>
<li>To start the game, the player is prompted to scan the AR marker. Additionally, the game would pause whenever the app loses track of the marker.</li>
<li>During the game, the player can select different weapons from the bottom right corner of the screen. The player navigates around the map and aims with the cross-hair at the center of the screen by moving their camera around and shoots by tapping on the screen.</li>
<li>After completing a mission, the user will be shown the score panel with the game results of the total score, zombies killed, and victims saved. The user can choose to view the high scores for that mission or post the scores online.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/890/1*-NdBjCHLby-xAoBOWpRdag.png">Sample Screenshots from the Game Mode
Demonstration Video
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F9teHvGG1_uA%3Fstart%3D3%26feature%3Doembed%26start%3D3&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9teHvGG1_uA&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F9teHvGG1_uA%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/129e3411bd63c68d1f1215fc7602a292/href">https://medium.com/media/129e3411bd63c68d1f1215fc7602a292/href</a></iframe>
<h3>Reflection</h3>
Looking back at the project 4 years later, this is one of my most proud (and fun!) projects from my undergraduate years as a computer science major. I’m very happy with what my partner and I were able to accomplish within roughly 3 months — bittersweet memories of sleepless nights included. Lastly, I’d like to share some key take-aways I learned from this project:
<ol>
<li>Spend more time conducting user research &amp; defining the root of the problem. Since this project was mostly focused on the application design and implementation, we did not had the chance to dive deeper into the problem and user context. It would’ve been great for us to conduct interviews and surveys to gain insights and make better informed design decisions.</li>
<li>When using Marker-based AR technology, make sure the marker is easily accessible in the appropriate context. The biggest drawback we received from this project was the need to have a printed out version of the marker in order to use any 3D modes. In our case, none of our users would be carrying around a printed out piece of the school’s logo on a daily basis. We can consider basing our marker off available brochures or campus maps that were handed out to all students.</li>
<li>Don’t be afraid to just go for it! My partner and I were inspired by this <a href="https://youtu.be/cNu4CluFOcw">video of the ARhrrr! project</a> we found on YouTube. Although we had reservations about our capabilities, we decided we to push our limits and see what we can do. It was our first time with Unity3D, AR, full-fledged game design, server-side scripting, etc. But despite the sleepless nights, it was one of the most enjoyable learning experiences I’ve ever had.</li>
</ol>
If you like this article, please feel free to give me some applause *clap clap*.
Thank you to my partner in crime <a href="https://www.linkedin.com/in/pichayawatt/">Pichaya</a> for sticking together as well as Professor <a href="https://www.linkedin.com/in/machigar-ongtang-8241b917/">Machigar</a> for supervising our project!
Please feel free to reach out to me if you want to learn more about our project. Find me on <a href="https://www.linkedin.com/in/vichita-jienjitlert-286b37131">LinkedIn</a>, or stop by my <a href="http://vichita.com">Portfolio</a> to see my other works!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d50809cec5c7" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/muar-an-ar-shooting-game-to-learn-more-about-a-college-campus-d50809cec5c7">MUAR: an AR Shooting Game to learn more about a college campus</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

MUAR: an AR Shooting Game to learn more about a college campus

Top Stories