Bring Sprite to front over all other groups

[mariogarranz]

I'm making a new game where I have several groups of sprites.

 

One of those groups should be at the bottom, behind ever other sprite group. Yet, if any of these sprites is being dragged, I want to bring it to top, not only over other sprites in its same group, but also over every other sprite on every sprite group in the game.

 

I have checked both "bring to front" examples and maybe I don't get it right, but that doesn't seem to be an option.

I've also thought about modifying the renderOrderID of the sprite, but I'm not sure that's something I should do manually.

 

Any ideas? Thanks in advance  

[XekeDeath]

You could use a group on top reserved for sprites being dragged.

When the drag starts, add the sprite to this group, which will remove it from the group it was in, and when the drag stops, re-add it to the group it came from.

[rich]

Exactly what Xeke said - that's how I'd do it too.

[mariogarranz]

Such a simple solution that I hadn't even thought about... Thank you very much guys

[mariogarranz]

Just found a little code problem.

 

The draggable sprites are an extended version of the Sprite object (lets call it DraggableSprite). In its constructor I call:

 

    this.events.onDragStart.add(this.startDragFunction,this);    this.events.onDragStop.add(this.stopDragFunction,this);

The problem I found is that I can't make a reference to the goup variables, since they are not inside the DraggableSprite object scope.

 

The only solution I can think of is passing the group variables to the DraggableSprite constructor as parameters so I can save a reference to them as an attribute, but that doesn't seem like a good practice to me.

 

I'm sure this must be a simple problem for an experienced JavaScript developer, but coming from Java and C++ I'm having some trouble with JS object oriented system 

[rich]

You need access to the group property from within your startDragFunction, yes? Or do you mean it's not visible in your DraggableSprite object at all?

[mariogarranz]

This is what I have so far:

 

In the general code:

function () {var game = new Phaser.Game(320, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });...var notBeingDraggedGroup, draggedGroup, otherGroup; ... function create() {     ...    notBeingDraggedGroup = game.add.group();    otherGroup = game.add.group();   draggedGroup = game.add.group();    ... }...})();

Out of that, I declared an extended version of the Sprite class:

 

DraggableSprite = function(game,x,y){   ....   Phaser.Sprite.call(this,game,x,y,'texture',0);   ....   this.input.start(0,false);   this.input.enableDrag();   this.events.onDragStart.add(this.startDragFunction,this);   this.events.onDragStop.add(this.stopDragFunction,this);   game.add.existing(this);}

I did it this way to keep the DraggedSprite code away from the game code, trying to keep it as clean as possible. Maybe the onDragStart event addition should be made from the game code instead?

[XekeDeath]

Maybe the onDragStart event addition should be made from the game code instead?

 

This. The game is where the groups are, so that is the context you will want on the callbacks.

 

The sprite that you are dragging should be passed to the callback, so the function could be something simple like:

function startDragFunction(sprite){    draggedGroup.add(sprite);}

The drop callback would be similar, but you need to know what group you want the sprite to go back to:

function stopDragFunction(sprite){    notBeingDraggedGroup.add(sprite);}