kittykatattack / learningPixi

A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.
4.4k stars 851 forks source link

Texture Error: frame does not fit inside the base Texture dimension #69

Open sidd-92 opened 7 years ago

sidd-92 commented 7 years ago

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?

chawk commented 4 years ago

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);