Height and Width mean the opposite thing?

Questions
1

I’ve been tinkering with Spritemaps, and to get Babylon to get my isometric tileset right (https://i.imgur.com/QeUhOpw.png), I’ve had to use this snipplet:

"frames": [
    {
      "filename": "Tile1.png",
      "frame": {
        "x": 0,
        "y": 0,
        "w": 31,
        "h": 64
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 31,
        "h": 64
      },
      "sourceSize": {
        "w": 31,
        "h": 64
      }
    },

Which, doesn’t make sense to me because its height is 31, not its width. Is this just the standard that Babylon uses? Or am I doing something wrong?

2

cc @Pryme8 who wrote it for bjs

3

I’m on a vacation right now, so I’ll have to look when I get back.

Can you post a example of your assets or is that link you posted a example?

2 Likes
4

Yep, it’s pretty much just that. There’s this too, if it’s helpful:

 textTask.onSuccess = (task) => {        
            const atlasJSON = JSON.parse(task.text)
            const backgroundSize = new Vector2(mapwidth, mapwidth);
        
            //layer1
            const background = new SpriteMap('background', atlasJSON, spriteSheetTwo,
            {
                stageSize: backgroundSize,
                outputSize: visualizationsize,
                baseTile: 3,
                flipU: true//, //Sometimes you need to flip, depending on the sprite format.
            },
            scene);    

            //layer2
            const background2 = new SpriteMap('background', atlasJSON, spriteSheetTwo,
            {
                stageSize: backgroundSize,
                outputSize: visualizationsize,
                baseTile: 4,
                flipU: true//, //Sometimes you need to flip, depending on the sprite format.
            },
            scene);
            
            background2.position.x = -visualizationfactor/(mapwidth)
            background2.position.y = -background2.position.x*0.5

        };

It renderss a nice grid like this:

tileexample

5

I prolly just always had power2 cells and never noticed. I’ll fix pretty quick here. Just got back to my office today.

Update
Hmmm nope I did not have power2 cells only, odd the plot thickens. Ill have to actually dive into this and figure out wtf now. I’m wondering if it has something to do with the rotation part of it now that Im looking at the code.

UPDATE UPDATE
Nevermind found it…
image
it should probably read frameData[0].zw in the shader!

Let me try to switch those and we should be good to go.

1 Like
6
2 Likes
7

Thank you so much Pryme8!!

I’m pretty new to all of this. How would I update my project to include the fix?

8

Depends on how you are including the BABYLON package.

9

If you’re using the preview CDN, the fix will be included in the latest version. If you’re using NPM, you need to update your NPM package.