Hit Squad: Rethinking Game Development for the Web

Web-Centric Design for Scalable Games and Faster Iteration

PLAY HIT SQUAD IN YOUR BROWSER NOW

TL;DR

Hit Squad highlights the advantages of utilizing the web for efficient game development. By building the UI entirely on the web layer and combining an event-driven architecture, and a modular approach, the Hiber team were able to maximize their efficiency. This structure enabled faster development, future-proofing with WebGPU, and a scalable, adaptable design perfect for web-integrated game environments.

The Challenge

With Hit Squad we wanted to rethink traditional game development structures when working with a game engine built for the web. The challenge with this vertical slice was to demonstrate the potential of leveraging a web-based metagame combined with the Hiber3D engine to achieve flexibility, speed, and scalability in game development.

The Goal

Create a lightweight and scalable browser-based game, where game mechanics are separated from data handling to allow for next level development efficiency.

The Team

4 Web Developers, 1 Gameplay Developer, and 1 Artist.

The Process: Core Features and Innovations

1. Web-Controlled Game Elements

For Hit Squad, we separated data handling from the Hiber3D engine, enabling a web layer to manage player interactions and events in real time. The game loop operates within the engine, while an event-driven architecture facilitates communication between the game and the web.
The event bus, within the Hiber3D engine, supports custom event definitions. Through this, the gameplay code can flag specific events to be communicated to and from the web layer. This setup allows, for instance, a web UI button to trigger an ActionButtonPressedEvent directly in the game.
To bridge the gap between C++ in the engine and JS/TS on the web, we use the Embind library. This facilitates conversions, allowing quick updates and flexible event management without needing modifications to the engine itself.

Coding the built in event system for web <-> engine communication:

Marking events from the web layer:

Launching the engine, setting up an event listener and triggering an event:

2. Enhanced UI with Rive

We implemented Rive for dynamic UI elements like buttons and other game UI elements, such as a victory animation. These were designed using the Rive editor and integrated into the web layer. This allowed our artist to focus on making the UI elements look and feel as great as possible, without the need for input from the development team.
Putting the UI in the web layer also meant that we could release/update specific UI pieces without triggering an engine update/content update.

3. Synced Animations

We built a timeline module which was responsible for playing character animations and triggering events on certain keyframes. This allowed us to sync multiple character animations and UI changes together. For example, when attacking another character, we play an attack animation on that character, then a hit animation on the target character along with the UI in the web layer showing the damage value.
This timeline can easily be extended to modify more things like character positions, camera movements etc. The data structure makes it suitable for being stored externally, like a database. This in turn makes it possible to create entirely separate animations based on which character and action the player performs.

4. Gameplay Mechanics

Players select from three actions—damage, deflect, or heal—in a turn-based format that emphasizes character progression by unlocking new characters and missions.
The web layer initializes the game and manages UI elements, synchronizing game states such as character health and available actions. It listens for updates from the game engine to ensure the UI reflects the current game status and sends player actions back to the game via events (e.g., LoadScenarioEvent, SelectTargetEvent, ActionButtonPressedEvent). This layer also controls character stats and available actions, allowing smooth player interaction without requiring engine modifications for each update.
Meanwhile, the game engine handles core gameplay mechanics, including turn order, health status, and target selection, and independently runs the simulation after initialization. It also manages the rendering of 3D models, like the background world and characters, while the web layer renders the UI, creating a cohesive visual and interactive experience.

John Segerstedt, Hiber3D Lead Gameplay Developer – “When developing the gameplay, we first defined the interop events. Then, gameplay devs and web/UI/art devs could work completely in parallel. This allowed for gameplay logic to be developed while offloading presentation fluff.”

6. Development Approach

We built the vertical slice by breaking down gameplay into modules and events. This modular approach allowed us to split in two teams to simultaneously work on game mechanics and web interactions, increasing efficiency. It also enabled both teams to showcase their creativity within their particular areas of expertise.
We rapidly iterated on Hit Squad, building and testing locally, then pushing the game live to the web, allowing us to bypass blockers such as extensive compliance checks.
UI elements, aside from those created with the Rive editor, were built with React on top of Javascript on the web layer, enabling easy updates and design changes without engine modifications.

