Game of Sponsors

Hello Guys!

As some of you may have noticed, Whitesmith had a big presence in this year’s Pixels Camp. This was because not only we were sponsors of the event, but we also had a winning team with our project Qoop and a second place in the Quiz. Besides all that, we created an interactive AR Game beforehand, inspired by Game of Thrones, for participants to play during the event.

In this blog post, I intend to talk a bit more about what Game of Sponsors is and how it was made.

The Game

Game of Sponsors (GOS) is an AR game created with the main goal of making participants of the event interact more with the sponsors.

This goal was achieved by making each sponsor a House. Each house had their own AR Marker and when players scanned them here they’d get a question about that sponsor.

Bellow is a quick preview of how the game worked.

Besides GOS, there was a second game, a kind of side quest called Castle Quest (CQ) and this game’s main goal was to make players walk around the event’s premises in a sort of treasure hunt for AR markers.

The numbers

We had about 150 players and about 6 or 7 people finished the whole game and won all the badges, from both GOS and CQ. With this in mind, I think we can say the game was quite a success. Not only for the numbers, but also because both sponsors and users came to us saying how nice it had been to interact more with the community thanks to the game.

How we made it

The game was programmed using HTML, CSS, Js Ruby and A-Frame. In order for you to understand a bit better how the game was made you’ll need to have some basic knowledge of the programming languages above. For A-Frame, I’d advise you to read my tutorial which helps you go through the basics of the framework.

After you’ve read the tutorial, the steps necessary to create the game are roughly the following:

• Create the personalized marker
• Inside that ‘a-maker’ place the geometry for the intro
• Make the intro disappear with Js by turning the attribute for visibility visibile=false when the cursor is clicked over the button
• Create and place the geometry for the question and answers
• Create and place the geometry on the right or wrong answer
• Trigger the right or wrong answer geometry when the cursor clicks on either one of the answers

Regarding HTML and CSS, you need to know the basics of how to create a responsive webpage, with a little help from flexboxgrid. In what concerns JS, you’ll need to know how to create events and connect them to HTML elements and also create responses for when those events are triggered.

Last but not least, in the backend, we used the device and omniauth-github gems for authentication and the httparty gem to make requests to pixels camp API.

Final thoughts

It was a lot of fun learning how to make this game and working as a team with my fellow Whitesmithians.

Although, as any challenge that is worthy of the name, we found some hiccups along the way. Most of them were due to compatibility issues between different mobile phones and the AR library. The biggest issue we faced was regarding Click Events. Somewhere along the way, most click events stopped working on the game, and after some long hours of talking and debugging, we found out it was due to the Z position of the geometric elements. If we set the Z position to higher than 1.5 units, the framework became unable to read the click on top of the elements.

Other than that, we had a lot of repeated code that made the app go slower, a problem quickly solved by using functions in Ruby, making the app run way faster and smoother.

If you were at Pixels Camp, I really hope you enjoyed playing. If not, I hope you enjoyed learning about it.

In case you have any cool ideas we could give life to, or do you have any questions, feel free to contact us! We’d be glad to hear from you.