TIL_200909(PixiJS-tileTexture)

 

 

하나의 커다란 이미지를 잘라서 sprite로 불러와서 화면을 구성하는 작업입니다. 여러 요소들이 있는 하나의 이미지를 잘라서 퍼즐처럼 끼워 맞출 수가 있어요. 옆에 있는 이미지는 rottingpixels.itch.io 에서 가져왔어요. 무료로 사용할 수 있다니 정말 고맙죠.

 

먼저 이미지의 사이즈 알아야 합니다. 112 × 176

하나의 타일 사이즈는 16이라니까 계산하면 7×11 

 

 

 

 

 

 

const tileSize = 16;

app.loader.add("tileset", "asset.png").load((loader, resources) => {
  // This creates a texture from a 'asset.png' image

  let tileTextures = [];
  for (let i = 0; i < 7 * 11; i++) {
    let x = i % 7;
    let y = Math.floor(i / 7);
    tileTextures[i] = new PIXI.Texture(
      resources.tileset.texture,
      // new PIXI.Rectangle(tx, ty, tw, th)
      new PIXI.Rectangle(x * tileSize, x * tileSize, tileSize, tileSize)
    );
  }
  
  const tile = new PIXI.Sprite(tileTextures[0]);
  app.stage.addChild(tile)
  
  ...
}

 

짜잔! 잘려진 하나의 타일이 생성됩니다.