強火で進め

このブログではプログラム関連の記事を中心に書いてます。

ゲーム関連を一通り扱っているHTML5本「HTML5 Canvas」

HTML5 Canvas

HTML5 Canvas

目次はこちら。タイトルは「HTML5 Canvas」となっていますが実際には「数学と物理学とアニメーション」「Canvasとオーディオ」「WebGL」の章や付録が有るみたいでこれを全部読めばゲームが作れそうですね。

1章  Canvas入門
    1.1 HTMLページの基礎
        1.1.1 <!DOCTYPEhtml>
        1.1.2 <htmllang="en">
        1.1.3 <meta charset="UTF-8">
        1.1.4 <title>...</title>
        1.1.5 簡単な HTMLページ
    1.2 本書のサンプルページの基本構成
        1.2.1 <div>
        1.2.2 <canvas>
    1.3 DOMとCanvas
    1.4 JavaScriptとCanvas
        1.4.1 JavaScriptのフレームワークとライブラリ
        1.4.2 JavaScriptコードを配置する場所
    1.5 HTML5Canvasで“HelloWorld!”
        1.5.1 JavaScriptコードのカプセル化
        1.5.2 canvas要素をHTMLページに追加する
        1.5.3 ブラウザがCanvasをサポートしているかどうかをチェックする
        1.5.4 2Dコンテキストを取得する
        1.5.5 drawScreen()関数で描画する
    1.6 console.logによるデバッグ
    1.7 2Dコンテキストと描画状態
    1.8 Canvasオブジェクト
    1.9 文字当てゲーム
        1.9.1 プログラムの基本構造
        1.9.2 プログラムで使う変数
        1.9.3 ゲームのセットアップ
        1.9.4 キーが押されたときのイベントハンドラ
        1.9.5 canvasへの描画
        1.9.6 canvasのイメージをエクスポートする
        1.9.7 文字当てゲームの完成コード

2章 図形とエフェクト
    2.1 サンプルページの基本構造
    2.2 矩形の描画
    2.3 Canvasの描画状態
        2.3.1 描画状態の保存と復元
    2.4 直線の描画
        2.4.1 パスとサブパス
        2.4.2 簡単な直線を描く
        2.4.3 プロパティを指定して直線を描く
    2.5 その他のパス関連メソッド
        2.5.1 円弧
        2.5.2 ベジエ曲線
        2.5.3 クリッピング領域
    2.6 合成
    2.7 座標変換
        2.7.1 回転と移動の座標変換
        2.7.2 拡大縮小の座標変換
        2.7.3 拡大縮小と回転を組み合わせる
    2.8 色とグラデーション
        2.8.1 塗りつぶしの色を設定する
        2.8.2 グラデーションで図形を塗りつぶす
    2.9パターンを使った塗りつぶし
    2.10シャドウ

3章 テキスト
    3.1 基本的なテキストの描画
        3.1.1 テキスト描画の基礎
        3.1.2 テキスト処理の基礎
        3.1.3 HTMLフォームとcanvasの連携
        3.1.4 テキスト幅の算定
        3.1.5 テキストの塗りつぶしと輪郭描画
    3.2 フォントの設定
        3.2.1 フォントのスタイルと太さとサイズと種類
        3.2.2 「テキストアレンジャー」のフォント
        3.2.3 テキストの色
        3.2.4 テキストの位置合わせ
        3.2.5 バージョン2の「テキストアレンジャー」
    3.3 テキストと Canvasコンテキスト
        3.3.1 アルファ透明度とテキスト
        3.3.2 シャドウとテキスト
    3.4 テキストのグラデーションとイメージパターン
        3.4.1 テキストと線形グラデーション
        3.4.2 テキストと円形グラデーション
        3.4.3 テキストとパターン
        3.4.4 「テキストアレンジャー」のグラデーションとパターン
    3.5 canvasの動的なサイズ変更とイメージ抽出
        3.5.1 canvasを動的にサイズ変更する
        3.5.2 canvasを動的にスケーリングする
        3.5.3 canvasのイメージデータをtoDataURL()で取り出す
    3.6 最終バージョンの「テキストアレンジャー」

4章 イメージ
    4.1 サンプルファイルの基本構造
    4.2 イメージ処理の基礎
        4.2.1 イメージの事前ロード
        4.2.2 イメージの描画:drawImage()メソッド
        4.2.3 イメージを伸縮表示する
        4.2.4 イメージの一部をcanvasにコピーする
    4.3 簡単なアニメーション
        4.3.1 フレームカウンタを作る
        4.3.2 タイマーループを作る
        4.3.3 表示するタイルを切り替える
    4.4 高度なアニメーション
        4.4.1 タイルシートの詳細
        4.4.2 アニメーション用の配列を作る
        4.4.3 表示すべきタイルを求める
        4.4.4 タイルのループを作る
        4.4.5 タイルの描画
        4.4.6 canvasでイメージを移動させる
    4.5 イメージに回転変換を適用する
        4.5.1 座標変換処理の基本
        4.5.2 回転変換したイメージをアニメーション表示する
    4.6 タイルのグリッドの作成
        4.6.1 タイルマップを定義する
        4.6.2 Tiledでタイルマップを作る
        4.6.3 canvasにタイルマップを表示する
    4.7 イメージのズーミングとパンニング
        4.7.1 イメージのウィンドウを作る
        4.7.2 イメージウィンドウを描画する
        4.7.3 イメージをパンする
        4.7.4 イメージをズームおよびパンする
        4.7.5 ズームとパンを制御する
    4.8 ピクセル操作
        4.8.1 Canvasピクセル操作API
        4.8.2 イメージデータを使ったタイルマップエディタ
    4.9 canvasから別の canvasにコピーする

