This is perhaps the most-adventurous of my contributions to Weird Web October this year, for today's spooky theme of: "skeletons". May I present... Dem Bones!
Alt
Dem Bones! (skelly.monster)
Do you remember about ten years ago I made a game that used tilt sensors and websockets to turn a mobile phone into the "steering wheel" of a car, entirely using Web technologies? Well this is basically that, but turned up to 11.
From a technical perspective, it enjoys user separation, a same-domain websocket, and some fancy modern CSS and JS features that made it much easier to implement and deploy than its predecessor.
Anyway: I've really love it if you'd give it a go and let me know what you think in the comments below. The entire source code is available if you'd a copy of your own, or want to contribute1.
I've tried to add solid comments to the source code so you should be able to use it as a learning example if you like - much better than my comments on Steer! were, anyway! - but if you're looking for the simplest explanation, this diagram might help:
Alt
Illustration showing data flow from PC to phone (via QR code) of key, from phone to server of orientation data, from server to PC of orientation data.
I considered trying to use WebRTC instead of Websockets2, which would theoretically allow the game to run across your own LAN (assuming that your phone and computer were connected to the same network). This would mean that the server needed no backend logic at all and the entire game would have been deployable as a static site! However, WebRTC turns out to be (a) super fiddly and hard to work with, and (b) annoyingly had to explain to users3.
And so that's how I came up with the design I eventually used. The resulting site it, I think, pretty fun to play with! The controls are pretty fiddly on most phones and quite sensitive... but then, that matches my experience of operating this kind of a marionette puppet, too.
I hope that you enjoy Dem Bones! (skelly.monster).
Footnotes
1 Can you draw better than me? The answer is... probably! If so: how would you feel about drawing about other monsters who can dance? Just a thought!
2 A third different option might have been the Web Bluetooth API, but my experience of that so far is that browser/OS support isn't remotely as widespread as Websocket support... and it relies on hardware that simply might not be present in the user's device!
3 The convenience of Internet-connected devices has meant that users often don't think about what network they're connected to. And even if they are connected to e.g. the same WiFi access point with their computer and their phone, there are still other obstacles such as routers that isolate clients from one another (these are common in hotels, for example), allowing them only to access the Internet. In short, WebRTC is a really cool technology, but Websockets were the right choice here.
0 comments