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:

  1. Center the canvas vertically (see screenshots).
  2. 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

  1. 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>

  2. 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.

  1. 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>
  2. 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
StatusReleased
CategoryGame mod
PlatformsHTML5
Rating
Rated 5.0 out of 5 stars
(1 total ratings)
AuthorSamantha E. Schaffer (~Rina)
Made withbitsy
TagsBitsy

Leave a comment

Log in with itch.io to leave a comment.