Jump to content

Sprite will not render - have no idea why


Recommended Posts

I'm building an angular web app with an embedded pixi component. I'm trying to render a cat image to my pixi stage but for some reason it will simply not render.

Here is the code that I use to create the stage and try to render the cat:

generatePixiCanvas() {
        this.renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
        this.stage = new PIXI.Container();

        var sprite = PIXI.Sprite.fromImage("/assets/cat.png");
        sprite.position.set(100, 100);
        sprite.interactive = true;
        sprite.width = 100;
        console.log("test:" + sprite.visible + sprite.width);



When the page loads, I get the string "test:true100" logged to the console, which must mean that the sprite is successfully created and it's width is large enough to be see, but for some reason, it simply does not appear! I have absolutely no idea why this could be happening, because text objects are rendered fine.

I've attached an image of my folder structure, the above code is located in the pixi-component folder.

Please help


Link to comment
Share on other sites

Have you checked with dev tools network panel to see that the cat png really is being loaded? Not sure you want the slash before the folder name 'assets' in your file path.

Try var sprite = PIXI.Sprite.fromImage("assets/cat.png");

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