Loading HD graphics on Hi-res devices

[Ninjadoodle]

Hi guys

 

I just found Phaser and I love the look of the engine

 

Is there a way for Phaser to load HD (@2x/@4x etc.) graphics assets on HD devices (in a similar way Corona or Gideros do?)

 

Thank you for your help!

[rich]

You can check the pixel density from the Device class and then add in a conditional switch in your preloader, but it won't do it automatically.

[jonbon]

But unless I'm mistaken, even with a conditional switch this would just load in a different set of graphics. The graphics would still appear too big on retina display's when added to sprites etc if there is nothing built into the engine to handle retina graphics?

[qzix13]

As I know and understand retina its just apple's marketing word which means high pixel density. There no magic. For displaying 'retina' graphics you need big sizes images. It's all! All depends on device's facilities. If it can render big sizes images, so use 'retina' graphics.

In my opinion no needs in 'retina' graphics on html5. html5 !== native.

[rich]

There's nothing built-in to handle retina graphics, no. It's on the roadmap but given the massive strain it puts on mobile devices it won't be looked at for a few months yet. In the meantime you can still code around it with a conditional check, more details here: http://www.html5gamedevs.com/topic/543-retina-displays-question/

[jonbon]

Thanks Rich. I can imagine you are stacked with much higher priorities.

 

I have taken a look at the link you gave and wanted to try this workaround. The concept makes sense and is the same idea that is talked about here: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

 

So, I tried a little test on a plain canvas (not using Phaser) and just drew a high-res image and it works correctly, showing a crisp image on my retina macbook.

 

I then tried creating a very basic Phaser demo with dimensions 480x320px. The game just loads a simple image of a dog.

 

On normal displays, the image loaded is 480x320px and on retina displays it is the high res version at 960x640px.

 

The key lines of code are here:

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

//Init

var game = new Phaser.Game(480, 320, Phaser.CANVAS, 'gameContainer');

 

//Game State

this.game.canvas.width *= window.devicePixelRatio;

this.game.canvas.height *= window.devicePixelRatio;

this.game.canvas.style.width = '480px'

this.game.canvas.style.height = '320px';

this.game.canvas.getContext('2d').scale(window.devicePixelRatio,window.devicePixelRatio);

 

//load the dog image

var sp = new Phaser.Sprite(this.game,0,0,'dog-ret');

sp.width = 480;

sp.height = 320;

this.add.existing(sp);

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

The problem I am having is that the call to 'this.game.canvas.getContext('2d').scale' doesn't seem to do anything. I can put any value here and it has no effect. This means that on retina displays, the dog image appears to be only half the width and height of the canvas.

 

It's this scale call that is needed to scale everything back up, as described in the other forum post, but I'm not sure why it doesn't work using Phaser?

 

Any ideas to help?

 

Thanks

[rich]

When Pixi runs the first thing it does is reset the transform of the canvas, which includes the scale. So you'll need to over-ride it in there.

[jonbon]

Ah, I see it. Great, thanks!

[Withjam]

Just found this thread searching for retina support in Phaser.  Is this still the recommended approach?

 

Also, jonbon, could you elaborate on how you accomplished the scaling by overriding in Pixi directly?  I'm just starting a new game with Phaser and would like to tackle this before I decide on final dimensions for my sprites.

 

Thanks!

[Ninjadoodle]

Hi Rich

 

Just wondering if there is any news on loading @2x / @4x graphics in Phaser.

 

These assets would only be loaded if the device has a hires screen, so old devices would just use the standard sd set.

 

I think Phaser is a great engine, and you're doing an awesome job on it

 

I'd just like to know whether there will be an automated way of doing this (like Corona/Gideros).

 

I can't quite figure out how to do this manually.

 

Thank you in advance!

[mtburdon]

If it helps, I'm currently achieving HD graphics by setting up the game with the following

game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO, 'gameContainer');

and using

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.setScreenSize(true);

I'm then making my assets double size so my PSD for iPhone 5 screens is 1136 x 640

[Ninjadoodle]

Hi mtburdon

 

Thanks for the reply

 

I want to avoid having to downscale hi-res graphics for old devices. I would also love to be able to provide upto @4x images (my base resolution is 480x320) for use on any really high powered devices.

 

I believe this is the most flexible way of doing things and also the most future proof.

 

Let's say in 5 years you buy a 100 inch ultra high res TV and want to play your game on it. There is nothing stopping me from adding a condition into the config file, which tells the game to load for example @8x assets.

 

Creating these multi res. assets is no problem either if you work with vectors. Space is becoming less and less of an issue, so adding an extra 10mb worth of hi-res assets won't be much of a downside.

 

This is how Gideros and Corona solve the resolution issue for native app development.

 

I was wondering whether Phaser might have an automated way to do this in the future?

 

Thank again

[clark]

mtburdon: 

 

I do what you do, but are you not loosing "input mapping" ?  Lets say my buttons are 100x100,  after using your method,  my buttons will still be 100x100 in terms of a "hitzone" even though the visual scale of the game is 50%. 

Incredibly frustrating as I have tried everything lol

[mtburdon]

@Ninjadoodle, I'm afraid I can't answer that question, I think Rich would probably be the best person to answer a question on Phasers direction.

 

@clark, nope, the whole things scales. I have my assets designed in the PSD set to 1136 x 640 and when adding them to Phaser the assets as well as their hit zones scale together

[clark]

Cheers mtburdon. 

 

I so far have ended up using this:

this.game.scale.maxWidth = Math.round(this.game.canvas.width / this.game.device.pixelRatio);this.game.scale.maxHeight = Math.round(this.game.canvas.height / this.game.device.pixelRatio);this.game.scale.minWidth = Math.round(this.game.canvas.width / this.game.device.pixelRatio);this.game.scale.minHeight = Math.round(this.game.canvas.height / this.game.device.pixelRatio);this.game.scale.refresh();

It seems to solve my input mapping issue when scaling the canvas. 

However, the problem is now that on 1.5 or 1.325 pixel ratio  (these dudes need to get a life), the scaling does not end up well and if I floor these pixelRatio values, the game looks visually fine but I loose input mapping. 

Anyways just sharing in this thread. 

[artsjedi]

I'm  wondering if there is any news for adding 2x or 4x graphics on Phaser Game.