Cardboard Dungeon Devlog #2

Working with Google Cardboard, and the A-Frame framework, continues to be enjoyable. Virtual reality has some interesting challenges in terms of game design and its often the case that what appears on the screen during development has a totally different effect in virtual reality, especially in terms of scale and distance.

Refactoring

I had some necessary, but slightly dull, work to do by way of performance improvement. I started by defining all of the container entities in markup first and then switched my rendering method from dom-based injects to instead utilise the “visible” component in A-Frame. This worked but was a little inflexible for when I need to change the markup of a container.

In the end I opted for an init function that is called once for each container upon creation. This injects the correct entities. The rendering function that is called during movement then just modifies the “visible” component value. This gives me much more flexibility during development and reduces the dom manipulation during runtime.

Floors

Up until now, there has been a single floor. This results in very uniform, boxy rooms. I wanted to add a sense of height along with the ability to move between different floors without a transition if possible.

I’ve now implemented additional rendered containers above and below the main floor. This allows me to load in rooms from the JSON file at different heights, creating more interesting level structure. Theoretically, this allows for an unlimited virtual height but, in practice, will be bound by memory constraints.

I haven’t created much with it yet but that will come once I start to create a tool for creating the dungeon.

Multiple Floor 3rd Person

Map Traversal

The new multi-floor mechanism brought with it a new challenge: Map traversal.

I tinkered with a solution for separate compass movement and height movement. In the end though, I merged these into a single solution that intelligently displays a sphere in any room you can move to (within a 1 room radius). You just highlight the sphere and you’re teleported to that room.

Its a nice, streamlined method for traversing the map. Its something that I’m sure I’ll revisit as new gameplay mechanics are introduced.

Inventory

Everything about virtual reality makes you want to do away with traditional 2D interfaces. There’s a real desire to create tangible items that can be interacted with.

For Cardboard Dungeon’s inventory, I wanted to experiment with something you can interact with directly. I think it would be pretty nice if you could actually step into the inventory. This would give the player much more freedom to browse, and interact with, their items.

It turns out that this is actually a pretty fun idea. I’m still experimenting with it but not only does it act as an inventory, it also works as a handy area where you can get a few moments respite from the game. You can just sort of hang out in your inventory. This could be expanded in lots of different ways.

What I’m currently experimenting with is an open box at your feet. You can make out objects in it and it looks like a tiny room. This is exactly what it is. If you gaze at it, you shrink and enter the box. You can look up and see the roof of the dungeon of the room you’re in. Alice in wonderland style.

Cardboard Dungeon Inventory

I’m toying with switching the box for a bag. Lots more to experiment with on this front but its now fun just entering and exiting the inventory :)

Next time

I’m going to play with the art style a bit soon. I want to go for a more cartoon style. I’m also currently playing with MagicaVoxel and Blender for objects.

The key gameplay mechanic coming next is to experiment with picking up objects and adding them to your inventory. Then, by extension, selecting these to hold them.

Finally, I need to make some inroads into how I can create a very simple tool for building the dungeon. Working with JSON directly is extremely time consuming.

Google Cardboard viewers

Leave a Reply

Your email address will not be published. Required fields are marked *