Jump to content

Scaling problem when adding group as Child


Recommended Posts

Hello everyone!

Ive been tinkering around happily with phaser CE now for my latest browser app.

I'm feature complete since yesterday and stumbled upon one last problem i cannot figure out how to address...

i tried a couple of things but do not understand why things behave like they do.

Basically i have a group of sprites, which i add as a child to another sprite.

Now the problem i have is, i calculate a scalefactor for my app to scale it accordingly to the browser/device size and 

the group seems to scale in a very weird way (the scaling is very inconsistent, on a super small window it gets scaled down super much, on scalefactors close to 1 it is ok...)

so what i do (i reduced the code to the affected lines):


class MapScreen extends Phaser.Sprite

  this.anchor.setTo(0.5, 0.5);
  this.mapSize = 0.52; //0.52
  this.scale.setTo(App.scaleFactor * this.mapSize);

  this.mapGroup = this.game.add.group();

  this.stationButtons = [];
  this.stationButtons.push(this.game.add.sprite(App.gameWidth/2 + (480 * App.scaleFactor), App.gameHeight/2 + (370 * App.scaleFactor), 'point1')); // Anfang 0

   // enable animations for buttons and add function
   for (let i = 0; i < this.stationButtons.length; i++) {
     this.stationButtons[i].anchor.setTo(0.5, 0.5);
     this.stationButtons[i].scale.setTo(App.scaleFactor * (this.mapSize + 1.8));
     this.stationButtons[i].animations.add("pulse", [0, 1, 2, 3, 4, 5, 6]);
     this.stationButtons[i].animations.play("pulse", 8, true);
     this.stationButtons[i].inputEnabled = true;
     this.stationButtons[i].input.useHandCursor = true;
     this.stationButtons[i].events.onInputDown.add(function(){this.stationClicked(i)}, this);


so, when i leave the last line and do not add the group to the MapScreen, its fine, but as soon as i do it it starts to scale weirdly...?!

And i cant figure out how to keep the scale the same when the scaleFactor changes...


Thanks in advance :)

Link to comment
Share on other sites

hmm i tried that now... also a friend of mine suggested dividing the scale by the scalefactor of the parent.

Neither is giving me good results...

I think my main problem is that i do not understand what exactly happens when i add an object as a child. 

How exactly the transformation from global to local transformation works.

I tried this:

this.stationButtons.push(this.game.add.sprite((this.x/2) / this.scale.x, (this.y/2) / this.scale.y, 'point1'));

also dividing the whole thing through the parents scale and i tried it without dividing and only placing it according to the
parent with:

this.stationButtons.push(this.game.add.sprite(this.x/2 + 350, this.y/2 +370, 'point1')); // Anfang 0

everything still gives me in my eyes random results. I mean i do understand that its not random but i just dont understand how it works mathematically,

and why stuff gets offset so different everytime i scale the window....



oh my god.... i think i got it now... my brain was melting trying to wrap itself aroudn it in the most complicated ways... -.-

this.stationButtons.push(this.game.add.sprite(480, 370, 'point1'));

i removed every scale, multiplication every whatever and not it seems to work... sigh


ill test that now :)

thanks btw i wasnt seeing the trees from all the forest anymore...

Link to comment
Share on other sites


  • Recently Browsing   0 members

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