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>
StatusReleased
CategoryGame mod
PlatformsHTML5
Rating
(1)
Authors. e. s.
Made withBitsy
TagsBitsy

Leave a comment

Log in with itch.io to leave a comment.