render(container, clear = true) {
    const { context: ctx } = this;

    function renderRecursive(container) {
      container.children.forEach((child) => {
        // if not visible shouldn't be processed
        if (child.visible == false) return;

        // here we save the canvas state
        // for further processing
        ctx.save();

        // canvas transforms first
        if (child.position) {
          ctx.translate(Math.round(child.position.x), Math.round(child.position.y));
        }

        if (child.anchor) {
          ctx.translate(child.anchor.x, child.anchor.y);
        }

        if (child.scale) {
          ctx.scale(child.scale.x, child.scale.y);
        }

        if (child.angle) {
          const { x: px, y: py } = child.pivot;
          ctx.translate(px, py);
          ctx.rotate((Math.PI / 180) * child.angle);
          ctx.translate(-px, -py);
        }

        // if child is type Text...
        // if child is type Texture...
        if (child.text) {
          const { font, fill, align } = child.style;
          const { position } = child;
          if (font) ctx.font = font;
          if (fill) ctx.fillStyle = fill;
          if (align) ctx.textAlign = align;
          ctx.fillText(child.text, position.x, position.y);
        } else if (child.texture) {
          // can be a tilesprite or regular sprite
          const { img } = child.texture;
          if (child.tileW && child.tileH) {
            ctx.drawImage(
              img,
              child.frame.x * child.tileW,
              child.frame.y * child.tileH,
              child.tileW,
              child.tileH,
              0,
              0,
              child.tileW,
              child.tileH
            );
          } else {
            ctx.drawImage(img, 0, 0);
          }
        }

        // if child is a container...
        if (child.children) renderRecursive(child);

        // restore the canvas state
        ctx.restore();
      });
    }

    if (clear) ctx.clearRect(0, 0, this.width, this.height);
    renderRecursive(container);
  }
/**
   * traverse the container tree structure and renders the leaf nodes.
   * the container is passed in as parameter.
   * the clear flag handles the context clearRect
   * @param {*} container
   * @param {*} clear
   */
traverse the container tree structure and renders the leaf nodes.
the container is passed in as parameter.
the clear flag handles the context clearRect
@param {*} container
@param {*} clear
traverse the container tree structure and renders the leaf nodes . the container is passed in as parameter . the clear flag handles the context clearRect @param { * } container @param { * } clear
render(container, clear = true) {
    const { context: ctx } = this;
    function renderRecursive(container) {
      container.children.forEach((child) => {
        if (child.visible == false) return;
        ctx.save();
        if (child.position) {
          ctx.translate(Math.round(child.position.x), Math.round(child.position.y));
        }
        if (child.anchor) {
          ctx.translate(child.anchor.x, child.anchor.y);
        }
        if (child.scale) {
          ctx.scale(child.scale.x, child.scale.y);
        }
        if (child.angle) {
          const { x: px, y: py } = child.pivot;
          ctx.translate(px, py);
          ctx.rotate((Math.PI / 180) * child.angle);
          ctx.translate(-px, -py);
        }
        if (child.text) {
          const { font, fill, align } = child.style;
          const { position } = child;
          if (font) ctx.font = font;
          if (fill) ctx.fillStyle = fill;
          if (align) ctx.textAlign = align;
          ctx.fillText(child.text, position.x, position.y);
        } else if (child.texture) {
          const { img } = child.texture;
          if (child.tileW && child.tileH) {
            ctx.drawImage(
              img,
              child.frame.x * child.tileW,
              child.frame.y * child.tileH,
              child.tileW,
              child.tileH,
              0,
              0,
              child.tileW,
              child.tileH
            );
          } else {
            ctx.drawImage(img, 0, 0);
          }
        }
        if (child.children) renderRecursive(child);
        ctx.restore();
      });
    }
    if (clear) ctx.clearRect(0, 0, this.width, this.height);
    renderRecursive(container);
  }
render ( container , clear = true ) { const { context : ctx } = this ; function renderRecursive ( container ) { container . children . forEach ( ( child ) => { if ( child . visible == false ) return ; ctx . save ( ) ; if ( child . position ) { ctx . translate ( Math . round ( child . position . x ) , Math . round ( child . position . y ) ) ; } if ( child . anchor ) { ctx . translate ( child . anchor . x , child . anchor . y ) ; } if ( child . scale ) { ctx . scale ( child . scale . x , child . scale . y ) ; } if ( child . angle ) { const { x : px , y : py } = child . pivot ; ctx . translate ( px , py ) ; ctx . rotate ( ( Math . PI / 180 ) * child . angle ) ; ctx . translate ( - px , - py ) ; } if ( child . text ) { const { font , fill , align } = child . style ; const { position } = child ; if ( font ) ctx . font = font ; if ( fill ) ctx . fillStyle = fill ; if ( align ) ctx . textAlign = align ; ctx . fillText ( child . text , position . x , position . y ) ; } else if ( child . texture ) { const { img } = child . texture ; if ( child . tileW && child . tileH ) { ctx . drawImage ( img , child . frame . x * child . tileW , child . frame . y * child . tileH , child . tileW , child . tileH , 0 , 0 , child . tileW , child . tileH ) ; } else { ctx . drawImage ( img , 0 , 0 ) ; } } if ( child . children ) renderRecursive ( child ) ; ctx . restore ( ) ; } ) ; } if ( clear ) ctx . clearRect ( 0 , 0 , this . width , this . height ) ; renderRecursive ( container ) ; }
traverse the container tree structure and renders the leaf nodes.
traverse the container tree structure and renders the leaf nodes .
// if not visible shouldn't be processed // here we save the canvas state // for further processing // canvas transforms first // if child is type Text... // if child is type Texture... // can be a tilesprite or regular sprite // if child is a container... // restore the canvas state