Defend Your Homes - a cross-device HTML5 game with a retro design

Developing games for the target audience

In early 2016 we started working on a project with Homes.com, one of the top real estate search engines in the United States that provides advertising and marketing services to help real estate professionals connect with homeowners, buyers, and sellers. Their goal was to capture interest around Sci-Fi Summer blockbusters while entertaining and educating consumers on the various locations around the US.

Homes.com wanted their game to connect with the 80’s generation, a key home buying group. This audience remembers such generation-defining 8-bit video games like Space Invaders, Caterpillar, or Pac-Man. Since familiarity is a key when developing games, we wanted to use simple controls that mirror arcade machines. Our designers faced the challenge of capturing the retro style while introducing brand messaging and key client-requested features. The final result included original pixelated objects, simple controls (on both desktop & mobile devices) and 8-bit soundtrack as a tribute to the 80’s classics.

Challenges of game design

It may not seem like it, but designing a game based on the 70s or 80s is far from simple. Even with the experience of developing Kopanito, our own game that's inspired by arcade games, Defend Your Homes was still rather challenging and not without some difficulties. Although the style had to be old school, the players needed to know that they were dealing with an entirely modern game. Another challenge was to include the theme of real estate in the game. The key objects in the game, therefore, had to be cottages, and the background of the game had to refer to the urban climate. We've prepared several different designs for our client, which allowed us to agree on the final version.

Technologies: Modern Front End stack

We chose the optimal technologies to provide accessibility for both desktop and mobile browsers:

• HTML5 - the technology supported by all of the newest web browsers that doesn't require any plugins to allows gameplay;
• Phaser.io - open source framework used to develop browser-based games with the use of the HTML5 Canvas. It's a proven tool on the HTML5 game development market;
• WebGL - JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

Mobile adjustments

A large percentage of traffic on homes.com comes from mobile devices, therefore Defend Your Homes needed to be as attractive on smartphones and tablets as on desktops. With that in mind, we've set a goal of achieving 60 frames per second for the most popular mobile devices.

We also prepared a unique mobile interface that simulated buttons and keys from the 80s video consoles. In addition to that, we also made sure that the game matched both the horizontal and vertical screens.

How to make a video game more fun?

We've created many interesting features while developing the game. With that, we were sure the final product will be rich and give users a fun experience. Here are some of them:

• quiz mode - players can earn extra points by answering questions that appear during the game. Since each level is related to one of the American cities, the questions also regard specific locations;
• leaderboard - when the game ends, players can add their scores to the leaderboard. We also added the functionality to share it on Facebook with a single mouse click. Such features increase the player engagement and the viral aspect of the game;
• unique sounds - the game had to be 100% unique, so we commissioned a studio we trust and have previously worked with to prepare the music in style of arcade games;
• the prize - thanks to the leaderboard we were able to reward the best players. The prizes were prepared and funded by our client.

The final effect of game development

Defend Your Homes project definitely can be considered successful. Such factors as the high quality of created code, creativity, visual images, and timeliness of the product influenced the success of the project. The customer was happy to talk through every detail of the game development and take our advice. One of the results of such cooperation, as well as its summary, is quiz mode:

The game earned tens of thousand of users, which was seen as a branding success. Merixstudio were praised for delivering everything as expected, on time and on budget.

Are you interested in the details of the game development process? You can check it out in the technical case study of Defend Your Homes.