60pxの市松模様で10行、10列(縦横600px)の画像があったとします。
これを中心に配置すると以下のようになります。
./src/main.js
import Phaser from "phaser";
import GameScene from "./scenes/GameScene";
const config = {
type: Phaser.AUTO,
width: 1200,
height: 600,
parent: 'game-container',
backgroundColor: '#fff',
scale: {
mode: Phaser.Scale.NONE,
autoCenter: Phaser.Scale.CENTER_BOTH
},
dom: {
createContainer: true
},
scene: [
GameScene
]
};
export default new Phaser.Game(config);./src/scenes/GameScene.js
import { Scene } from 'phaser';
export default class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
this.load.image("bg", "./assets/bg.png");
}
create() {
const centerX = this.scale.width / 2;
const centerY = this.scale.height / 2;
const bg = this.add.image(centerX, centerY, "bg");
bg.setOrigin(0.5);
}
update() {
}
}
そのうち、左上を基準に、2行、4列(縦120px × 横240px)を表示しようとしてcropを使うと
./src/scenes/GameScene.js
import { Scene } from 'phaser';
export default class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
this.load.image("bg", "./assets/bg.png");
}
create() {
const centerX = this.scale.width / 2;
const centerY = this.scale.height / 2;
const bg = this.add.image(centerX, centerY, "bg");
bg.setOrigin(0.5);
const cropX = 0;
const cropY = 0;
const cropWidth = 240;
const cropHeight = 120;
bg.setCrop(cropX, cropY, cropWidth, cropHeight);
}
update() {
}
}
setOriginはあくまでも全体のサイズにおけるセンターのため、
切り取った部分をセンターにもっていくためには、調整が必要。
./src/scenes/GameScene.js
import { Scene } from 'phaser';
export default class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
this.load.image("bg", "./assets/bg.png");
}
create() {
const centerX = this.scale.width / 2;
const centerY = this.scale.height / 2;
const width = 600;
const height = 600;
// 切り取り領域
const cropX = 0;
const cropY = 0;
const cropWidth = 240;
const cropHeight = 120;
const bg = this.add.image(centerX + (width - cropWidth) / 2, centerY + (height - cropHeight) / 2, "bg");
bg.setOrigin(0.5);
bg.setCrop(cropX, cropY, cropWidth, cropHeight);
}
update() {
}
}
どちらかというと、原点をセンターにするより、左上の位置から調整した方が楽ですね。
create() {
const centerX = this.scale.width / 2;
const centerY = this.scale.height / 2;
// 切り取り領域
const cropX = 0;
const cropY = 0;
const cropWidth = 240;
const cropHeight = 120;
const bg = this.add.image(centerX - cropWidth / 2, centerY - cropHeight / 2, "bg");
bg.setOrigin(0);
bg.setCrop(cropX, cropY, cropWidth, cropHeight);
}１つの画像に同一サイズの画像をまとめているのであれば、SpriteSheetを使って切り出してつかうことができます。
↓縦横20pxのデータが8つある。
./src/scenes/GameScene.js
import { Scene } from 'phaser';
export default class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
this.load.spritesheet("charList", "./assets/CharList.png", { frameWidth: 20, frameHeight: 20 });
}
create() {
const charList = [];
for (let n = 0; n < 8; n++) {
const row = 20 * Math.trunc(n / 4);
const col = 20 * (n % 4);
const char = this.add.image(col, row, "charList", n);
char.setOrigin(0); // 原点は左上
charList.push(char);
}
}
update() {
}
}↓左上から２行４列で表示
DOMを追加しているので、イベントは通常のaddEventListenerで追加する。
追加した要素は、画面遷移とともに、消えています。
それぞれクリックすると、画面遷移します。