Png sprite imported look distorted

Questions
1

hey guys,

I am trying to import a sprite and it looks distorted. Even though I set the width and height (51, 98) of the png in the code, it looks really distorted. What am I doing wrong here? Can someone suggest me? There is no problem with the png though. I dont know how to send link of the uploaded png so sending the one that is default set by Babylonjs.

https://playground.babylonjs.com/#7YUX0I#1

I have uploaded the png here:
Lampe

2

This doc explains how you can make your assets available in the PG: it will be easier for people to help if the PG demonstrates the problem.

3

Hi, nothing mentions of the sprite though. Also I use import mesh for importing 3D models and it works fine. The problem is with sprites.

4

You should update:

var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", 
       "textures/palm.png", 2000, 800, scene);

and replace textures/palm.png with the path to your sprite picture.

That way, we could be able to see what happens in the PG.

6

I can upload the image to the playground but don’t know how to send the link. I will try to.

7

Lamp_Mistake
Lamp_Mistake1897×937 124 KB

Here as you see in the pic, the lamp looks stretched.

8

Just click on image then copy the url displayed in the browser navigation bar in a post, that way we will have access to your PG.

9

I uploaded the png to a server and linked it to code. Here is the PG:
https://playground.babylonjs.com/#7YUX0I#4

10 
new BABYLON.SpriteManager("treesManager", "https://i.ibb.co/mSpjhgh/Lampe.png", 
    51, 98, scene);

The 3rd and 4th parameters are not the sprite width and height, they are respectively the maximum number of sprites the manager will handle and the cell size. The cell size is the width/height of one sprite, or more precisely the sizes to add to a sprite position to get to the next sprite in a sprite sheet.

In your case you only have a single sprite in your picture, so you should pass the width/height this way:

new BABYLON.SpriteManager("treesManager", "https://i.ibb.co/mSpjhgh/Lampe.png", 
   200, { width: 51, height:98 }, scene);

When creating a sprite, you should set the sprite dimensions this way:

        tree.width = 1;
        tree.height = 98 / 51;

https://playground.babylonjs.com/#7YUX0I#5

11

Thanks alot! I think many people don’t know this. I was really thinking why is it happening if it is some type of bug. But your explanation makes complete sense.