Building a web-based branded game for business

There are a lot of ways to boost your brand, products, and services. Besides many other options, there’s a way to promote your business or deliver your products to customers via a web-based branded game.

The game can include products and services you offer, and it shows them in a gamified manner. A web-based branded game is integrated into the business’s website or available via other marketing channels the brand uses.

It’s usually a cross-browser and a cross-platform solution so customers can access it from any device, browser, or OS. It means that customers can open a browser on any mobile or desktop device and start the game that looks and works the same everywhere. By the way, another article in our blog provides the information about launching mobile gaming startup.

That’s convenient for companies striving to reach most of the potential customers through the same game. In fact, it’s a one-screen web page that has a bit deeper logic and looks like a game. This page is usually hosted on the brand website, has a unique web link, and can be accessed from any point where this link is put.

Game mechanics choice

Generally, the game should be designed in the branded style of a business and should be very easy to start performing. It should also have user-known video game mechanics that are popularized worldwide, for instance, match-3, puzzle, arcade, numbers, trivia, questionnaire, etc.

Regarding the gameplay mechanics, there are three choices to follow. First of all, there are game mechanics that are playable globally and fit most of the markets and audiences. These game mechanics are mostly puzzle or arcade. People know these game types from their childhood, have similar games on phones, they see how other people play similar games. All of them are easy to start and understand, have a short game session so people can play them in their spare time.

Optionally, the game mechanics can be closer to the business structure or fit some specifics or features of the industry. Playing these game mechanics, users can partly understand what does the brand offers to its consumers. These game mechanics are also famous worldwide. For instance, runner game mechanics can be the right decision for the food delivery business.

The latest option is the game mechanics that are custom and are not known widely. These games usually fit business specifics a lot, show some business processes, outputs, or processes in a specified manner to explain their benefits in a gamified way. As an example, there was a game for the business that produced and distributed windows. The end goal of the game was to show and explain why their windows are safe. A user played as a robber and should open windows. After a while, the police came, and a robber was caught. Then the game explained to a user why he couldn’t open windows and why these windows are reliable.

Purpose of a branded game

More often than usual, a branded game should be focused on achieving only one aim. Among the most popular objectives for branded games are:

• Tell about a brand;
• Tell about services or products that a brand offers and their advantages;
• Promote specific services or products;
• Offer discounts or promo codes for services or products.

Depending on objectives, the game can be different technically and from the visual style.

Technical side

Technically a web-based is an iframe that contains the game front end interface and visuals that are displayed to users. The technical stack usually includes HTML5, JS, or React Native, optionally PixiJS, Phaser, or ThreeJS if it’s a game with 3d graphics. Game visuals can be 2d or 3d. The choice of video game graphic styles depends on game mechanics, visual style, and performance requirements. In case the game pursues advertising goals only and is not focused on gathering user data, it’s enough to stay with the front end development.

The back end development is required in case the game is developed to collect user data about their interactions with the game.

This usually includes game sessions (overall and successful), users score, achievements, specific goals that players need to complete to get access to products or services that the brand offers through the game. Besides that, the back end is useful when players have in-game accounts. It gives the possibility to access their account from any device.

Performance

Web-based game performance is a very delicate issue because of the countless number of devices, browsers, OS versions, and platforms where the game should work. Also, the Internet speed is very different all over the world. All that means that the high performance of a game can’t be 100% predicted. Here are some recommendations that can affect the game performance for the better:

• Avoid using graphics filters, complex shaders, and many masks in your game, as far as they can cause an FPS dropping on some devices;
• Use skeletal animations (such as Spine) instead of heavy images sequences;
• Use programmatical animations for some simple effects instead of loading exported animations;
• Use JPEG instead of PNG images in case if no transparency needed;
• Compress graphics assets in the same way as scripts and CSS;
• Some UI elements (buttons, borders, simple backgrounds) can be drawn on canvas with graphics tools, instead of using loaded images for this purpose;
• 5-7 seconds loading time for a game – this is the approximate time of loading, and it’s a goal to achieve during internal game testing. Further, it can be different depending on the Internet speed.

Perfect recipe

Taking into consideration everything mentioned above, we can resume and combine the perfect recipe for the web-based branded game. Actually, there’s no perfect one? But we can list the main characteristics to determine while planning the web-based branded game:

1. Determine a game purpose;
2. Choose the game mechanics that better fits the business, audience, and meets the game goals;
3. Decide with assets to produce the game with 2d or 3d graphics;
4. Optimize assets and technical side to improve the performance;
5. Decide with the game hosting and back end sync in case it’s required.

Besides that, you check out more insights about game development phases and how to select the technical stack for the web-based game. In the case of more questions, just feel free to contact us directly.