Hit Squad Demo: 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, a single level demo, 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.

Hit Squad created with Hiber3D

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

Develop a scalable, browser-based game demo by shifting key elements—such as UI, characters, and progression—to the web layer, allowing for increased 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:

1. Marking events so they are available in the web layer

// This event can be triggered from JS
struct H3D_INTEROP_RECEIVE_FROM_JS StartGameButtonPressedEvent {};

// This event can be listened to in JS
struct H3D_INTEROP_SEND_TO_JS GameStartedEvent { 
  float level; 
};

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

import launch from "@hiber3d/interop"; 

const api = await launch({ 
  canvas: document.getElementById("#canvas") 
});

// payload is fully typed if using TypeScript
api.onGameStartedEvent((payload) => { 	
  console.log("game was started with level", payload.level); 
});

api.writeStartGameButtonPressedEvent();  

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.
Hit Squad Gameplay
Gameplay Flow

   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 demo 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.

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.

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.

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.

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.

Hiber3D – Web First Engine

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:

Built with the Hiber3D Web First Engine, published on HiberWorld