Panda android landscape game doesn't scale it

[mrkarate]

hi, is there some has this problem? I have a landscape game,  (960x634 real res), so when I put cellphone on portrait, it's show's the please rotate display, that's ok, I rotate the phone and all it's ok, but if I rotate again, and come back to landscape, or I minimize the browser and come back, the game scale to ... mmm I think it's 50% or 30% the screen res, I still see all the game area, but downsized, instead of strech it, have some any idea of this? (this don't happend on ios, only on android to me), I use webgl (without webgl my game performance is terrible).

 

thanks!

[enpu]

What Panda version are you using?

[mrkarate]

it's:

Panda.js 1.13.2

Pixi.js 2.2.9

(this is throw on debug log)

 

this version it's the 1.13.1 but with a small updated from pixi and the animation system from the new version you're actual working

 

I try the 1.13.1 and ... WORKS OK!!!! ,NOOOOOOOOOO I already convert all my game animation system, from the old one to this!!!

for example, before I use a lot of arrays and vars, now my player sprites are:

                this.flaks[l].addAnim('up',arrayAnims[0],{
                    loop:false,
                    speed:60});
                this.flaks[l].addAnim('down',arrayAnims[2],{
                    loop:false,
                    speed:60});  etc.....

 

but a lot!!! all sprites!!! I have already 70 assets animated noooo!!!! if I have to convert all again to use 1.13.1 I will kill myself!!!!!

please enpu, any ideas, any thing you maybe think can cause that weird problem, I will test everything!!!, really appreciate it!!

 

thanks!!!!!

[enpu]

Try to replace only the animation system from 1.13.2

[mrkarate]

you mean, using all 1.13.1 files, but replace only renderer.js file? is there some other file asociated with animation?

this is a problem from new pixi.js file?, it's a common problem?,( I ask for whatever I can do for help, I will do it),

 

thanks!

[enpu]

Well try if that works, or try to replace only Animation class, or whatever you have updated from 1.13.1 to see what is causing that issue

[mrkarate]

hi empu,  I try all options, and find the problem is the scene class, but  I can't use the new animation system, because doesn't work with the old scene class,  no errors, just all hang, no updates, no events, and no draws, just a blank screen, (no traces, no logs, no debus, nothing), and I try  all old clases from 1.13.1, all 1.13.1 engine, only with new scene class, and the result it's the same, so, I'm sure the android resize problem is on the scene class, but the problem is I can't get new animations work with old scene class, any sugestion really will be appreciate it!

 

thanks!!!

[Ninjadoodle]

Hi @mrkarate

 

If you are not too far along with your game, I would suggest using Panda 2.0 (develop version).

 

I'm currently using it on my game and while features are being added, I find it very stable.

 

It will save you having to make numerous changes, when you upgrade in the future.

 

You will also have access to all the new features that @enpu has been adding.

[mrkarate]

i'm on the final phase... , just the android bug left, but, what things I have to change to use ver 2.0?, can you give me some advice?, where to download it, and what things I have to change ? I already use the new animation system.

 

my current android bug, is a bug from this version? or a 2.0 bug too?,

another ask, is possible to make the game looks equal on every resolution ?, I'm explain, I made the game on 960x634 res, and use resizeToFill method con config, works great on so many devices, but I notice the tablets with more squared aspect ratio (like 800x600 res), change the game area a lot, is there a way, the game scale that pixels instead of show more area?

 

thanks guys!! I really appretiate your help

[mrkarate]

and I confirm, the old scene method and the new one have very different renders draws on update, and the new scene have update order, so I reaaly don't know what's wrong in that, but sure about that new scene draw method are the android resize problem.

[PixelPicoSean]

@mrkarate

 

So you are using my forked 1.13.2 version right? I did not see the problem before (not test that yet). So if you've already used those features, say the animation and update order, your game may work pretty well by switching to the develop version.

 

I also suggest using the official develop branch instead of my fork for your future games. Sorry that I'll no longer update 1.13.2 since only my latest game uses the 1.13.2 and will use dev branch for my future games instead.

 

But be aware that @enpu has just changed the way "config" works, so you need to replace both "engine" folder, the html files and modify the config file.

 

Here's a simple example of updating the config file:

 

The old one: 

pandaConfig = {    name: 'my-game',    version: '0.1.0'};

Now need to be changed to:

game.config = {    name: 'my-game',    version: '0.1.0'};

Some more tips of migrating to new version:

 

• Replace "game.system.width/height" with "game.width/height"
• Please checkout the latest config file and "system" module for "new screen scaling settings"

If you have any problems, plz post here, I'll try my best to help.

 

Regards,

Sean

[mrkarate]

yes ! I have using your forked version!, I will update then to 2.0, and will ask here if I got troubled!

 

where I can checkout the latest config file and system module for screen scaling settings??

 

thanks!

[PixelPicoSean]

They are all inside the develop branch of Panda.

 

I just notice that you said without WebGL the performance is bad, I am not sure whether the WebGL support is completed in develop branch.

 

