Ninjadoodle

Loading HD graphics on Hi-res devices

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.