• Content Count

  • Joined

  • Last visited

  1. For anyone interested I found a post on Github that helped me solve the problem: https://github.com/GoodBoyDigital/pixi.js/issues/601 the solution was a bit more involved than I expected but it was a matter of building out a new "DynamicSprite" class (similar to MySprite in the Github example) and overriding the _renderWebGL method to check for a "dirty" texture. this.baseTexture = new PIXI.BaseTexture( self.innerCanvas);this.texture = new PIXI.Texture( this.baseTexture, new PIXI.Rectangle(0, 0, window.innerWidth, window.innerHeight)); var DynamicSprite = function() { PIXI.Sprite.apply(this, arguments); this._dirtyTexture = false;};DynamicSprite.prototype = Object.create(PIXI.Sprite.prototype);DynamicSprite.prototype.constructor = DynamicSprite;DynamicSprite.prototype._renderWebGL = function(renderSession) { if (this._dirtyTexture) { this._dirtyTexture = false; PIXI.updateWebGLTexture(this.texture.baseTexture, renderSession.gl); } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);};this.sprite = new DynamicSprite(this.texture); I'm then using an interval to update the textures: this.updateFrame = function() { self.innerCanvasContext.drawImage(self.inner, 0, 0); self.sprite._dirtyTexture = true; self.baseTexture.updateSourceImage(self.innerCanvas);};
  2. I'm hoping someone can get a round to push me in the right direction. Put simply: I need to efficiently replace image data in BaseTexture using self.canvas.toDataURL(); Thanks again!
  3. Hello, I'm experimenting with video rendering in canvas and found another topic (http://www.html5gamedevs.com/topic/1345-playing-hd-movie-with-pixijs-is-it-possible/?hl=video#entry8926) posted last year, but it wasn't totally helpful. I'm trying to recreate an effect in canvas similar to www.craftymind.com/factory/html5video/CanvasVideo.html. Clicking on the canvas makes the video explode and come back together. I've worked out the fundamentals and have managed to get individual frame data from a video into a ticker. Here's some code: this.canvas = document.getElementById('textcanvas'); this.context = this.copy_canvas.getContext('2d');this.texture = PIXI.Texture.fromImage('tmp.jpg');this.sprite = new PIXI.Sprite(this.texture); this.updateFrame = function() { if (! isNaN(self.inner.duration)) { this.context.drawImage(self.video, 0, 0); this.texture.baseTexture.source.src = self.canvas.toDataURL(); }};self.interval = setInterval(this.updateFrame, 10); I'm creating a base texture with a temporary image, since it seems to require an image passed through to it. Within the update frame, I'm assigning the video to the canvas so it draws the image. I'm then grabbing the frame data from canvas and chucking it into the baseTexture source. I looked at how Texture is structured in the Pixi library and determined I can grab it directly from the canvas. So I swapped fromImage out for fromCanvas. I'm not getting any rendering at that point. I don't have a good enough understanding of the texture cache or the lifecycle of the rendering layer. I'd really appreciate if anyone more experienced can push me in the right direction and perhaps provide a base understanding of the texture rendering lifecycle. Thanks =) Dave