Mobile game dev

I haven't found such info on the documentation, so I'm posting a question here:

1. How can I detect an Android OS back button press, so I can pause my game? In general, is there a way to check if the user has moved the app in the background, so we can pause it?

2. Regarding screen size, I have set my game aspect ratio to 16:9 or above and I'm curious about the "above" part. Doing a screen.fillRect(0,0,screen.width,screen.height,"#111") in the draw function, I see that in phones with aspect rations longer than 16:9 (for example 18:9 or 21:9), the filled area leaves two large empty bands above and below the actual play area. Is there a way to force the game to run full screen and have then screen.width and screen.height parameters point to the correct values?

Regards, Spyros

Just to add some more info, regarding how the game looks on a phone, I'm talking about just pointing the browser to the game URL, using the QR code; I haven't tested yet how the exported APK works.

1. Use the "Any" aspect ratio. When the size of the window in which the game is placed changes, the values of the screen.width parameter will change.

init = function()
end

update = function()
end

draw = function()
  screen.clear()
  screen.setColor("#FFF")
  screen.drawRect( 0, 0, screen.width, screen.height )
  screen.drawRect( 0, 0, screen.width-8, screen.height-8 )  
  screen.drawText( "screen.width = "+screen.width ,0,0,20)
  screen.drawText( "screen.height = "+screen.height,0,-20,20)              
end

On my old phone (android 6) the apk doesn't work. And they are suspiciously small.

Thanks, that did the trick.

Here is the final result, for anyone interested:

https://microstudio.io/spyros1973/codebreaker/

Revisiting my first question here:

"How can I detect an Android OS back button press, so I can pause my game? In general, is there a way to check if the user has moved the app in the background, so we can pause it?"

Checking the Cordova documentation, I see that Cordova provides a pause event, that fires when the app is moved in the background:

document.addEventListener("pause", onPause, false);

https://cordova.apache.org/docs/en/11.x/cordova/events/events.html

A game should naturally be paused if its moved in the background (for example, by a phonecall) and allow the user to resume upon returning to it.

Therefore, I'm looking for a way to subscribe to this event and execute via js microScript code to check if a game was in progress before the pause event and if that is the case, enable the in-game pause mode like this:

window.player.exec("if app.mode=="game" then game.state="paused" end",null) ;

However, I don't see how I can subscribe to this event from the index.html file that microStudio generates in its html5 export.

@spyros1973 you can add that in any <script> tag ; existing or not I guess. For example you could add this:

<script>
  document.addEventListener("pause",()=> {
    window.player.exec("game.state = 'paused'") ;
}) ;
</script>

The thing is: whenever the game is paused, the code won't be executed before the user returns to the game. Thus I am not sure if the above code will still have time to be executed before the execution is actually paused, or if it will be only when the game is resumed. I am interested in any findings you may have about this.

When the app goes in the background, execution is halted, so, in a way, the game is paused. However, when you bring the app in the foreground, execution starts immediately and this is a bit annoying. So, I wanted to make the game pause (in my game it's game.mode='pause') if it's in the game screen ( if app.mode=='game'). So, my first attempt was to add this to an existing script (actually, the first one, where the window.player is defined):

 window.addEventListener("pause",()=> { //I also tried document.addEventListener..
    window.player.exec("if (app.mode=='game') then game.state = 'pause' end") ;
}) ;

It didn't work out, but I don't know if the event was actually fired or not. I have to check Cordova's documentation to see how I can log somehow values to see what's going on.

Another important thing when deploying on Android is to catch the back button press and make the app behave as expected.

For whoever might find this useful, here is what I ended up adding to the index.html file exported by microStudio, right before the line that includes the microscript code (<script id="code" type="text/x-microscript">...)

<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    // Cordova is now initialized. Have fun!
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.addEventListener("backbutton", onBackKeyDown, false);
} 
function onBackKeyDown() {
    window.player.exec('if app.mode=="game" then game.mode = "pause" elsif app.mode == "menu" then system.exit() else app.mode = "menu" end',null) ; 
}

</script>
<script src="cordova.js"></script> 

This code includes the cordova.js javascript file, subscribes to the cordova deviceready event and then to the backbutton event and runs microscript code when the back button is pressed. In my case, the microscript code pauses the game if in the play screen, returns to the main menu if in any other screen and exists in if the menu screen.