Sign in to follow this  
mattdudley

Scale Group and maintain position

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

example.png

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);
	

}

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.