Scale Group and maintain position

[mattdudley]

I posted a while back about tile maps without much luck, I may have been way too vague. No matter, finished up the game and was happy enough with it. On to the next one! Phaser kicks ass!!!

My Issue:

I have a few sprites that I've added to a group, what I want to do is scale the group down and maintain its position. I was reading about "pivot" but I couldn't get it to work. It seems like the group is shrinking to the top left corner. I want to set the "center" of the group and then scale down.

If anyone has experience with this I'd love to hear how you solved it, if you need a code sample let me know. I haven't worked with the sandbox much but will be more than willing to set it up if it helps out.

Thanks and cheers!

 

[Batzi]

Make a group of all the sprites available and scale that group which usually includes the map/world. When you do that, it should normally work.

var sprites = game.add.group();

var map = game.add.sprite(0,0,'map');
var person = game.add.sprite(50,50,'person');

sprites.add(map);
sprites.add(person);

sprites.scale.set(0.8,0.8);

This should scale down the sprites to 80% while maintaining their original positions.

[mattdudley]

Thanks for the feed back, I set up something in the sandbox. I took what you said and modified it a bit but I'm still getting the same kind of effect.

http://phaser.io/sandbox/edit/epkwrAEP

You'll see that it is shrinking to the top left, like the "center" point for the group is 0, 0.

Like I said I saw mention of pivot but when I implemented it the behavior confused me for whatever reason. I couldn't actually tell what it was really doing.

Thanks again!

[Batzi]

50 minutes ago, mattdudley said:

Thanks for the feed back, I set up something in the sandbox. I took what you said and modified it a bit but I'm still getting the same kind of effect.

http://phaser.io/sandbox/edit/epkwrAEP

You'll see that it is shrinking to the top left, like the "center" point for the group is 0, 0.

Like I said I saw mention of pivot but when I implemented it the behavior confused me for whatever reason. I couldn't actually tell what it was really doing.

Thanks again!

Are you trying to zoom to the mouse pointer? That would achieve what you're looking for. By default, the camera in Phaser moves to (0,0) on scale.

Are you trying to achieve something like this: http://plnkr.co/edit/II6lgj511fsQ7l0QCoRi?p=preview

[mattdudley]

Thanks for taking the time to response, in that example I was just wanting to show the before and after of the scaling so clicking was just a way to initiate the scale. 

I'm attaching an image to maybe help illustrate what I'm trying to achieve. In the image the black circle represents the group of sprites, the grey circle represents the same group but scaled down and positioned.

I also updated the sandbox, I've added a sprite and I'm scaling it down on the click. The way that fourth sprite scales down is what I want to achieve but on a group.

http://phaser.io/sandbox/edit/epkwrAEP

Thanks

[Batzi]

text.events.onInputDown.add(function (e, pointer) {
  myGroup.forEach(function(child){
    game.add.tween(child.scale).to( { x: .5, y: .5 }, 1000, Phaser.Easing.Quadratic.InOut, true);
		})
		
	game.add.tween(sprite4.scale).to( { x: .5, y: .5 }, 1000, Phaser.Easing.Quadratic.InOut, true);
},this);

This should work. You need to target every member (child) of the group and not the group itself.

[mattdudley]

Awesome man! That is what I was looking for, but now I've come to a realization. I think what I'm looking for is more complicated than I originally thought. 

Again, thanks for taking the time to answer these questions.

I updated that sandbox with an example of what I'm actually trying to do. My group contains a "head", "hair", and a "mouth", I want to scale them down which you just helped me with. But... I think I also need to somehow maintain the sprites distance from each other as they scale down.

Here is my updated sandbox http://phaser.io/sandbox/edit/epkwrAEP

[Batzi]

Well this gets easier actually cause you don't need a group anymore. Look at the head as the parent and the hair and mouth as the children. In this case, do this and scale the head only.

function create() {
    
    var head = game.add.sprite(200, 200, 'head');
    head.anchor.setTo(.5, .5);
    
    var hair = game.add.sprite(0, -100, 'hair');
    hair.anchor.setTo(.5, .5);
    
    var mouth = game.add.sprite(0, 65, 'mouth');
    mouth.anchor.setTo(.5, .5);
    
    head.addChild(hair);
    head.addChild(mouth);
    
    var text = game.add.text(0, 20, 'click to scale', { font: '15px Arial', fill: '#ffffff' });
    text.inputEnabled = true;
    text.input.useHandCursor = true;

	text.events.onInputDown.add(function (e, pointer) {
       game.add.tween(head.scale).to( { x: .5, y: .5 }, 1000, Phaser.Easing.Quadratic.InOut, true); 
      
    },this);
	

}

 

[mattdudley]

Yes!!! Thanks so much! Can I give you some karma or something. I was worried that I wouldn't get any love if I posted hear and you absolutely killed it! This is exactly what I'm trying to do, so helpful. I guess I'm just going to have to keep on keeping on if I'm going to learn more about this framework.

If I can finish this game idea I'll share with you, my goal is to launch an MVP for it this weekend.

Thanks!

[Batzi]

Well you can like my post and I think you can set this topic to answered somewhere

You're welcome! Don't worry, we're here to help! Post anything and we'll do our best!

[caymanbruce]

I really hope someone can help me do this effect using only PIXI.js. It's killing me now. Seems Phaser comes with the tweening effect during scaling but in PIXI I have to write my own or use 3rd party library.

[caymanbruce]

I really hope someone can help me do this effect using only PIXI.js. It's killing me now. Seems Phaser comes with the tweening effect during scaling but in PIXI I have to write my own or use 3rd party library.

[EvilB]

I had spend quite some time on finding a way to mask an image and scale the group of the 2, but thanks Batzi's post I understood I should not group them and transform the group, but just attach the mask as a child to the sprite itself. works like a charm, thanks a lot!