Hit Squad Gameplay in the Browser

Outcomes

1. Adaptable, Scalable and Future Proofed

Web-Driven Scalability: Because the Hiber3D engine is built for the web it easily supports dynamic, web-centric projects like this, enabling scalable updates and expansions that align with the evolving needs of web-based game development.
Adaptable Design: The decision to build the UI entirely in the web layer made it possible for the team to iterate quickly on all the things around the core game loop: add more characters and tweak their stats, add more levels and iterate on the UI look and feel. *Creating the UI in the web layer can have its downsides, most notably when it comes to performance, but for a game like this it worked really well. For other projects we might decide to build the UI as part of the game engine instead.
Future Proofed: We targeted WebGPU to enable next gen graphic capabilities for the web.

Filip Engberg, Senior Hiber3D Web Developer – “Using the built in event system together with building parts of the game in the web layer made it possible to iterate very quickly. As an example, all menus and camera movements are controlled from JS and we could modify these at runtime with hot reloading without having to rebuild anything.”

2. Increased Efficiency and Faster Iterations

Development Time Reduction: By managing UI and event-driven gameplay on the web layer, the project reduced development time significantly.
Rapid Update Cycles: Utilizing web-based control enabled continuous integration, allowing for incremental improvements and frequent releases without disrupting the player experience and without the need for QA rounds for each release. This approach shortened feedback loops, accelerating iteration speed and enabling updates to be deployed much faster than traditionally.
Enhanced Team Efficiency: The team was able to work in parallel, maximizing productivity and allowing the game and web development teams to contribute independently. This modular approach not only increased efficiency but also supported rapid testing and refinement of features in real-time.

3. Flexible Development for Diverse Teams

Tailored Approach: The project was designed around the strengths of a team split between web and game developers, leveraging the web layer heavily to maximize the web development talent on the team. The Hiber3D engine’s flexibility allows teams to choose whether the web layer or engine should take precedence, adapting to each project’s needs.

Mikael Ryding, Hiber3D Product Owner and Hit Squad Project Lead – “The Hiber3D engine is built for the web and that has allowed us to challenge the structures of traditional game development and adapt to the shape of the team working on this project i.e. both web and game developers. By putting building the majority of the UI in the web layer we were able to achieve lightning fast iterations and get the goal faster. Hit Squad demonstrates the power of using a web-based metagame to allow for flexibility and scalability”

Conclusion

The Hiber3D engine offers flexibility, with the possibility of adapting to the specific needs of each project. By integrating Hiber3D with a web-based metagame, Hit Squad showcases the efficiency of leveraging the web for UI and the engine for gameplay. This approach allows for faster iteration, simplified updates, and scalable content expansion—all managed through a responsive web layer.

Hit Squad highlights the Hiber3D engine’s potential to serve the foundation for dynamic, web-integrated game environments, ideal for projects that prioritize adaptability, speed, creativity and scalability.

PLAY HIT SQUAD IN YOUR BROWSER NOW

WebGPU: Redefining Web Gaming

In the ever-changing world of game development, the next big leap is happening right in your browser. WebGPU, a next-generation web graphics API, is redefining what’s possible on the web by eliminating long downloads and breaking down platform barriers.

What is WebGPU and Why Does it Matter?

To understand it, we need to look back to WebGL, which revolutionized web graphics when it launched in 2011, bringing GPU-accelerated rendering to the browser through its JavaScript-based adaptation of the OpenGL ES 2.0 graphics library. By enabling web pages to offload rendering tasks directly to the device’s GPU, WebGL allowed for rapid processing and seamless graphics rendering within a <canvas> element.

