Trouble Extending a Pixi Class

[Raxxen]

Hi all,

 

I'm currently trying to learn coding and Javascript using Pixi to make a clone of Colour Flood. I am having trouble extending the Graphics class (sorry I am unsure if class is the right word) in Pixi. I have two JS files, one called game.js for the game and one called token.js for the token class.

 

What happens is when I run the program on my web server, I get an error that says "Cannot read property 'points' of undefined." This occurs right as I try use the drawRect function. 

 

Here's the code for my token

function Token (color) {    this._R = Math.floor(color/0x10000);    this._G = Math.floor(color/0x100-this._R*0x100);    this._B = color - this._R*0x10000 - this._G*0x100;}Token.prototype = Object.create(PIXI.Graphics.prototype);Token.prototype.constructor = Token;//Find a smooth transition to the next colourToken.prototype.findTransition = function(color, steps) {    this._nextR = Math.floor(color/0x10000);    this._nextG = Math.floor(color/0x100-this._nextR*0x100);    this._nextB = color - this._nextR*0x10000 - this._nextG*0x100;        this._tranR = (this._R - this._nextR)/steps;    this._tranG = (this._G - this._nextG)/steps;    this._tranB = (this._B - this._nextB)/steps;};

I haven't really done much with it yet. Here's the code for my game:

var viewWidth = 640;var viewHeight = 420;//Make a pixi Renderervar renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";// add render view to DOMdocument.body.appendChild(renderer.view);//create a new instance of pxi stagevar stage = new PIXI.Stage(0x000000);//Create an Array for the Squarevar squareArray = [];var totalSquare = 100;var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];for (var i = 0; i < totalSquare; i++) {    var color = colors[Math.floor(Math.random()*4)];        var Token = new Token(color);        Token.beginFill(color);        var layer = Math.floor(i/10);    Token.posX = viewWidth/11*((i+1)-(layer*10));    Token.posY = viewHeight/11*(layer+1);        Token.drawRect(Token.posX, Token.posY, 10, 10);        stage.addChild(Token);        squareArray.push(Token);}renderer.render(stage);

If you need any more info let me know. Thanks for the help!

 

Lenny

[xerver]

You didn't call the base constructor in your constructor:

function Token (color) {    PIXI.Graphics.call(this); //you forgot this part    this._R = Math.floor(color/0x10000);    this._G = Math.floor(color/0x100-this._R*0x100);    this._B = color - this._R*0x10000 - this._G*0x100;}

[Raxxen]

Ahh.. Thank you so much! That fixed it straight away! Cheers!