LazAR

• 

  Opening screen

• 

  Team Selection

• 

  Gameplay

• 

  Logo

Inspiration

LazAR was inspired by the dream of bringing the fun activity of laser tag to everyone, everywhere, for free, especially to those who can't afford or access it.

What it does

When you first go to the LazAR Website, you are greeted with a prompt to enter your name. You can then choose to join either the red or blue team and must put on the appropriate tracking code. The host, the person who joined first, can then start the game. Matches last 2:30 minutes and the objective is to shoot your opponents to gain points and win the game. Other stats include health and ammo, which can be refueled at base stations placed around the play area.

How we built it

The first step of making LazAR was to make and print the tracking QR codes, which are used by client devices to keep track of other players. The frontend of the web app was then built around the library jsQR in order to read QR codes quickly and efficiently. Next, an opening UI was created in order to guide the user through creating their name and picking their team. The backend was written in node.js, relying on the library socket.io for communication. This manages all the connections, keeps track of stats, and times the game.

Challenges we ran into

The primary challenge we ran into while building LazAR was the use of WebRTC. We attempted to use this API to achieve peer-to-peer communication, but we ultimately resorted to using socket.io for the sake of time and quality. Another issue we attempted to overcome was the reliable tracking of the QR codes, especially at far distances and during fast motion. We resolved this issue by giving the player a small delay to shoot between, even after the QR code stopped being detected, and by cropping the video feed to speed up recognition.

Accomplishments that we're proud of

We are very proud of the UI and UX we created for LazAR. Small details like the background blur, button highlight and click effects and the futuristic font help tie the experience together. We are also proud of the complexity of the rules of our game. The freedom to choose your team, instead of being placed randomly, the properties of health, ammo, and points assigned to each person, and the base stations make the game more strategic and fun.

What we learned

One of the biggest things we learned from LazAR was responsive web design, which we used to make our UI fit well to any device. In addition, we learned the value in using Git version control to manage our project, which helped our project be much more coordinated. Finally, we learned the value of teamwork and communication. By playing to each person's strengths, including programming, graphic design, and audio, our team was much more productive than otherwise possible.

What's next for LazAR

The future of LazAR involves improving it's performance, speed, and availability. When more time is available, we plan to switch the project's communication to WebRTC to minimize latency. In addition, we would like to find a superior tracking at long methods, possibly using machine learning, to improve over the current range QR codes offer. Finally, we plant to add multiple rooms so many groups of people can play LazAR without interfering with eachother

Built With

• css3
• express.js
• html5
• javascript
• node.js
• socket.io
• webrtc