Jump to content

Sprites and Graphics in the same DisplayObject - cacheAsBitmap possible?


Recommended Posts

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.





Link to comment
Share on other sites

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).





<!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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...