Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Scaling Matrix


Rainbow Discus
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...