Pixi.js: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 88 > 256 Y: 73 + 73 > 512

[cnexans]

Full error:

Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 88 > 256 Y: 73 + 73 > 512
at Texture.set (bundle.js:4302)
at Texture.onBaseTextureLoaded (bundle.js:3959)
at BaseTexture.emit (bundle.js:3571)
at Image.source.onload (bundle.js:4898)

What seems not right is 0 + 88 > 256 and 73+73 > 512

This is the code I have

import { Application, Sprite, Rectangle, Texture, BaseTexture, extras } from 'pixi.js';
import { TextureAtlas } from './planes.xml';

const Game = new Application(
  800, 600,
  { backgroundColor: 0xffffff }
);

document
  .body
  .appendChild(Game.view);

const SpriteSheet = BaseTexture.fromImage(TextureAtlas.$.imagePath);
console.log(SpriteSheet)
console.log(TextureAtlas)
TextureAtlas.SubTexture.forEach(textureDescription => {
  const {name, x, y, width, height} = textureDescription.$;
  const bounds = new Rectangle(x, y, width, height);
  const sprite = new Sprite(
    new Texture(SpriteSheet, bounds)
  );
  Game.stage.addChild(sprite)
});

The TextureAtlas object actually has this structure and the error keeps firing even the BaseTexture SpriteSheet has properties: realHeight: 512, realWidth: 256

{
  "$": {
    "imagePath": "./assets/planes.png"
  },
  "SubTexture": [
    {
      "$": {
        "name": "planeBlue1",
        "x": "0",
        "y": "73",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeBlue2",
        "x": "0",
        "y": "0",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeBlue3",
        "x": "0",
        "y": "365",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeGreen1",
        "x": "88",
        "y": "219",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeGreen2",
        "x": "88",
        "y": "146",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeGreen3",
        "x": "88",
        "y": "73",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeRed1",
        "x": "88",
        "y": "0",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeRed2",
        "x": "0",
        "y": "438",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeRed3",
        "x": "88",
        "y": "292",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeYellow1",
        "x": "0",
        "y": "292",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeYellow2",
        "x": "0",
        "y": "219",
        "width": "88",
        "height": "73"
      }
    },
    {
      "$": {
        "name": "planeYellow3",
        "x": "0",
        "y": "146",
        "width": "88",
        "height": "73"
      }
    }
  ]
}

TL;DR: strange issue found when trying to create sprites from a texture atlas

[ivanpopelyshev]

SpriteSheet isn't loaded yet, dimensions are unknown at this point.

Please test my wordaround:

SpriteSheet.width = SpriteSheet.realWidth = 256;
SpriteSheet.height = SpriteSheet.realHeight = 512;

or create them after its loaded ("loaded" event on basetexture)

[cnexans]

hey, thank you for answering the issue. Yesterday I gave it a try again and I found the problem. The rectangle was receiving strings, if you point out the TextureAtlas object, you'll see

        "x": "0",
        "y": "219",
        "width": "88",
        "height": "73"

Then when I passed the Rectangle to the Texture constructor, the error was firing because x + height = 7373. I was stuck a bit with the error because the documentation does not specify this fact very clearly neither the error thrown.

If other contributors agree, I could open a PR to change the error to

Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 88 = 088 > 256 Y: 73 + 73 = 7373 > 512

Show the result of the sum with the numbers :)

Thank you very much again for supporting

[ivanpopelyshev]

JavaScript hell it is. Yes, that'll be funny PR to make 🤣

[cnexans]

Or maybe adding a warning when Rectangle receives non-numeric parameters? Hey yeah, ocasional contributions are the best :)

Have fun!

[ivanpopelyshev]

No, your previous is clever solution, it does not trigger my "OMG we are checking for types because JS sucks" sense. And it actually helps with other cases, not type-related.

There's one more good solution - add "+" in Rectangle constructor for all params.

I suggest we do both.

[cnexans]

Nice, I could give it a couple of minutes and make a pr for this.

Just two questions:

1. What do you mean by adding a "+" in Rectangle constructor?
2. Which branch should be used as the base?

PD: "OMG we are checking for types because JS sucks" // :P

[englercj]

What do you mean by adding a "+" in Rectangle constructor?

+"10" === 10

Which branch should be used as the base?

dev

[cnexans]

Good :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.