【phaser】吹き出しをつくる

目的

キャラクターに吹き出しをつける機能を実装する

コード

キャラクターの位置に応じて吹き出しを更新して、一定時間が経過したら吹き出しを消すようにします。

class SpeechBubble {
  constructor(scene, x, y, text) {
    this.scene = scene;
    this.x = x;
    this.y = y;
    this.text = text;
    this.bubble = this.createBubble();
    this.bubbleText = this.createBubbleText();
    this.hideBubble();
  }

  createBubble() {
    let bubble = this.scene.add.graphics({ x: this.x, y: this.y });
    bubble.fillStyle(0xffffff, 1);
    bubble.fillRoundedRect(0, 0, 160, 40, 16);
    return bubble;
  }

  createBubbleText() {
    let text = this.scene.add.text(this.x + 20, this.y + 10, this.text, {
      fontSize: '16px',
      color: '#000000'
    });
    return text;
  }

  updatePosition(newX, newY) {
    this.bubble.x = newX;
    this.bubble.y = newY;
    this.bubbleText.x = newX + 20;
    this.bubbleText.y = newY + 10;
  }

  // 5秒後に自動的に消える
  showBubble() {
    this.bubble.setVisible(true);
    this.bubbleText.setVisible(true);
    this.scene.time.delayedCall(5000, this.hideBubble, [], this);
  }

  hideBubble() {
    this.bubble.setVisible(false);
    this.bubbleText.setVisible(false);
  }
}

class MyScene extends Phaser.Scene {
  constructor() {
    super();
    this.character = null;
    this.speechBubble = null;
  }

  create() {
    this.character = this.add.sprite(100, 100, 'characterSprite');
    this.speechBubble = new SpeechBubble(this, 100, 80, 'Hello!');

    // キャラクターを動かすコード
    // キャラクターの動きに応じて吹き出しの位置を更新するコードもここに追加
  }

  update() {
    // キャラクターが動いたら、吹き出しを表示
    if (this.characterMoved) {
      this.speechBubble.updatePosition(this.character.x, this.character.y - 20);
      this.speechBubble.showBubble();
    }
  }
}

// Phaserゲームインスタンスの作成とシーンの追加
const gameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyScene
};

const game = new Phaser.Game(gameConfig);

セリフをランダムにしたい場合

class SpeechBubble {
  // ...（前のコードと同じ）

  showBubble() {
    this.bubble.setVisible(true);
    this.bubbleText.setVisible(true);
    this.bubbleText.setText(this.getRandomSpeech());
    this.scene.time.delayedCall(5000, this.hideBubble, [], this);
  }

  getRandomSpeech() {
    const speeches = [
      'Hello!',
      'How are you?',
      'Nice to meet you!',
      'I love Phaser!',
      // 他にもセリフを追加できます
    ];
    return speeches[Math.floor(Math.random() * speeches.length)];
  }
}

class MyScene extends Phaser.Scene {
  // ...（前のコードと同じ）

  update() {
    // キャラクターが動いたら、新しいセリフを表示
    if (this.characterMoved) {
      this.speechBubble.updatePosition(this.character.x, this.character.y - 20);
      this.speechBubble.showBubble();
    }
  }
}

// Phaserゲームインスタンスの作成とシーンの追加
// ...（前のコードと同じ）

課題

吹き出しのカスタマイズ

吹き出しの形状、色、またはサイズを変更しましょう

セリフに応じた吹き出しの調整

セリフの長さによって吹き出しの大きさが調整されるように修正しましょう