WEB+DB PRESS plusシリーズ[ゲーム&モダン JavaScript文法で2倍楽しい]グラフィックスプログラミング入門
——リアルタイムに動く画面を描く。プログラマー直伝の基本

書籍の概要

この本の概要

楽しく遊べる2Dゲームの開発を進めながら,グラフィックスプログラミングの基本が学べる入門書。

一度習得すると,ゲームや映像生成,動的可視化をはじめ,幅広い分野で長く役立つグラフィックスプログラミングの基礎。

本書では,リアルタイムに動く画像を描くために求められる技術や考え方を平易に解説します。
開発言語として,エディタとブラウザがあれば開発ができるJavaScriptを採用し,すぐにスタートできる構成が特徴です。
豊富な図解に加え,いまどきのJavaScript(ES2015準拠)の基本文法,これだけは知っておきたい数学知識も厳選収録。

一線の開発者による,現場で活かせるやさしい実践解説です。

こんな方におすすめ

  • コンピューターグラフィックスとそのプログラミングに興味をお持ちの方々
  • 広くグラフィックスというテーマに取り組んでいる学生の方々
  • ゲーム開発やWeb開発にまつわる知識を,土台から強化していきたい方々

本書の構成

本書の章構成ならびに各章の概要は以下のとおりです。

第1章[入門]グラフィックスプログラミング ……長く役立つ基礎の基礎
グラフィックスとは何か。そして,グラフィックスをプログラミングするということはどのようなことなのか。さまざまな事例を引用しながら,グラフィックスプログラミングそのものについて,まずはその概要を把握していきます。
第2章[グラフィックスプログラミングで役立つ]JavaScript/ES2015入門 ……開発環境から文法基礎まで
本書で利用するプログラミング言語であるJavaScriptの基本や,実際に開発を行う上で必要となる開発環境の準備などについて説明します。
第3章[基礎]グラフィックスプログラミングと数学 ……三角関数,線型代数,乱数&補間
グラフィックスプログラミングに欠かすことのできない,数学の概念について基本中の基本から丁寧におさらいします。数学に不安のある場合でも,まず本章で予習を行うことで以降の章の内容をスムーズに把握できるようになるでしょう。
第4章Canvas2Dから学べる基本 ……Canvas2Dコンテキストと描画命令
JavaScriptを利用してグラフィックスを描画することができるCanvas APIの基本的な使い方について説明します。
第5章ユーザーインタラクションのプログラミング ……ゼロから作るシューティングゲーム❶
第6章キャラクターと動きのプログラミング ……ゼロから作るシューティングゲーム❷
第7章状態に応じた判定や演出のプログラミング ……ゼロから作るシューティングゲーム❸
第5章〜第7章の各章では,第4章で扱ったCanvas APIを利用して,シューティングゲームの実装を行います。グラフィックスプログラミングにはさまざまなテクニックが必要になりますが,「小さく実現しやすい目標設定」ができるゲーム作成というテーマを通じて,一つ一つ丁寧にロジックやアルゴリズムを紐解いていきます。
第8章ピクセルと色のプログラミング ……ピクセルを塗る操作と感覚
グラフィックスプログラミングの本質であるピクセルレベルでのグラフィックスの制御や,画像処理のテクニックについて説明します。

この書籍に関連する記事があります!

はじめに
本書は,初学者の方々に向けたグラフィックスプログラミングの入門書です。

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

第1章 [入門]グラフィックスプログラミング ……長く役立つ基礎の基礎

1.1 グラフィックスとグラフィックスプログラミングの基本 ……CG,2D,3D,画素

  • コンピューターグラフィックス ……コンピューターによって描き出されたグラフィックス
  • 2Dと3D ……グラフィックスの生成手順やデータ管理方法が違うだけ
  • グラフィックスを構成するもの ……出力先は「画素」の集まり
  • グラフィックスプログラミングの課題や目的 ……画素をどう塗りつぶすか

