XDK-built Cordova App for Android Pause/Resume Issue

[jerejigga]

I have been beating my head against the desk for a week now on this issue. I have a fully developed Phaser (2.2.3) game that I'd love to get into the Google app store. I am using the latest version of the Intel XDK to build my game for the stock Android (not Crosswalk). The game installs and plays fine on my Nook tablet running Android 4.3.1. Unfortunately, when I leave the game by hitting the home button, wait for about 5 or 10 seconds, and then go back to the game (by clicking its icon), I am taken to a blank screen. I can see by using console.log() and "adb logcat" that the Cordova "pause" and "resume" events are firing correctly. But I am also not seeing ANY error messages. I thought it was just my app, but actually I was able to find another app that has the exact same problem. Pablo Navarro posted a tutorial a while back that demonstrates how to build a game using Phaser, Cordova, and XDK, just like I am doing but with slightly older versions of each. When I download, build, and install his app, I have the exact same problem. The link to his tutorial and source code are below.

 

To reproduce the problem:

 

1) Download Pablo's code (see below)

2) Open the project using XDK

3) Let XDK upgrade the project files (from an old format to the new format)

4) Build the Android apk

5) Download and install the apk on your device

6) Run the game long enough to ensure it's behaving properly

7) Leave the game.

8) Count to 10

9) Return to the game

 

On my Nook, I get a black screen.

 

This game is not locked to portrait or landscape. I have found that by rotating the device, this game refreshes itself and the problem disappears!

 

My game however is locked into portrait so I can't use rotate to fix it. Even still, I wouldn't expect my users to rotate their device every time they leave and return to my game. I am just pointing this out because it's one of only two clues as to what is going wrong. The other clue is that the color of the blank screen is based on the Phaser game's background, not the HTML page background, so I know that Phaser has something to do with it. Also, the non-Phaser games I have built using XDK and installed on this device work just fine. It's only the Phaser apps that are not working for me.

 

Tutorial: http://html5hub.com/how-to-make-a-mobile-virtual-pet-game-with-html5-and-cordova/

Source code: https://github.com/fariazz/virtual-pet-phaser-cordova

 

In my code, I have the following snippet:

 

this.game.stage.backgroundColor = '#0A0139';

 

That color is what color my "blank" screen is after the resume.

 

Here is the code I used to add entries to the log for viewing by "adb logcat":

 

    document.addEventListener('pause', function() {
        console.log('pause');
    }, false);    
    document.addEventListener('resume', function() {
        console.log('resume');
    }, false);    
    document.addEventListener('backbutton', function() {
        console.log('backbutton');
    }, false);    
    document.addEventListener('menubutton', function() {
        console.log('menubutton');
    }, false);

 

And I can see these entries using this command:

 

adb logcat CordovaLog:D *:S

 

Finally, I should add that I have tried using game.paused in the pause/resume event handlers but that has not helped.

 

I really hope someone on here can help me. Thank you in advance!