Browser Extension Game Engine

Our Live version the Game Engine can be found here: https://chromewebstore.google.com/detail/metapals/jbkmjopbgbakeimmbhdaiaaegkjphkho

To bring immersive digital companions into our daily digital environment, our first step was to integrate with our computers - through our browsers. This approach allows us to present MetaPals as interactable and authentic entities, blending into the user's online world without having to 'load' up an application or website.

Built using TypeScript, our engine ensures robust and scalable application development, catering to the dynamic nature of MetaPals. Our choice of TypeScript, an extension of JavaScript, allows us to create a seamless and interactive experience directly within web browsers.

The engine utilizes PixiJS v7 for rendering, paired with Spine for animations, enabling detailed and responsive interactions of companions within the browser's Document Object Model (DOM). This combination allows for real-time rendering of companions' actions, from simple movements like walking to complex behaviors such as reacting to web elements or expressing emotions through customizable animations.

Spine's integration facilitates a high degree of customization for each companion, including skin changes and modular wearables. This allows for a personalized experience as companions adapt and respond uniquely to user interactions and website content. The engine's design also supports partial animation for new companions, ensuring a continuous expansion of the MetaPals universe with minimal limitations on creativity and design.

The browser extension, developed using a mix of TypeScript and JavaScript, is crucial for delivering the MetaPals experience across various websites without altering the host site's functionality. It employs a state management system to synchronize the user's experience across tabs, maintaining a consistent companion presence. This system, combined with React 17 for the UI and local storage caching for assets, ensures efficient performance and user engagement.

Our technology stack, from the use of efficient rendering libraries to effective iterations to state management and UI development, allows our browser extension game engine to act as a foundational step towards MetaPals becoming ubiquitous within our digital lives.