HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座

目次

準備編

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 ブラウザへの最適化:データの秘匿

暗号化の手法

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

人生が変わる メモと手帳のテクニック

基礎から学ぶ人工知能の教科書

関連記事

  1. 小中学生からはじめるプログラミングの本 2019…

    目次第1章 はじめに知っておいてもらいたいこと第2章…

  2. みんなのPHP 現場で役立つ最新ノウハウ!

    目次第1章 PHPの開発環境概観第2章以降の内容を試…

  3. 【図解】コレ1枚でわかる最新ITトレンド[新装改…

    目次第0章 「最新ITトレンド」を見渡す 「デジタル」が社会…

  4. Web技術 最強の指南書

    目次第1部 Webの通信プロトコルを学ぶ第1章 HT…

  5. ミライをつくろう! VRで紡ぐバーチャル創世記

    目次改定版のためのまえがきはじめにVR体験の…

  6. モバイルアプリ開発エキスパート養成読本 (Sof…

    目次第1章 モバイルアプリ開発の基礎知識1‐1 モバ…

  7. ダークウェブの教科書 匿名化ツールの実践 (ハッ…

    目次第1章 ダークウェブの基礎知識ダークウェブとは…

  8. ビジネスフレームワーク図鑑 すぐ使える問題解決・…

    目次序章 フレームワークを活用するために…

最近の記事

  1. Microsft .NET C#
  2. れいといちかとまほうのトンネル
PAGE TOP