1.2 グラフィックスプログラミングの分類 ……活躍の舞台は広い

  • 情報を伝えるためのグラフィックス
  • 情報を正しく理解するためのグラフィックス
  • エンターテイメントとしてのグラフィックス
  • アートとしてのグラフィックス

1.3 グラフィックスプログラミングと技術 ……原則,プログラミング言語,API

  • グラフィックスプログラミングの原則
  • グラフィックスプログラミングと,プログラミング言語&ツール ……手軽にグラフィックスを生成する選択肢
    • Processingでできること
    • ゲームエンジンから学び始める
    • ツールと基礎/原理の学習
  • グラフィックスAPI ……DirectX,OpenGL,OpenGL ES
    • [まとめ]DirectXとOpenGLの特徴
  • グラフィックスAPIを利用するアプリケーション
  • Column Metal,Vulkan ……AppleとKhronos Groupのその他のグラフィックスAPI
  • Webとグラフィックス ……JavaScriptと動的なグラフィックス生成機能
  • JavaScriptとWebブラウザによる効率的な学習の実現
  • JavaScriptのメリットを活かす ……本書の構成と解説の流れ

1.4 本章のまとめ

第2章 [グラフィックスプログラミングで役立つ]JavaScript/ES2015入門 ……開発環境から文法基礎まで

2.1 本書における開発言語と開発環境 ……JavaScript,Chrome,Windows&macOS

  • サンプルの実行環境 ……Google Chrome
  • 開発環境とテキストエディタ
  • Webとアプリケーション
    • クライアントサイドとサーバーサイド
  • JavaScriptとECMAScript
  • Column ECMAScript規格とWebブラウザの実装の関係
  • JavaScriptの進化と,グラフィックスプログラミング

2.2 サンプルと実行環境について ……ファイル構成,ブラウザ&開発ツール

  • サンプルの構成と実行方法
  • Chromeの開発者ツールの基本 ……JavaScriptのデバッグ準備
  • 開発者ツールのパネル&JavaScriptのデバッグ
    • Elementパネル ……HTMLドキュメントの構造を確認
    • Sourcesパネル ……JavaScriptプログラムの実行制御をデバッグに活用
    • Consoleパネル ……JavaScriptのインラインコードの実行結果を確認できる
  • コメントとJSDoc ……サンプルに含まれるコメントの読み方

2.3 [グラフィックスプログラミングのための]JavaScript/ES2015の基本 ……基本操作,変数,関数,オブジェクト,演算子

  • アラートやコンソールの活用
  • 変数 ……変数名,キーワード,基本的な規約
  • 変数宣言キーワードとスコープ
    • ローカルスコープ,グローバルスコープ
    • var ……スコープは関数内部限定
    • let ……スコープは関数内部とブロック内部
    • const ……スコープは関数内部とブロック内部。再代入が行えない
  • JavaScriptのデータ型
  • 変数の動的型付け ……JavaScriptでは変数自身は型を持たない
  • Column 変数宣言キーワードの取捨選択
    • 動的型付けの言語で気をつけたいこと
  • Column null,undefined,Symbol
  • 関数 ……名前付きの関数の定義と呼び出し,関数の戻り値
  • 関数式 ……文と式
    • 関数式による関数の定義と呼び出し
    • 無名関数
    • アロー関数
  • Column 関数の引数と既定値
    • 関数式と関数の引数
  • Column 非同期処理とコールバック関数
  • Column JavaScriptと「自動セミコロン挿入」機能
  • オブジェクト型 ……JavaScriptではプリミティブなデータ以外,すべてがオブジェクト型
  • 配列 ……データをまとめて格納できる。(グラフィックス)プログラミングで頻出のオブジェクト
    • 配列の要素へのアクセス ……インデックスを指定
  • オブジェクト ……多種多様なオブジェクトで成り立つJavaScript
    • オブジェクトの構造
    • オブジェクトの要素へのアクセス
  • Column プロパティとメソッド
  • Column ビルトインオブジェクトとプロトタイプチェーン
  • 制御構文 ……条件や繰り返し。ロジックを記述する
    • if文 ……ある条件に一致した場合&しなかった場合,処理へ進む
    • for文 ……カウンター変数を用いて繰り返し処理を行う
  • Column JavaScriptの真偽値判定
    • while文 ……柔軟な継続条件で繰り返し処理を行う
  • Column 無限ループ
    • switch文 ……特定の条件に応じた分岐処理
  • 演算子 ……算術,代入,比較,論理,条件
    • 算術演算子 ……四則演算,剰余
    • インクリメント演算子,デクリメント演算子 ……接頭辞と接尾辞に注意
    • 代入演算子 ……変数に値を代入
    • 比較演算子 ……原則として厳密比較を使用
    • 論理演算子 ……&&(AND),||(OR)
    • 条件演算子 ……条件に合わせて異なる値を用いたい場合

