code structure

[Design Build Play]

I'm having issues restructuring the code to how I would normally work with canvas and js object, now see below, simple example how I would like to do it.

So its all wrapped in a function and I would like to sperate the sprites as seperate js objects that I call and create 'new Block()' etc.

However this causes problems as I can't then access the properties of the sprite inside this for it x / y / rotation etc...

also  I would normaly call this.something from the app init prototype but this does not seem to be possible in the way expected either...

 

any thoughts or guideance as to a better approach?

 

main.js

var App = function(){        this.stage = new PIXI.Stage(0x66FF99); // create an new instance of a pixi stage    this.renderer = PIXI.autoDetectRenderer(760, 600); // create a renderer instance    var scope = this;    // add the renderer view element to the DOM    document.getElementById("container").appendChild(this.renderer.view);        requestAnimFrame( this.animate );        this.block = new Block(this.stage)    //this.block.position.x = 20;    //this.init(); //init the app}App.prototype.init = function(){    // center the sprites anchor point    this.block.anchor.x = 0;    this.block.anchor.y = 0;        // move the sprite t the center of the screen    this.block.position.x = 0;    this.block.position.y = 0;        this.stage.addChild(this.block);   // console.log(stage)}// ====================================// THE ANIMATION FUNCTION =============App.prototype.animate = function(){            requestAnimFrame( app.animate );        //app.block.rotation += 0.1;      var rendererApp = app.renderer;      // render the stage         rendererApp.render(app.stage);}// ====================================// start the app ======================var app = new App()

block.js

function Block(stage){	console.log("new block created")	var texture = PIXI.Texture.fromImage("imgs/block.png");  // create a texture from an image path    var block = new PIXI.Sprite(texture); // create a new Sprite using the texture    stage.addChild(block);}

[rich]

Block = function(key) {  PIXI.Sprite.call(this, key); // whatever local properties it needs}Block.prototype = Object.create(PIXI.Sprite.prototype);Block.prototype.constructor = Block;

now you can do:

var bob = new Block(texture);bob.position.x = 100;etc

This is what I use through-out Phaser and it works fine there.

[Design Build Play]

Ok thanks this is a good starting point will try this out.

Mentioning Phaser... ahh that looks like it would be good for this project, i will look into that