learningPixi
learningPixi copied to clipboard
Texture Error: frame does not fit inside the base Texture dimension
In the 7th File when i run the code an issue regarding Texture dimension appears.
Texture Error: frame does not fit inside the base Texture dimensions: X: 192 + 64 > 192 Y: 128 + 64 > 192.
How do you resolve this issue?
The parameters for the rectangle are wrong. This is an example of how to do it.
import * as PIXI from 'pixi.js'
let Application = PIXI.Application,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle,
Texture = PIXI.Texture;
//Create a Pixi Application
let app = new Application({
width: 256,
height: 256
});
app.renderer.backgroundColor = 0x061639;
const loader = app.loader;
loader.add("../public/img/tileset.png")
.on("progress", loadProgressHandler)
.load(setup);
function setup() {
let tilemap = Texture.from("../public/img/tileset.png");
//Create a rectangle object that defines the position and
//size of the sub-image you want to extract from the texture
//(`Rectangle` is an alias for `PIXI.Rectangle`)
let rectangle = new Rectangle(96, 64, 32, 32);
//Tell the texture to use that rectangular section
tilemap.frame = rectangle;
//Create the sprite from the texture
let rocket = new Sprite(tilemap);
//Position the rocket sprite on the canvas
rocket.x = 32;
rocket.y = 32;
//Add the rocket to the stage
app.stage.addChild(rocket);
//Render the stage
app.renderer.render(app.stage);
}
function loadProgressHandler() {
console.log("loading");
}
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);