2.4 本章のまとめ

  • Column 条件演算子とif文

第3章 [基礎]グラフィックスプログラミングと数学 ……三角関数,線型代数,乱数&補間

3.1 角度と三角関数 ……ラジアン,sin(サイン),cos(コサイン)

  • ラジアン ……弧度
    • 角度の表現 ……度数法と弧度法
    • プログラミングと角度 ……ラジアンで考える
  • Column ラジアンの捉え方
  • グラフィックスプログラミングのためのsin,cos ……ラジアン,半径1の円とともに
  • Column グラフィックスプログラミングで大活躍(!?)の三角関数

3.2 ベクトルと行列 ……点から始める線型代数

  • ベクトルとスカラー ……量と向き
  • 原点とベクトルの始点と終点 ……点を結ぶ
  • ベクトルの向き ……単位化,単位ベクトル,(再び)半径1の円
  • Column 座標とベクトル ……配列[x, y]は座標なのか,ベクトルなのか
  • ベクトルと演算 ……加算,減算
  • Column 単位化,正規化,規格化,標準化 ……単位化と同様の意味で使われる言葉?
  • ベクトルのスカラー倍
  • ベクトルの内積,外積
    • 内積 ……内積はベクトルAとベクトルBの成す角θに対するコサイン
  • Column ベクトルのスカラー倍で速度が変わる
    • 外積 ……外積はベクトルAとベクトルBの成す角θに対するサイン
  • Column ベクトルの内積と外積の使いどころ
  • 行列 ……ベクトルの変形や変換
    • 回転行列 ……ベクトルを回転させる

3.3 乱数/擬似乱数と補間&イージング ……グラフィックスプログラミングに役立つ数学関連知識

  • 乱数と擬似乱数 ……ランダムな状態と擬似乱数の品質
    • JavaScriptと乱数(擬似乱数) ……Chrome/V8のXorshift
  • 補間とイージング ……滑らかさや緩やかさの変化の表現

3.4 本章のまとめ

  • Column あらゆる場面で活躍する補間関数
  • Column 擬似乱数とシード値

第4章 Canvas2Dから学べる基本 ……Canvas2Dコンテキストと描画命令

4.1 Canvas2Dの基礎知識 ……コンテキストオブジェクト,Document Object Model

  • HTML5とCanvas,Canvas API ……ほとんどのブラウザはCanvasに対応
  • コンテキストオブジェクト ……描画処理のための機能と設定を持つオブジェクト
  • Canvas2Dコンテキストの取得 ……CanvasRenderingContext2D
  • HTML要素としてのCanvas ……Canvas要素にはCSSによる余分な装飾は極力行わない
  • Column コンテキストの種類
  • Column RetinaディスプレイとCanvas要素の大きさ ……CSSサイズ,物理サイズ
  • Document Object Model ……Canvas要素をはじめ,HTML要素をJavaScriptから参照する

