jsantos

Best approach to puzzle group drag

Recommended Posts

Hi all!

 

I'm currently working on an activity for children.

 

- They have a set of puzzle pieces (more a Tangram really).

      One of those pieces is fixed, the other they can drag around.

      Each piece will feature an image, randomly selected, that is a pair with another image placed on a fixed piece;

 

So far I have the image sorting done (it's an array of words, that correspond to an image and sound that have the exact same naming convention. Whenever you pick an even number, you'll get the even number plus one - pairs ;) )

 

I have the general event.onInputDown sorted from a  previous activity I tackled (just needs a few tweaks).

 

My issue at the moment is with the puzzle pieces + image:

 

I think I should make them as groups: one for the fixed pieces, one for the moving pieces;  I will create a new element/child(?) of each group, at position x, y). Issue: scale the puzzle pieces... I tried setAll(0.5, 0.5); tried anchor... then read groups don't really have anchors so ... Whatever I tried I only got, as a result, that the puzzle pieces seemed to stretch and move outside the game area...

 

I need to add the randomly selected images on top of the moving pieces of puzzle and be able to drag the entire thing on one go...

I have established on my script the variables for the groups and image.

I tried the code below (trying/testing with just one element each at the time):

fixedGrp = game.add.group();puzzleGrp = game.add.group();        for(var i = 0; i < 3; i++){        if(i == 0){            fixedGrp.create(68, 68, 'piece1');        }else if(i == 1){            fixedGrp.create(68, 318, 'piece1');            }else if(i == 2){            fixedGrp.create(68, 568, 'piece1');                }    }       // should use a for as above    puzzleGrp.enableBody = true;    puzzleGrp.physicsBodyType = Phaser.Physics.ARCADE;    puzzleGrp.create(900, 68, 'piece2');    //puzzleGrp.scale.setTo(0.5, 0.5);    image = this.game.add.sprite(1020, 170, 'randomImg', puzzleGrp);    image.width = puzzleGrp.width;    image.height = puzzleGrp.height;    image.inputEnabled = true;    image.input.enableDrag(false, true);

My idea is that the image will be part of the group and when I drag it, it will bring the group over with it.

However... again my scaling attempts fail and I can only drag the image.

 

Any pointers would be appreciated.

 

Cheers!

 

edit: Mistake on post name

Share this post


Link to post
Share on other sites

I did a bit more digging and elbow grease and added this:

 fixedGrp.setAll('anchor.x', 0.5);    fixedGrp.setAll('anchor.y', 0.5);            for(var i = 0; i < 3; i++){        if(i == 0){            fixedGrp.create(68, 68, 'piece1');        }else if(i == 1){            fixedGrp.create(68, 318, 'piece1');            }else if(i == 2){            fixedGrp.create(68, 568, 'piece1');                }      }    fixedGrp.forEach(function(size){        size.scale.setTo(0.5, 0.5);        });

So now the scaling and spacing of the pieces are like I wanted. The scale was a mistake on my part that I realized a bit later...

  

ps - edit because I mistyped a word

Share this post


Link to post
Share on other sites

Hi all!

 

Just to close this topic in a way...

 

I ended up not using groups. Instead I used addChild() to add the top image to the bottom image and since now I have "normal" pairs of images, I can still drag them around, as needed.

 

Not the most elegant or resource friendly, maybe... but gets the job done! ;)

 

Cheers!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.