• Content Count

  • Joined

  • Last visited

About mrBRC

  • Rank
    Advanced Member

Contact Methods

  • Twitter

Recent Profile Visitors

847 profile views
  1. mrBRC

    160,000 Bunnies!

    *thinks* (opps.. I started a 38 minute instructional video)... *...silently slips away into the interNETS from whence he came so abruptly..*
  2. well.. they will be seperate Texture objects.. you should probably consider using a Loader... I use an AssetLoader, which in turn calls a JsonLoader when the asset is a json file. This the sprite sheet, composed of several images of different frame sizes. This is the json file that specifies the frames (by name) and has a meta property on the bottom that gives a relative uri to the spritesheet. Lets assume you have a bunny file that has 2 frames 400 width and height each, where the 2nd animation is below the first. { "frames": {"bunny-0" : { "frame": {"x":0,"y":0,"w":400,"h":400}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":18,"h":18}, "sourceSize": {"w":18,"h":18}},"bunny-1" : { "frame": {"x":0,"y":400,"w":400,"h":400}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":400,"h":400}, "sourceSize": {"w":400,"h":400}}}, "meta": { "image": "bunny.png", "format": "RGBA8888", "size": {"w":400,"h":800}, "scale": "1" }}I removed some of the irrelevant meta data properties. you would use the JsonLoader to load the json file. Which inturn loads the bunny.png file At that point you could use the following: PIXI.Texture.fromFrame("bunny-0") PIXI.Texture.fromFrame("bunny-1") because the JsonLoader would cache those frames into the TextureCache. The easiest 'DisplayObject' to use for animation is the PIXI.MovieClip.( It has a texture array collection and methods for the animation states. you can get a better example of the MoveClip from PIXI.js git Examples.. if you haven't done so already, download them from github ( If you download the examples individually, you'll probably need download the bin folder as well.. than modify the index.html files to point to where to bin folder containing pixi.js and/or This probably goes without saying.. but eh.. now.. as far as your updateSprite(value) function goes var TestBaseTexture, TestSprite;// pretend we initialized those variables using the function earlier. That is, when we loaded the image into the source and constructed the BaseTexture that was assigned to TestBaseTexture// And TestSprite is now a child of stage.function updateSprite(x,y,width,height){ var x = x || 0, y = y || 0, width = width || 640, height = height || 400; var myNewTexture = new PIXI.Texture(TestBaseTexture, new PIXI.Rectangle(x,y,width,height)); TestSprite.texture = new PIXI.Sprite(myNewTexture);}updateSprite(null,400,null,null);// the last 2 nulls are unnecessary in this call, because they would be null if not specified.We don't need to manipulate stage if we already have a reference to the object. We also don't need to keep loading the source. There will be multible texture objects in animations.. don't forget that these objects are yours to overload to... TestSprite.AnimationFrames = [];TestSprite.AnimationFrames.push(TestSprite.texture);Alternatively... function updateSprite(sprite,x,y,width,height){ if (sprite) { var x = x || 0, y = y || 0, width = width || 640, height = height || 400; var myNewTexture = new PIXI.Texture(TestBaseTexture, new PIXI.Rectangle(x,y,width,height)); if (sprite.AnimationFrames){ sprite.texture = new PIXI.Sprite(myNewTexture); sprite.AnimationFrames.push(sprite.texture); sprite.AnimationFrameIndex = sprite.AnimationFrames.length - 1; } else { sprite.AnimationFrames = [{sprite.texture}]; sprite.texture = new PIXI.Sprite(myNewTexture); sprite.AnimationFrames.push(sprite.texture); sprite.AnimationFrameIndex = sprite.AnimationFrames.length - 1; //will be 1 sprite.LoopAnimation = true; } }}updateSprite(TestSprite,null,400,null,null);TestSprite.UpdateAnimation = function(){ this.AnimationFrameIndex = (this.AnimationFrameIndex + 1 < this.AnimationFrames.length) ? this.AnimationFrameIndex + 1 : (this.LoopAnimation) ? 0 : this.AnimationFrames.length; this.texture = this.AnimationFrames(AnimationFrameIndex); }Animate() { render.render(stage); TestSprite.UpdateAnimation(); requestAnimFrame(Animate);}requestAnimFrame(Animate);EDIT: Note that this animation frame mechanism doesn't have a delay between texture changes.. so it would change textures pretty rapidly.. Also, I really wouldn't alter the PIXI.Sprite object.. I would more likely create my own object where one of the properties was the PIXI.Sprite object.. var MyMakeShiftObject = { "sprite" : TestSprite, "AnimationFrames" : [{TestSprite.texture}], "LoopAnimation" : true, "AnimationFrameIndex" : 0, "baseTexture" : TestBaseTexture, "AddAnimationFrame" : function(x,y,width,height) {}};or... function MakeShiftObject(sprite, baseTexture) { this.sprite = sprite; this.AnimationFrames = [{sprite.texture}]; this.LoopAnimation = true; this.AnimationFrameIndex = 0; this.baseTexture = baseTexture; this.AddAnimationFrame = function(x,y,width,height) {};}var MyMakeShiftObject = new MakeShiftObject(TestSprite,TestBaseTexture);or something like that..
  3. It would appear that setting the height and width on my DisplayObjectContainer was the root cause of the WebGL Rendering breaking..
  4. nevermind.. I found a method to do this.. however, it is not immediately obvious how you can bind and update the texture when the canvas changes.. at any rate.. the following code sample demonstrates how to use a separate canvas as a PIXI.BaseTexture // I created a canvas element with the id "drawpanel" on my page.// My renderer is WebGL, function LoadCanvasImage() { var c = document.getElementById("drawpanel"); pixiCanvasRenderer = new PIXI.CanvasRenderer(c.width,c.height,c,true); var grd=pixiCanvasRenderer.context.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient pixiCanvasRenderer.context.fillStyle=grd; pixiCanvasRenderer.context.fillRect(10,10,150,100); var source = new Image(); source.src = pixiCanvasRenderer.view.toDataURL(); // in this instance, 'Canvas'.toDataURL returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAYE0lEQ…TWsFPLE2MExosAgTXenPKMGIFhI0BgDTu1PDFGYLwI/A9PJKWFOlTAfAAAAABJRU5ErkJggg==" // reference var BaseTexture = new PIXI.BaseTexture(source, PIXI.scaleModes.LINEAR); var Texture = new PIXI.Texture(BaseTexture); var mySprite = new PIXI.Sprite(Texture); stage.addChild(mySprite);}I'm not showing the Stage initialization here, or the animation loop.. but that should be easy enough to reference and implement in the pixi examples on github. EDIT: Added toDataURL instance data, and an article reference on it.
  5. @Xerver, What do you mean exactly? how do you use a separate canvasContext as a PIXI.Texture or PIXI.BaseTexture?
  6. I made the edit above to remove the sentiment about the loaded EventListener.. this next code sample works... var source = new Image();source.src = "img/bird.jpg";TestBaseTexture = new PIXI.BaseTexture(source, PIXI.scaleModes.LINEAR);TestBaseTexture.addEventListener("loaded", function(e) { TestTexture = new PIXI.Texture(TestBaseTexture, new PIXI.Rectangle(0,0,400,400)); TestSprite = new PIXI.Sprite(TestTexture); stage.addChild(TestSprite);}); .. however, you're essentially attaching this event listener to TestBaseTexture while it is actively loading the source.. so I don't know how stable. I attempted to create a new PIXI.BaseTexture(null, PIXI.scaleModes.LINEAR); attaching the event listener, and than assigned the source to TestBaseTexture.source... it does not raise the loaded event.. which is what I meant by I couldn't make sense of the 'loaded' event in the documentation.. it only seems to work at the point you initialize the object with a source..
  7. The PIXI.BaseTexture is the image source, and a PIXI.Texture references the BaseTexture and specifies the Frames.. // "Image" Implements "HTMLImageElement" Interface: // Reference: source = new Image(); source.src = "img/bird.jpg";// "HTMLImageElement" is the 'source' of BaseTextureTestBaseTexture = new PIXI.BaseTexture(source, PIXI.scaleModes.LINEAR);//The Rectangle is the FrameTestTexture = new PIXI.Texture(TestBaseTexture, new PIXI.Rectangle(0,0,400,400));//PIXI.Texture.FromFrame loads from cache.. in this method, we are using// the texture instance we created.TestSprite = new PIXI.Sprite(TestTexture); stage.addChild(TestSprite);EDIT: I actually couldn't make sense of the 'loaded' event being emitted/dispatched in the Documentation ( .. so I removed reference to it in the code sample I posted..
  8. which version was this.. 1.5.3? or the new 1.6.0?
  9. actually.. disregard that idea.. I incorrectly assumed you were calling that function in your manager when the setting of the shader was actually warranted.. I figured the currentid to shader id check was really just in case others attempted to use the method.
  10. Hmm.. I suspect the modifications to the Shader Manager is the cause of this webgl rendering issue. I see you added a UID to your Shaders And the method setShader: which runs a comparison against the UID. I think this is the root of the issue. Replace it with the following and run a test using WebGL rendering.. in my case.. it suceeds initially.. and than fails consistently while in the rendering loop. PIXI.WebGLShaderManager.prototype.setShader = function(shader){ if (this._currentId === shader._UID) { console.log("setShader False:", {"instance":this,"shader":shader}); return false;} this._currentId = shader._UID; this.currentShader = shader;; this.setAttribs(shader.attributes);console.log("setShader True:", {"instance":this,"shader":shader}); return true;};or is it supposed to do that??? be sure to point a breakpoint in your animation loop while running this (using Browser's Developer Console).. otherwise you'll get bogged down pretty quickly..
  11. It is not rendering correctly.. most of my assets are sprites within DisplayObjectContainers. Most of those DisplayObjectContainers's WorldTransform (MATRIX) property have NaN values.. Also, The Loaders, Texture, and Base Texture values seem to be all correctly propagated and functional.
  12. mrBRC

    Pixi + DragonBones

    this is interesting.. I thought for a moment that there was an existing example of this with the pixi source on git.. but I was only half right.. there is a Spine example that uses a file called dragonbones.... how confusing
  13. I've updated your jsFiddle: An obvious issue with the fiddle you provided was that you didn't have an 'External Resource' reference to a pixi.js added. Perhaps that was an overlook... var stage = new PIXI.Stage(0xF2F2F2); var renderer = PIXI.autoDetectRenderer(400, 300); document.body.appendChild(renderer.view);var imageLoader = new PIXI.ImageLoader("", true);imageLoader.addEventListener("loaded", onComplete);imageLoader.load();renderer.render(stage);function onComplete(e) { console.log("event data: ", e); var bunny = new PIXI.Sprite(e.content.texture); bunny.position = new PIXI.Point(200,150); stage.addChild(bunny); renderer.render(stage);}this is the modified jsFiddle content... Pixi Documentation Reference: ImageLoader: EventTarget: ImageLoader - line 68: an event dispatch is occurring and the eventArg is being created with two defined properties "type" and "content".. as you can see "content" is being assigned "this".. where this is actually the ImageLoader instance. Note that the created texture is also being 'cached' or added into PIXI.TextureCache[]..
  14. oh.. that's because the anchor isn't relative to the parent.. it's relative to x,y positioning of the sprite itself. if you want the sprite to be centered to the parent, leave the sprites anchor at 0.5,0.5 (centering the sprite texture and boundingbox to it's own x,y position) and adjust only the sprites positioning relative to it's parent. the anchor of the parent really should be at 0,0 because it's really only being used as a DisplayObjectContainer (which doesn't have a anchor property) neither does DisplayObject.. because neither of those objects have baseTextures/Textures associated to them. the sprite.scale property/member is inherited from DisplayObject the DisplayObjectContainer.scale property/member is also inherited from DisplayObject when you say you're sprite is drag-able.. do you mean resize-able.. as in dragging the corners and/or bounding edges?
  15. I actually haven't looked any more into this 'issue' but I suspect the bounding box needs to be updated after the primitives are drawn (i.e. drawRect method)..