Exporting to Android: Blurry Graphics

[Wolfsbane]

Hiya Panda Patrol,

I've exported my first game to Android. But the graphics look a bit blurry? See below screenshots: One is from within Panda remote, and the other (the one on the left) is from the apk produced from PhoneGap.

Anyone else experience this? Is there a trick to make the graphics crystal clear?

(Speaking of tricks: There is a black bar top/bottom of the game. This will vary from display to display. Is there any trick for this, or standard practice for when dealing with this?)

I used all the default settings as blank in the build option.

Looking forward to all your advice, cheers!

 

[enpu]

That's weird. Those two should be identical. Can you show your config?

2 hours ago, Wolfsbane said:

(Speaking of tricks: There is a black bar top/bottom of the game. This will vary from display to display. Is there any trick for this, or standard practice for when dealing with this?)

Solution to this is to use resize feature, you can enable it by setting resize attribute of System class to true. Usually you want to enable that only on mobile, so your config would look like this:

game.config = {
    ...

    mobile: {
        system: {
            resize: true
        }
    }

    ...
};

This will resize the canvas to fill the whole screen. When positioning things, position 0,0 is always the top left corner. When using resize you might want to position some elements relative to center or bottom of the screen. This can be done by using the game.width and game.height values, which will change depending on the aspect ratio of the screen.

[Wolfsbane]

Sorry for being a bit slow with this, had to wait till I got home to check the config:

game.config = {
    name: 'Make 10!',
    id: 'io.panda2.MakeTen', //Change to my website
    version: '1.0.0',

    system: {
        width: 640,
        height: 960,
        scale: true,
        center: true,
        resize: false,
        loader: 'PreLoader'
    },
    audio: {
        stopOnSceneChange: false //Add this to stop music resetting between scenes.
    },

    mobile: {
    },
    
    data: {
        moveNumber: 99
    }
};

 

[enpu]

Can you try to make build with Crosswalk enabled and see if it's different?

[Wolfsbane]

Right, if I build with Crosswalk, the blur goes away, and it's as sharp as Panda Remote. 

But an 50mb+ for a tiny game.. ? I'll have to do some research on what I can do here.

[enpu]

If you don't include Crosswalk in the build, the game will use the device's own webview. Have you tried if the issue occurs in other devices too?

[Wolfsbane]

On 8/29/2018 at 11:03 PM, enpu said:

Solution to this is to use resize feature, you can enable it by setting resize attribute of System class to true. Usually you want to enable that only on mobile, so your config would look like this:

[snip]

This will resize the canvas to fill the whole screen. When positioning things, position 0,0 is always the top left corner. When using resize you might want to position some elements relative to center or bottom of the screen. This can be done by using the game.width and game.height values, which will change depending on the aspect ratio of the screen.

Hmm.. This is what you did for Papa Pino, and some of the other games you released on the app store? 

I'm fine to do this (I've got some hard-coded numbers, but I can adjust). But I'm just concerned with different screen sizes. E.g. the small res screens, and the large res screens. If I do what I'm currently doing, the whole game scales (graphics included) but if I do this, then the game graphics won't scale.. they might look a bit better, but then they might be too huge on a small res device? (and conversely, too small on a big device?)

Quote

If you don't include Crosswalk in the build, the game will use the device's own webview. Have you tried if the issue occurs in other devices too?

I have not. I'll dig out an old 'droid I've got lying around, and see how that looks.

Still getting up to speed with how these Hybrid apps work. So default webview, eh? How many different implementations of this webview are we expecting across the range of devices? I'm assuming at least dozens, so I think Crosswalk is currently the only real way to go for any kind of consistency.

[Ninjadoodle]

Hi @Wolfsbane

Regarding your scaling and positioning issue, this is how I do it and from my tests (on mobile / browser) it works perfectly.

I setup a bunch of containers - 'background', 'middleground', 'foreground' - then I put them all inside a 'gameContainer'.

At all times, I center this game container on the screen. Your game scales as normal, but depending on how wide / tall the device is - you will have more space left / visible.

You can fill this space up by making a background that is bigger than your preset dimensions.

You can also fill the space by always sticking any ui buttons to the top / bottom of the screen.

