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

ผลต่างระหว่างรุ่นของ "Your game mobile version"

จาก Board Game Arena
ไปยังการนำทาง ไปยังการค้นหา
ไม่มีความย่อการแก้ไข
ไม่มีความย่อการแก้ไข
บรรทัดที่ 15: บรรทัดที่ 15:
What may not work :
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.
* ":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.

รุ่นแก้ไขเมื่อ 12:53, 26 ธันวาคม 2558

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.