I suggest you create a new branch (if you're using git) for the game and try the develop branch engine, if the WebGL does not work well you can easily switch back.

 

BTW, can you tell me which Android system and browser you are using that has the resize issue? My game works well on both chrome and firefox, Android 4.3.

[mrkarate]

I test on android 4.3, chrome, and all android system, give me the resize problem,
 the game just work fine until you turn the cellphone again, then rotate, and don't scale, it;s just a small box center on the screen

but the first time the game works well, so really weird and don't understand it...

do you know about the resize things like:

 

another ask, is possible to make the game looks equal on every resolution ?, I'm explain, I made the game on 960x634 res, and use resizeToFill method con config, works great on so many devices, but I notice the tablets with more squared aspect ratio (like 800x600 res), change the game area a lot, is there a way, the game scale that pixels instead of show more area?

 

 

thanks!

[PixelPicoSean]

Yep, that's really weird. But my game shows just fine on Android browsers.

 

You can set the resizeToFill to false, then the game will scale just like on desktop browser instead of showing more area.

[mrkarate]

do you know where are the handlers to control the rotation and resize events?, maybe if I scale it manually can fix this,

[PixelPicoSean]

All of those functions are inside the "system" module.

[mrkarate]

I just check!, on sytem, I just debug it, and on ios, when you rotate the device, (portrait to landscape, landscape to portrait, etc), always enter to the onResize function, inside the if module  if (this.width > this.height) {

because is a landscape game, but on android, only the first time, and never more... very weird...

[PixelPicoSean]

I also checked that function. By running on Firefox (v38.0.5) and Chrome (v38.0.2125.102), the onResize function are always called when orientation changed. Do you have any browser settings changed on your devices? The game works without any scaling issue on both resizeToFill enabled and disabled.

[mrkarate]

I have three different android devices, and none of them have some changes, I I send you a link throught private msg, can you check it?, wait game load, and then rotate it, and rotate again, maybe if you see the resize problem, you have an idea

[PixelPicoSean]

The game does scale to half when orientation changed. But I notice that I can scroll the page up and down, do you do anything on hiding the address bar?

 

I load a plain engine (my 1.13.2 fork), set it the same as you do and it scales without any issue on my Android devices. I think it's caused by your game code.

 

BTW the meta settings are not correct (should use comma instead of semicolon).

[mrkarate]

found the problem!! it's more weird...  game.device.mobile its FALSE ON ANDROID?!?!?!? WHY?!?!?!?! (on ios it's ok)

this is the part of code:

 

EDIT!! IT"S NOT THAT!!! WRONG debug!!! haha sorry, it's the this.checkOrientation(); function the problem

 

 onResize: function() {
        alert("QQQ " + game.device.mobile);
        // Mobile orientation
        if (game.device.mobile) this.checkOrientation();

        //if (!game.System.scale) return;

        if (game.device.mobile) {
            alert("NO????")
            this.ratio = this.orientation === 'landscape' ? this.width / this.height : this.height / this.width;

            alert("NO???")
            this.resizeToFill();

            // Mobile resize
            var width = window.innerWidth;
            var height = window.innerHeight;

            // iOS innerHeight bug fixes
            if (game.device.iOS7 && window.innerHeight === 256) height = 320;
            if (game.device.iOS7 && window.innerHeight === 319) height = 320;
            if (game.device.iOS7 && game.device.pixelRatio === 2 && this.orientation === 'landscape') height += 2;
            if (game.device.iPad && height === 671) height = 672;
 

the second time, the game never pass if (game.device.mobile) { part

very very weird....

[mrkarate]

here's the exact code than make my bug real:

 

  alert("ok5")
        if (this.rotateScreenVisible && game.system && typeof game.system.pause === 'function') game.system.pause();
        if (!this.rotateScreenVisible && game.system && typeof game.system.resume === 'function') game.system.resume();
        alert("ok6")

 

on android, I got unitl OK5, so the code hang there, (this is the this.checkOrientation(); function)

[mrkarate]

found the problem... it's... AUDIO CLASS !!, looks like when resume function executed, try to resume audio too,but I haven't any debugs or error msgs here, but I track audio class and found, when I have on game, and I change from other tab, game pause, and then I came back, game resume but my backgroud music stop and this msg throw (this in on pc too, only on ios work fine)

 

TypeError: Value being assigned to AudioParam.value is not a finite floating-point value.

 

and the line generate that error is:

 

audio.playbackRate.value = rate || 1;

 

function play from audio class

 

I change audio.playbackRate.value = rate || 1; to  simple audio.playbackRate.value = 1; and all works ok now, game resize ok, etc... what was exactly this rate value??

 

thanks!

[PixelPicoSean]

@mrkarate

 

I've update the audio module to latest version (from develop branch), you can check it out now. You'd better replace whole engine folder since I made some more updates.

 

Tell me whether it solves the problem.

 

You can see what "playbackRate" is at https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained

 

btw, do you want to use the config way of v2 (replace "pandaConfig" with "game.config")? If you don't mind changing a few lines of code, I'm going to update this part too.

 

For remote debugging, I recommend you use http://www.vorlonjs.com/. It is very easy to setup, you only need to insert a script tag to your html file, open the dashboard and have fun.