TypeScript + PhaserJS
ゲーム開発チュートリアル 📚

VSCodeを使ったモダンなゲーム開発を学ぼう!

このチュートリアルは、プログラミング初心者でもゲーム開発を始められるよう、
環境構築から実際のゲーム制作まで段階的に学べる構成になっています。

🎯 このチュートリアルで学べること

技術スキル

  • • TypeScript の基礎
  • • PhaserJS でのゲーム開発
  • • VSCode での効率的な開発
  • • Git を使ったバージョン管理

作成するゲーム

  • • シンプルなパズルゲーム
  • • アクションゲーム
  • • オリジナルゲーム企画

📖 チュートリアル目次

00a

必要なソフトのインストール

完了

ゲーム開発に必要なツール(VSCode、Node.js、Git)のインストールと初期設定を行います。

VSCode Node.js Git 開発環境
インストール手順を確認 →
00b

プロジェクト作成・ボイラープレート活用

完了

TypeScript設定の複雑さを回避!ボイラープレートを使って1分でプロジェクトを開始する方法を学びます。

ボイラープレート プロジェクト構造 npm scripts Live Server
プロジェクト作成を学ぶ →
01a

変数について理解しよう

完了

プログラミングの基礎となる「変数」の概念を、ゲーム開発の具体例で分かりやすく学びます。

変数 初心者向け プログラミング基礎 難易度:★☆☆
変数について学ぶ →
01b

データ型について理解しよう

完了

文字列、数値、真偽値など、プログラムで扱うデータの種類について学びます。

データ型 string/number/boolean TypeScript 難易度:★☆☆
データ型について学ぶ →
01c

nullの概念について理解しよう

完了

「何もない」を表すnullと、0や空文字との違いを正しく理解し、安全なプログラムの書き方を学びます。

null nullチェック 安全なコード 難易度:★☆☆
null概念について学ぶ →
02a

PhaserJS入門・スプライト表示の基本

完了

PhaserJSで画像を表示する基本的な方法を学びます。画像の読み込み、表示、座標系の理解など、ゲーム開発の基礎となる技術を習得します。

PhaserJS スプライト 画像表示 座標系 難易度:★☆☆
スプライト表示を学ぶ →

💡 Chapter 01cの完了後、最初のPhaserJS体験におすすめです

02b

PhaserJS入門・最初のゲーム(基本編)

完了

プログラミング基礎を踏まえて、PhaserJSを使った実際のゲーム開発に挑戦します。1匹のモグラを使ったシンプルなゲームを作成します。

PhaserJS ゲーム開発 単一オブジェクト 難易度:★★☆
基本編で学習する →

💡 Chapter 02aのスプライト表示の基本を理解してから挑戦しましょう

03

PhaserJS入門・複数オブジェクト管理(発展編)

完了

配列を使った複数オブジェクトの管理とDeltaTimeによる高度な時間制御を学びます。Chapter 02bで学んだ基本的なゲーム作成の発展版です。

配列管理 DeltaTime 複数オブジェクト 難易度:★★★
発展編で学習する →

⚠️ Chapter 02b(基本編)の完了後に挑戦することをおすすめします

04

開発・ビルド・公開

準備中

npm run devとnpm run buildの違い、開発サーバーの使い方、本番向けビルドとWebでの公開方法を学びます。

npm scripts 開発サーバー ビルド GitHub Pages 難易度:★☆☆

💡 学習を進める前に

推奨学習時間

  • • 各章 2-3時間程度
  • • 全体で 12-18時間
  • • 自分のペースで進めてOK

必要な前提知識

  • • HTMLの基礎(少し)
  • • プログラミングの経験(なくてもOK)
  • • やる気と根気 🔥

🤝 困ったときは

• 各章に詳しい解説とトラブルシューティングを用意しています

• エラーが出た時の対処法も丁寧に説明しています

• コードは全てコピー&ペーストできるように記載しています