目次

準備編

1章　HTML5ゲームとは

1-1　ブラウザゲームの変遷と現在

ブラウザゲームの変遷

HTML5技術とネイティブ技術

HTML5ゲームの今後

1-2　本書で取り上げるPIXI.jsとそのほかのJavaScriptライブラリ

そのほかの主要ゲームライブラリ

本書で学べること

1-3　本書で制作するHTML5ゲーム

サンプルゲームの概要

サンプルゲームの画面構成

サンプルゲームのゲームシステム

 

2章　開発環境の構築

2-1　本書の開発環境の全体像

2-2　PIPX.jsとTypeScriptの開発環境のインストールと構築

node.jsのインストールと実行

node.jsパッケージのセットアップ

本書で必要なnode.jsモジュールのインストール

TypeScriptモジュールの実行と設定

tslintモジュールの実行と設定

typedocモジュールの実行と設定

scriptsの設定によるコンパイル設定

ブラウザで実行するためのファイルのバンドル

開発用Webサーバの構築

PIXI.jsのインストール

2-3　PIXI.jsでのゲーム制作の基本

エントリーポイントの変更

スロットゲームの制作の概要と準備

クラスとI/Fの設計

import／export構文

class構文

constructor構文

メソッドの定義

残りのクラスのI/F

ゲームの起動処理

ES6クラスプロパティ

DOM読み込みの判断

PIXI.Applicationのインスタンス化

PIXI.jsでのリソースのダウンロード

UIの初期化処理

PIXI.jsのテキスト

PIXI.jsの描画オブジェクトツリー

PIXI.jsにおけるユーザーインタラクション

SlotGameクラスの残り実装

リソース取得とレースコンディション

PIXI.jsのメインループ

Reelの実装

PIXI.jsのシェーダー

メインループ処理の追加

ボタン処理の追加

プロパティ初期化のショートハンド

Tweenの利用

 

基礎編

3章　ゲーム作りの基本要素

3-1　ゲーム要素とブラウザ技術

ゲームとは何か？

ブラウザ技術の発展

DOMとブラウザ技術

3-2　シーンを作る

ゲーム初期化処理

シーンの概念

シーンのロード

シーンの更新

トランジションの追加

直ちに画面を切り替えるトランジション

フェード表現をするトランジション

メインループを処理させるオブジェクト

3-3　リソースのダウンロード

resource-loaderのおさらい

ダウンロードに関わる役割分担

①ダウンロードするリソースを指定する

②ダウンロード処理フローの実装

③ダウンロード処理のトリガー

④ダウンロードするリソースの指定

サウンドをダウンロードする

3-4　サウンドの再生

サウンド再生制御を奪う

サウンドデータをWebAudio用にダウンロードする

サウンドデータをWebAudioで再生する

そのほかのWebAudioサウンド制御

サウンドのボリュームの制御

3-5　フォントを利用する

TTFフォントを利用できるようにする

webfontloaderによるフォントのダウンロード

3-6　メインループ

Ticker

TitleSceneのテキストを明滅させる

 

4章　ゲームを作り込む

4-1　PIXI.jsによる描画

PIXI.jsのゲームでの利用

PIXI.jsの描画処理ウォークスルー

PIXI.jsのリソース取得処理

4-2　UIシステムを作る

「UI」の定義

ランタイム実装の概要

「UI」の分離

UI要素ファクトリの実装

カスタムUIの実装

4-3　スプライトシートによるアニメーション

何がアニメーションするかの検討

ユニットのスプライトシートアニメーション

PIXI.jsオブジェクトのスプライトシートアニメーション

アニメーション遷移

4-4　タッチ操作と連動する背景

スプライトの表示

ユニットの配置

4-5　ユニットをスポーンするゲームロジックの実装

ゲームが完成するまで

ユニットコストの蓄積

ゲームロジックの全体像の確認

デリゲータメソッドの定義と実装

ユニットボタンの配置

ユニットのパラメータと、各要素の接続図

リモートからマスタデータの取得

ユニットのスポーン処理の実装

シェーダーの利用

4-6　ユニットを対戦させるゲームロジックの実装

ユニットの理論上の状態

状態定義から歩かせるまで

ユニットが歩行するまでの処理の流れ

敵ユニットの準備

敵ユニットのスポーン

ユニット同士を接敵させる

ユニット同士を攻撃させる

攻撃判定の発生とダメージ処理

戦闘状態の動作の確認と、ルールの調整

4-7　拠点の追加・勝敗判定のゲームロジックの実装

ユニットと拠点

拠点のスポーン

勝敗を決める

 

応用編

5章　ゲームをデバッグする

5-1　Chromeのデベロッパーツールによるデバッグ

Chromeデベロッパーツールの起動

Elementsタブの確認

Consoleタブの確認

Sourcesタブの確認

Networkタブの確認

Performanceタブの確認

Memoryタブの確認

Applicationタブの確認

Securityタブの確認

Auditsタブの確認

実機でのデバッグ

5-2　Chrome拡張の活用

Chrome拡張の入手

PixiJS devtools

Spector.js

6章　ゲームを最適化する

6-1　デバッグツールで検知できるパフォーマンスの解決

デバッグ対象ブランチ

「メモリ」の問題点の抽出と対策

「CPU」の問題点の抽出と対策

「通信」の問題点の抽出と対策

「レンダリング」の問題点の抽出と対策

6-2　ブラウザへの最適化：ライフサイクルイベント

モバイル実機での表示が適切でない課題の解決

URLバーを非表示する

サウンドが鳴り続ける問題の対処

6-3　ブラウザへの最適化：ストレージの利用

Cookieの利用

WebStorage APIの利用

Cache APIの利用

Indexed DBの利用

6-4　ブラウザへの最適化：データの秘匿

暗号化の手法

アクセス不可能なメモリ領域の利用