てことで、メモをペタっ!
(2013-10-16改訂:0.2.0 に向けた修正)


[tm.util]:#1ユーティリティ

tm.util.Random .. 乱数ジェネレータ
tm.util.Timeline .. タイムライン処理を行うクラス(remove系が未実装なので不要かも)
tm.util.QueryString .. URLのクエリストリング処理関数群
tm.util.Type .. オブジェクトの型チェック用スタティック関数群


[tm.util]:#2データリソース

tm.util.Ajax .. HTTP通信を用いたWebリソースへのアクセス機能(リクエストヘッダの追加はできない)
tm.util.File .. Ajax を用いたWebリソースの読み込み機能(FileManager.load()で呼ばれる )
tm.util.FileManager .. Webリソースの読み込み状態を監視と読み込み完了データの保持
tm.util.DataManager .. localStorage へのアクセスをサポート(getItem(), setItem() を使う方が良いかも)
tm.util.Script .. SCRIPT要素による動的読み込み(ScriptManager.load()で呼ばれる)
tm.util.ScriptManager .. Scriptの動的読み込みの状態を監視
tm.sound.Sound .. HTMLAudioElement によるサウンドファイルの読み込み(SoundManager.add()で呼ばれる)
tm.sound.SoundManager .. サウンドの読み込み状態、再生操作を管理



[tm.asset]:アセット(アプリケーション固有のオブジェクト)
ブラウザ実装のオブジェクトをラップしたもので、内部ではtm.util.FileManager 等を用いて読み込まれる。

tm.asset.Texture .. HTMLImageElement による画像の読み込み
tm.asset.MapSheet .. MapChipを用いたタイル張りマップ(描画オブジェクト)の生成を行う
tm.asset.SpriteSheet .. SpriteSheetを用いたアニメーション画像の生成を行う。
tm.asset.AssetManager .. アセットの読み込み状態監視と読み込み完了データの保持
tm.sound.WebAudio .. 音声ファイルの読み込み



[tm.event]:アプリケーション・イベント
ブラウザ実装イベントと区別するために、アプリケーション・イベントと表記。
イベント駆動方式を実装して追加処理を HOOK しやすくするのが目的。情報伝搬用のオブジェクトと発火機構とに分かれ、大半のオブジェクトは発火機構を継承している。


// 情報伝搬用オブジェクト
tm.event.Event
//ユーザ入力イベントにも対応できるように、tm.event.Event の派生オブジェクトが用意されている。
tm.event.TweenEvent
tm.event.MouseEvent
tm.event.TouchEvent
tm.event.PointingEvent

// 発火機構
tm.event.EventDispatcher  アプリケーション・イベントの発火


[tm.input]:ユーザ入力
後述のアプリケーション内でブラウザ実装どおりに HTML*Element オブジェクトに対してイベントをアタッチする(BaseAppで実体化される)。

tm.input.Keyboard(element)
tm.input.Mouse(element) 
tm.input.Touch(element)
tm.input.Touches(element, length)
tm.input.Accelerometer(element)


[tm.graphics]:Canvas 2D描画関連機能

tm.graphics.Color(r, g, b, a)
tm.graphics.Canvas(htmlCanvasElement) HTMLCanvasElement/CanvasRenderingContext2D をラップしたオブジェクト
tm.graphics.Bitmap(imageData) CanvasRenderingContext2Dから取得出来る ImageData をラップしたオブジェクト

// tm.graphics.Bitmap 用フィルタ・オブジェクト
tm.graphics.MonochromeFilter()
tm.graphics.ReverseFilter()
tm.graphics.BlurFilter(blurX, blurY, quality)
tm.graphics.ToonFilter(toonTable)
tm.graphics.ColorMatrixFilter(colorMatrix)

// tm.graphics.Canvas#setGradient(gradient) 用グラデーション・オブジェクト
tm.graphics.LinearGradient
tm.graphics.RadialGradient


[tm.anim]:アニメーション機能

tm.anim.Tween
tm.anim.easing.*    tm.anim.Tween 用の関数群


[tm.geom]:幾何学(バグフィックス提案

tm.geom.Vector2
tm.geom.Vector3
tm.geom.Matrix33
tm.geom.Matrix44
tm.geom.Rect
tm.geom.Circle

// (衝突判定)用演算
tm.collision.testCircleCircle(circle0, circle1)
tm.collision.testRectRect(rect0, rect1)


[tm.app]:アプリケーション・フレームワーク
イベントループ(ゲームループ)で稼動するアプリケーションを構成するためのフレームワーク

tm.app.BaseApp
tm.app.Element
tm.app.Object2D
tm.app.Scene
tm.app.LoadingScene
tm.app.TitleScene
tm.app.ResultScene
tm.app.Collision
tm.app.Tweener
tm.app.Timeline


[tm.display]:CanvasApp(2Dアプリケーションのコア)と描画要素

	tm.display.CanvasApp
	|
	|	// アクセサ拡張により描画機構が実装される:
	|	// フレーム毎に1つの可視CanvasにアクティブなSceneに配備された描画要素をせっせと複写するしくみ。
	+-	"renderer" .. tm.display.CanvasRenderer ... 標準
		+-	tm.display.BoundingRectRenderer ... CanvasRendererの派生:矩形で描画
		+-	tm.display.BoundingCircleRenderer ... CanvasRendererの派生:円形で描画

	// 以下、描画要素(描画機構も確認しておくと理解が早い)
	tm.display.CanvasElement .. 何も出力しないダミー描画要素。子要素に与えるグループ化に利用
	tm.display.Sprite ... tm.asset.Texture(画像要素)を描画
	tm.display.Shape
	|	// tm.display.Shape の派生は以下の通り
	+-	tm.display.CircleShape
	+-	tm.display.TriangleShape
	+-	tm.display.RectangleShape
	+-	tm.display.StarShape
	+-	tm.display.PolugonShape
	+-	tm.display.HeartShape
	+-	tm.display.TextShape
	
	tm.display.Label .... 文字の描画(tm.display.TextShapeを汎用化したもの)
	tm.display.AnimationSprite ... SpriteSheetに基づき、tm.asset.Texture(画像要素)をアニメーション
	tm.display.MapSprite ... MapSheetに基づき、tm.display.Spriteをグループ化表示



[tm.ui]:tm.display と同様に描画要素だが、ユーザ入力も担うクラス

	tm.ui.Gauge 
	tm.ui.Pad
	tm.ui.LabelButton
	tm.ui.IconButton
	tm.ui.GlossyButton
	tm.ui.FlatButton
	tm.ui.MenuButton





アプリケーションに関連するオブジェクトの継承(親子)関係
1)表示したい描画要素を子要素に配備するだけという基本的なコンセプトがあるので、tm.display.CanvasElement までの共通メンバを知る。
2)フレームワークは、ゲームシーンと、各シーンに配備出来る描画要素とに別れるので、機能別にメンバを探る。

tm.app.Element ..... アプリケーションの基本オブジェクト:DOMライクに親子関係を構築して各種オブジェクトを管理する機能。
|	標準では3つのアクセサ拡張が行われるので、メンバ名に使わず、予約語と捉えること。
|	1) "collision" を介して tm.app.Collison オブジェクトへアクセス。
|	2) "tweener" を介して tm.app.Tweener オブジェクトへアクセス。
|	3) "timeline" を介して tm.app.Timeline オブジェクトへアクセス。
|	
+-	tm.app.Object2D ... tm.app.Element に 座標管理機能やインタラクションを実装したクラス
	+-	tm.display.CanvasElement .... tm.app.Object2D に Canvasへの描画機能を実装したゲームエレメント
		|
		|	// 表示エリアとなる「シーン」オブジェクト。デフォルトで4種類の派生クラスが用意される。
		+-	tm.app.Scene .... アプリケーションの描画内容を管理する
		|	|
		|	|   // 以下の派生クラスから更に派生しても良いし、独自に書いても良い
		|	+-	tm.app.LoadingScene .. プログレス(アセット読み込み)・シーン。
		|	+-	tm.app.TitleScene   .. タイトル・シーン。
		|	+-	tm.app.ResultScene  .. ゲームリザルト・シーン。
		|	+-	tm.app.MenuDialog   .. メニュー・シーン(pushScene()/popScene()修学の参考にも)。
		|
		|	// 表示エリアに対する「描画」オブジェクト。シーンを作り込む為の描画要素
		+-	tm.display.Sprite ... tm.asset.Texture を tm.asset.AssetManagerに保持し、画像描画に特化
		|	+-	tm.app.IconButton
		+-	tm.display.AnimationSprite ... SpriteSheet と tm.asset.Texture を用いて画像アニメーション描画に特化
		+-	tm.display.Shape .... tm.graphics.Canvas を利用し、任意形状やテキストの描画に特化
		|	+-	tm.display.CircleShape .... tm.display.Shape#renderCircle() に特化
		|	+-	tm.display.TriangleShape .... tm.display.Shape#renderTriangle() に特化
		|	+-	tm.display.RectangleShape .... tm.display.Shape#renderRectangle() に特化
		|	|	+-	tm.app.Gauge .... 「ゲージ」を模した形状の表示
		|	+-	tm.display.StarShape .... tm.display.Shape#renderStar() に特化
		|	+-	tm.display.PolygonShape .... tm.display.Shape#renderPoligon() に特化
		|	+-	tm.display.HeartShape .... tm.display.Shape#renderHeart() に特化
		|	+-	tm.display.TextShape .... tm.display.Shape#renderText() に特化
		|	+-	tm.ui.GlossyButton
		|	+-	tm.ui.FlatButton
		|	+-	tm.ui.Pad .... ソフトウェア・ゲームパッドの形状をした表示オブジェクト
		|		
		+-	tm.display.Label
		|	+-	tm.ui.LabelButton
		+-	tm.display.MapSprite .... MapSheet を用いて tm.app.Sprite をタイル表示する



tm.app.BaseApp .... アプリケーションの骨組み。イベントループやアプリケーション・イベント(ユーザ入力)を実装し、tm.app.Scene の切り替え機能を持つ。
	tm.display.CanvasApp .... ブラウザ標準実装を用い、描画対象(出力)をCanvasRenderingContext2Dに特化
	tm.three.ThreeApp ..... tree.js を用い、描画対象をWebGLに特化




チュートリアルのサンプルコードを読みながら、シーンの中に 描画オブジェクトをつらつらと書いてゆけば良い。
複数シーンは何かしらのイベントで app.replaceScene() を使う。

Webサイトの制作と比較すると、こんな感じでメチャクチャ簡単!

  • HTMLページ  ..... Scene
  • アンカー ...... イベントによるreplaceScene
  • コンテンツ ..... Scene内に配備した描画オブジェクト