• Content Count

  • Joined

  • Last visited

Everything posted by mrBRC

  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)..
  16. what is your calculation on this? when/where are you adjusting the position? I suspect from your follow up post that the scale of your child sprite is inheriting the parent scaling... which is to be expected.. your positioning assignment operating probably doesn't account for it.. and it may even be applied prior to the scaling..
  17. This is relevant to the downloadable framework tutorials/demos and a general chrome testing FAQ You can bypass/disable the web security of Chrome to test applications that might otherwise violate a same origin security policy enforced by the browser. Create a shortcut on your desktop to chrome passing the -disable-web-security switch (ex: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security) All chrome.exe processes must be closed before opening chrome with that shortcut/added switch Close all running Chrome.exe instances and applications.. Chrome Extensions could still be running in the background, so verify with a Running Task/Process Explorer. .. of course, I wouldn't recommend browsing the web with it though..
  18. hmm.. you say the platform is developed already but you're in need of a programmer for the prototype? Or are you looking for someone to develop the first game on your platform? What programming language? I'm a full stack developer with significant web development expertise and experience. Feel free to PM with further details on your offering.
  19. that's interesting.. I was just reviewing Snap.svc and I believe they made specific reference to PBS Kids utilizing it... It doesn't seem to be a part of your Platypus Game Engine git though.. EDIT: just realized this post is several months old.. popped up on my 'also tagged' list.. I suppose posters haven't been tagging their forum posts as often as they should be..
  20. hmm.. I haven't reviewed phaser that much.. but I don't see a reference in the doc to 'elements' other than the HTMLCanvasElement AddToDOM and create methods, nor do I see a menu or content.. so when you say elements.. do you mean HTML elements within the canvas? I mean, maybe it is me, but the question as stated doesn't seem to relate to phaser or any of its classes.. am I right?
  21. Actually.. for the CSSLoader.. another great reference git.. that I've used in the past is skrollr stylesheets note the use of the data attribute on the link tag reference... EDIT: note that skrollr stylesheets extracts the attribute and declarations of pseudo vendor tags from a stylesheet and assigns/appends values into the data attribute of a DOM element.. the assigning/appending values to the DOM element data attribute is NOT part of what I am referencing to.. Also, for my own purposes, I'm reviewing Web Components and Shadow DOM (which isn't supported by all major browsers as of yet: ). It is worth reviewing for understanding potential pitfalls in regards to SVGs, as the styling can be decoupled from the file as well as embedded.
  22. Just queuing up the discussion on Binary Object Notation for Javascript as a potential PIXI loader in the current future.. MongoDB is a good example of an existing architecture that uses it as both a file system and for content delivery. Additionally, I'm reviewing css base64string images and css-shaders in combination WebGL here is a 2 year old git on the css-shader route. if nothing else it is a good example of how you can extract data from css. Thus a PIXI.CSSLoader is certainly possible.. and shouldn't even require ajax if the base64string representation of images are supplanted into css selectors & files. You could of course use ajax against 'url' style declaration when present. Additionally, I've been trying to review SVG support.. I've been following and reviewing the Adobe WebPlatform team of and on since they acquired RaphaelJS developer Dmitry Baranovskiy.. who may have been instrumental in the following Javascript Library Snap.svg. (actually I just read the about page and it is indeed his creation) Snap.svg doesn't seem to require the use of Canvas or WebGL.. instead it uses the svg element and likely css transformation and transitioning.. It seems like a pretty good standalone library. For the purpose of PIXI Loading.. it's the Matrix (in context of SVG) and the general SVG object portions of the code that are relevant. There is a specific reference on the homepage to making svg spritesheets.. so that's of interest as well.
  23. hmm.. synchronously implies thread execution would 'stop' until that operation completed.. like assigning a value to a variable. The next line within the scope of that function doesn't execute until that assignment is performed. I suspect you don't really care (or require) whether the nature of the connection itself is synchronize or asynchronous. You just want the callback function fired off when the load is completed. I don't know exactly what error your getting, but I see you're passing 'texture' (which is undefined) into PIXI.sprite in the first code segment you supplied. . try passing 'this' instead.. also, the 'onComplete' function will likely be called with event arguments.. you don't seem to require them, but it's a good idea to account for them. I usually use 'e'.. but for this example I'm going to write 'eventArg' var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete(eventArg) { var bunny = new PIXI.Sprite(this);}/* Note: this function won't actually work, because fromImage doesn't dispatch an event, nor does it process delegates passed to it*/in the second code segment you're passing img (which is undefined) into a new instance of PIXI.BaseTexture.. try passing 'this' instead var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete(eventArg) { var texture = new PIXI.Texture(new PIXI.BaseTexture(this.src));}/* this callback function will fire.However, PIXI.BaseTexture does not use an Image type for its constructor.. it uses a string to the ImageUrl. Thus you would be constructing an image needlessly.. which in turn makes the callback function onload pointless, right? */also.. note that 'onComplete' is not a good function name as it might cause a conflict.. so onLoadTextureComplete would be more suitable.. though, there are naming conventions for this sort of thing.. of which I'm not utmost familiar with in Javascript EDIT: included the eventArg sentiment. EDIT: I didn't check the documents when I posted this..neither of the methods supplied work properly..
  24. just wanted to explicitly point out that cropped 'parts of a spritesheet' are called frames.. if you review the texture and the inherited baseTexture PIXI.js defined objects.. in the context of the JsonLoader or AssetLoader, you can of course develop your own Loader..
  25. I looked into this a bit more, and it seems the JsonLoader is attempting to use XDomainRequest.. which apparently has issue with same origin calls.. so a domain check is probably in order..