Issue with rendering Sprite with SpriteManager

[marcusaasjensen]

Hello, I’m facing an issue with simple 2D Sprite rendering.
Basically, I try to render a simple image in a 3D scene with a SpriteManager and a Sprite however when I render the scene, instead of showing the proper image, it shows a black & red tiled image. The image won’t show up. Yet, the image path is correct on my VSC project, for the SpriteManager, there is “1” cell, and the dimension set to 1000px (square dimension of my image), the image is in PNG format.
Since I’m starting learning Babylon JS, is there something that I’m missing? Thank you for helping me.

    const spriteManager = new B.SpriteManager("playerManager", "textures/mr_stick.png", 1, 1000, scene);
    const playerSprite = new B.Sprite("playerSprite", spriteManager);
    playerSprite.size = 1;
    playerSprite.position = new B.Vector3(0, .5, 0);

[Pryme8]

if its showing that image than its a fallback texture. Which means either you url is wrong, or the texture is failing to load.

Check your network report and make sure there is not a cors issue of a 404.

even though you say the path is correct ensure that its for sure loading in the network report and ill give you some other ideas if its still failing.

[marcusaasjensen]

It still doesn’t work. By opening the inspector in Sources tab under the localhost:1234 drop down, I can’t see the image file so I believe somehow it is not in the localhost files. I have no idea why it doesn’t take in count the image but I tried all the possible paths that could work or not, but the path is just a simple ./ which means being in the same folder.

[Pryme8]

Are you using webpack or anything? You might need to make sure your copy plugin is bringing the assets to the right spot.

Can you send a screenshot of your file structure from the root folder for me and a screenshot of your webpack config?

[marcusaasjensen]

I don’t use anything other than the installation of Babylon JS I followed through this tutorial : BabylonJS + AmmoJS Physics, (Reusable Setup / Fundamentals) - YouTube. I don’t know what webpack is and never ever touched it, just what’s in the tutorial.
Sure, I didn’t know we could put screenshots, here it is.

[Dad72]

I think your path should rather be:

./src/textures/mr_stick.png

const spriteManager = new B.SpriteManager("playerManager", "./src/textures/mr_stick.png", 1, 1000, scene);

[marcusaasjensen]

I tried rearranging the folders to your path but it still doesn’t seem to render the image

[Pryme8]

Sounds like you need something similar to this in your webpack config plugins section:

but for your image assets.

and ensure that the assets are being copied to your distribution folder. The instance will not have access to the src folder so if you point to that it will always fail.

Otherwise you need to include the image as a module and I dont feel like explaining that tbh.

[marcusaasjensen]

Ok I will follow that then. I think that light be an issue with the project installation process from the tutorial because my friends also have followed this tutorial and have the same issue. Thank you for your help, >i appreciate it.

[Pryme8]

If you follow the tutorial word for word it does not use a copy plugin so you would not have had access to this information. I’m fairly sure this is what it is.

If you don’t see your textures in your dist folder where you expect them then it will not work period with the way you are doing it. The “./” starts at that directory so if you do this I’m highly confident it will work.

[marcusaasjensen]

Ok, actually, that was the problem. I solved my issue by moving my imaeg to the dist folder and as you said using ./“sprite.png” and it works!

Thank you so much!!