Jump to content

PIXI Sprite displays in black


Recommended Posts

I am trying to set a Sprite as a background in my viewport. The grid.png is 23040 x 9984 pixels.

      .add("grid", require("./assets/grid.png"))
      .load((loader, resources) => {
        const grid = new PIXI.Sprite(resources.grid.texture);
        grid.anchor.set(0, 0);

The Sprite shows in my Container but only in black. If I try with a smaller png (25 x 25 pixels) it works.

I also made sure my viewport world width and height were big enough :

   this.viewport = new Viewport({
      screenWidth: 953,
      screenHeight: 409,
      worldWidth: 25000,
      worldHeight: 10000,
      interaction: this.app.renderer.plugins.interaction 

Here is the sandbox code https://codesandbox.io/s/pixi-sprite-loading-cn7re?file=/src/App.vue:572-875

Link to comment
Share on other sites

I need to find a way to make the viewport big enough. The image is just a 744KB PNG background. There are certainly games with that big of a viewport.

Probably tiling the same texture would make my life easier. So if I understand correctly. This isnt about the size of the viewport itself?


EDIT: There was indeed no reason for my img to be that big. I tiled a 3000px x 3000px Sprite instead. Probably will learn how to implement culling() to optimize this. 

Edited by grosjardin
Link to comment
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.

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