Sign in to follow this  
kobz

Pixi not rendering stage inside Vue component

Recommended Posts

I want to render a simple JPG (just to begin with) using PIXI v5 inside of my Vue v2 page. The sprite is not rendered (most likely PIXI.Container is not rendered too). Still, I can see in Network that the image is loaded just fine. 

I append pixi.js app instance on $ref in created() hook. I use PIXI.Loader to load the image - still it does not appear on the screen: just some background color provided on PIXI.Application initialisation.

This is how I init pixi app instance:

created() {
  this.$nextTick(() => {
    const { pixi } = this.$refs;
    PixiSceneRenderer(pixi);
  });
},

This is the exported function:

export default function PixiSceneRenderer(element) {
  const app = new PIXI.Application({
    // setting like width, height etc
  });

  const { renderer, stage, loader } = app;

  // Appending view to DOM elem
  element.appendChild(app.view);

  const container = new PIXI.Container();
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;
  stage.addChild(container);

  loader.add('image', require('path to my image'));
  loader.load();
  loader.onComplete.add(onAssetsLoaded);

  resize();
  window.onresize = function(event) {
    resize();
  }

  function resize() {
    let w;
    let h;
    if (window.innerWidth / window.innerHeight >= ratio) {
      w = window.innerHeight * ratio;
      h = window.innerHeight;
    } else {
      w = window.innerWidth;
      h = window.innerWidth / ratio;
    }
    renderer.view.style.width = w + 'px';
    renderer.view.style.height = h + 'px';
  }

  function onAssetsLoaded () { 
    createElements();
    update();
  }

  function createElements () {
    const texture = loader.resources['image'].texture;
    const sprite = new PIXI.Sprite.from(texture);

    // setting up sprite x and y coords, height, width etc

    container.addChild(sprite);
  }

  function update () {
    renderer.render(stage);
    requestAnimationFrame(update);
  }
}

What am I doing wrong? I followed tuts on this forum and on pixi's docs and still couldn't get a solution

Share this post


Link to post
Share on other sites

ok, what do i see here:

1. app has no `autoStart:false` but at the same time you use custom RAF. please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop to avoid that kind of problems in future

2. when you assign container pivot its width and height are zero :) I don't even know why do you need center pivot without center screen position here. Just delete those lines.

3. you use default canvas width/height which is 800/600 i think. Your image will be pixelated or blurred depending on CSS. Use "renderer.resize()" instead of just css stuff if it evolves into a problem.

4. new PIXI.Sprite.from  - from is not a constructor, its a static function . in your case you need "new PIXI.Sprite(texture)".

Even with all those problems you should see an image, but you dont! That means that my telepathy didnt pick up your issue. Please make a demo so I or someone else can debug it.

Share this post


Link to post
Share on other sites

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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.