It 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.
Menu
Playnow
News
Games
Community
Forums
0XP
Seemyprofile
Messages
Notifications
Preferences
F.A.Q.
Logout
{NOTIFICATION_ICON}
{NB_PLAYERS_CONNECTED}onlineplayers:
{IN_GAME}playing•
{WAITING}available
Ifyouseethismessage,itmeansthatyourbrowserfailedtoloadthisfile.
Youshouldtrythefollowing:checkyourconnection,disablead-blocker,clearyourbrowsercache,tryinprivatemode,tryfromanotherbrowser/computer/connection.
0
https://en.boardgamearena.com/doc/Your_game_mobile_versionYourgamemobileversion
Home»Help»Yourgamemobileversion
Yourgamemobileversion
ThispagecomesfromBGAwiki,andhasbeenwrittenbyBGAplayerscommunity.Feelfreetoeditit!
GameFileReference
Overview
dbmodel.sql-databasemodel
gameinfos.inc.php-meta-information
gameoptions.inc.php-gameoptions&userpreferences
img/-gameart
GameMetadataManager-tagsandmetadatamedia
material.inc.php-staticdata
misc/-studio-onlystorage
modules/-additionalgamecode
states.inc.php-statemachine
stats.inc.php-statistics
X.action.php-playeractions
X.css-interfacestylesheet
X.game.php-mainlogic
X.js-interfacelogic
X.view.php-dynamicgamelayout
X_X.tpl-staticgamelayout
UsefulComponents
Official
Deck:aPHPcomponenttomanagecards(deck,hands,pickingcards,movingcards,shuffledeck,...).
Draggable:aJScomponenttomanagedrag'n'dropactions.
Counter:aJScomponenttomanageacounterthatcanincrease/decrease(ex:player'sscore).
ExpandableSection:aJScomponenttomanagearectangularblockofHTMLthancanbedisplayed/hidden.
Scrollmap:aJScomponenttomanageascrollablegamearea(usefulwhenthegameareacanbeinfinite.Examples:SaboteurorTakenokogames).
Stock:aJScomponenttomanageanddisplayasetofgameelementsdisplayedataposition.
Zone:aJScomponenttomanageazoneoftheboardwhereseveralgameelementscancomeandleave,butshouldbewelldisplayedtogether(Seeforexample:token'splacesatCan'tStop).
Undocumentedcomponent(ifsomebodyknowspleasehelpwithdocs)
Wrapper:aJScomponenttowrapa
elementarounditschild,eveniftheseelementsareabsolutepositioned.
Unofficial
BGACodeSharing-Sharedresources,projectsongithub,commoncode,otherlinks
BGAStudioCookbook-TipsandinstructionsonusingAPI's,librariesandframeworks
Someusualboardgameelementsimageressources
GameDevelopmentProcess
FirststepswithBGAStudio
CreateagameinBGAStudio:CompleteWalkthrough
Tutorialreversi
Tutorialgomoku
Tutorialhearts
BGAStudioGuidelines
BGAgameLifecycle
Pre-releasechecklist
Post-releasephase
PlayerResources-addplayerhelp/rulestoyourgamepage
GuidesforCommonTopics
Translations-makeyourgametranslatable
GameReplay
MobileUsers
3D
MiscellaneousResources
StudioFAQ
ToolsandtipsofBGAStudio-Tipsandinstructionsonsettingupdevelopmentenvironment
Studiologs-Instructionsforlogaccess
Practicaldebugging-Tipsfocusedondebugging
Troubleshooting-Mostcommon"Iamreallystuck"situations
StudioBugs-ReportsagainstStudioitself(notBGA!)
BoardGameArenaisnowadaptatedforMobilesandTabletstoo.
ItisveryeasytohaveamobileversionofthegameyoudevelopedwithBGAStudio.Infact,yourgameisprobablyalready100%playableonmobile.
However,toprovideyourplayersthebestexperience,youshouldfollowthetwopieceofadvicebelow.
Declareyourinterfaceminimumwidth
Bydefault,yourgamecanruninawindowofupto740pixelswide.Includingtheinformationintherightcolumn(player'spanel),itfitsona1024pxwidescreen.
However,youcanchoosetodeclarethatyourgameisabletorunwithasmallerwidth.Thisway,thegamewillappearmuchbetteronmobilescreensandtablets.
Forexample,theReversiboardisonly540pxwide.Ifwestaywiththedefaultwidth(740px),thegameinterfacedisplayedonmobilewillbetoolargeandsomespacewillbelostontheleftandontheright.ConsequentlytheReversiboardwillappearverysmallonthemobilescreen,andplayerswillhaveto"pinch&zoom"todisplayitcorrectly.
Toavoidthat,wecanspecifythatthegamecanbeplayedwithaninterfacewithaminimumwidthof540pixels,byaddingthefollowingtogameinfos.inc.php :
//Gameinterfacewidthrange(pixels)
//Note:gameinterface=spaceontheleftside,withoutthecolumnontheright
'game_interface_width'=>array(
//Minimumwidth
//default:740
//maximumpossiblevalue:740(i.e.yourgameinterfaceshouldfitwitha740pxwidth,correspondingtoa1024pxscreen)
//minimumpossiblevalue:320(thelowerthevalueyouspecify,thebetterthedisplayisonmobile)
'min'=>540,
//Maximumwidth
//default:null(i.e.nolimit,thegameinterfaceisasbigastheplayer'sscreenallows).
//maximumpossiblevalue:unlimited
//minimumpossiblevalue:740
'max'=>null
),
Andthat'sit!Now,BGAcanchoosethebetterdisplayforyourgameinterface,whateverthedevice.
Important
Ifyoudeclarethatyourinterfacecanrunwitha540pixelswidth,itmusteffectivelyrunonaninterfacewith540pixelswidth.
Notethatthisdoesn'tmeanthatyourinterfacemustalwaysbe540pixelswidth;youjusthavetomakeyourinterfacefluidand/oruseCSSmediaqueriestofitanywidth.
Under490,playerpanelsaren'ton2columnsonmobile,soyouprobablyshouldn'tgounder490.
Examples :
OnCan'tStop,whenthescreenistoonarrow,wemovethediceonanotherposition(belowthemainboard)tofitwithinthewidth :
@mediaonlyscreenand(max-width:990px){
#dicechoices{
left:180px;
top:530px;
}
#cantstop_wrap{
height:900px;
width:550px;
}
}
OnSeasons,wehavesomepanelsontherightoftheboard.Onsmallscreens,wedisplaythesepanelsbelowtheboard:
@mediaonlyscreenand(max-width:970px){
#board{
float:none;
margin:auto;
}
.seasons_rightpanel{
margin-left:0px;
}
}
Tip:onmobile,BGAdisplaysplayerpanelsatthetopofthepage(insteadofdisplayingthemontheright).Whendoingthis,BGAappliestheCSSclass"mobile_version"totherootHTMLelementwithid"ebd-body".IfyouwantyoucanusethisCSS"mobile_version"classtooptimizesomeofyourgameadaptationstothischange.Intheopposite,whenthe"normal"versionisactive,theCSSclass"desktop_version"BGAappliestheCSSclass"desktop_version"totherootHTMLelementwithid"ebd-body".
Touchscreencompatibility
Mostofyourgamesshouldworkwithtouchscreendeviceswithoutneedinganychanges.
Note:whenyourgameisrunningonatouchscreendevice,theglobalCSSclass"touch-device"isaddedtothetotherootHTMLelementwithid"ebd-body"(and"notouch-device"isaddedfortheopposite).
Whatmaynotwork :
":hover"CSSswitch.Becausethereisnomouse,":hover"won'tbetriggered.Thisisnotanissueunlessitisneededtoplaythegame.Inaddition,sometouchdevicesconsiderthatashorttouchmusttriggera":hover"(andshouldapplycorrespondingCSS),whichcanblockaninteractioninyourgame.Weadviseyoutoexplicitelydisable":hover"effectswhenyourgameisrunningonatouchscreendevice(forex.byadding".notouch-device"asaprefixtoallyourCSS:hoverrules).
Mouseoverevents :likethepreviousone :ifyouassociatedJavascripteventsto"onmouseover"event,itwon'tworkontablets.
Drag'n'drop :itwon'twork.Tomakeitwork,youshouldlistento"ontouchstart","ontouchmove"and"ontouchend"eventandtriggerthesamelogicyoualreadyhavefor"onmousedown","onmousemove"and"onmouseup".YoushouldalsomakesuretostoptheJavascript"ontouchmove"event(ex:dojo.stopEvent(evt))duringthedragndrop,otherwisetheinterfaceisgoingtoscrollwhiledrag'n'dropping.
NotethatyoumayneedtoaddtheCSSpropertytouch-action:noneonelementswhereyoulistenfortouchevents,inordertopreventthebrowserfrominterpretingthetouchasarequesttoscroll/zoomthepage.
Insteadofhandlingboth"mouse"and"touch"eventsseparately,considerusingthenewerPointerEventsAPI,whichconsolidatesallpointerinput(frommouse/touch/stylus/other)intoasinglesetofevents.Mostbrowsersstartedsupportingthisin2016,butApple'ssupportforthisbeganrelativelylateinSafari13(September2019).
Viewporttag
MobileisanareawheretheBGAframeworkisverymuchshowingitsage.Thebuilt-inhandlingformobileisincrediblyunsatisfyingbecausetheframeworkwasdesignedforapreviousera,beforemobilebecamethepredominantformofwebbrowsing(mobilehasoutpaceddesktopbrowsingsince2016).
ThemostobviousproblemisthattheBGAframeworkusesthenon-standard"zoom"CSSpropertytoresizeyourgameforthemobilescreen.Thepropermethodistheviewporttag,whichissupportedbyallmobilebrowsersandoffersmorecontrol.YoucandisableBGA'sbroken"zoom"featurewiththefollowingcode:
Ingameinfos.inc.php
(thatisprobablyalreadythere,justmakesureminissettominimumvalueandmaxisnotset-i.e.settonull)
'game_interface_width'=>[
'min'=>550,
'max'=>null
],
Inyourgame.js
returndeclare("bgagame.yourgame",ebg.core.gamegui,{
setup:function(gamedatas){
//Setmobileviewportforportraitorientationbasedongameinfos.inc.php
this.default_viewport="width="+this.interface_min_width;
this.onScreenWidthChange();
...
},
//Tobeoverridedbygames
onScreenWidthChange:function(){
//Removebroken"zoom"propertyaddedbyBGAframework
this.gameinterface_zoomFactor=1;
$("page-content").style.removeProperty("zoom");
$("page-title").style.removeProperty("zoom");
$("right-side-first-part").style.removeProperty("zoom");
},
Notethatinlandscapeorientation,theBGAframeworkalwayssetstheviewportto"width=980".Overridingtheviewportforlandscapeorientationismuchmorecomplicated(requiresoverridingundocumentedframeworkfunctions),soitisnotrecommended.
Thiscodeyoucannotreallytestindesktopbrowserbecausebgaframeworkwithcheckwindow.orientationfieldwhichislikelynotsetondesktop,ifyouwanttotestondesktop(andoverridelandscapeviewport)youcanaddthiscodeandtheendofonScreenWidthChange.Isuggesttoremoveitaftertesting
varviewport=document.querySelector('meta[name="viewport"]');
if(viewport){
viewport.content=this.default_viewport;
}
ThispagecomesfromBGAwiki,andhasbeenwrittenbyBGAplayerscommunity.Feelfreetoeditit!
Applicationloading......
{DISPLAY_IN_OTHER_LANG}
{LANG_REDIRECT_CODE}
No
Yes
Ooops,weseemtobehavingdifficultiesreachingyoubyemail...
Checkmyemailsettings
{CONFIRM_EMAIL_MESSAGE}
{I_DIDNT_RECEIVE_EMAIL}
{CHECK_SPAMBOX}
{EMAIL_CHANGE}
{EMAIL_CHANGE}
{RETRY_SENDING_EMAIL}
boardgamearena.com
THANKYOU:Youareoneofourmostloyalplayers!GetthebestfromBoardGameArenaforonly€2/month.
Top
Help
WhatisBoardGameArena?
Whoarewe?
F.A.Q.
Contactus/Support
Contribute
I'magamepublisher
I'masoftwaredeveloper
IwanttohelpBGA
Reportabug
GoPremium!
Followus
JoinusonFacebook
FollowusonTwitter
Notifyyourbrowser
Subscribetoournewsletter
BoardGameArena
386
BoardGameArena
•Release221004-1000-ST
•Legalinfo
•TermsofUse
•TermsofServices
•Privacy
•Cookies
π
1
2
3
4
5
6
7
8
9
10
11
12
