Reskinning an HTML5 Game for an Animated TV Series

It’s a Food Fight! The zany teenage heroes of Teen Titans Go! are at it again, and pizzas will fly, ice cream will flow, and burger bombs will explode!

We are really excited to have worked with Warner Bros. DC Comics on a new game featuring the Teen Titans Go! characters:

  • Robin — the perfectionist group leader
  • Starfire — Robin’s love interest from an alien planet
  • Cyborg — easy-going half-human, half robot
  • Raven — demon girl with a knack for sarcasm
  • Beast Boy — scatterbrained shape-shifter

Teen Titans Go! is the popular Cartoon Network remake of the Teen Titans TV series. This new incarnation is witty, quirky, and often laugh-out-loud funny. It has a different focus than the old animated favorite.

The original animated series had a more serious theme about saving the world from forces of evil. On the other hand, the remake highlights the heroes’ “normal” life as teenagers. But with their super powers, things often get a bit rowdy.

“Teen Titans Go! Food Fight!”, the HTML5 game we created for Warner Bros. DC Kids, captures the fun and nutty atmosphere of the show.

Gameplay

You play as Robin, with a first person view of the room. Randomly appearing from their hiding places are your 4 Teen Titan friends. They are ready to hurl their pizza slices at your face.

Each time you get hit, the health bar decreases. You can only take too many pizza slices before you get knocked out and the game is over.

You have to retaliate!

At your disposal are a number of food items. Initially, pizza is your only weapon available. The hot dog sandwich, ice cream, pie, meat slab, and burger bomb can be unlocked with enough points later on.

These food items can be associated with the characters. For example, the ice cream looks like a one-eyed alien and the burger is a bomb with a fuse. These can be identified with Starfire and Cyborg, respectively.

On a computer, just point at the targets with mouse cross-hairs then click to launch your edible projectile. On mobile devices, simply tap on the targets to shoot.

Your friends can take a few hits before they are knocked out. Landing a hit successfully on one of them gives you 3 points. Taking a hit from one of them shaves off a point from you.

Reskinning

This game is a reskin of Office Fight, one of our games ready for licensing. Reskinning (or rebranding) is a process wherein elements of a game are modified while retaining the core mechanics. These elements include music and artwork.

The technique produces a game that is comparable to native apps in terms of quality. However, the building cost is much reduced. A lot of the development time is also freed up. This allows the creative team to focus on the look and feel that the client needs.

HTML5 Game Engine

Our team uses a game engine powered by HTML5 technology. HTML5 is the standard language used by modern internet browsers. It is quickly becoming the framework of choice for developing marketing and promotional games.

HTML5 games have proven to have qualities that are superior over other options like Flash or native game apps:

Cross-Compatible

Foremost among these is cross-compatibility. HTML5 is the language that web browsers speak. Therefore, any device (desktop or mobile) with a browser will smoothly run an HTML5 game.

Which also means that a game does not need separate versions for different operating systems. One build of the HTML5 game will work with Linux, Windows, macOS, iOS, Android, and others.

Portable

Consequently, the game does not need to be downloaded or installed. All you need to play is the website URL of the game. This makes sharing much easier. Just send a link to your friends and they too can play the game right away.

HTML5 games also get rid of the need to install and update plugins like Flash.

With HTML5 games, the players get a fun, engaging, and seamless experience.

Summary

We have successfully teamed up with Warner Bros. DC Kids to produce the game Teen Titans Go! Food Fight! This first person shooter game features characters from the popular Cartoon Network animated series.

Using HTML5 technology, we reskinned one of our pre-existing games to create this new one. The method of reskinning or rebranding shortens turnaround time for development and reduces costs significantly.

We employ this technology for various reasons, most important of which are its cross-compatibility and portability. These also explain why entertainment companies are increasingly adopting HTML5 games to promote their products. Warner Bros., DC Comics, and Cartoon Network are just a few of the companies that leverage HTML5 games.

Click here to play the game.

If you are interested in licensing or reskinning our HTML5 games, feel free to contact us. Or, read more about reskins here


Originally published at www.marketjs.com.