Jump to content

Bring Sprite to front over all other groups


Recommended Posts

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

Link to comment
Share on other sites

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  :wacko:

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);}
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...