Scaling Matrix

[Rainbow Discus]

I read this blog post by OkijinGames: http://okijin.com/blog/index.php/responsive-and-device-independent-html5-games/

 

In the post, he explains how he handles scaling:

 

Because the display resolution and screen size may vary between devices it can be inconvenient to use pixels as the drawing unit in games. One method I have seen is to write the code for a specific screen size then scale up/down the final output on the target device...

 

... Instead, I use a reversed approach, very similar to the Device Independent Pixels (DIP) concept. A scaling matrix is applied to the context prior to any drawing operation so the code remain pixel-agnostic from the start.

var scale = 128; // Scaling matrix for drawing units.unitMatrix = [scale, 0, 0, scale, 0, 0]; // Then, prior to drawing.context.setTransform.apply(context, unitMatrix);

 

Is there any way to do this in Phaser?

 

The way I used to handle scaling was to apply a scaling factor to everything in the game, but OkijinGames' method seems much more convenient.

[Rainbow Discus]

Bump

[wayfinder]

If you scale your camera, i believe it will be functionally identical.

[Rainbow Discus]

Unfortunately this isn't really what I'm looking for. I don't want to scale the entire game up, I want to be able to scale just the coordinates of my game objects.

 

I figured out I could do it like this:

function prerender(){	for (var i = 0; i < objectGroup_enemy.length; i++)	{		objectGroup_enemy[i].sprite.position.x *= gameScale;		objectGroup_enemy[i].sprite.position.y *= gameScale;	}}function render(){	for (var i = 0; i < objectGroup_enemy.length; i++)	{		objectGroup_enemy[i].sprite.position.x /= gameScale;		objectGroup_enemy[i].sprite.position.y /= gameScale;	}}

This will scale up all the enemies' coordinates before rendering, and then scale down before my update loop. This works, but I would like to know if there was a better way of doing this. 

 

I noticed earlier that Phaser actually has something called FlexGrid. This seems to be what I'm looking for, but I can't figure out how to use it.

[wayfinder]

Ah, just the positions, and not the scale of the objects? In that case you could still scale the camera and add a line to the sprite's update function that does something like this.scale.setTo(1/this.game.camera.scale). I'm using this method to keep UI elements the same screen size while zooming in and out of my world. I keep a global variable called inverseCamScale to turn all the divisions into multiplications (which are faster, and depending on how many objects are visible it may be a factor). The advantage to that approach is that I'm not moving sprites around so that any further calculations based on their positions stay accurate.

[Rainbow Discus]

Thank you, that actually seemed to work pretty well!