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

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

[englercj]

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

+"10" === 10

Which branch should be used as the base?

dev

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