As the successor to WebGL, WebGPU builds upon WebGL’s foundation to become a new web standard. It offers enhanced compatibility with modern GPUs, supports general-purpose GPU computing, accelerates operations, and unlocks more advanced GPU features. These improvements translate into superior rendering capabilities and significantly better performance, allowing browser-based games to look more impressive and run smoother than ever before, finally rivaling their desktop counterparts.

But the impact of WebGPU goes beyond just these technical advancements. Let’s explore how it is set to transform web game development:

1. Enhanced Graphics and Performance

With WebGPU, developers can tap into advanced GPU features that were previously difficult or impossible to access in a web environment. This translates to more realistic lighting, complex particle systems, and overall richer visual experiences. Moreover, the lower overhead and more efficient GPU utilization lead to smoother gameplay, even on less powerful devices.

2. True Cross-Platform Development

One of the most exciting aspects of WebGPU is its “write once, run anywhere” capability. Developers can create a single codebase that works across multiple platforms, significantly reducing development time and costs. This also simplifies deployment and maintenance, as updates can be instantly rolled out to all users regardless of their device or operating system.

3. Advanced Physics

WebGPU allows for GPU-accelerated physics simulations, enabling more realistic in-game physics and the ability to handle large-scale effects like explosions and weather systems.

4. Immersive Experiences

With WebGPU’s improved rendering capabilities, developers can create larger, more detailed game worlds. This, combined with advanced lighting and materials, leads to more immersive gaming experiences that rival those of traditional desktop games.

5. Enhanced Real-time Multiplayer

The efficient GPU utilization enabled by WebGPU supports increased player counts in multiplayer games. Additionally, the overall reduction in latency makes for smoother, more responsive multiplayer experiences.

6. Innovative Gameplay Mechanics

WebGPU paves the way for new types of gameplay mechanics that leverage GPU power. This includes things like dynamic terrain deformation and complex, GPU-driven AI behaviors. Perhaps most excitingly, it makes browser-based VR and AR experiences more feasible.

Hiber3D: Harnessing the Power of WebGPU

At Hiber3D, we’ve fully embraced WebGPU, integrating it with our engine to ensure our partners can deliver the best possible gaming experiences across all devices and browsers. Our engine combines WebGPU together with our Hiber3D Development Kit, providing a powerful toolkit for developing high-performance, scalable, and efficient games.

The Future of Gaming

Thanks to WebGPU, it finally makes sense to move from mobile apps to the browsers. As WebGPU matures and becomes more widely adopted, we can expect to see a new generation of browser-based games that rival their desktop counterparts in terms of graphics, performance, and gameplay depth. And perhaps even more exciting is the fact that the ability to play high-quality games directly in a browser, without the need for downloads or installations, will greatly extend reach to emerging markets.

Why the Web is the Future of Gaming

3 Reasons the Web is Shaping Gaming’s Future—and Why the Hiber3D Engine is Ready to Power that Change.

Browser is the new black.

Mobile gaming already commands the largest share of the games industry, holding over 50% of the market. By 2030, the mobile market is projected to hit $272 billion USD, with an annual growth rate of 11%. That’s colossal, but not at all surprising. What’s more interesting is how the landscape is evolving and where the future opportunities lie.

Emerging markets driven by a growing youth population with spending power and improving infrastructure, are pushing the demand for mobile through the roof. These markets are home to 1 billion gamers, yet, they face significant challenges like high data costs, sluggish internet, a diverse range of devices, making app downloads both expensive and cumbersome.

Browser-based mobile games are solving this with instant play, broad device compatibility, and removing the need for frequent downloads or updates. But the point is, to run a high end, immersive game on any web browser, across any device, anywhere, you’ll need an engine that’s light enough – such as one with a sub 5 megabyte core.

Skip the middlemen and go D2C

Since the late 2000’s mobile games have relied on the app stores for distribution, monetization and a global reach. However, as mentioned in Jonas Tageman’s On Web First blog, what started out as a dream scenario for many, has long since become a headache. And, as with every monopoly, when the tolls get too high, people start looking for a detour – and in mobile gaming, that detour is the web.

