Retina / Auto Image Loading

[Ninjadoodle]

Hi Guys

 

I really like the look of Panda.js but I have a question ...

 

On the website it states that one of the features is ... Retina / Hi-res - Auto Image Loading.

 

I am really interested in how this feature works (I assume that it's the same as Corona SDK / Gideros ), but I can't find any documentation on it.

 

Could someone please help me out?

 

Thank you in advance!

[fuzzee]

In config.js:

    system: {        hires: true,        retina: true       }    

Then just add your double sized images with @2x suffix.

e.g.

/media/logo.png

/media/[email protected]

 

assets.js

// just the 1 reference onlygame.addAsset('media/logo.png');

[Ninjadoodle]

Hi fuzzee

 

Thanks for letting me know

 

It seems like this works the same way as Corona and Gideros.

 

Is there a setting somewhere that allows us to set the ratio for when the engine switches over to @2x gfx?

 

Also, can we also add @4x graphics for ultra hi res devices?

 

Thank you in advance!

[fuzzee]

Don't think so... not yet anyway

 

Source code:
https://github.com/ekelokorpi/panda.js/blob/master/src/engine/loader.js#L213

[Ninjadoodle]

Thanks again for the reply!

 

I'm actually pretty impressed by Panda.js

 

It seems to be pretty easy to pick up and use.

 

The @2x graphics option is brilliant and I'm surprised that more engines don't take this approach.

 

I seems like it wouldn't be to much of a stretch, to also allow higher resolution images (for example @4x).

 

Perhaps the engines creator could let us know whether this would be feasible for the future?

 

Thanks for an awesome engine

[Ninjadoodle]

I'm still a little confused with the retina/hires setting.

 

The way I assume it works, is that you would select a base revolution and the engine will swap the images for @2x versions.

 

Eg. I work at 480x320, so the retina setting would load up higher resolution files but the dimensions would stay the same.

 

When I enable retina, the scene/canvas get made larger (but not quite double).

 

From what I can see, the resolution is increased but the sprite positions are not updated.

 

Is this something that has to be done manually?

 

I would really appreciate any help

[Ninjadoodle]

So, my base resolution is 480x320

 

With hires and retina enabled - the game is transformed into 960x640 while the object coordinates I set for the 480x320 screen remain the same.

 

if I do ...

 

if (game.system.width == 960) {

          var r = 2;

} else {

          var r = 1;

}

 

I can set object co-ordinates for a 480x320 resolution and multiply by 'r' in case the game is on a hires device. This will put all the actors in their correct positions.

 

Is there a way, the engine could do this automatically?

[gregmax17]

Sorry to bring this back from the dead. But I'm curious to Ninjadoodle's last post and question.

 

Does the engine take in account the position of the objects or does the dev need to?

[Ninjadoodle]

Hi @gregmax17

 

In Panda 1.xx you have to multiply the x and y values by "game.scale", in order for them to appear at the correct positions.

 

In Panda 2.0 (develop version), this happens automatically

 

Hope this helps!