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. WEB+DB PRESS Vol.113

    目次特集1 接続エラー、性能低下、権限エラー、クラウド障害 …

  2. やさしいAndroidプログラミング 第3版

    目次・Lesson1 はじめの一歩 ・Lesson2 J…

  3. PowerPoint資料作成 プロフェッショナル…

    目次第1章 考え方の大原則大原則 資料作成はビジネス…

  4. あなたの知らないセキュリティの非常識

    目次最新の攻撃手口を知っておこう1 SNSで近づく女…

  5. 図解でわかる! 理工系のためのよい文章の書き方 …

    目次第1章 七つの原則1 「主題文」をまず書いてみよ…

  6. WEB+DB PRESS Vol.112

    目次特集1 React/Vue.jsで実践!コンポーネント設…

  7. テックネイティブ・カンパニー ~デジタル時代を生…

    目次第1章 テクノロジーから世の中を変えるビジネスを生み出す…

  8. ソフトウェアデザイン 2019年9月号

    目次Special Feature1 気になるとこだけまとめ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

タグクラウド

PAGE TOP