Design Build Play

code structure

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

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...

  • Recently Browsing   0 members

    No registered users viewing this page.