in your case, you could have hard-coded positions for your cards inside the gameContainer, and put all your text / buttons at the extremities of the screen. 

If you want, I can send you a project that has all this basic setup to demonstrate what I mean

[Wolfsbane]

Ah, right, I get you. I like the idea of putting the game container.

 Sure, if you've already got the sample project, I'm always keen to see what other people are doing.

[Ninjadoodle]

Hi @Wolfsbane

I've been making a template to use with my games. It's not finished yet, but it's got the scaling/resize implemented, as well as a MENU screen with a PLAY button and a SETTINGS button.

Pressing PLAY, takes you to an empty level, which you can quit by tapping SETTINGS and then HOME.

It also, has SOUND FX and MUSIC ON/OFF buttons.

Hopefully this helps you with the scaling

PS. The template uses the 'essential' plugin for fading and future screen shake effects. You will have to download it and paste in in the plugins dir. I didn't want to distribute it, as it's @enpu's plugin.

template.zip

[Wolfsbane]

It's nice. I tried it on my phone, too, and it looks really good there, too. I'll have to take some time to see how you've tied all the pieces together. 

Thanks for sharing!

[Wolfsbane]

@Ninjadoodle, is it o.k. if I throw a few questions out there around exporting/developing for Android? Sometimes I hit an issue (or a hypothetical question), and I just wonder how everyone else is solving it in the community. But there's not really too many discussions that I can binge read.

