This is a documentation for Board Game Arena: play board games online !

Your game mobile version

From Board Game Arena
Revision as of 12:53, 26 December 2015 by Sourisdudesert (talk | contribs)
Jump to navigation Jump to search

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.


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.