4.2 Canvas2Dの基本プリミティブ ……矩形,線,多角形,円,円弧,ベジェ曲線...

  • 矩形の描画 ……fillRect
  • 塗りつぶしと線のスタイル ……fillStyle,strokeStyle
  • [予習]Canvas2Dサンプルの構成と動作確認
    • サンプルの実行 ……HTMLファイルをダブルクリック
    • スクリプトファイルの読み込み ……<script>タグ
  • Column CSSのrgb関数とrgba関数
    • 即時関数を使って全体を囲う
    • 読み完了タイミングの検出 ……addEventListenerとloadイベント
    • 初期化処理 ……loadイベント後❶
    • 描画処理 ……loadイベント後❷
  • Column addEventListenerの第3引数の意味
  • Column 即時関数と無名関数
    • [まとめ]本書サンプルの基本構成のポイント
  • 処理の役割に応じた関数化 ……シンプルな役割
  • 線分(ライン)の描画 ……Canvas2Dコンテキストではパスを利用
    • サブパス ……パスを区切る仕組み
    • パス&サブパスを使ったラインの描画
    • [まとめ]Canvas2Dコンテキストでパスを用いた描画の流れ
  • パスを利用した多角形の描画 ……一筆書きで座標を連続でつなぐ
  • ランダムに変化する多角形の描画
  • 円の描画 ……円や円弧の描画もパスを利用
  • 円弧の描画 ……乱数によってランダムに変化する円弧の例
  • Column arcメソッドの第6引数
  • ベジェ曲線 ……2次ベジェ曲線,3次ベジェ曲線,複雑な曲線を描画する
  • Column パスを閉じずに描く ……closePath,stroke
  • 画像を利用した描画 ……読み込みの待機にaddEventListener(再び)

4.3 Canvas2Dコンテキストの描画効果&演出機能 ……テキスト,ドロップシャドウ,グラデーション,パターン,アルファブレンディング,コンポジットオペレーション

  • テキストの描画 ……グラフィックスとしてテキストを描く
  • ドロップシャドウの描画 ……一様に設定内容が反映される点には注意
  • Column 文字列のfillとstroke
  • グラデーションとパターン ……まずは効果を適用する実体のオブジェクトを生成
    • グラデーション ……線形グラデーション,円形グラデーション
    • パターン ……repeat,repeat-x,repeat-y,no-repeat
  • アルファブレンディング ……アルファ値で,透明や半透明の描画処理
  • コンポジットオペレーション ……さまざまな合成の種類
    • コンポジットオペエレーションの設定

4.4 本章のまとめ

第5章 ユーザーインタラクションのプログラミング ……ゼロから作るシューティングゲーム❶

5.1 [まずは準備から]シューティングゲームを作る ……ファイル構成とルール

  • なぜ,ゲーム作り? ……種々の関連技術の集合体で,小さなゴールを設定しやすい
  • 作成するゲームのファイル構成
  • 作成するゲームの枠組み ……最低限のルールの定義

5.2 ゲームの骨格を作る ……土台となるプログラムの設計

  • HTMLページとしての構造 ……ゲームの舞台となるCanvas要素のための設定
  • class構文 ……独自の機能や属性を持つクラスを定義できる
  • Column loadイベントとDOMContentLoadedイベント
    • クラス再入門 ……クラスの概念を持つ言語,持たない言語
    • プロトタイプとクラス ……JavaScriptにクラスは存在しない
    • [まとめ]クラスベースとプロトタイプベース
    • プロトタイプベースの言語の記述と振る舞い ……prototype,new演算子,コンストラクタ関数
    • class構文の使い方 ……プロトタイプの記述をわかりやすくする
  • Column プロトタイプは拡張できる ……ただし,注意点も
  • canvas2d.jsに記述したCanvas2DUtilityオブジェクト ……class構文で定義
    • コンストラクタ関数でインスタンスを生成できるオブジェクト ……便宜上の「クラス」
    • constructor(コンストラクタ)
    • property(プロパティ)
    • propertyとgetter(プロパティとゲッター) ……プロパティを取得する際に関数を実行したい
  • Column setter(セッター) ……プロパティを設定する際に関数を実行したい
    • method(メソッド) ……オブジェクトが持っている関数
  • Column プロトタイプを用いるメリット ……プロトタイプチェーン
  • script.jsに記述されたメインプログラム ……シューティングゲーム作成のひな形
  • メインループ ……アニメーション処理のための基盤を実装
    • タイムスタンプの格納と取得
    • 描画処理 ……塗りつぶし,経過時間の計測,画像の描画,描画処理の再帰呼び出し
  • ユーザーインタラクション ……ユーザーの入力とaddEventListener
  • Column キー入力系イベントの発生順序とリピート
  • シーン構成を整える ……各種シーンの状態管理の基盤

