View source for Your game mobile version


Board Game Arena is now adaptated for Mobiles and Tablets too.

This is very easy to have a mobile version of the game you developed with BGA Studio. In fact, your game is probably already 100% playable on mobile.

However, to provide your players the best experience, you should follow the 2 advices below.


== Declare your interface minimum width ==

By default, your game can run in an window up to 740 pixels width. Considering the informations of the right column (player's panel), it fits on a 1024px wide screen.

However, you can choose to declare that your game is able to run with a smaller width. This way, the game will appear much better on mobile and tablets.

For example, Reversi board is only 550px wide. If we stay with the default width (740px), the game interface displayed on mobile will be too large and some space will be lost on the left and on the right. Consequently the Reversi board is going to appear very small on the mobile screen, and players will have to "pinch & zoom" to display it correctly.

To avoid that, we can specify that the game can be played with an interface with a minimum width of 550 pixels, by adding the following to gameinfos.inc.php :


  // Game interface width range (pixels)
  // Note: game interface = space on the left side, without the column on the right
  'game_interface_width' => array(
  
    // Minimum width
    //  default: 760
    //  maximum possible value: 760 (ie: your game interface should fit with a 760px width (correspond to a 1024px screen)
    //  minimum possible value: 320 (the lowest value you specify, the better the display is on mobile)
    'min' => 540,
  
    // Maximum width
    //  default: null (ie: no limit, the game interface is as big as the player's screen allows it).
    //  maximum possible value: unlimited
    //  minimum possible value: 760
    'max' => null
  ),




== Touchscreen compatibility ==

Most of your game should work with touchscreen device.

Note : When your game is running on a touchscreen device, the global CSS class "touch-device" is added to the root HTML element (and "notouch-device" is added in the contrary).

What may not work :
* ":hover" CSS switch. Because there is no mouse, ":hover" won't be triggered. This is not an issue unless it is needed to play the game. In addition, some touch device considers that a short touch must trigger a ":hover" (and should apply corresponding CSS), which can block an interaction in your game. We advise you to explicitely disable ":hover" effects when your game is running on a touchscreen device.
* Mouseover events : like the previous one : if you associated Javascript events to "onmouseover" event, it won't work on tablets.
* Drag'n'drop : it won't work. To make it work, you should listen to "ontouchstart", "ontouchmove" and "ontouchend" event and trigger the same logic you already have for "onmousedown", "onmousemove" and "onmouseup". You should also make sure to stop the Javascript "ontouchmove" event (ex: dojo.stopEvent( evt ) ) during the drag n drop, otherwise the interface is going to scroll while drag'n'droping.