Search the Community

I've just been making it up as I go with pixi, and I wanted a sanity check for my approach to entities. My entities have a lot of functionality and effects, but cause FPS drops when about 100 are on screen. Is that appropriate given how complex they are? Is it most likely caused by one specific thing? Is any of this approach decent? As a basic overview, here's how my Pirate class goes: create a class called Pirate, inherits from DisplayObjectContainer add a main ship sprite, alpha set to 1 add an explosion effect (itself a complicated entity), disabled initially and alpha set to 0 add debris sprites that break apart when the ship is destroyed, alpha set to 0 add a hitpoint bar add matrix+filters for a mouse over effect when player targets the pirate check a 'state' variable once per frame, to see when pirate has died once per frame, run the appropriate logic for the state the pirate is in (alive: do nothing, dead: play explosion effect, etc) So to summarize, entities are DisplayObjectContainers containing a bunch of art assets, most of which are invisible at any given point in time. A state variable is monitored by the client, and used to decided which art, effects, etc. to show at any given time. The design has been moving more and more to a component-based pattern, as shown here it is still just a hybrid. Oh, and before I forget, the entities in the game are only clientside graphics! All actual logic relating to the ai/movement/etc occurs on the server at 20 fps. The client interpolates all entities at 60 fps for nice smooth movement. I don't think this causes the main performance issue. When profiled, 18% of the total time is spent in WebGLRenderer.render, and 1.5% in the interpolation. Here's an example of how I create my jellyfish pirate ship. No need to read the code too thoroughly, it's all just a rough outline. There are sounds (howler.js) and object pooling, but I've cut most of that stuff out for now. Here's a very short video of what it looks like: https://www.youtube.com/watch?v=t3udYwZOO50 function Pirate() { PIXI.DisplayObjectContainer.call(this) // for clientside prediction of collisions this.collider = new CircleCollider(this.x, this.y, 15) // shows a medium explosion when destroyed this.explosionEffect = new ExplosionEffect(2) this.addChild(this.explosionEffect) // anything that moves/rotates with the ship goes in shipContainer this.shipContainer = new PIXI.DisplayObjectContainer() // the art for the ship when alive and pristine this.ship = new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-spaceship.png')) //this.ship.tint = 0x8888ff this.ship.anchor.x = this.ship.anchor.y = 0.5 // broken up pieces of the ship // these sprites all carefully line up to create a whole ship this.debris = [] this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris0.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris1.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris2.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris3.png'))) // initialize the debris with an alpha of 0 for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] this.shipContainer.addChild(debris) debris.alpha = 0 debris.anchor.x = debris.anchor.y = 0.5 } this.hpBar = new HitpointBar() /* // debug, most recent server position w/o entity interp this.serverPosition = new PIXI.Graphics() this.serverPosition.lineStyle(2, 0xff0000, 1) this.serverPosition.drawCircle(0, 0, 15) */ this.shipContainer.addChild(this.ship) this.addChild(this.shipContainer) // the hp bar goes outside of shipContainer, so that it does not rotate this.addChild(this.hpBar) //this.addChild(this.serverPosition) this._shipRot = null this.interactive = true // used for mouse over highlight effects var colorMatrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]; var filter = new PIXI.ColorMatrixFilter(); filter.matrix = colorMatrix; // skipped code: mouse over effects that create a highlight via color matrix // skipped code: events fired that cause gui to change cursor}Pirate.prototype = Object.create(PIXI.DisplayObjectContainer.prototype)Pirate.protoype.constructor = PirateHere's where I hackishly check for a state change, and begin the death animation effects: Object.defineProperty(Pirate.prototype, 'state', { get: function() { return this._state }, set: function(value) { // Spawn to Alive if (this._state === EntityState.Spawn && value === EntityState.Alive) { // no spawn effect for this entity } // Alive to Dead if (this._state === EntityState.Alive && value === EntityState.Dead) { // hide the pristine ship, show explosion this.ship.alpha = 0 this.explosionEffect.alpha = 1 this.explosionEffect.begin() // show the debris and break the ship apart for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] debris.alpha = 1.0 // vx, vy represent velocity debris.vx = MathEx.random(-15, 15) debris.vy = MathEx.random(-15, 15) debris.rotVelocity = MathEx.random(-5, 5) } } this._state = value }})I'll note that the above code is a getter/setter with side effects, which I've been told is bad form. I intend to move an identical check into update() and then abstract it away into a base entity class. Then when I do make a concrete class, it might have the same logic in sections like onSpawn, onDeath, etc. And then here is the somewhat messy update() function that runs once per frame: Pirate.prototype.update = function(delta) { // update HP bar //TODO: encapsulate the hp bar so we can call hpBar.update(delta) and be done // the hp bar effect is created by growing the empty part this.hpBar.empty.scale.x = -(this.maxHullHp - this.hullHp) / this.maxHullHp // logic if dying if (this.state === EntityState.Dead) { this.explosionEffect.update(delta) // debris moves slowly apart and spins, fades to nothing slowly for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] debris.x += debris.vx * delta * 0.1 debris.y += debris.vy * delta * 0.1 debris.rotation += debris.rotVelocity * delta * 0.1 debris.alpha -= 0.35 * delta } // fade out the hp bar this.hpBar.alpha -= 0.35 * delta } // this ship doesn't have a particular animation that goes with it, but // here is approximately how the animation code would go if it did /* if (Date.now() - this.lastFrameTimestamp > this.animationFrameDelay) { this.frameIndex++ this.ship.gotoAndStop(this.frameIndex) this.lastFrameTimestamp = Date.now() if (this.frameIndex > this.totalFrameCount) { this.frameIndex = 0 } } */ // skipped: call to this.finalize() which marks this entity for return to // the object pool}So basically if the entityState is dead, the explosion and debris spreading apart gets to play. Other entities in my game have more significant logic for other states such as spawning effects or animations while alive. Thoughts?? Suggestions? Thanks for reading