5.3 本章のまとめ

第6章 キャラクターと動きのプログラミング ……ゼロから作るシューティングゲーム❷

6.1 キャラクターの実装 ……キャラクター管理クラス,キーの入力によるインタラクティブな移動

  • クラスの抽象化 ……共通して必要となるパラメーターをまとめて管理
    • Positionクラス ……座標を管理するためのクラス
  • Column コンストラクタによる値の代入
    • Characterクラス ……キャラクターのベースとなる汎用的なクラス
    • クラスの継承と自機キャラクタークラス ……class構文のextendsと,super
  • 自機キャラクタークラスを利用したメインプログラム
  • クラスに特有の処理を一元管理する
  • キャラクターの幅を考慮した描画
  • キャラクターの移動をなめらかに行う
    • windowオブジェクトへのプロパティ追加
  • Column キャラクターの中心 ……3Dでも活かせる座標を意識する感覚
    • オブジェクトのプロパティへのアクセス ……ドット記法とブラケット記法
    • テンプレートリテラル
    • ブラケット記法とテンプレートリテラルを組み合わせる
  • 画面の外に出ないように制限する ……画面の端の判定と座標の補正
  • Column 速度をspeedというプロパティに置き換えた意味

6.2 ショットの実装 ……大量ショットのインスタンス,程良い速度,回転描画

  • ショットはキャラクターの一種 ……Characterクラスを継承してShotクラス
  • キャラクターからショットを放つ ……Characterクラス,Shotクラス,Viperクラス
  • ショットのことを踏まえた初期化処理 ……大量のショットのインスタンスを扱う
  • ロードの完了と描画処理
    • render関数の呼び出し
  • ショットが高速に生成されることを防ぐ ……密生するショットの原因と対策
  • Column setTimeoutとsetInterval
  • ショットの進行方向を設定可能にする
  • 異なる種類のショットを同時に放てるようにする
  • ショットを回転させて描画する
    • Canvas2Dコンテキストにおける回転表現
    • 原点を意識して回転処理を行う
    • Canvas2Dコンテキストの状態保存と状態復元
    • その他の変更点
  • Column Math.PI * 1.5の意味するもの

6.3 敵キャラクターの実装 ……敵キャラクターの配置,シーン管理&更新,敵キャラクターのタイプ

  • Column サイン,コサインで作るベクトルは常に単位ベクトル
  • 敵キャラクターのためのクラスを実装する
  • 「シーン」という概念 ……SceneManagerクラス
  • シーン管理クラスの利用とシーン更新用の関数
    • [まとめ]シーン関連の変更点
  • 連続して敵キャラクターが出現するシーン
  • キャラクターに「タイプ」の概念を追加する

6.4 本章のまとめ

第7章 状態に応じた判定や演出のプログラミング ……ゼロから作るシューティングゲーム❸

7.1 衝突判定 ……オブジェクト同士の衝突,エフェクト,補間関数/イージング関数

  • 衝突を判定するロジック ……形状に応じた判定の基本
    • 矩形との衝突判定の注意点
  • ベクトルを利用した衝突判定 ……ベクトルの長さを測る方法の応用
  • Positionクラスの拡張 ……2つの座標間の距離を計測
  • 自機キャラクターのショットと敵との衝突判定 ……攻撃力とライフ
  • Column キャラクターのサイズ
  • 破壊を演出する ……爆発エフェクト
    • Explosionクラス
  • 爆発エフェクトの質感を向上する ……ランダム要素を取り入れる
  • 補間関数で減衰するような動きを表現 ……より自然な変化

7.2 自機キャラクターの状態に応じた処理 ……ライフの減算,ゲームオーバーの演出,再スタート

  • 自機キャラクターと敵ショットとの衝突判定 ……敵キャラクターの攻撃
  • ゲームオーバーの演出とゲームの再スタート ……ゲームの終わり。しかし,実装と演出は続く...

