第1回 – Phaserでのゲーム制作、最初の一歩
みなさんこんにちわ。
プログラミングの勉強をしていると、ゲームを作ってみたいな～とか思ったりしませんか？実は私はもその一人です。でもゲーム制作って物理的な計算と制御、多くのキャラクタデータとか必要で、一人じゃ本格的なゲームはまず作れなそうですね。でも、とりあえず、一人でもできる簡単なゲームでもいいので作ってみたい思いいろいろ調べたら、PhaserというHTML5ゲーム開発のためのオープンソースのフレームワークがあったので、試してみることにしました
このブログでは、実際に試行錯誤しながら作ったゲームを記録として記載します。
公式サイト
Phaser公式サイトでは、迅速なフレームワークのセットアップ手順、詳細な使い方ドキュメンテーション、サンプルコードとチュートリアル、アクティブなコミュニティへのリンク、最新情報など詳しく説明されてます。
Phaser公式サイト(https://phaser.io/)
Phaserのダウンロードとセットアップ
Phaserの導入は非常に簡単です。いくつか方法はありますが、今回はCDNでの導入方法が一番簡単なのでその方法を紹介します。
CDNの場合は、公式サイトで最新のバージョンを調べることができます。
Phaser公式サイトインストール情報（https://phaser.io/download/stable)
基本的なサンプルの作成
以下のコードは、文字列「HELLO WORLD」をバウンドさせる基本的な例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Phaser.jsのスクリプトを読み込み -->
<script src="//cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js"></script>
</head>
<body>
<!-- スタイル設定 -->
<style>
#game-container {
margin: auto 0;
padding: 0;
}
#game-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#game-container canvas {
border-radius: 5px;
}
</style>
<!-- ゲームを表示するコンテナの設定 -->
<div id="game-container"></div>
<!-- JavaScriptコード -->
<script>
// ウィンドウの縮尺値を設定
let window_scale = 0.9;
// ウィンドウの幅が800より大きい場合、縮尺値を変更
if (window.innerWidth > 800)
window_scale = 0.5;
// ゲームフレームの幅と高さの計算
let frame_width = window.innerWidth * window_scale;
let frame_height = window.innerHeight * window_scale;
// Phaser ゲームの設定
const config = {
type: Phaser.AUTO,
width: frame_width,
height: frame_height,
backgroundColor: "#222222",
parent: "game-container",
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
// Phaser ゲームの作成
const game = new Phaser.Game(config);
// テキストエレメントの初期化
let textElement;
// 画像の事前読み込み
function preload() {
// ベースURLを設定
this.load.setBaseURL("https://honda-workshop.com/works/phaser/");
this.load.image("repeating-background", "/assets/sky.png");
}
// ゲーム内のオブジェクトの作成
function create() {
// ゲームのコンフィグから幅と高さを取得
const { width, height } = this.sys.game.config;
// 背景スプライトの作成
const bg = this.add.tileSprite(0, 0, width, height, "repeating-background");
bg.setOrigin(0, 0);
// シーン全体に物理エンジンを有効化
this.physics.world.enable(this);
// テキストを画像の子要素に設定
textElement = this.add.text(frame_width / 2, frame_height / 2, "HELLO WORLD", {
font: "30px monospace",
color: "white"
})
.setOrigin(0.5, 0.5)
.setShadow(5, 5, "#5588EE", 0, true, true);
// ワールド境界との衝突時のバウンス効果を設定
this.physics.add.existing(textElement);
textElement.body.setBounce(1.0);
textElement.body.setCollideWorldBounds(true);
}
// ゲームの更新ロジック（現在は未使用）
function update(time, delta) {
// ここにキーボード入力などのゲームの更新ロジックを追加できます
}
// ウィンドウのリサイズ時の処理
window.addEventListener('resize', function () {
// フレームの幅と高さを更新
frame_width = window.innerWidth * window_scale;
frame_height = window.innerHeight * window_scale;
// ゲームのスケールを調整
game.scale.resize(frame_width, frame_height);
// リサイズ後の位置にテキストエレメントを更新
textElement.setPosition(frame_width / 2, frame_height / 2);
});
</script>
</body>
</html>
見てわかるとおり、文字列「HELLO WORLD」がバウンドしてますね。
ウィンドウをリサイズすると、自動的に文字列の位置が調整されるようにしてます。
Phaser.jsはこのような基本的なタスクを効率的に処理できるため、ゲーム開発者にとって非常に便利なフレームワークです。是非、Phaser.jsを使って楽しくてクリエイティブなゲームを開発してみてください！
