Making a Game in Mozilla Hubs

April 16, 2021

This is a series of blog posts written for the Digital Games course at OCAD University as a way to document my game research/making process. To see all blog posts related to this, filter by ‘games’ on the main journal page. 

---

The big group project this semester in Digital Games was to create an ‘experimental’ or ‘expanded’ game. My group – Grace An, Candide Uyanze, Melissa Ngo and I created The Space Between Us.

You can read more about our concept at the game’s website here︎︎︎. 
For the sake of this post, I’ll be focusing on our intention to create a collaborative and multi-user environment using Mozilla Hubs︎︎︎, a tool that was not originally intended to make games. 

Intro to Mozilla Hubs

Hubs is a browser-based virtual reality platform that allows you to meet with others in a virtual 3D space without the use of a headset or software download. In choosing a tool to make our game, we wanted a platform that was not only user-friendly for the players, but also easy to learn for us as the developers since most of us have never tried making a game before. We wanted the bulk of our time to be focused on curating the experience, not focusing on the learning the technical parts of the tool. 

We also looked at Gather.town︎︎︎, another great virtual meeting (and browser-based!) platform for collaboration. I have some side-by-side comparisons from our testing: 

Function	Mozilla Hubs	Gather.town
View	First person	Third person top-down
Avatars	Human, animal or abstract (from a 3D model)	Human with limited customizations
Environments	Remix from already-built environments or start from scratch in Mozilla's own 3D builder, Spoke. It's good for beginners and also browser-based	Start with pre-made environments that are reflective of real life (office, school, outdoor park, diner) or build your own using coloured tiles or pixel art
Adding Objects	Add whatever 3D models you can find on Google Poly, Sketchfab, or create your own	Add pre-made pixel objects (furniture, plants, games) or upload your own 2D image (JPEG/PNG)
Adding Content	Add video, music, audio that can be autoplayed or controlled by user	Add video, music, audio that can be autoplayed or controlled by user
User Video & Audio	- Webcam off - Proximity audio (you have to be within a certain distance of another user to hear them) When a user speaks, you can see the mouth on their avatar moving	- Webcam on, proximity video - Proximity audio
User Upload	Chat function allows user to put text into environment User can drop 3D objects, GIFs, and images into the space Objects can be linked to external URLs	'Global Build' needs to be activated by admin in order for other users to put objects into environment Dialog box opens and user has to upload their own custom objects everytime, you cannot build a 'library' of items

From these findings, we decided to go with Hubs for its exploratory and interactive nature. What I focused on mostly was the environment design of each space. We designed each scene from scratch using Mozilla’s 3D builder, Spoke. 

Designing a Scene in Spoke

Building a scene in Spoke is quite beginner friendly. Despite that, there was still learning to be done in terms of what can/can’t be done with the program. Assets that you can add to your scene are displayed as big icons and you can hover over each to give you more information. We used Image and Audio the most for guiding the user and giving prompts. To create a seamless background, we uploaded a flat 360° image and selected ‘360-equirectangular’ under the Projection dropdown, turning the image into a sphere. 

Spoke runs a performance check everytime you publish your scene and highlights any issues that you may need to fix. This is important because you don’t want the size of your scene to be too big as it can take a lot longer for some people (especially mobile users) to load. 

Hubs has its own Discord server︎︎︎, which I found to be helpful while troubleshooting. For example, some users took the time to make scenes where you can test out different audio settings︎︎︎. 

Facilitating a Game

A big question our group had to ask ourselves while designing our game is how we should facilitate gameplay. Because our worlds are so open and Hubs has a lot of built-in functions, it’s easy for players to get distracted from the intent of our game. Some things we were thinking about included:

• Do people join in this game whenever, or do they schedule a time to all go in?
  ︎︎︎ We decided that this game would be played live and together, but after an initial tour of the space, users are free to come back on their own.
  
• Is there a live game-master present with the group to guide and answer any questions?
  ︎︎︎ We incorporated a facilitator into our plans to guide users and be a familiar human presence. This led us to developing a facilitator document for anyone planning to lead. Our ‘narrator’ became satellites that we placed into the spaces, and users could press play to hear the audio.
  
  
  
  A satellite with audio in our scene.

There was a lot of thinking and planning that had to be done– in and out of game as this project became more of a performance and experience. I might do a separate post on facilitating live events to go into this more in depth.

Conclusions

Would I use Mozilla Hubs again? 
Yes! In fact, I’ve already made a virtual co-design room︎︎︎ for another class assignment. I can already imagine a lot of future possibilities for this tool as we are continuing to work remotely. However, there are some drawbacks to it as well. Here are my overall thoughts on it:

Pros

• User-friendly interface
  
• Lots of premade models so you don’t have to build from scratch
  
• Variety of choices for human & non-human avatars
  
• Ability to embed video and audio
• Ability to use text and voice chat
• No webcams
• Good community

Cons

• No collaborating in Spoke–only one person can work on building the scenes
  
• Some finer settings in Spoke are still a bit unclear, like measuring distance
• Moving around in the viewfinder can get tricky
• No scene preview (not that I know of?), you have to save & publish everytime to see your changes.