« フランク・ディケーター「毛沢東の大飢饉 史上最も悲惨で破壊的な人災 1958~1962」草思社 中川治子訳 | トップページ | Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2 »

2016年4月25日 (月)

Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1

 本書は、ワンランク上を目指す JavaScript プログラマーに向けた解説書です。主にグラフィックスやアニメーションを扱いますが、単に HTML5 Canvas や jQuery について説明するだけの書籍ではありません。

【どんな本?】

 Web ブラウザ上のゲーム・アプリケーションの開発用としては現在最も有力なプログラミング言語である JavaScript を使い、主に2Dのアクション・ゲームを作りたい人のための技術解説書。

 単にアニメーション用のインタフェースを紹介するだけでなく、実行速度を速くする方法、マシンの性能が違っても同じような操作感を実現するコツや、使うメモリの容量を減らす工夫、他言語と比べた JavaScript のクセ、CSS と組み合わせた印象的なエフェクトなど、今すぐ応用できるテクニックを豊富なソースコードと共に紹介する。

【いつ出たの?分量は?読みやすい?】

 原書は Supercharged JavaScript Graphics, by Raffaele Cecco, 2011。日本語版は2012年3月17日初版第1刷発行。単行本ソフトカバー横一段組みで本文約257頁。8.5ポイント46字×38行×257頁=約449,236字、400字詰め原稿用紙で約1,124枚。文庫本なら上下巻ぐらいの分量だが、キャプチャ画像やイラストを豊富に収録しているので、実際の文字数は6~7割程度。当然ながら、ソース・プログラムもふんだんに出てくる。

 訳者は相当にプログラミングがわかっている人らしく、文章はこなれていて読みやすいし、言葉の使い方も適切。問題は内容で、次の条件三つをを全て満たす人向け。

  1. HTML と CSS が書ける。救くとも、この記事頁の HTML と CSS ぐらいは、マニュアルを見ながらでもいいので、自分で作れる。
  2. JavaScript でプログラムを作れる。と言っても、この程度のオモチャで喜んでいる程度では苦しい。プログラミング技術として、クロージャ・コールバック・継承ぐらいは使えて、Web プログラマとしては DOM(Document Object Model、→XML用語辞典) による要素の追加や変更ができる。
  3. jQuery を多少は知っている。日頃から使っていると更によし。

 意外なことに、ゲームを作った経験がない人でも、上記三つを満たす人なら、読みこなせる。なお、デバッガは Firebug を紹介しているので、ブラウザは Firefox を使っているといいかも。

 本書のゴールとしては、次のようなゲームやエフェクトが出てくる。ただし、サウンドはなし。

  • 懐かしのインベーダーゲーム:PC版&Android版
  • チャット
  • 棒グラフ:ポップアップする吹き出しつき

 描く画像は2Dが中心で、グラデーションや影をつけて立体感を出すあたりが限界。テトリスを作るには可能だけど、ぷよぷよは少しエフェクトを簡素化しないと難しいかも。さすがに物理演算エンジンを酷使する3Dゲームまでは無理です。ゲーム専用機ならPSP未満、かな。

 HTML の規格だと、5章までは DHTML 対応で、6章から HTML5 が必要になる。

