When the two themes for the Game Prototype Challenge v17 where announced, I really didn’t know what anyone could possibly do around the themes “Island” and “Entanglement”. But the more I started to think about it, the more I liked these themes. There’s really a lot you can do around it. Especially with the somewhat abstract concept of “Entanglement”. This has been confirmed by the great diversity among the different entries so far (the challenge ends in a few hours at the time of writing). I have played all entries so far, and am planning on writing small reviews of every game after the contest has finished.
Another thing that caused a lot of problems was cross-browser compatibility. Browsers don’t even keep track of where the mouse is in the same way. Why don’t they just standardize these kind of things and all browsers keep to the standard? Browsers now implement parts of the standards they like, and do something completely different for the rest. That’s just retarded. For example, in Chrome and Safari you’re able to get the location of the mouse cursor inside the object it’s hovering over (in my case the Canvas displaying the game) with the variable “offsetX”. But in Firefox this variable doesn’t even exist. Nor does there exist an alternative. So in Firefox, you have to use the variable holding the position of the mouse on the screen (“clientX”) and substract from that the location of the Canvas-object (“offsetLeft” and “offsetTop”). And there are a lot of little annoying things like this. It almost makes me want to use some kind of pre-made game engine instead of my own HTML5 “engine”… Firefox also seemed to have some difficulties displaying a lot of .svg-images on the screen at the same time. Some of the images simply wouldn’t display. And every time you reload, the ‘broken’ images are different ones. So I converted all .svg’s I used to .png’s and only used those if the player is using Firefox. That’s why the quality looks worse on Firefox than it does on, say, Chrome or Safari. When I optimized the game for mobile devices, I didn’t have to do anything for iOS devices, everything worked fine as it was. Android, however, was an entirely different story. One of the main drawbacks of Android-devices is, in my opinion, that there are so many. And they all have different specs. And different browsers which don’t follow standards but instead decided to do things their way… Devices running Android 2.3 (and earlier, I suppose), can’t display .svg’s at all. Luckily, I had to use the .png’s for players using Firefox, so it was just a matter of updating my browser detection script to be able to detect if someone is using Android 2.3 and if they are, to make the game use the .png’s instead (which it already did if the player was using Firefox).
HTML5 + JS is a versatile, easy-to-use and fun environment to code in. But all the different browsers can be so frustrating…
Anyways, that’s it for part 1. I’ll probably write part 2 tomorrow, since it’s already getting quite late and I’ve got some other work to do. I’ll discuss some of the original design plans/ideas and why I had to cut them in the long run. I’ll also talk a bit more about what I would’ve done with the game if I had more time. And I’ll start posting the first reviews of the other entries.
If you’ve got any questions or want to know more, please tweet or mail me!
Check out all entries for #GPCv17 here!
Click here to play Murder Island on your PC.
And here to play it on your mobile device (let me know if something doesn’t work).