nick-brown Posted April 7, 2015 Share Posted April 7, 2015 So I have a single displayObject as a background into which I first draw the same sprite at regular intervals, and then a number of lines (Graphics) on top. I then set cacheAsBitmap to be true on the displayObject. This image is then completely static and there are no further redraws to it. I am finding that in this instance, all of the lines remain but none of the sprites are drawn. To further complicate matters, I also applied a mask as a border - this results in the removal of the lines (Graphics) as well. I note that sprites have their own cacheAsBitmap property - should I be setting this (doesn't seem to work)? Can anyone shed light on this - I don't believe I'm doing anything particularly weird. Will provide example if required. Ta N Quote Link to comment Share on other sites More sharing options...
xerver Posted April 9, 2015 Share Posted April 9, 2015 Please provide a running example, it is impossible to debug code from just an explanation Quote Link to comment Share on other sites More sharing options...
nick-brown Posted April 10, 2015 Author Share Posted April 10, 2015 Well TBF I'm not asking you to debug my code, I'm asking whether it's possible to use cacheAsBitmap on Sprites and Graphics at the same time (if it's not then my code will never work) ;-) But here you go - change the booleans as necessary. The mask issue appears to be related to my having displayObjects bigger than the screen which I subsequently scale - it basically doesn't draw anything outside the mask at the time of drawing (this may be expected behaviour but I've not seen anything in the docs to indicate this). Cheers N<!DOCTYPE html><html class="no-js" lang="en"> <head> <meta charset="utf-8"/> <meta property="og:title" content="Test" /> <title>Test</title> </head> <body style="background-color: blue;"> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.9/pixi.js" type="text/javascript"></script> <script> var animate = function() { renderer.render(stage); requestAnimFrame(animate); }; var width = 300; var height = 400; var margin = 20; var stage = new PIXI.Stage(0x191919, true); var renderer = PIXI.autoDetectRenderer(width, height, { transparent: true }); var testCacheAsBitmap = true; var testMask = false; var container, line1, line2, texture, sprite1, sprite2, borderMask; document.body.appendChild(renderer.view); container = new PIXI.DisplayObjectContainer(); container.position.x = container.position.y = 0; container.position.x = container.position.y = 0; container.width = width * 2; container.height = height * 2; stage.addChild(container); // MASK - ENABLE ABOVE if (testMask) { borderMask = new PIXI.Graphics(); borderMask.beginFill(); borderMask.drawRect(margin, margin, width - (margin * 2), height - (margin * 2)); borderMask.endFill(); stage.addChild(borderMask); container.mask = borderMask; } line1 = new PIXI.Graphics(); line2 = new PIXI.Graphics(); line1.lineStyle(3, 0x00ffff, 1); line2.lineStyle(8, 0xff00ff, 1); line1.moveTo(500, 500); line1.lineTo(600, 600); line2.moveTo(300, 300); line2.lineTo(200, 100); container.addChild(line1); container.addChild(line2); texture = new PIXI.Texture.fromImage('http://static.bbci.co.uk/frameworks/barlesque/2.83.4/orb/4/img/bbc-blocks-dark.png'); sprite1 = new PIXI.Sprite(texture); sprite1.anchor.x = sprite1.anchor.y = 0.5; sprite1.scale.x = sprite1.scale.y = 1; sprite1.alpha = 0.5; sprite1.position.x = 50; sprite1.position.y = 50; sprite1.buttonMode = false; sprite1.interactive = false; container.addChild(sprite1); sprite2 = new PIXI.Sprite(texture); sprite2.anchor.x = sprite2.anchor.y = 0.5; sprite2.scale.x = sprite2.scale.y = 1; sprite2.alpha = 0.5; sprite2.position.x = 150; sprite2.position.y = 150; sprite2.buttonMode = false; sprite2.interactive = false; container.addChild(sprite2); // CACHEaSbITMAP - ENABLE ABOVE if (testCacheAsBitmap) container.cacheAsBitmap = true; container.scale.x = container.scale.y = 0.5; requestAnimFrame(animate); </script></html> Quote Link to comment Share on other sites More sharing options...
Neso Posted April 10, 2015 Share Posted April 10, 2015 Once I've built large panel with information about game. It used Text Graphics and Sprites. All of those were in the same container. And I cached the container. Really useful for cutting down the number of elements on the screen. Especially if you have large static areas. This technique can be used relatively well with areas that are updated rarely. Quote Link to comment Share on other sites More sharing options...
nick-brown Posted August 6, 2015 Author Share Posted August 6, 2015 Just as an update, if people come across this, this is now fixed/closed. https://github.com/pixijs/pixi.js/issues/1647#issuecomment-94186062 N Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.