5章 数学と物理学とアニメーション
    5.1 直線的な動き
        5.1.1 2地点間の移動:直線距離
        5.1.2 ベクトル移動
    5.2 壁の跳ね返り
        5.2.1 ボール1つを跳ね返らせる
        5.2.2 複数のボールを跳ね返らせる
        5.2.3 動的にサイズ変更されるcanvasで複数のボールを跳ね返らせる
        5.2.4 複数の跳ね返るボールを衝突させる
        5.2.5 複数の跳ね返るボールに摩擦を加える
    5.3 曲線と円運動
        5.3.1 単純な円運動
        5.3.2 渦巻状の動き
        5.3.3 三次ベジエ曲線に沿った動き
        5.3.4 三次ベジエ曲線に沿ってイメージを動かす
        5.3.5 三次ベジエ曲線で輪を作る
    5.4 重力と弾性と摩擦
        5.4.1 重力
        5.4.2 重力と跳ね返り
        5.4.3 重力と跳ね返りと弾性
        5.4.4 摩擦を加える
    5.5 イージング
        5.5.1 イーズアウト(着陸)
        5.5.2 イーズイン(離陸)

6章  Canvasとビデオ
    6.1 HTML5でサポートされるビデオ
        6.1.1 Theora+Vorbis=.ogg
        6.1.2 H.264+$$$=.mp4
        6.1.3 VP8+Vorbis=.webm
        6.1.4 3つのフォーマットを組み合わせる
    6.2 ビデオフォーマットの変換
    6.3 HTML5ビデオの基礎
        6.3.1 シンプルな埋め込みビデオ
        6.3.2 ビデオのコントロールとループと自動再生
        6.3.3 ビデオの幅と高さを変える
    6.4 JavaScriptでビデオを事前ロードする
        6.4.1 埋め込みビデオのイベントの問題
    6.5 ビデオとCanvas
        6.5.1 canvasにビデオを表示する
        6.5.2 ビデオのプロパティを表示する
    6.6 canvas上のビデオの各種サンプル
        6.6.1 currentTimeプロパティを使ってビデオイベントを生成する
        6.6.2 canvas上のビデオの座標変換:回転
        6.6.3 ビデオを使ったパズル
        6.6.4 canvas上にビデオコントロールを作る
    6.7 アニメーション再び:動くビデオ

7章  Canvasとオーディオ
    7.1 <audio>タグの基礎
    7.2 オーディオフォーマット
        7.2.1 サポートされているオーディオフォーマット
        7.2.2 Audacity
        7.2.3 3つのフォーマットすべてを指定する
    7.3 オーディオ関連のプロパティとメソッドとイベント
        7.3.1 メソッド
        7.3.2 主要なプロパティ
        7.3.3 主要なイベント
        7.3.4 オーディオのロードと再生
        7.3.5 canvas上にプロパティを表示する
    7.4 タグを使わないオーディオ再生
        7.4.1 audio要素をJavaScriptで動的に生成する
        7.4.2 サポートされているオーディオフォーマットを調べる
        7.4.3 オーディオを再生する
        7.4.4 消えたタグ
    7.5 オーディオプレーヤを作る
        7.5.1 canvas上にカスタムコントロールを作成する
        7.5.2 イメージファイルをロードする
        7.5.3 オーディオプレーヤの値を設定する
        7.5.4 マウスイベント
        7.5.5 プログレスバーを更新する
        7.5.6 再生/一時停止ボタン:ヒット判定再び
        7.5.7 ループ/非ループのトグルボタン
        7.5.8 ボリュームスライダーのクリック&ドラッグ
    7.6 ケーススタディ:スペースレイダースゲーム
        7.6.1 ゲームにおける音声が特別な理由:予測できない音声
        7.6.2 イテレーション
        7.6.3 ゲームの基本構造
        7.6.4 第1イテレーション:単一オブジェクトを使って音声を再生する
        7.6.5 第2イテレーション:無制限にオーディオオブジェクトを生成する
        7.6.6 第3イテレーション:サウンドプールを作る
        7.6.7 第4イテレーション:事前ロードした音声を再利用する

付録 A WebGL
    A.1 WebGLによる 3D
        A.1.1 WebGLとは?
        A.1.2 WebGLのテスト
        A.1.3 WebGLについて詳しく調べるには?
        A.1.4 WebGLアプリケーションの概要
        A.1.5 サンプルアプリケーションの全コード
        A.1.6 WebGLをさらに探求するには
        A.1.7 WebGL JavaScriptライブラリ

O'Reilly Japan - HTML5 Canvas
http://www.oreilly.co.jp/books/9784873115276/