ID of sprite

[Enigmafan]

Hello all,

 

I have just stated using pixi.js (and linking it :-) as well as javascript. I usually program in Java.

 

When I create a bunch of sprites, I put them in an array to keep track of them. The user is able to click on the sprite and drag it along. But I need to check the direction the sprite may move to, which is different for every sprite. But when the ontouch or similar event is triggered, I have no way to correlate the sprite touched with the sprite in my array. I have looked through the api, but found no way to do this.

 

The solution I've come up with is; extend the sprite object (as you would in java) and include an ID or other reference. But my programming skills in javascript are not enough to know if that is possible.

 

Does anyone have a suggestion if this is a good solution? Does anyone have another solution?

 

Thanks.

 

[powerfear]

Yes extending sprite can be a good solution, javascript use prototype it's a bit more confusing to use then Java style class. You can find many variation of "class/inherit/extend" type of thing which help making class in javascript thought.

 

If you want example on how to use prototype you can take a quick look at the pixi source code, the DisplayObjectContainer for example extend the DisplayObject: https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/display/DisplayObjectContainer.js

 

If you want to use a function to help doing that you can use this:

/*** Inherits the prototype of a parent object.** @method inherits* @param child {Function} The Child to inherit the prototype* @param parent {Function} The Parent to inherit from* @param proto {Object} The prototype to apply to the child*/PIXI.inherits = function(child, parent, proto) {    proto = proto || {};    //get the property descriptors from the child proto and the passed proto    var desc = {};    [child.prototype, proto].forEach(function (s) {        Object.getOwnPropertyNames(s).forEach(function (k) {            desc[k] = Object.getOwnPropertyDescriptor(s, k);        });    });    //set the constructor descriptor    desc.constructor = {        value: child,        enumerable: false,        writable: true,        configurable: true    };    //create the prototype    child.prototype = Object.create(parent.prototype, desc);};

This is taken from englercj (rolnaaba on this forum) library grapefruit, I renamed it to PIXI so if you declare it somewhere it will get added to the PIXI object.

 

Now here's an example on how you could use this to inherit a PIXI sprite and add some functions, variables.

function Player(texture) {    this.direction = 1;    this.speed = 5;    PIXI.Sprite.call(this, texture);};PIXI.inherits(Player, PIXI.Sprite, {    move: function() {        this.position.x += this.speed * this.direction;    },    setDirection: function(direction) {        if (direction === 'left')            this.direction = -1;        else            this.direction = 1;    }});

Then you can do

var player = new Player(texture);player.setDirection('left');player.move();player.speed = 50;

Hope that helps

[xerver]

The `this` object in a mouse event callback will be the sprite object that is being manipulated.
 
You can see some example drag code here: https://github.com/GoodBoyDigital/pixi.js/issues/180#issuecomment-19869086
 
Here is the code from that page (where `bunny` is a PIXI.Sprite instance):

        /*         * Set-up dragging         */             bunny.mousedown = bunny.touchstart = function(data)        {            this.data = data;            this.alpha = 0.5;            this.dragging = data.getLocalPosition(this.parent);;        };        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)        {            this.alpha = 1            this.dragging = false;            // set the interaction data to null            this.data = null;        };        bunny.mousemove = bunny.touchmove = function(data)        {            if(this.dragging)            {                // need to get parent coords..                var newPosition = this.data.getLocalPosition(this.parent);                this.position.x += (newPosition.x - this.dragging.x);                this.position.y += (newPosition.y - this.dragging.y);                this.dragging = newPosition;            }        }

The `this` keyword works differently in JavaScript than it does in Java; the context (`this`) of a function is determined by how it is called not by where it is defined. Since we call these methods via code like `sprite.mousedown(data)` the context is the original sprite.

 

You don't need an ID to map back to the object, just use the `this` keyword.

 

If you have any questions let me know.

[Enigmafan]

@Powerfear: Thanx for your explanation, I will give that a try.

 

@Rolnaaba

I am not sure whether that will work. I think I understand your explanation of the 'this'  keyword. But let me give you an example,

 

You probably know the game where you have 15 blocks in a 4 by 4 square where you can move one block to the empty spot (not sure what is called), in ascii:

 1  3 15 2

 7 11 13 4

 9  8  10 12

 5  6 13  X

These are my 15 sprites and one empty spot right/down. Sprite 13 can move right, sprite 12 can move down. How can I tell the Sprite Object represented by 'this' that he represents for instance sprite 12 and can move down? And ofcourse, as soon as sprite 12 is in the spot where X is now, sprite 12 can only move up, sprite 13 can't do anything, sprite 10 van move right and sprite 4 can move down.

[powerfear]

One option could be to use a tile collision system. You keep a 2D array of sprite, filling the array with each sprite reference and the empty space with null.

To know where a sprite in in the array you simply divide it's coordinate by it's size, since it's a grid it should work just fine.

To know if you can move you simply check the neighbor, if the neighbor is null you can move if it's not you can't. If the move is succesful, you set the new position as your sprite, and you make your old position null.

var grid = [];for (var i = 0; i < 4; i++) // y{    for (var j = 0; j < 4; j++) //x    {        if (i === 3 && j === 3)        {            //this is the empty spot in the grid            grid.push(null);        }        else        {            var sprite = new Sprite(texture);            sprite.position.x = j * 32;            sprite.position.y = i * 32;            grid.push(sprite);        }    }}//now you want to move a certain sprite, let's say in this context it is represented by the variable sprite//we figure out where the sprite is in the gridvar posx, posy;posx = sprite.position.x / 32;posy = sprite.position.y / 32;//lets say you want to move rightvar newposx, newposy;newposx = posx + 1;newposy = posy;if (grid[newposx + newposy * 4]){    //cant move there is something there}else{    //can move there is nothing    sprite.position.x = newposx * 32;    sprite.position.y = newposy * 32;    //update grid    grid[newposx + newposy * 4] = sprite;    grid[posx + posy * 4] = null}

I wrote this fast might have some error in the array access but you get the general idea

 

This would be for a 4x4 grid with 32x32 size for the sprite

 

Also you will need a couple of checks to make sure you don't access anything outside the array.