NBA PIXEL ARENA
Multiplayer WebGL Game 02.2023
Multiplayer WebGL Game 02.2023
A multiplayer microverse celeberating basketball fandom.
In 2022 Media Monks collaborated with NBA & Google to create an immersive avatar experience within the NBA app for the 2022 playoffs. Within the experience user’s could customize their avatar, participate in real time trivia against other users and interact with half time and post game highlights through data visualization.
Fast forward a few months after the successful launch we were determined to create a bigger and more ambitious world for the February 2023 All Star weekend. To celebrate basketball culture and fandom we designed a world where players could gather to play, create, earn, and celebrate.
My role on this project was to architect the WebGL experience whilst also leading a team of 6 WebGL developers. With a collective team of 150+ people covering all aspects of production this was a multi-faceted challenge. Although this didn’t deter us from exploring new ideas and technologies to bring a microverse to life.
The experience featured 5 zones that taps into key areas of basketball fandom.
The Center Court
The Center Court is an open area where players can shoot hoops, explore a city with jump pads and shop for new gear and accessories via the Drop Zone.
Locker Room
The Locker Room is your personal space where you can customize your avatars face, clothing and accessories through a diverse and vast range of options.
Creator Zone
The Creator Zone provides players with a remix tool to recreate legendary moments from recent and historical NBA games with their avatar. Players can customize the camera, music, VFX before downloading their personalized video to share on social media.
Skill Zone
The Skill Zone puts players face to face as they compete to earn PX through two different game modes - Trivia and Shot Clock. Each mode works as a timed session with different game mechanics. With the objective of scoring the most points (PX) to win.
Drop Zone
The Drop Zone offers players a marketplace to trade their hard earned PX in for the coolest and most fashionable futuristic street wear. Clothing, accessories and avatar customization options were given four rarity traits: Common, Fandom, Rare, Legendary. Each of which were inspired by NBA’s Top Shot.
Architecture
Shortly before development began for this project I prototyped a microverse framework that set out to explore ECS, a game architecture pattern. ECS is best known for providing a flexible and efficient way to design and organize code. With the sheer amount of functionality, data and 3D models required to make this game complete I was hopeful that using an efficient programming paradigm would help alleviate common issues when developing and collaborating with a team of creative developers.
![]()
After successfully implementing ecs-lib into our threejs framework, adding new objects and implementing new gameplay mechanics became a breeze. The final prototype served as the basis for what would become the main game engine, equipped with a third person controllable avatar, joystick, keyboard and game controller support.
The asset pipeline
We made several adjustments to our asset pipeline to accommodate how assets were delivered to the technical artist on the team. Level design and collision GLTFs were exported directly from Unity, avatar and other world building assets were exported directly from Blender. All of these assets, whether they’re compressed or not, get transformed through our command line asset optimization scripts. Using config files we can precisely specify what type of compression we want to apply to the GLTFs and KTX textures. Once processed Typescript files are generated based on the destination directory, which speeds up referencing the assets in the final codebase.
Gameplay
To incentivise players to earn PX through the mini games we came up with 4 core game mechanics that could scale across the open world and mini games - shooting, dunking, blocking and traversing.
![]()
![]()
![]()
Shooting & Dunking
As players encounter hoops a shot clock meter appears. Timing is a core component of making a successful shot, the quicker and more precise you are, the more points you’ll score against others! After 3 successful shots players are guaranteed a slam dunk which is non blockable!
Blocking
If you’re a little cheeky and competitive you might seek enjoyment out of blocking others shots as I do. When players begin to make their shot attempt others have a brief time window to block their shot.
Serverside Game Validation
All game logic and user actions are validated server side to ensure players don’t cheat whilst playing. For shots we used cubic bezier curves and fixed time steps which allow us to run several updates on the game server to ensure a shot reaches the hoop without being blocked by an opponent. We toyed with the idea of using physics to control the ball throwing but realized early on the game server would need to run these simulations. Given the short timeframe we decided not to go with a physics based approach. Deterministic bezier curves were easier for our developers to implement and more reliable to test.
Journee
As a graphics programmer who loves the art of rendering and lighting I always try to elevate the visual fidelity of projects I work on. Unfortunately given the time constraints of this project we never really reached the level of visual fidelity we were aiming for.
At Media Monks we were given exclusive access to Journee - an Unreal Engine pixel streaming platform for virtual worlds. I was in the process of learning Unreal Engine at the time so I was curious to replicate the Pixel Arena world within Unreal Engine for others to explore and experience on the Journee platform.
After spending a week on integrating GLTF assets, reworking materials and lighting we had a fully explorable prototype rendered in UE5 within a web browser. Journee’s platform and plugin for Unreal streamlined the entire process of pixel streaming a Unreal Application.
Closing Thoughts
I’m incredibly proud of what our team accomplished in 12 weeks. This was by far the largest and most ambitious immersive WebGL experience we’ve created to date. The sheer amount of creativity, ux, design and programming required to launch this project was absolutely insane but we pulled through, albeit at the cost of the quality we aim to release projects at 🖤.
After successfully implementing ecs-lib into our threejs framework, adding new objects and implementing new gameplay mechanics became a breeze. The final prototype served as the basis for what would become the main game engine, equipped with a third person controllable avatar, joystick, keyboard and game controller support.
The asset pipeline
We made several adjustments to our asset pipeline to accommodate how assets were delivered to the technical artist on the team. Level design and collision GLTFs were exported directly from Unity, avatar and other world building assets were exported directly from Blender. All of these assets, whether they’re compressed or not, get transformed through our command line asset optimization scripts. Using config files we can precisely specify what type of compression we want to apply to the GLTFs and KTX textures. Once processed Typescript files are generated based on the destination directory, which speeds up referencing the assets in the final codebase.
Gameplay
To incentivise players to earn PX through the mini games we came up with 4 core game mechanics that could scale across the open world and mini games - shooting, dunking, blocking and traversing.
Shooting & Dunking
As players encounter hoops a shot clock meter appears. Timing is a core component of making a successful shot, the quicker and more precise you are, the more points you’ll score against others! After 3 successful shots players are guaranteed a slam dunk which is non blockable!
Blocking
If you’re a little cheeky and competitive you might seek enjoyment out of blocking others shots as I do. When players begin to make their shot attempt others have a brief time window to block their shot.
Serverside Game Validation
All game logic and user actions are validated server side to ensure players don’t cheat whilst playing. For shots we used cubic bezier curves and fixed time steps which allow us to run several updates on the game server to ensure a shot reaches the hoop without being blocked by an opponent. We toyed with the idea of using physics to control the ball throwing but realized early on the game server would need to run these simulations. Given the short timeframe we decided not to go with a physics based approach. Deterministic bezier curves were easier for our developers to implement and more reliable to test.
Journee
As a graphics programmer who loves the art of rendering and lighting I always try to elevate the visual fidelity of projects I work on. Unfortunately given the time constraints of this project we never really reached the level of visual fidelity we were aiming for.
At Media Monks we were given exclusive access to Journee - an Unreal Engine pixel streaming platform for virtual worlds. I was in the process of learning Unreal Engine at the time so I was curious to replicate the Pixel Arena world within Unreal Engine for others to explore and experience on the Journee platform.
After spending a week on integrating GLTF assets, reworking materials and lighting we had a fully explorable prototype rendered in UE5 within a web browser. Journee’s platform and plugin for Unreal streamlined the entire process of pixel streaming a Unreal Application.
Closing Thoughts
I’m incredibly proud of what our team accomplished in 12 weeks. This was by far the largest and most ambitious immersive WebGL experience we’ve created to date. The sheer amount of creativity, ux, design and programming required to launch this project was absolutely insane but we pulled through, albeit at the cost of the quality we aim to release projects at 🖤.