How do I use my own custom properties on a KineticJS Sprite? - html

Question

I am using the KineticJS Sprite object in creation of a simple HTML5 2D canvas game. I need each sprite to have certain characteristics, such as 'shield', 'firepower', 'speed', etc. So I need to add my own custom properties to the Sprite object.
Ideally I want something like:
mySpriteObj.setCustom('shield',50) // set a custom property to 50
...and then later..
var shield = mySpriteObj.getCustom('shield') // returns 50
But there doesn't appear to be anything like that. I did try to use the attr property (getAttr and setAttr) with my own custom values but this did not work.
Is there an easy way to associate your own variables with a Sprite object?
thanks
Owen

Answer 1

Even though getAttr() and setAttr() are the best method to do it, as long as you are not trying to save the canvas using .toJSON() and then recreate the node, you can simply assign whatever custom values directly like this:
mySpriteObj.shield = someValue;
mySpriteObj.speed = someOtherValue;
var myObjSpeed = mySpriteObj.speed;
var myObjShield = mySpriteObj.shield;
Although, you might want to share your code using getAttr() and setAttr() and try to fix error in that.

Answer 2

To add a method to a Kinetic.Shape you can use the addMethods function see the docs
You can check the the Kinetic Source for examples on how to use this method.
Example:
Kinetic.Util.addMethods(Kinetic.Shape, {
getCustom: function() {
//getCustom attribute code here
},
getCustom2: function() {
//getCustom attribute code here
}
});
Notice you can add multiple functions by adding more properties (functions) in the object for the second parameter of the addMethod function.
And like Ani says, you should use the getAttr() and setAttr() functions to get and set the custom attributes.
http://kineticjs.com/docs/Kinetic.Shape.html#getAttr
http://kineticjs.com/docs/Kinetic.Shape.html#setAttr