As noted by Archie Stonehill of Stash, the disruption of the mobile ecosystem is already well and truly underway, not least with alternative app-stores rising on the strength of Epic’s win, but with more and more developers choosing to go direct to consumer not only to circumvent fees (30% on gross revenue) and market saturation, but to leverage game data for personalized marketing. Among myriad other benefits with D2C are price flexibility, broader reach (less censoring), customized user interfaces, and the possibility to localize content.

At the heart of this disruption, web-first game engines like Hiber3D are enabling developers to set themselves up for long-term success, by maintaining control of their revenue and data, while also achieving greater market penetration i.e. more money per sale plus a larger market to sell in.

True Web Games > Traditional Games on the Web

To unlock the full potential of web gaming, we need to fundamentally rethink how games are built. Elements traditionally housed within the engine can easily bloat a web game, meaning large, unnecessary downloads and long load times. By fully utilizing the capabilities of the web, many components – like shops, progression systems, and personalization – can, and should, live in the browser instead. We call this approach ‘true web games,’ where the engine is kept light and fast to ensure a smoother user experience while also cutting down on development costs and time. This also allows for smaller, more targeted patches and updates.

At Hiber, we are adamant that the web is the future of mobile gaming. And it’s not just about porting games to the web, it’s about fully embracing the potential of web technologies to deliver the best possible game experiences, not only in gameplay but also in the metagame.

Multiplayer Made Easy with Hiber3D’s Out-of-the-Box Solution

Published by Jonas Tageman, Director of Technology at Hiber

Multiplayer gaming is a challenge for developers, with synchronization, latency, and network stability posing the greatest hurdles. However, Hiber3D is disrupting the development landscape by offering out-of-the-box multiplayer features that greatly simplify the creative process.

At Hiber, we believe that web-based gaming and multiplayer go hand in hand. Sure, you can create immersive single-player games, but why not utilize the fact that the player is already dialed into the web? We also believe that most game developers would prefer to focus on the actual game rather than bother with all the hurdles listed above.

Simplifying Multiplayer Development with Hiber3D

Hiber3D addresses these challenges head-on by providing built-in multiplayer support. This allows developers to focus on game design and player engagement rather than building the foundations, making it one of the quickest ways to get a multiplayer game up and running.

The Hiber3D Development Kit ensures that even a creator with limited coding knowledge can get up and running quickly without needing to delve into complex code.

1. Focus on Core Gameplay Mechanics

Whether you want to create a compelling game or move fast with delivering value to a client, time wasted on plumbing is probably better spent elsewhere. Use that time to solidify the core mechanics of your game, ensuring that the basic gameplay is engaging and enjoyable. A strong foundation will make for more compelling multiplayer interactions.

2. Optimized for Performance

Multiplayer games require smooth and responsive gameplay to keep players engaged. Bandwidth costs time and money, and lag is the universal killer of joy. We make sure that your creation gets that low-latency a competitive shooter needs, or the low bandwidth that is more efficient for a social experience. Let the experts be experts. You most certainly create better games than us, but our net code is the Koenigsegg of the video game industry – cleverly engineered, incredibly fast, and setting performance benchmarks.

3. Implement Fair Play Mechanics

Balancing is crucial in multiplayer games. Ensure that all players have a fair chance of winning, that no single strategy dominates the gameplay, and that no-one can use unfair means to win or get unbeatable scores. But cheaters are gonna cheat! That’s why we have a server authoritative solution and also provide you with the tools to sanitize and check all winning conditions.

4. Encourage Social Interaction

Multiplayer games thrive on social interaction. Incorporating features that encourage players to communicate and collaborate is key. Hiber3D comes with in-game chat, team-based objectives, and competitive leaderboards. We also support matchmaking that elevates these experiences, making sure that the players want to engage again and again.

5. Regularly Update and Maintain

