Phaser.jsで斜めドット背景を作る方法とカスタマイズ｜初心者向けに解説

開発ブログ 開発TIPS
Phaser.jsで斜めドット背景を作る方法とカスタマイズ｜初心者向けに解説

こんにちは！今回は、Phaser.jsを使って背景に斜めドットを並べる方法を紹介します。シンプルなコードですが、背景にちょっとしたアクセントを加えることで、ゲームがより印象的になります。さらに、後半ではドットパターンをカスタマイズする方法もいくつか紹介します。

目次
  1. はじめに
  2. プロジェクトの準備
  3. コードの詳細解説
  4. for ループの詳しい解説
  5. ドットパターンのカスタマイズ
  6. 他のパターンに挑戦
    1. 格子状のパターン
    2. ランダムなパターン
  7. まとめ

はじめに

ゲームの背景は、ただの色や画像だけじゃなく、ちょっとしたパターンを入れることで、全体の雰囲気がぐっと変わることがあります。今回は、Phaser.jsを使って斜めにドットを並べた背景を作ってみましょう。こういうちょっとした工夫が、ゲームの魅力を引き立ててくれます！

今回作成するドットの背景はこちらです。

プロジェクトの準備

まずは、Phaser.jsのプロジェクトをセットアップしましょう。Phaser.jsの基本的な環境が整っていることを前提に進めます。

以下は、シンプルなHTMLファイルの構造です。Phaser.jsのスクリプトを読み込み、ゲームの設定を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phaserで背景にドットを敷き詰める</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
</head>
<body>
<script>
    const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        backgroundColor: '#87CEEB', // 背景色を設定
        scene: {
            create: create
        }
    };

    const game = new Phaser.Game(config);
</script>
</body>
</html>

このコードでは、Phaser.jsの基本設定を行っています。背景色を backgroundColor: '#87CEEB' で設定し、ゲームの幅と高さを指定しています。

これで、Phaser.jsが動作する準備が整いました。次に、斜めドットの背景を作成する方法を見ていきましょう。

コードの詳細解説

Phaser.jsの create メソッド内で、斜めにドットを並べた背景を作成します。以下のコードを create メソッド内に追加します。

function create() {
    createPolkaDotBackground.call(this);
}

function createPolkaDotBackground() {
    const dotRadius = 10; // ドットの大きさ（半径）
    const spacing = 50;   // ドットの間隔

    for (let y = 0; y < this.scale.height + spacing; y += spacing) {
        for (let x = 0; x < this.scale.width + spacing; x += spacing) {
            const offsetX = y % (spacing * 2) === 0 ? 0 : spacing / 2;
            this.add.circle(x + offsetX, y, dotRadius, 0xffffff, 0.5);
        }
    }
}

この createPolkaDotBackground 関数は、背景に斜めに並んだドット模様を生成します。

for ループの詳しい解説

ここで使われている for ループについて、初心者の方にも分かりやすく説明します。

まず、2つの for ループが連続して使われているのは、画面全体にドットを並べるためです。1つ目のループは、画面の縦方向（y方向）に沿って動き、2つ目のループは横方向（x方向）に沿って動きます。それぞれのループで、ドットを規則的に配置しています。

for (let y = 0; y < this.scale.height + spacing; y += spacing) {
    for (let x = 0; y < this.scale.width + spacing; x += spacing) {
        const offsetX = y % (spacing * 2) === 0 ? 0 : spacing / 2;
        this.add.circle(x + offsetX, y, dotRadius, 0xffffff, 0.5);
    }
}
  • 1つ目の for ループ（縦方向）:
    • let y = 0: 最初の y の値を0（画面の一番上）に設定します。
    • y < this.scale.height + spacing: y が画面の高さ（this.scale.height）にドットの間隔（spacing）を足した値よりも小さい間、ループを繰り返します。これにより、ドットが画面の下まで配置されます。
    • y += spacing: y の値を spacing 分ずつ増やしながら、次の行に移動してドットを配置します。
  • 2つ目の for ループ（横方向）:
    • let x = 0: 最初の x の値を0（画面の左端）に設定します。
    • x < this.scale.width + spacing: x が画面の幅（this.scale.width）にドットの間隔（spacing）を足した値よりも小さい間、ループを繰り返します。これにより、ドットが画面の右端まで配置されます。
    • x += spacing: x の値を spacing 分ずつ増やしながら、次の位置にドットを配置します。
  • offsetX の計算:
    • const offsetX = y % (spacing * 2) === 0 ? 0 : spacing / 2;: この行では、奇数行と偶数行でドットが少しずれるように計算しています。
      • y % (spacing * 2) === 0 は、y が spacing * 2 で割り切れるかどうかをチェックします。割り切れる場合、offsetX は 0 になり、割り切れない場合は spacing / 2 になります。
      • この結果、偶数行のドットはそのままの位置に配置され、奇数行のドットは少し右にずれます。
  • this.add.circle():
    • this.add.circle(x + offsetX, y, dotRadius, 0xffffff, 0.5);: この行で、計算された位置（x + offsetX, y）にドットを描画します。ドットの大きさは dotRadius、色は 0xffffff（白色）、透明度は 0.5 です。

このようにして、画面全体にドットが斜めに並んだ背景が完成します。

ドットパターンのカスタマイズ

このパターンは、簡単にカスタマイズできます。

  • ドットのサイズを変える: dotRadius の値を変更して、ドットの大きさを調整できます。
  • ドットの間隔を変える: spacing の値を変更して、ドットの間隔を調整できます。
  • ドットの色を変える: this.add.circle() の 0xffffff の部分を好きな色に変更できます。例えば、0xff0000 にすれば赤いドットができます。
  • 透明度を調整する: 0.5 の部分を 1 にすると、不透明なドットになります。

他のパターンに挑戦

さらに、他のパターンを試してみましょう。

格子状のパターン

const offsetX = 0; // ドットを均等に配置

この変更を加えると、ドットが格子状に整然と並びます。

ランダムなパターン

const offsetX = Phaser.Math.Between(-10, 10); // ドットの配置をランダムに
const offsetY = Phaser.Math.Between(-10, 10);
this.add.circle(x + offsetX, y + offsetY, dotRadius, 0xffffff, 0.5);

このように変更すると、ドットをランダムに配置することができます。

まとめ

今回は、Phaser.jsを使って背景に斜めドットを並べる方法を学びました。さらに、ドットパターンをカスタマイズする方法も確認しました。ゲーム全体の印象がガラリと変わるので、ぜひ自分のプロジェクトで試してみてくださいね。