Tuesday, January 3, 2017

I have created a web game that can be controlled with an iPhone. here's what it was like


The story

A couple of weeks ago, I have managed to create a web game that is totally controlled with iPhone over bluetooth.

The project is composed of the web game itself and a companion iPhone app to be used as the controller.

You use your phones sensors to move the character and two buttons for game actions are drawn on the controller app for interaction with the game world, your score vibrates when you're hit by an enemy and stores your best score (on the phone, for better mobility).

This post is for documenting the incident :D


some details

  • The game is written to use just web standards (although web bluetooth is not yet a standard, but it's built into the latest Chrome). no external libraries have been used, except for Rollup just to bundle the files (no transpiling).

  • The game is inside a canvas (obviously), no game frameworks were used.

  • Web Bluetooth API is still an experimental subset inside Chrome at the time of writing this project.


Lessons learned

  • The web is turning into a beast, I feel sorry for those who don't code for the web, they're missing a whole lot of excitement and fun times.

  • New Web APIs are very well thought and developer-friendly. I haven't dealt with bluetooth ever before and yet I have managed to make that game with so much less hair pulling than I was expecting.

  • Your fights with the Garbage Collector are gonna be aggressive. at first, you can see things disappear, then you try to capture that moment but you can't cuz it fires at random times, then you'll fire it up manually and say some bad words because it is eating up a global variable, at the end you'll read the API specification and understand what's going on. These fights are nasty, don't give up.

  • Trigonometry and Geometry are fun, after someone points out that you need to use a function that you haven't been taught in school to do what you want :D

  • Drawing your own assets is much more fun than searching for hours for the perfect asset for your game.

  • Drawing and animations on the raw canvas are not as scary as they seem, go for it, you don't need a full gaming framework if you're gonna make a small-to-medium project.

  • Byte buffers may be a little tricky to get your head around at first, but once you know them, you appreciate how minimal and powerful they are. (I may make another post about that one).

  • Apple has made a very good job with providing sensor readings, but they don't provide a precise straight forward way to get tilting angles, so you should come up with your own ticks for that matter.

  • Apple's Developer membership fee is pretty high, make sure to check it out :D

That said, the result was very satisfactory, it was smooth and responsive.

I'm going to record a video of the project in action soon and show it here to give you a better idea of what it does.

Update: here it is. I know it's super boring but it should deliver..

No comments:

Post a Comment