question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
englercjcommented, Jul 11, 2017

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

+"10" === 10

Which branch should be used as the base?

dev

1reaction
ivanpopelyshevcommented, Jul 10, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

frame does not fit inside the base Texture dimensions: X: 0 + ...
Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 0 + 88 > 256 Y: 73 + 73...
Read more >
frame does not fit inside the base Texture dimensions - Pixi.js
This error occurs when the frame rectangle's dimensions are larger than the actual image itself. Dream's case is the most common, where users ......
Read more >
Texture.ts - PixiJS
@pixi-essentials/texture-allocator ... @pixi/compressed-textures ... new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' + ...
Read more >
Determine when a PIXI texture is loaded to clone it
Another solution is to pass the texture's dimensions into the PIXI. ... {width: 256, height: 256}); texture.frame = new PIXI.Rectangle(0, 0 ...
Read more >
Using MATLAB Graphics
You can use the default X Data value of index if you do not want to specify x data. In this case, MATLAB...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found