Design Build Play

Members
  • Content Count

    11
  • Joined

  • Last visited

About Design Build Play

  • Rank
    Member

Contact Methods

  • Twitter
    DBP_tweeter
  1. This maybe more of a specific backbonejs question but... I building a backbonejs project with multiple views and different canvas's per view (one being a PIXI canvas another THREEJS). I'm having trouble destroying the canvas from the previous view state, when switching views the previous canvas is still ticking over in the memory and not removed with the view I render my views like so... (removing this.view is there, to do a clean render) slides: function () { if(this.view) { this.view.remove(); } this.view = new Slides() // THE SLIDE SCREEN}, This seems to destroy the view but not the canvas element inside of that view.
  2. * Firefox browser also doesn't display the transparency correctly if you have a colour defined
  3. I think I have now fixed this issue.. on the examples the stage is normally passed a colour when creating the pixi stage, removing this resolves the issue // var stage = new PIXI.Stage(0x252525);var stage = new PIXI.Stage(); // no colour
  4. When using a transparent bg on the canvas, in the default Android "Internet" browser the stage has like a bright overlay over it, well I guess its the background, is extra bright, and the transparency not displaying properly. Any solutions to fixing this? Im rendering to canvas like so var canvas = document.getElementById('canvas_ani'),renderer = new PIXI.autoDetectRenderer(645, 416, canvas, true ); And on another niggling issue (but not so important),before page loads the pixi stage, it will always flash black quickly before anything is rendered, this will happen on any pixi canvas browsers, is there a way of hiding this ?
  5. 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
  6. 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);}
  7. How would I go about rendering to a stage that is defined on the html page, as in the <canvas> tag or id within other elements on the page. The examples render directly to the HTML page and not to s specified id area
  8. Theres a video of the installation now on youtube ...
  9. been having abit of a play and heres a little preview of how the pixi based Steven Seagull would look like... There is a lot of work to optimise the code still, and then i'm sure it will run much much faster still... but its a promising start its running full screen browser, but it is meant for a stage size around 1024x768px, so maybe readjust the window a bit http://www.designbuildplay.co.uk/projects/stevenseagull/game.html
  10. I wish i had made that
  11. Pixi was used to create an interactive installation, it was quite interesting as using it for something that was not online or game base... the screen is made up of a set of huge 12 x 1920x1080 TV's. By pressing a physical button it would swipe across into a different animation, this was done by listening to keypress's and performing a function accordingly. A version of the application can be viewed here : http://designbuildplay.co.uk/projects/mccglc/bluecoat/ To simulate the physical buttons press use the keys 1, 2, 3, 4 Have to say i love the framework, can't wait to use it on another project which would put it to the test more.. currently reworking a CoronaSDK based game for pixi to smash to pieces