【構成は?】

 前章を受けて後の章が続く形なので、素直に頭から読もう。

  •  訳者まえがき/まえがき
  • 1章 コードの再利用と最適化
    • 1.1 高速化
    • 1.2 何をいつ最適化するか
    • 1.3 自家製コードプロファイリング
    • 1.4 JavaScriptの最適化
      • 1.4.1 ルックアップテーブル
      • 1.4.2 ビット演算、整数、2進数
    • 1.5 jQueryとDOM操作の最適化
      • 1.5.1 CSSスタイル変更の最適化
      • 1.5.2 DOM挿入の最適化
    • 1.6 その他の情報
  • 2章 DHTML
    • 2.1 DHTMLスプライトの作成
      • 2.1.1 アニメーション
      • 2.1.2 カプセル化と描画の抽象化(詳細隠蔽)
      • 2.1.3 スプライトのコード
      • 2.1.4 スプライトのコード
      • 2.1.5 簡単なSpriteアプリ
      • 2.1.6 より動きのあるスプライト
    • 2.2 jQueryプラグインに変換
    • 2.3 タイマー、スピード、フレームレート
      • 2.3.1 setIntervalとsetTimeoutの使用
      • 2.3.2 タイマーの精度
      • 2.3.3 一定スピードの実現
      • 2.3.4 Internet Explorer 6 の背景キャッシュ
  • 3章 スクロール
    • 3.1 CSSだけを使ったスクロール効果
    • 3.2 JavaScriptを使ったスクロール
      • 3.2.1 背景画像のスクロール
      • 3.2.2 タイルベース画像のスクロール
  • 4章 高度なUI
    • 4.1 HTML5のフォーム
    • 4.2 JavaScriptのUIライブラリ
      • 4.2.1 jQuery UIを用いたWebインタフェース強化
      • 4.2.2 Ext JSを用いた強力なUI
    • 4.3 UI要素の自作
      • 4.3.1 3D回転木馬の作成
  • 5章 JavaScriptゲーム
    • 5.1 ゲームで使うオブジェクトの概要
    • 5.2 ゲームのコード
      • 5.2.1 ゲーム全体で用いる変数
      • 5.2.2 キーの読み込み
      • 5.2.3 キャラクタの移動
      • 5.2.4 簡単なアニメーション効果
      • 5.2.5 衝突判定
      • 5.2.6 インベーダー
      • 5.2.7 プレイヤー
      • 5.2.8 シールド
      • 5.2.9 UFO
      • 5.2.10 gameオブジェクト
      • 5.2.11 ひとつにまとめる
  • 6章 HTML5 Canvas
    • 6.1 Canvasのサポート
    • 6.2 ビットマップかベクターか? あるいは、その両方か?
    • 6.3 Canvasの制限
    • 6.4 CanvasとSVGの比較
    • 6.5 CanvasとFlashの違い
    • 6.6 Canvasエクスポータ
    • 6.7 Canvasの描画の基本
      • 6.7.1 Canvas要素
      • 6.7.2 描画コンテクスト
      • 6.7.3 矩形の描画
      • 6.7.4 直線と曲線を使ったパスの描画
      • 6.7.5 ビットマップ画像の描画
      • 6.7.6 色、境界線、塗り潰し
    • 6.8 Canvasを使ったアニメーション
    • 6.9 Canvasと再帰的な描画
      • 6.9.1 Canvasによる樹木のページレイアウト
    • 6.10 DHTMLスプライトをCanvasのスプライトに置き換える
      • 6.10.1 CanvasSpriteオブジェクト
      • 6.10.2 他のコードの修正
    • 6.11 CanvasとWebSocketを使ったグラフィカルなチャットアプリ
      • 6.11.1 WebSocketの利点
      • 6.11.2 WebSocketoのサポートとセキュリティ
      • 6.11.3 チャットアプリ
  • 7章 ベクトル計算
    • 7.1 ベクトルの計算
      • 7.1.1 足し算と引き算
      • 7.1.2 拡大と縮小
      • 7.1.3 正規化
      • 7.1.4 回転
      • 7.1.5 内積
    • 7.2 JavaScriptによるベクトルオブジェクトの作成
    • 7.3 ベクトルを使った大砲シミュレーション
      • 7.3.1 シミュレーション全体で用いる変数
      • 7.3.2 弾丸
      • 7.3.3 大砲
      • 7.3.4 背景
      • 7.3.5 メインループ
      • 7.3.6 ページレイアウト
    • 7.4 ロケットのシミュレーション
      • 7.4.1 ゲームオブジェクト
      • 7.4.2 障害物オブジェクト
      • 7.4.3 ロケットオブジェクト
      • 7.4.4 背景
      • 7.4.5 衝突判定と反作用
      • 7.4.6 ページレイアウト
      • 7.4.7 改良・改造のアイデア
  • 8章 Google Chart Tools
    • 8.1 制限事項
    • 8.2 グラフ一覧
    • 8.3 画像グラフ
      • 8.3.1 データ形式とグラフ分解能
      • 8.3.2 動的なデータの使用
      • 8.3.3 まとめ
    • 8.4 インタラクティブなグラフ
      • 8.4.1 インタラクティブなグラフのペイント
  • 9章 jQuery Mobile
    • 9.1 jQuery Mobile の基本
    • 9.2 TilePic:モバイル向けのWebアプリ
      • 9.2.1 TilePicゲームの説明
      • 9.2.2 TilePicゲームのコード
    • 9.3 PhoneGapとは
  • 10章 PhoneGap
    • 10.1 インストール
      • 10.1.1 JDKのインストール
      • 10.1.2 Android SDKのインストール
      • 10.1.3 Eclipseのインストール
      • 10.1.4 ADTのインストール
      • 10.1.5 PhoneGapのインストール
    • 10.2 EclipseでのPhoneGapプロジェクトの作成
      • 10.2.1 App.javaファイルの変更
      • 10.2.2 AndroidManifest.xmlファイルの変更
      • 10.2.3 簡単なWebアプリを作成してのテスト
      • 10.2.4 TilePicアプリのテスト
  • 付録A ソケットサーバのソースコード
  • 付録B モバイル版 Orbit Assault
    • B.1 jQuery Mobileによるモバイル対応
      • B.1.1 タッチによる砲台操作
      • B.1.2 画面回転の対応
      • B.1.3 ページレイアウト
    • B.2 PhoneGapによるネイティブアプリ化
  • 索引

【全般】

 掟破りの楽しさ。いやこの記事を書く時点では5章までしか読んでいないんだけど。

 なんといっても、いきなり最適化の話が出てくるのが掟破り。プログラミングの教科書なら、普通は「まずチャンと動くようにしろ、最適化はその後だ」と来る筈なんだがw

 というのも、出てくる例の多くが、リアルタイムの応答が必要なモノが多く、実効速度に厳しい制限があるモノが多いため。そんなわけで、プログラミングの本としては、JavaScript が云々というより、リアルタイム系のゲームを作る際のコツやテクニックの紹介がやたら楽しいし、他のプログラム言語にも応用できそうな話が多い。

 ということで、次の記事に続きます。

【関連記事】

|

« フランク・ディケーター「毛沢東の大飢饉 史上最も悲惨で破壊的な人災 1958~1962」草思社 中川治子訳 | トップページ | Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2 »

パソコン・インターネット」カテゴリの記事

書評:科学/技術」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/201750/63531182

この記事へのトラックバック一覧です: Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1:

« フランク・ディケーター「毛沢東の大飢饉 史上最も悲惨で破壊的な人災 1958~1962」草思社 中川治子訳 | トップページ | Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2 »