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

5 Reasons Why Publishers Will Benefit from Native Web Integration

Maximize revenue, reduce costs and future-proof your releases: why utilizing the web-based metagame will boost your bottom line.

Success in today’s gaming industry requires more than just great games – publishers need innovations that give them an edge. Native web integration does exactly that, blending core gameplay with web technologies to unlock the full potential of the metagame i.e. the web ecosystem surrounding the game.

By utilizing the web-based metagame, publishers can go direct-to-consumer, drive engagement, and streamline development costs, positioning themselves for success in an increasingly crowded industry.

Here are five key reasons why native web integration is the future:

1. Maximize Revenue

Native web integration allows microtransactions and in-game purchases to be handled within the web-based metagame, reducing dependency on the engine. It allows for cosmetic purchases and participation in special events, even outside of regular gameplay, boosting engagement on the go.

This paves the way for more frequent and diverse monetization opportunities beyond core gameplay, resulting in a richer, multifaceted player experience and driving greater revenue potential without interrupting the flow of the game.

In a world where games compete with giants like Netflix, TikTok—and even sleep— this persistent connection to the game ecosystem can significantly boost player loyalty and lifetime value.

2. Reduce Development Costs

Leveraging the web-based metagame allows for quicker updates and easier maintenance, lowering costs for publishers. By updating the surrounding web elements independently of the core game, publishers can streamline development processes and allocate resources more effectively.

At HiberWorld, the UGC platform powered by the Hiber3D engine, we housed progression and monetization entirely on the web, allowing for rapid content updates without extensive client-side changes. This approach reduces the need for costly, large-scale updates to the game itself.

3. Streamlined Updates

Web integration bypasses app store delays, allowing publishers to roll out changes and new content quickly. Whether used alongside app stores or as a fully web-based experience, this agility is crucial for keeping players engaged.

Publishers can respond to feedback, launch time-sensitive events, and continuously improve the game experience without the delays typically associated with traditional update processes. This adaptability keeps the experience fresh and players invested.

4. Cross-Platform Compatibility

Web integration ensures a consistent experience across devices, broadening player reach without extensive additional development. This capability enables publishers to engage a wider audience and adapt to varied player preferences across platforms. Players can transition between mobile, desktop, and even console versions of the game, maintaining their progress and enjoying a unified experience regardless of the device they choose to play on.

5. Improved Data Control

A direct-to-consumer model through the web-based metagame gives publishers better insights and control over player data and allows for customized marketing strategies. By analyzing player behavior within the web layer, publishers can create targeted promotions, offer personalized content, and optimize monetization strategies.

This deeper insight allows for more targeted promotions, personalized content, and informed decision-making when it comes to game development and monetization strategies.

Our Perspective:

Since 2017, Hiber has been invested in native web integration while developing HiberWorld, a UGC platform. Today, HiberWorld supports over 6.5 million web games and 1.2 million creators, fostering a global community deeply engaged through web-based metagame and meta-progression systems.

The future of gaming lies in building ecosystems that extend beyond the core game, and native web integration is the key to unlocking this potential. Publishers who adopt this approach will not only boost revenue and cut costs but also future-proof their games against evolving market trends.

As players increasingly expect frictionless, cross-platform experiences with constant updates and engaging content, native web integration – combined with the latest innovations in web technology like WebGPU – offers publishers the opportunity to redefine how they meet these demands while boosting their bottom lines.

Contact us to learn how the Hiber3D engine can unlock new opportunities for your next project.

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

On Web First

Published by Jonas Tageman, Director of Technology at Hiber

You merely adopted Web First. We were born in it, molded by it.

Pop cultural paraphrasing aside, Hiber’s vision from the start has been that 3D augmented sites will be the predominant way of experiencing the Web in the near future. Back in 2017, when Hiber was founded, the options for creating good-enough experiences were few and underwhelming. This led to the decision to craft our own engine, Hiber3D, in order to, if not insouciantly remove all obstacles, at least be in control of every facet and stride on the technological forefront.

Why

There are tons and tons of reasons why Web-First should be the go-to strategy. Let’s take a look at a few.

Vendor lock-in

