Building a HTML5 game to promote TV viewership

Justice League Action is the latest animated series released by Warner Bros. and DC Entertainment. It features Superman, Batman, Wonder Woman, and an awesome lineup of super heroes and villains from the DC Universe.

Highly anticipated before its debut on Cartoon Network, the show has been well-received by fans, adult and kids alike. Critics have lauded its slick action and enjoyable humor.

We have been fortunate enough to work with Warner Bros. DC Kids to create a branded game called Justice League Action: Orbital Chase. This HTML5 game belongs to the match-3 puzzle genre. It is currently one of the main featured games on the DC Kids website.

In the game, super villains are powering up a destruction beam to annihilate a city. Only the Justice League team has the ability to stop them.

Gameplay

The player takes the role of the 5 Justice League superheroes: Batman, Firestorm, Flash, Superman, and Wonder Woman. They have to eliminate a series of villains that includes The Joker, Lex Luthor, the Demons Three, and Darkseid.

This is done by using the Justice League heroes’ special attacks.To activate a hero for an attack, the player needs to connect at least 3 adjacent similar hexagonal tiles on the board. The longer the tile chain, the greater the firepower unleashed.

Speed is rewarded in this game. Players are given only a certain amount of time to kill as many villains as possible and beat their high scores.

Connecting 5 or more tiles adds 1 more second to your time. The game is over when the time runs out.

Reskinning

An inherent property of HTML5 games is that they are easily reskinned. Reskinning, also known as rebranding, involves replacing a game’s graphics, music, sound — the “sensory” elements — to transform it into a new one. This is achieved without making any significant changes to the core mechanics of the original game.

It’s not unlike customizing a car; the paint and accessories are changed, but the chassis and engine remain the same. The car doesn’t need to be built from scratch. It’s just modified according to the owner’s preferences.

The benefits of reskinning are two-fold: turnaround time is shortened and costs are minimized. A gorgeous game can be produced within a surprisingly short period, even on a limited budget.

In the case of Orbital Chase, we used the engine of Space Chasers, one of our ready to license games. Justice League artwork was then inserted into the code. With a bit of tweaking to get the look and feel just right, the rebranded game is ready to be launched.

Why HTML5?

In addition to being reskin-ready, HTML5 games are excellent for marketing and promotion for various reasons, notably the following:

1. Cross-compatible
 HTML5 is the language that most modern browsers understand. It is the most widely compatible framework for creating web games. This means that whether the user is on an iPhone with Safari or a desktop PC with Firefox, they can access the HTML5 game automatically.

2. Highly portable
 The game can be deployed onto any device that has a browser. It could be a smartphone, laptop, or digital signage; a single build of the game will work on all of them.

Sharing via social media is also made hassle-free by eliminating the requirement for app store downloads or plugin installations.

Client ROI

The kind of ROI (Return on Investment) that a client gets with a branded game depends on their project goals. For our present client, some of the benefits are:

  • Brand activation — Justice League Action is a relatively new show, and a branded game helps increase awareness.
  • Brand engagement — Consumers associate the TV show with an enjoyable interactive experience.
  • Increased viewership — Launching a game is a creative way to drive viewership.
  • Enhanced website analytics — Having a game on your website helps improve key performance indicators, such as time spent on page.

Summary

We helped Warner Bros. DC Kids launch a new branded game featuring characters from the latest DC animated series, Justice League Action. Players of the game eliminate villains using superhero attacks that are activated using a match-3 mechanic.

Creating the game involved reskinning one of our pre-existing games. The process entailed modifying the external elements (graphics, animation, etc.) while retaining the internal structure (core mechanics) of the game. It is a time-saving and cost-effective technique.

Major players in the entertainment industry are embracing HTML5 technology as a framework for creating beautifully engaging games. This is driven by the superiority of HTML5 over other platforms in terms of cross-compatibility and portability.

Contact us now to learn how your company can benefit from branded HTML5 games.


Originally published at www.marketjs.com.