Need help with my first game

[Kevinnguyen]

Hi guys,

 

I'm new to Phaser and need some advices for my first game. I want to make a puzzle game that player has to arrange the small boxes in the correct positions by moving the boxes vertically or horizontally (please take a look at the attached picture). So in the attached picture, the small boxes are the colourful ones and they can be moved within the big grey area. What's the best way to do this? e.g. make sure the boxes can only be moved within the big grey area and they cannot be overlapped on each other?

 

Any input is appreciated. Thanks a lot!

[Carlos]

I think your problem is similar to this:

http://www.html5gamedevs.com/topic/14272-how-to-check-my-sprite-can-move/

Look at drhayes answer.

[ForgeableSum]

Since you need to have some way of selecting which box is being moved, I would use the mouse pointer to move the boxes. When the mouse is down over a box, add or subtract from either the x or y axis of the box to move the box. X or Y: never both. This adding or subtracting will be done with a mouseMove callback function. Run your mouseMove callback function on mouseDown (mouseMove on mouseDown is the equivalent of a mouse drag). 

 

But before the box moves, you need to determine whether the position it is moving to is occupied by another box. You also need to set the box movement bounds to the bounds of the entire cube to assure the box doesn't fly off the game world. If your cube is the game world, then all you need to do is set the movement bounds to the game world. 

 

To determine wether the position moving to is occupied by another box, you can use overlap or collision. Another way to do it would be to create a matrix representation of your grid which keeps track of which nodes can be moved to:

 

gridMatrix = {    'y0': {        'x0': false,        'x1': false,        'x2': false    },    'y2': {        'x0': false,        'x1': false,        'x2': false    },    'y3': {        'x0': false,        'x1': false,        'x2': false    }}

In update, set the vector as true if a box falls inside 1 or both of those vectors. Then, every time you try to move a box, you check the matrix first to make sure the vector is false before you move to it. You also need to write code which sets the vector to false if a box leaves the vector. This can be done simultaneously with the other functions in update(). 

[Kevinnguyen]

Thanks for the replies!

 

In order to check for overlap, I need to enable physics body, right? But if I do that, when I start dragging the box, it will shake and fly out of the world bounds eventually. Am I doing something wrong? Please see the code below.

var playState = {    create: function() {        this.container = game.add.sprite(10, 150, 'container');        this.tiles = game.add.group();        this.tiles.enableBody = true;                var tile;        for (var i = 0; i <= 5; i++) {            tile = this.tiles.create(90, 16 + 90 * i, 'tile', i);            tile.name = 'tile' + i;            tile.inputEnabled = true;            tile.input.enableDrag(false, false, false, 255, null, this.container);        }    },    update: function() {        game.physics.arcade.overlap(this.tiles, this.tiles, this.checkPosition,  null, this);    },    checkPosition: function() {            }}