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. 図解即戦力 要件定義のセオリーと実践方法がこれ1…

    目次1章 要件定義の基礎知識01 要件定義とは…

  2. Amazon Web Servicesインフラサ…

    目次Part1 AWSの基本ひとめぐり第1章 Ama…

  3. Xamarinネイティブによるモバイルアプリ開発…

    目次Part1 Xamarinの基礎Chapter1…

  4. 作って理解するOS x86系コンピュータを動かす…

    目次イントロダクション コンピュータが数を数えるしくみとC言…

  5. 知って得する! おうちの数学

    目次第1章 おうち編1-01   目覚まし時計が同時…

  6. Unityの寺子屋 定番スマホゲーム開発入門

    目次Chapter1 Unityの基本を身に付けよう…

  7. More Effective C# 6.0/7.…

    目次第1章 データ型の扱い項目1 アクセス可能なデー…

  8. VRが変える これからの仕事図鑑

    目次プロローグ VRが世界を変えるVR会議に自宅で参…

最近の記事

  1. れいといちかとまほうのトンネル

タグクラウド

PAGE TOP