Unless you’ve happily lived under a rock, you should be aware of the back and forth battles between developers and various app stores, ranging from Apple’s behemoth to smaller but equally autocratic ones. What might start out as an amazing opportunity for up-and-coming games and apps can eventually lead to an abyss of despair. Even the touted upside for users, such as curated content, tested selection, and ease of use, are debatable, with users often used as pawns in the fight over market cap.

Forced revenue-share on everything, with the only plus point being that there is no other choice, since you can’t sidestep either store or payment methods, feels a tad outdated in modern times.

By going Web-First, you have the ability to put all of that aside and be solely in charge of your own destiny and eschew draconian policies. Build what you want, put it where you want it, and reap the rewards any way you want to.

Emerging markets

There is a huge untapped user base in Eastern Europe and Asia. These markets are characterized not only by a growing middle class and significant investments in Internet infrastructure but also by the fact that mobile devices are the primary gaming platform. Unlike consoles or spec’d-out gaming rigs, it is the (in all fairness, overpowered for most use cases) little device that we all carry with us most of the time, that is the go-to for gaming. Whether you have a little time to kill or an urge to play for hours and hours, it’s the handiest tool for gaming.

For context, according to research firm Mordor Intelligence, the mobile gaming market in Asia is projected to reach approximately $77.86 billion by 2027, growing at a compound annual growth rate (CAGR) of 6.16% from 2024 to 2027. Meanwhile, Eastern Europe’s mobile gaming market is expected to generate around $1.01 billion in 2024, with a projected CAGR of 6.79% from 2024 to 2027.

Truly Cross-Platform

By leveraging web technology and adhering to standards, we can target all somewhat modern devices capable of browsing the web. This translates to billions of targetable users, and as the capabilities for high-end devices rise, the games that we can deliver go from standard mobile games to triple-A experiences.

How

As previously stated, Web-First should be the obvious strategy for all games and 3D experiences. Even so, that’s not the case. The primary reason for this is the lackluster tech and tooling available. Sure, several engines can target the web; however, it’s always an afterthought, a hygienic mark in the list of capabilities.

The users are ready. Applications and games running in the browser can be truly outstanding, both gameplay-wise and in terms of graphical capabilities.

But at Hiber, we believe that it’s not enough to just make a gorgeous game accessible and smooth-running. It also needs to make use of every single aspect of being Web-First and not settle for mediocrity. Let’s look at some things we believe are fundamental to achieve this

Rapid Development

Aside from it’s industry-leading runtime performance in the browser, Hiber3D is designed with a focus on developer productivity. Creating games and iterating on ideas should be fun and nimble. The days of getting stuck in boiler plating or getting side-tracked by chores are legends of the past.

From the get-go you are equipped with a fully fledged dev environment, filled to the brim with possibilities, and within the blink of an eye you will have a working game published and accessible to anyone.

Build once, deliver anywhere.

Well yeah, this should be a given. But it cannot be overstated how huge this is. From a pure mobile perspective, just going from two platforms to one is a godsend. And add to that the myriad permutations you end up with if you venture into the desktop and console landscapes.

Embrace the Web

The browser is more than just an app, it’s the Swiss army knife giving you the power of desktop through clear and concise APIs. Modern web development is also focused on making sure to only load the resources you need for the time being, keeping payload and bandwidth usage low. Hiber3D is remarkable in its efficiency at prioritizing assets to load, resulting in not only a small bundle size but also an astonishingly low load times, sending the player into the game immediately.

Add to that all the other conveniences of the web, including file format standard, easy-to-use streaming media, an unparalleled delivery network and so on.

What’s next

Hope this article has intrigued you! This was just a small glimpse of the possibilities of Web-First game development. Even though the move to Web-First is obvious to me I would love to hear your thoughts or concerns. We’ll dig deeper into these topics in upcoming posts, but for now you can check out our posts Streamline Development with Hiber3D and Multiplayer Made Easy with Hiber3D’s Out-of-the-Box Solution

And when you are ready for the change, rest assured that we are there for you with expertise and a state of the art platform. Whether you’re an independent developer or part of a game studio, Hiber3D offers the tools and support you need to bring your vision to life. Get in touch or Book a demo today.

Oh, and while we have you why not check out our engine in action with some of the recent HiberLabs games. Jump right in: