ブラウザゲーム開発

HTML5 Canvas: Native Interactivity and Animation for the Web

Chapter1　Introduction to HTML5
HTMLという言語で、何が出来るのかということの説明。
CanvasAPIを使用してHelloWorldを作ってみる。
JavaScriptとCSSという言語で「文字当てゲーム」を
開発する手順の説明がある。
JavaScriptの文法の説明はほとんどない。すでに知っている
ことが前提になっている。

Chapter2
CanvasというAPIの組み合わせで円や四角形を描く。（記述したHTMLファイルをブラウザで開くとある程度、思うがままに、図形を登場させて操作できるということ。）さらにこれらの図形に着色をする仕方。点の座標を決めてあげて、その点と点を結ぶことを繰り返すことで複雑な図形も描けるようにする。その際、線分の端を丸っこくするか、平らにするか、へこませるかどうかといった設定をする仕方も学ぶ。グラデーション、影の付け方も学習します。
行列計算を応用することで、描いた図形を平行移動、回転、縮小拡大をする。

Chapter３
図形描画の応用となる「文字」の扱い方。文字を描く「黒板」になるCanvasに
ユーザが入力する文字列を自在に編集・加工するアプリケーションTextArrangerを開発する。
字体。文字の大きさ。文字の着色の仕方（文字の外枠だけか、中身だけか？）。Canvasにおける文字の位置。グラデーションをつけるときの配色の設定。文字の「透明度」が調整できるようにする。文字によって出来る影がCanvasのどこに落ちるのかの位置設定。影の色合い。影の濃淡。
そういった事項も調整できるようにする。「文字」を描くCanvasの大きさそれ自体も
縦の長さ、横の長さの両方を自由に調節できるようにする。（２８９文字）

Chapter4　スプライトを利用した描画のプログラミング入門
宇宙船の絵が描いてある画像ファイルをブラウザの画面に登場させる手法。
宇宙船のサイズは自由に調整することが出来る。複数の画像ファイルを高速で
入れ替えることを繰り返すことで「動き」を演出する。（本書ではロケットが燃料を
噴射させて、燃焼させているアニメーションや、キャタピラを回転させて前進する戦車の動きがサンプルになっている。）表示されている画像ファイルを回転行列の利用を通じて、横に90度
回転させる。（横向きのアニメーション）
Tiledというアプリケーションを使い、迷路のステージを作成する手法の学習。
画像を拡大鏡でみるように変化させたり、右から左にスクロールをさせる手法の学習。
Chapter5 数学や物理で使用される公式を利用したアニメーションのプログラミング
Tiledのようなアプリケーションを、簡易版ではあるが、ブラウザで動くように自作してみる。
（３７５文字）

Chapter５　数学・物理の公式をアニメーションに利用する。

ほぼ1秒間に30回のペースでCanvasをめくっていき、少しずつ違う絵を表示することで
「動いているように見える」のがアニメーション。動かしたい円のCanvasにおける位置の
座標を時間に沿って変えていけば、その円は「動いているように見える」1秒間に30回の
ペースで位置座標を指定するということを手動でやることはほぼ不可能なのでｘ座標と
ｙ座標の数値を決定する一般化した公式を利用して、ブラウザに1秒間に30回位置座標を
算出させる。たとえば、動かしたいボールが、Canvasの「枠」に「衝突」したら、
「反射」するような「動き」をするように見せかけるには、「入射角＝反射角」に
なるように、壁に衝突したボールの速度ベクトルを変更するプログラムを記述すればよい。
この仕組みを利用して、質量、摩擦係数、反射係数、重力係数、ベクトルといった
変数を定義して、単一または数百にものぼるボールの位置座標の算出を、力学の公式に
そって行わせる手順を学ぶ。その中で「衝突判定」の仕組みも学習する。（４７４文字）

Chapter6 HTML5 CanvasAPIで動画の取り扱いを学ぶ
動画ファイルをWebページに取り入れることでどんな表現が可能なのかを概観する。
出来る限り多用な動画フォーマットで、主要なブラウザによる動画再生が可能になる
ように配慮する手順を踏む。動画の「再生」「一時停止」「停止」のOnとOffを
動画の視聴者が出来るようにするためのプログラミング。まずCanvasを長方形に
定義して、その上に動画を載せるという形式を学びます。Chapter４で取り扱った
描画のプログラミングやChapter５で学習した物理計算シミュレーションの応用として
動画利用の様々な可能性を追求する。
例１　サンプルで与えられている動画を16分割して、その部品をランダムに配列
したものを、ジグソーパズルのように元に戻していく簡易なゲームを開発する。
例2　動画が映っている「枠」をまるでキャンバスの中を動く「ボール」のように
取り扱い、無数の映像が、キャンバスの枠の中で動き回る表現を実現する。（３９５文字）

Chapter７　音源の取り扱い
サンプルの音源ファイルをブラウザで再生する。ファイル形式はOGG　Wave MP3に対応するようにHTMLを記述する。サウンドのプレーヤをCanvasに貼り付ける。「自動再生」の設定。ボリュームのつまみもつける。再生時間の残りがわかるゲージも作る。ミュート、一時停止ボタン、ループ再生のOnとOffなど、現実にあるオーディオプレーヤに標準搭載されているものを作り込んでいく。
続いて、ゲーム開発をする際の音源使用に伴う問題を解決する。モデルはインベーダーゲーム。
敵機が打ち落とされるとき、「破壊音」が聞こえるようにする。自機がミサイルを発射したとき、
「発射音」（ピュンピュン）が出るようにする。
ブラウザゲームで問題なのは、この2種類の音をどれだけ、同時に再生させることができるのか
ということ。特段工夫をしないプログラミングになると一定の音が同時に鳴ると、一部の破壊音、発射音などが再生されなくなる。この問題を解決するため、限られた音源ファイルを出来るだけ
無駄なく、使い回すプログラミング手法を学習する。（４４７文字）
wikipedia:スペースインベーダー

スペースインベーダー・今明かす開発秘話――開発者・西角友宏氏、タイトー・和田洋一社長対談 - 日経トレンディネット

Chapter8　Asteroidでゲーム作りの基礎を学ぶ。

手頃な動画があったのでそのまま拝借します。この章の学習内容そのまんまです。
このAtariのAsteroidをベースにしたブラウザゲームをどうやって開発していくのか
ということが書かれています。基本になるのは自機の描画。単にCanvasに描くところから
はじまり、燃料をエンジンから噴射している自機と沈黙している自機のイメージ画像を
交互に描画することで、燃料の噴射で推進しているようにみせるアニメーションを実現する。次に自機を左右キーを押すことによって左右回転させるためのプログラミングを学びます。
「敵機」にあたる「円盤」や「隕石」の「振る舞い」をどうやってコードに落とし込むのか、
いくつの「ステージ」（State）を用意することでゲーム全体を作り上げていくのかなどといった
ことも概略レベルで触ります。従前の章で登場するアプリに比べて、ソースコードは長大。
しかし、今までに学習した単元の内容を踏まえているからということで、解説は簡略。（４１４文字）
wikipedia:アタリ (企業)

Chapter9　ターン交代制のゲームを作ってみる。
前の章で開発したゲームの制作手順を変えてみる。前の章では自機や、敵にあたる隕石の
画像ファイルをそれぞれ1枚だけ用いて、画面でのそれらの動きはその画像ファイルに
行列計算を適用することで回転などを表現した。この章ではその手法に変えて、ちょっとずつ
向きが違う自機や隕石の画像ファイルを複数枚使用して、パラパラ漫画の手法でゲームキャラクタに動きをつけてみる。このように、ある目的を達成するために用いる手段を違えることでどのような違いが出てくるのかを考察する。
この章では後半ではMicroTankMazeという名前のターン制のゲームをつくる。ゲーム画面には
自分が動かす戦車が1台。そしてプレー画面上には複数台の敵機の戦車がランダムに配置されており。そのある場所に、自機が獲得すべきトロフィーのアイコンが置いてある。
自機、敵機ともに、動けるのは画面上の一マスを一回ずつ交代制。プレイヤーの目的は敵機や
障害物による妨害をよけながら、トロフィーのある場所にたどり着いたら、勝利。
このゲームの完全なソースコードも章末に添付されている。

Chapter10
HTML５で開発したゲームを携帯電話をはじめとする
「モバイル」で遊べるようにするやり方が書いてあります。
ビンゴゲームをHTML5で記述する。
そのファイルをPhoneGapというソフトウェアで記述
するプロジェクトにコピーする。
そのプロジェクトはXcodeで開くことができる。
Xcodeで開くことができるので、iPhoneSimulatorで
動かすことができる。Appleに会費を払っていれば
PhoneGapのテンプレートで作ったこのビンゴゲームを
iPhone実機で動かすことも可能。さらにこのビンゴゲームが
実機を振ると、振り出しにもどるように設定する。
（加速器で、実機の振動を入力として受け取るプログラミングをすることで可能にします。）
iPhoneSDKのインストールの方法。PhoneGapのインストールの方法も書いてあります。iPhone実機でプロジェクトを動かすための面倒なProvisioningという手順も書いてあります。（４１５文字）
Chapter11
WebGLという出来合いのソースコードの使い方を学習。
このライブラリを使用してプログラミングをするとブラウザ上で立方体のような3次元の物体を動かすようなことが可能になります。このWebGLを学習するための情報源も少し紹介。
さらに、ElectroServerというサーバソフトウェアを活用することで、複数のユーザがインターネットの回線を経由して
チャットが出来るようにするまでの開発手順も紹介されています。チャットのプログラミングを一通り解説したあと、
テキストメッセージにくわえて、Chapter5で学習したブラウザで動くボールのやりとりまで出来るようにします。（２７９文字）
Learning WebGL
The O3D API Blog: The future of O3D
GLGE WebGL Library/Framework
http://www.c3dl.org/
SpiderGL - Home
SceneJS V4.2.0
CopperLicht - Open Source JavaScript 3D Engine using WebGL
http://www.electrotank.com/forums/showthread.php?11788-ElectroServer-5.1-released!

ActionScript for Multiplayer Games and Virtual Worlds (One-Off)

HTML5: Up and Running

Supercharged Javascript Graphics

The Essential Guide to Flash Games: Building Interactive Entertainment With ActionScript 3.0

追記

大学時代の恩師が珍しくTwitterにて、自分の専門外（アプリリリースされてますが。）
のことを。それがAmazonのKindleFire。
実はそのTweetをみるまでノーマークでした。
GoogleでHTML５の整備をやっていたらしいプログラマもAmazonのことをTweet
していた。
「話題」になるって大事なんだよなって思う。
商売の世界ではなにより。
@papakipos

追記
そもそも今回、概略を追跡してみたこの本。
O'Reillyという出版社。ここの創業者のこともWikipediaで。

O'Reilly was initially interested in literature upon entering college, yet after graduating from Harvard College in 1975 with a B.A. cum laude in Classics, he became involved in the field of computer user manuals. He defines his company not as a book or online publisher, nor as a conference producer (though the company does all three), but as a technology transfer company, "changing the world by spreading the knowledge of innovators."

なんと。大学時代に専攻していたのは「古典文学」
まあ、だから本屋になったのかというところだけど。
マニュアルを商売にするのは、よくある話だわな。

追記　その３
http://d.hatena.ne.jp/naokishibuya/20110930/1317396119

プレゼンテーションで使われたスライドの引用文がめちゃんこ長いので
プレイを停止して確認する必要に何度か迫られた。
おもしろい。最初から最後まで飽きないでみることが出来た。
一番安いのは79ドル。
KindleFireで１９９ドル。
欲しい。で、どうやって買うの？
Bezosのプロフィール

After graduating from Princeton University in 1986, Bezos worked on Wall Street in the computer science field.[6] Then he worked on building a network for international trade for a company known as Fitel. Then Bezos worked for Bankers Trust, becoming a vice-president. Later on he also worked in computer science for D. E. Shaw & Co.
Bezos founded Amazon.com in 1994 after making a cross-country drive from New York to Seattle, writing up the Amazon business plan on the way and originally setting up the company in his garage.[7] His work with Amazon eventually led him to become one of the most prominent dot-com entrepreneurs and a billionaire. In 2004, he founded a human spaceflight startup company called Blue Origin.