Sign in to follow this  
Raxxen

Trouble Extending a Pixi Class

Recommended Posts

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

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.