kobz

Members
  • Content Count

    2
  • Joined

  • Last visited

  • Days Won

    1
  1. @ivan.popelyshev I followed your suggestions and pixi started to work. Thanks!
  2. 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