7.3 ゲームの品質向上 ……スコア,敵キャラの攻撃力&耐久力,シーン管理,背景,音声,ボスキャラ

  • スコアを集計して表示する
  • Column String.padStartメソッド
  • 敵キャラクターのバリエーションを増やす
    • 自機狙い弾を放つ敵キャラクター
    • 耐久力の高い敵キャラクター
    • シーン管理の見直し ……よりゲームらしく
  • 背景を追加する ……ゲームの舞台を表現する演出
  • 効果音を再生する ……シーンの雰囲気を底上げする演出
    • ユーザーの操作を受けてから初期化処理を行う
    • 音声データを扱う自作クラスを実装する ……Soundクラス
    • Promiseと非同期処理
    • AudioContextによる音声データの再生
  • Column コールバック関数とPromise
  • Column JavaScriptとガベージコレクタ
  • [いよいよ最終仕上げへ]ボスキャラクターやホーミングショットの実装に挑戦!
    • ボスキャラクター本体の実装 ……キャラクター自身が「モード」を持つ
    • ホーミングショットの実装 ……内積&外積の知識をフル活用
  • Column プログラミングと数学や物理

7.4 本章のまとめ

第8章 ピクセルと色のプログラミング ピクセルを塗る操作と感覚

8.1 [再入門]グラフィックスを構成するピクセル ……ピクセルと画像処理

  • そもそもピクセルとは何か? ……グラフィックスを構成する最小の単位
  • ピクセルを操作する画像処理 ……ある意味ではグラフィックスプログラミングの本質
  • Column ペイントソフトは画像処理の宝庫

8.2 Canvas APIでピクセルを直接操作する ……ピクセル操作の窓口「ImageData」

  • [基礎知識]同一生成元ポリシー ……ローカル環境とWebブラウザのセキュリティ
  • ローカルサーバーを起動してファイルをプレビューする
  • Chromeの拡張機能を利用したローカルサーバーの起動 ……Web Server for Chrome
  • Column (比較的簡単な)その他のローカルサーバー起動方法
  • ImageDataオブジェクト ……Canvas要素のピクセルを操作する窓口
  • TypedArray ……数値を効率良く扱える型付き配列
    • Uint8ClampedArray形式 ……値がクランプされる特殊な形式
  • Column JavaScriptとバイナリデータ ……TypedArray
  • ピクセルの並び順とデータ構造 ……ImageDataを利用したピクセル情報の抜き出し

8.3 画像処理プログラミングの基本テクニック ……ネガポジ反転,グレースケール,2値化,エッジ検出,ノイズ除去,モザイク

  • ネガポジ反転
  • グレースケール ……色の鮮やかさと引き換えに。白〜灰色〜黒の明暗を得る
  • 2値化 ……白か黒か。色が二択
  • Column 意外にも奥が深い(!?)グレースケールの世界
  • エッジ検出 ……色差分を可視化するラプラシアンフィルター
  • ノイズ除去 ……メディアンフィルターで極端に色が異なるピクセルを除去する
  • Column 上下左右だけでなく,斜め方向も加えたラプラシアンフィルター
  • Column メディアンフィルターを繰り返し実行する
  • モザイク ……ピクセルの大きさを変化させる

8.4 本章のまとめ

著者プロフィール

杉本雅広(すぎもとまさひろ)

元々は趣味で開発を行うサンデープログラマーだったが,JavaScriptのAPIの1つであるWebGLに出会い,日本語でのWebGL解説サイトの運営や勉強会の主催をスタート。現在ではWebGL実装を専門に扱う開発者として独立し,㈱はじっこを設立。WebGLやWebGLで利用するGLSL(OpenGL Shading Language)と呼ばれるシェーダ言語を扱うスクール(本書執筆時点で国内唯一)を運営するかたわら,WebGLの普及活動を行っている。

ホームページ:WebGL開発支援サイト
ブログ:WebGL総本山