Bitsy Mobile Mods (& Tutorial)

I wasn't super satisfied with how my bitsy games looked on mobile devices, so I made a couple modifications. I thought I'd upload an example and how to do it yourself.~

Note: I've only tested this on Android (if someone with an iPhone can confirm if it works okay, that would be great!)

The modifications I made were to:

Center the canvas vertically (see screenshots).
Accept touch input in the space surrounding the canvas.
1. Note: as of bitsy 5.0, this is built into bitsy and no longer necessary.

Centering the Canvas

Add the following to the document <head>:

<style>
   #game-container{
   position:absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   }
   #game{
   position: relative;
   top: 50%;
   transform: translate(0, -50%);
   }
</style>

Replace:

<!-- GAME CANVAS -->
<canvas id="game"></canvas>

with:

<div id="game-container">
<!-- GAME CANVAS -->
<canvas id="game"></canvas>
</div>

Outside Touch

Note: as of bitsy 5.0, this is built into bitsy and no longer necessary.

In the bitsy javascript included in the game's html, find the following lines (located in the onready(startWithTitle) function):

<del>canvas.addEventListener('touchstart', ontouchstart);
canvas.addEventListener('touchmove', ontouchmove);
canvas.addEventListener('touchend', ontouchend);</del>

and replace them with:

<del>document.getElementById('game-container').addEventListener('touchstart', ontouchstart);
document.getElementById('game-container').addEventListener('touchmove', ontouchmove);
document.getElementById('game-container').addEventListener('touchend', ontouchend);</del>

Then, locate the following lines (in the stopGame() function):

<del>canvas.removeEventListener('touchstart', ontouchstart);
canvas.removeEventListener('touchmove', ontouchmove);
canvas.removeEventListener('touchend', ontouchend);</del>

and replace those lines with:

<del>document.getElementById('game-container').removeEventListener('touchstart', ontouchstart);
document.getElementById('game-container').removeEventListener('touchmove', ontouchmove);
document.getElementById('game-container').removeEventListener('touchend', ontouchend);</del>

More information

Status	Released
Category	Game mod
Platforms	HTML5
Rating	Rated 5.0 out of 5 stars (1 total ratings)
Author	Samantha E. Schaffer (~Rina)
Made with	bitsy
Tags	Bitsy

Bitsy Mobile Mod

Bitsy Mobile Mods (& Tutorial)

Centering the Canvas

Outside Touch

Leave a comment