For instance: The current question on my mind is what do people do about the back button in Android? Currently, (using default build options for 'droid), if I press the Back button, it basically seems to close the app. If I reopen it (refocus on it? I might be getting my terminology wrong) then the game starts loading from the beginning.

I notice it does the same thing with @enpu apps (papa Pino, Diamond Dasher). But trying some (non Hybrid app) games, the back button is often used to navigate back through screens, etc. And I would like to use it, too. (I don't want to put an extra GUI button on my game if we've got a built-in button the user can use). I'd taken a quick look earlier, and it looks like it's some kind of configuration that has to be done as part of the build process, but I haven't gotten as far as figuring out what that means.

It's also not convenient that pressing it (by accident) would close the whole game, and they have to restart from the start.

[Ninjadoodle]

Hi @Wolfsbane

I'm happy to discuss and share techniques any time  It's nice that the Panda forum is becoming a community!

As far as your Android question goes, I don't have experience with that particular issue. To be honest I haven't really looked into it and I think @enpu, might be the best person to answer this one.

Here is what I think tho - If it was me, I would put in an extra gui button anyway, as iOS or the Web don't have Androids back button, and I like making things as cross-platform as possible.

It means that if you ever wanted to publish on the Web or iOS, you wouldn't have to make any changes.

This however doesn't answer the question/issue where the back button quits the game entirely.

Let's see what @enpu has to say about that.

 

[Wolfsbane]

6 minutes ago, Ninjadoodle said:

[snip

Here is what I think tho - If it was me, I would put in an extra gui button anyway, as iOS or the Web don't have Androids back button, and I like making things as cross-platform as possible.

[/snip]

Hm, I tend to think along these lines, too. But it'd be great to be able to make use of what we've got available, too.

I found this link: https://github.com/phonegap/phonegap/wiki/Back-Button-Usage 

Which makes it look like it's pretty easy to bind the back button to some kind of event, so it could be useful to have an on screen GUI button, but also bind the back button to the same functions, etc. Great, so hopefully this won't be too complicated.

And also: Disable back button=close  is a must fix for my game, I think. I noticed when I gave my game to some people to test, their fingers would accidentally brush my back button, and it closed the whole game. It's hard to keep people's attention for long, so anything that negatively affects that is a bit of a killer.

I'll try have a play with throwing this in when I'm back on my own time. 

[Ninjadoodle]

@Wolfsbane

I agree, if you can have the GUI button and use the back button as well, that would be the perfect solution.

Also, 100% agree with not annoying players if possible lol - too much choice and people quit too easily.

I don't have my Android charged right now, but I noticed that when playing 'Daimond Dasher' (That's how it's spelled on the store) on iOS - when you click the HOME button on the device, it doesn't quit the game, and you can always come back to it.

This must be an Android specific issue, to do with the back button.

[Wolfsbane]

Right. I think it should be droid specific, although I'll see if I can borrow an iPad to give it a try.

So the Home button on Android works the same way. (It'll minimize the game) and you can reopen it, and play at same place... no issues here. But most droids (all?) also have a physical back button, too, as well as a home button.. (I think iDevices don't, right? One button design). So it's that back button feature that needs a little special T&A

[Ninjadoodle]

@Wolfsbane - Yeah, one button on iOS. Theme must be way to stop it quitting the game - I'm sure @enpu, will have a solution / some ideas.

It would be handy to be able to set how the button works, from inside Panda, but not sure if that's possible.

[Wolfsbane]

Sure, it should be just the code in the link I found.

e.g.

// This is your app's init method. Here's an example of how to use it
function init() {
    document.addEventListener("deviceready", onDR, false);
} 
function onDR(){
    document.addEventListener("backbutton", backKeyDown, true);
    //boot your app...
}
function backKeyDown() { 
    // do something here if you wish
    // alert('go back!');
}

So a quick dig around the Panda engine, we'd probably just add the event listener in input.js somewhere, where it's doing the rest of the addEventListener's. e.g. maybe like this?

init: function(canvas) {
        this.mouse = new game.Vector();
        var target = game.device.cocoonCanvasPlus ? window : canvas;
        target.addEventListener('touchstart', this._touchstart.bind(this));
        target.addEventListener('touchmove', this._touchmove.bind(this));
        target.addEventListener('touchend', this._touchend.bind(this));
        target.addEventListener('touchcancel', this._touchend.bind(this));
        target.addEventListener('mousedown', this._mousedown.bind(this));
        target.addEventListener('mousemove', this._mousemove.bind(this));
        target.addEventListener('mouseout', this._mouseout.bind(this));
        window.addEventListener('blur', this._mouseout.bind(this));
        window.addEventListener('mouseup', this._mouseup.bind(this));
        if (game.device.mobile) 
        { 
           window.addEventListener('devicemotion', this._devicemotion.bind(this));
           //bind a new function for the back button. This should hopefully work?
           window.addEventLister('backbutton', this._deviceBackButton.bind(this)); 
        }
    },

 

Edit: And I really want to try it right now. ?

Edit2: I only just noticed. What is a blur event?? That's a new one for me!

[Wolfsbane]

Okay, so as far as I can tell this isn't a feature that's currently in Panda, so would be nice to have it built in. Based on this doco, the story is:

Quote

To override the default back-button behavior, register an event listener for the backbutton event, typically by calling document.addEventListener once you receive the [deviceready](events.deviceready.html) event. It is no longer necessary to call any other method to override the back-button behavior.

So in Panda, (on export) the deviceready occurs right down in index.html. On deviceReady, it call game.start() (which creates the Input, etc).

So, in Input.init(), I just added:

document.addEventListener('backbutton', this.onBackKeyDown, false);

And then created an empty onBackKeyDown:

onBackKeyDown: function() {		
},

Doesn't even need any intelligent code in here (yet..). It's enough just to add an Event to backbutton. This disables the default back behavior (which is just closing the game).

I gave it a quick test.. working on my device (built with Crosswalk). If I accidentally brush the back button, game doesn't close. 

When I first looked into this, I saw all sorts of 'add this to config.xml'. Happily this isn't necessary! But it looks like we can't actually edit the config.xml? It's auto-built by Panda?

 

 

 

[Ninjadoodle]

@Wolfsbane - This is cool, awesome that you got it sorted - hopefully this can be added as some sort of setting/config option - that would be really useful!

[Wolfsbane]

Yes, enpu would need to add it to the engine, I think. With the implementation I've shown, you could use it by overriding the onBackKeyDown. e.g.

game.Input.onBackKeyDown = function() { //go to scene };

But I think enpu will have a better way to integrate it in the engine to keep everything consistent, etc. 

[Ninjadoodle]

@Wolfsbane

Maybe we should add this as a feature request on the roadmap ...

https://www.panda2.io/roadmap

[Wolfsbane]

Yep, you're right. But I just haven't set up a Github account for my Panda stuff yet, so I'm content to just high light things here, on the forum, and if they get picked up, great.

At some point, I'll set up an account, and maybe try check in small fixes like this myself.