Shopify Party is a browser-based internal tool that we built to make our virtual hangouts more fun. With Shopify’s move to remote, we wanted to explore how to give people a break from video fatigue and create a new space designed for social interaction. Here's how we built it.
Overview
Shopify Party is a browser-based internal tool designed to enhance virtual hangouts by allowing users to interact through 3D avatars in a playful environment. The article details the development process, including game design principles, the tech stack utilized, and optimization strategies to ensure smooth performance.
What You'll Learn
1
How to create a browser-based game using Unity WebGL
2
Why to use Normcore for real-time multiplayer synchronization
3
How to implement a simple character customization system with textures
4
How to optimize 3D games for performance using GPU instancing
Prerequisites & Requirements
- Basic understanding of game development concepts
- Familiarity with Unity and WebGL
Key Questions Answered
What are the key design principles behind Shopify Party?
Shopify Party emphasizes non-prescriptive gameplay, allowing players to create their own rules, and is designed to be hop-in, hop-off friendly, making it easy for users to join or leave at any time. The game is also easy to learn, with simple controls that enhance user engagement without overwhelming them.
How does Normcore facilitate multiplayer interactions in Shopify Party?
Normcore acts as a real-time database for Shopify Party, allowing each player to control their game state locally while synchronizing updates with other clients. This decentralized approach eliminates the need for a dedicated server, enhancing performance and reducing latency.
What optimization techniques were used to ensure smooth performance in Shopify Party?
To maintain a smooth 60FPS, Shopify Party employs techniques such as using simple materials instead of complex Physically Based Rendering, GPU instancing to reduce draw calls, and adjustable render resolution based on device capabilities, ensuring performance across various hardware.
How does Shopify Party handle character customization?
Character customization in Shopify Party is achieved through the application of different textures to a base model, allowing for thousands of outfit combinations without the need for extensive 3D modeling. This method simplifies the process and enables users to create new designs easily.
Technologies & Tools
Game Engine
Unity
Used for building the 3D environments and gameplay mechanics in Shopify Party.
Graphics API
Webgl
Enables 3D rendering in the browser without the need for installations.
Networking Framework
Normcore
Facilitates real-time multiplayer interactions and synchronization of game state.
Key Actionable Insights
1Implementing a non-prescriptive gameplay model can enhance user engagement in virtual environments.By allowing players to create their own rules and interact freely, you can foster a more enjoyable and less structured experience that encourages creativity and social interaction.
2Utilizing Normcore for real-time synchronization can simplify multiplayer game development.This framework allows for efficient state management without a dedicated server, making it easier to develop and maintain multiplayer experiences.
3Optimize your game for performance by using simple materials and GPU instancing.These techniques can significantly improve rendering efficiency, especially in environments with many identical objects, ensuring a smoother experience for users.
4Character customization can be streamlined by using texture overlays instead of complex 3D models.This approach not only saves development time but also allows for greater flexibility in design, enabling users to create diverse character appearances quickly.
Common Pitfalls
1
Overcomplicating game controls can lead to user frustration and disengagement.
Keeping controls simple and intuitive ensures that players can easily join and enjoy the game without a steep learning curve.
2
Neglecting performance optimization can result in a poor user experience, especially on lower-end devices.
It's crucial to consider the range of hardware your application will run on and optimize accordingly to maintain a smooth experience.
Related Concepts
Game Development Best Practices
Real-time Multiplayer Networking
3d Rendering Techniques
User Experience Design In Games