Jump to content

Resizing world calculated from center?


niceWeather
 Share

Recommended Posts

Hey everybody,

 

many, many posts in this forum have already helped me a lot in getting to know Phaser, so I decided to take a chance in asking a question I didn't find an answer to yet.

 

Thanks to a topic on this forum (http://www.html5gamedevs.com/topic/17437-changing-game-size-dynamically/?hl=%2Bchange+%2Bworld+%2Bsize) I found out that I can dynamically change the world size of my game.

When trying, I realized that it reduces the size by cutting off of the right side and/or the bottom (and respectively increases the size by adding to the right side and/or the bottom).

 

The thing I want to do is reducing the game size by cutting off from the right and left side equally, so the center of the game will always be in the exact center of the world.

So instead of cutting of the whole from only one side, I'd like to cut off half of the whole from each side.

 

If it's not understandable, what I mean, please just ask and I'll try to explain better.

post-17280-0-26677900-1447858980.jpg

post-17280-0-24148200-1447858986.jpg

Link to comment
Share on other sites

I meanwhile actually managed to solve my problem with a workaround.

 

So I wanted the height to always stay the same and the width expand according to window proportions:

// calculate change in height to change width accordinglyvar ratio = myGame.SAFE_ZONE_HEIGHT / window.innerHeight;// calculate how much will be cut/added (setGameSize() always cuts on the right side!)var cutRight = (window.innerWidth * ratio) - this.game.width;// don't do anything more if nothing changedif (cutRight != 0) {	// cut the world to the new size	this.world.game.scale.setGameSize(window.innerWidth * ratio, myGame.SAFE_ZONE_HEIGHT);	// adjust all children positions to new size	for (var i = 0; i < this.world.children.length; i++) {		if(typeof this.world.children[i].posWorldDivider != 'undefined') {			this.world.children[i].position.x = this.game.width / this.world.children[i].posWorldDivider[0];		}	}} 

- The 'myGame.SAFE_ZONE_HEIGHT' variable is a global variable I use to store the intended height of my game, because I only want to have the width changed. And it should change in relation to the intended height.

 

- The 'posWorldDivider' property is no Phaser defined one, but actually defined by myself for each object that I want to reposition itself and is an Array that contains a value or the x-position (at 0) and one for the y-position (at 1).

It is only the divider (to divide the whole game screen with it and get my relative value) and no definite value because I find it easier to calculate positions with dividers instead of definite values.

 

- The 'if (cutRight != 0)' query is there because the 'setResizeCallback' that triggers the function this snippet is in is triggered a few times per second and I don't want my code to do unnecessary extra work if nothing actually needs changing.

 

[After this snippet I also change the scale (using setUserScale) to scale the whole original game size to window size but that was not really part of my question so I left it out.]

 

Maybe someone still has an easier approach to this? I would appreciate it, because this is still just a workaround.

Link to comment
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...
 Share

  • Recently Browsing   0 members

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