Hello forum, I am trying to make a grid of DisplayObjectContainers, so I am sorting elements depending on the width and height of each one. I add a Sprite in a container and the problem is when I add a Graphics element of the same size inside the container, the width and height changes. I narrowed the problem here : var cont = new PIXI.DisplayObjectContainer();stage.addChild(cont);var convx = new PIXI.Sprite.fromImage('assets/img.png');//>>>>>>> image is 289x333cont.addChild(convx);var msk = new PIXI.Graphics();msk.beginFill(0x123456,0.5);msk.drawRect(0,0,convx.width,convx.height/2); //>>>>>>> line above makes cont.width and height 309x343 (???)msk.drawRect(10,0,convx.width-20,convx.height/2-10); //>>>>>>> line above makes cont.width and height = is 289x333 (same as the image)cont.addChild(msk);So why does the width and height changes when I draw a Rectangle of the same size in the same container ? Do you have the same problem ? Thank you

Hi, I'm building a webapp where you can create your own storage tower out of different components. A visualisation of this is shown on an HTML canvas (using PIXI). Each of the components can be clicked on and colours altered etc. So I'm using a lot of seperate DOC's that are then added to a larger DOC. All working fine. I want to grab the image of the parent DOC with all it's child DOC's and map it to a cube face created in Three.js. I'm having a torrid time trying to export the parent DOC out as an image. Are there any issues with using renderTexture on nested DOC's that I should be aware of? Three.js also allows you to use a canvas directly on the cubefaces but I had no luck either with using the canvas - it just showed up blank. I saw this post and have reproduced the code, initially just trying to add a new Sprite, but I'm not seeing the Sprite being added. http://www.html5gamedevs.com/topic/6507-display-object-container-to-an-imagesprite/ Here's my code, thanks for your help var renderTexture = new PIXI.RenderTexture(towerStageContainer.getBounds().width,towerStageContainer.getBounds().height);renderTexture.render(towerStageContainer);var newSprite = new PIXI.Sprite(renderTexture);stage.addChild(newSprite);renderer.render(stage);

hi! I have a PIXI.DisplayObjectContainer() in my game that I use for maps. It is filled with tiles that the player walks on! Is it possible to transform the DisplayoObjectContainer to a sprite ??? as a one image instead of drawing them all over again. All i need is a simpe sprite to move around the playable area. container = new PIXI.DisplayObjectContainer(); and than to a PIXI.sprite or any other form of image???

I wrote some working html5 canvas code that is responsible for rendering a scrollbar. The way it does this is by: 1. Creating a sub canvas (the variable `containerCanvas`) 2. Translating the offset of that canvas so the content is shifted based on where the scroll bars are at. I thought that DisplayObjectContainer would be the object to use, but I don't see any functions to translate its content. That made me think that maybe I should be using a TilingSprite since it has the ability to translate, but I don't know how to turn arbitrary `DisplayObject`'s into a Texture, which is what the `TilingSprite` needs. 3. Draw that canvas - as an image - onto the parent canvas (the variable `ctx`). This crops the sub canvas' content to the containers' (0, 0, w, h). Since the content has already been translated, this only draws what should be seen. I've done some tests and seen that Pixi will happily render child `DisplayObjects` that are out of bounds of their parent, so I'm not sure how to crop the content. Here's the coffeescript: drawContainer = (ctx, gameState, container, offset) -> containerCanvas = $("<canvas width='#{container.rect.w}' height='#{container.rect.h}'></canvas>") containerCanvasCtx = containerCanvas[0].getContext("2d") containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y) # how do I achieve this? for innerComponent in container.components drawComponent containerCanvasCtx, gameState, innerComponent, vec(0, 0) rect = container.rect ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y) drawScrollbars(ctx, container, offset)Here's the generated javascript: drawContainer = function(ctx, gameState, container, offset) { var containerCanvas, containerCanvasCtx, innerComponent, rect, _i, _len, _ref; containerCanvas = $("<canvas width='" + container.rect.w + "' height='" + container.rect.h + "'></canvas>"); containerCanvasCtx = containerCanvas[0].getContext("2d"); containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y); //how do I achieve this? _ref = container.components; for (_i = 0, _len = _ref.length; _i < _len; _i++) { innerComponent = _ref[_i]; drawComponent(containerCanvasCtx, gameState, innerComponent, vec(0, 0)); } rect = container.rect; ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y); return drawScrollbars(ctx, container, offset); };

Hi, I have begun making my game base from this: http://www.html5gamedevs.com/topic/1613-cocoonjs-webglrenderer-scaling-question/ I have chosen 576x1024 res based on: http://docs.gameclosure.com/guide/scaling.html The original bunny demo runs at 800x600. Here is my app code: https://github.com/DominicTobias/gamestarterjs/blob/master/app/app.js When the bunny renders on 576x1024 it is stretched and it seems tilted too (becomes obvious when rotate is applied). However when changing the app to 800x600 the bunny does not looked stretched (though when rotating it does look like it stretches slightly). I've attached images, does someone have an idea why this is happening? Thanks! Live demo showing issue: http://dominictobias.com/scalingissue/ (far right is from the 800x600 version)

Hi Matt, would it be possible to implement some sort of clipping for a DisplayObjectContainer by assigning it a width and height property? Btw, great library. It's a pleasure to work with! Best, benny!