Developing a Virtual World for multiple devices
(All the screenshots in this medium are taken on my iPhone 7 Plus)
Cryptovoxels is a virtual world on the Ethereum Blockchain. Follow us on Twitter or join the Discord.
When I was first working on my previous virtual world project – SceneVR – I designed it with WASD key controls for desktop users. You used your mouse to look around and keyboard to walk. But when I tweeted it, I got a strange reply from my Swedish friend Stig.
“I can’t work out how to walk”
He had loaded the webpage on his phone, and it had loaded and rendered correctly, but I had not built any mobile controls.
Mobile First
I’m writing this medium post on an iPad. I consume twitter mostly on my iPhone. And my iPhone has a GPU that stronger than a 3 year old MacBook. So, I decided with Cryptovoxels, that I would make Mobile, Desktop and VR all equal platforms. Mobile would be first amongst equals.
Babylon.js makes it easy (of course)
Luckily, babylon.js has great mobile support. Using the virtual joystick camera, you can have first person controls, where there are two (invisible) joysticks on the screen. The left side of the screen makes you walk, and the right side lets you look around. It took a bit of work to hook up the virtual joysticks with the in game babylon GUI, and I had to add a reticule (crosshairs) so you could see what you were pointing at, but pretty quickly mobile support came together.
Button overlays
I used DOM elements for the overlaid buttons. I want to replace this with babylon GUI because I think the performance will be a bit better, and it just seems like a more elegant solution. Sometimes when the virtual joystick overlay is open, Cryptovoxels misses clicks on the buttons, which makes for an annoying UI.
Building on mobile
The entire build process works on mobile. Using a mobile crypto browser like Toshi, you can purchase a parcel, transfer it to yourself, then log into the site and start editing. The two thumb sticks work well enough for moving and flying around so that you can start on your build.
What doesn’t work well
We don’t have a way to text chat at the moment. And with no pre-programmed responses (say emoji or text snippets), you can see other people in the world, but you have no way of interacting with them. WebRTC actually works on mobile android and safari, so voice chat should be possible.
Performance on android is pretty bad. My iPhone 7 Plus is really fast and masks most performance issues, so it’s only by testing on my galaxy s6 and oculus go that I notice these performance issues. The lag created by the voxel mesher is particularly bad, I need to move the meshing off the main thread and onto a web worker.
Unexpected uses
One of the great builders in the Cryptovoxels universe is Bibbi4. I was chatting with him about how he uses CV and he says he really likes sitting on his couch, driving Cryptovoxels with his iPad, and casting it onto his AppleTV. I never even thought of this use case, but it turns out that you can use Cryptovoxels on your TV already! I actually have some support for Xbox one and Nvidia Shield TV, but it turns out it’s even easier in the Apple ecosystem. I imagine you could do the same with an android tablet + google cast.
React Native mobile apps
There are some things that you don’t have control of in a browser. Rotation / full screen / hiding / showing the keyboard. It’s these things, plus better map components and the ability to have deeper integrations with mobile wallets, that mean that we might publish a native app for Cryptovoxels eventually. We’d still use Babylon.js inside a web view for the rendering, but augment that with some native UI. We could also do an arkit integration for some of that Crypto + Augmented Reality goodness.
–
Cryptovoxels is a virtual world on the Ethereum Blockchain. Follow us on Twitter or join the Discord.
