HTML5 CanvasでつくるRPG
Canvas要素を中心とする「HTML5」対応Webブラウザで、JavaScriptベースのRPGを制作する入門書です。
実際にRPGのゲームシステムをプログラミングしていく上では、多くの基礎技術、土台が必要になります。
画面上にマップを描いてスクロールさせていく方法、主人公やNPCなどのキャラクタを表示する方法、ゲーム中にイベントを発生させその「状態」「結果」を保存する方法、敵との戦闘処理……JavaScriptでWebゲームの形で開発するのであれば、WebブラウザでレンダリングされるHTML／CSSを操作する手法やCanvasの基本的な描画機能も把握しておく必要があります。
「HTML5 CanvasでつくるRPG」は、私が実際にそうしたゲーム開発の基本要素を確認するために作成した「RPG開発のための実験プログラム」を元にまとめてみました。Canvasによるゲーム画面の描画と簡単なスクリプト処理系（インタプリンタ）によるイベント処理システムの開発が中心になっています。
JavaScriptの基本的なコードは一通り読み書きできるけど、新世代Webブラウザ用にCanvasベースのゲームを制作する「具体的な道筋」がイメージできない、という方のために、JavaScriptとHTML5によるゲーム開発（特にRPG）の入門書として書いてみたつもりです。
「HTML5 CanvasでつくるRPG」目次
| 第１章JavaScriptでWebコンテンツを作る | |
|---|---|
JavaScriptからWebブラウザのコンテンツ（表示内容）を操作する基本的な仕組みを確認し、canvas要素の描画機能を試してみます。 | |
| 1-1.「HTML」と「スタイルシート」 1-2.イベント処理 1-3.Canvas要素による描画処理 |
1-4.複雑な図形の描画 1-5.文字列の描画 1-6.画像の描画 |
| 第２章Canvasにゲーム画面を描く | |
canvas要素上に地形チップを並べたマップ画面を表示しキー操作でスクロール表示させたり、メッセージを表示するウインドウや選択肢ダイアログを描画してみます。 | |
| 2-1.マップ画面の表現 2-2.スクロール表示 2-3.表示Canvasへの描画 2-4.キーボードでのスクロール処理 2-5.「選択ダイアログ」の作成 |
2-6.「メッセージ表示ウインドウ」の作成 2-7.「改ページ」の実装 2-8.画面効果 2-9.ゲームに組み込むオブジェクト |
| 第３章イベントでスクリプトを処理する | |
ゲーム中のイベント処理のために、組み込み関数と制御構文（if～else）からなる簡単なスクリプト言語の実行系を作成してみます。 | |
| 3-1.イベント機能 3-2.引数の指定を拡張する 3-3.引数に指定した関数の実行 3-4.複数行のスクリプトを処理する 3-5.「if文」による制御構造 |
3-6.スクリプトを組み込む 3-7.「キャラクターの描画」と「イベントの配置」 3-8.スクリプトを利用した画像描画 3-9.戦闘イベントの実装 3-10.処理速度を改善する |
当サイトで公開している11試RPG制作機などのWebブラウザ向けRPG関連プログラムも、本書で試してみた基本要素が元になっています。