Multiplayer games are living games. The gaming community expects ongoing support and updates. Regularly release patches and updates to fix bugs, introduce new content, and respond to player feedback. This not only improves the game but also helps build a loyal player base that returns regularly. For the game, you most definitely want to fine-tune it and make sure that it’s patched up and as close to perfect as you can get it. However, security patching the backend and game server is not only boring but also tedious and time consuming, and it might require a skill-set you need to obtain elsewhere. That’s why you should leave that to us.

Focus on the game, let us do the rest.

Conclusion

Hiber3D’s out-of-the-box multiplayer is a significant boon for any game developer looking to move fast and retain quality. By eliminating the hassle of managing complex networking code, you can focus on what truly matters: creating well planned, engaging, and enjoyable games. Put simply, with the best practices and support provided by Hiber3D, you can create web-based multiplayer games with unparalleled ease that keep players coming back.

Interested in finding out more? Get in touch or book a demo today.

And while we have you, dive into some of the latest multiplayer games created with the Hiber3D engine:

Tanks

Temple Shooter

Enchanted Grove Grand Prix

Hiber3D – Mid Year Roundup

July 2024 Edition

The first half of 2024 flew by in the blink of an eye, and we packed it full of milestones. From Hiber3D engine enhancements to strategic partnerships to innovative AI tools and a brand revamp, we left no stone unturned.

Let’s take a look at the highlights…

Hiber3D Mid Year Roundup

HIBER3D PRODUCT INNOVATIONS

World Creator

Our text-to-3D world tool was made available to all users in January 2024, following a period in pre-alpha when over 10,000 early access members signed up for the opportunity to test and give feedback on the technology. With over 90 thousand prompts entered to date, this tool is democratizing 3D world-building, making it accessible to anyone. Try the World Creator today.

SkyScape AI

Building on the success of the World Creator, we launched SkyScape AI, our image-to-3D world tool. Create virtual environments based on any image to push the boundaries of creation. Try SkyScape today.

SkyScape AI powered the Hiber3D engine.

HIBER3D MILESTONES

Shooter and other Game Modes

We added shooting mechanics to the growing list of gameplay features included in the Hiber3D engine, i.e. driving, flying, platformers, obbys and customizable game rules. All of these are accessible right out of the box! This means less time spent hunting for third-party plugins, custom coding, and building foundations, and more time spent on creating incredible games and experiences.

HiBux In-App Currency Launch

We partnered with Stash to introduce our in-app currency HiBux within our web-first HiberWorld UGC platform. A significant milestone on the road to building out a thriving creator economy.

HiberLabs Tests with HDK

We put the Hiber3D Development Kit (HDK) to the test with our HiberLabs series – a collection of games spanning diverse genres. From Halloween thrillers, to Turbo Goal (vehicle football), hover car racers, snowboarders, the hugely popular Sumo Cars (vehicle wrestling), and an engaging side-scroller series, each of these games highlights the ease, speed, and flexibility of creating with the Hiber3D engine.

New Gameplay Modes Out-Of-The-Box with the Hiber3D Engine

HIBER3D EVENTS AND PARTNERSHIPS

Google Next, Leap, Nordic Games

We traveled the globe over the past few months to showcase our Hiber3D engine to the worldwide tech community, most notably Dice Summit in Las Vegas, Leap in Riyadh, GDC in San Francisco, Google Next in Las Vegas to unveil SkyScape, and last but not least Nordic Game in Malmö.

The Voice, Angry Birds

We launched two premium branded avatar catalogs in collaboration with Ready Player Me for the iconic Angry Birds and The Voice IPs. These gamified brand spaces showcased exclusive purchasable wearables and have racked up almost 2M plays to date.

Angry Birds powered by Hiber3D

NEW BRANDING

Last but not least, this year marked a new chapter for Hiber3D with the launch of our new visual identity and website that reflects our commitment to innovation, creativity, and exploration. We hope you love the new look as much as we do!

Looking Ahead

The past six months have been a whirlwind of activity and progress, and we expect the next six to be nothing less. We can’t wait to show you what we’ve got cooking.

Thank you for being a part of our journey. Here’s to many more months of innovation, creativity, and community! Get in touch to learn more about the Hiber3D engine.