[tmlib.js] リファレンスのようなもの

# phina.js

phina.js はtmlib.jsを再設計し最初から作りなおしたもので、現在開発中です。
http://phinajs.com/


tmlib.jsは現在開発しておりませんので、こちらの記事も更新しません。

# _

一度ソースコードを全て読んでおきたかったので、ついでにまとめるという感じです。
暇なときに追記していきます。

間違ってるところや、追記したいこと、サンプルを載せたいなどありましたら、
**編集リクエスト**を送ってやってください。

# サンプルだけ
サンプルだけ見たい時はこちらへどうぞ
[[tmlib.js] 関数やクラスのサンプル](http://qiita.com/simiraaaa/items/4b8e596b24649618d93c)

# 目次

[tm](#global)
[event](#event)
[util](#util)
[geom](#geom)
[collision](#collision)
[dom](#dom)
[asset](#asset)
[input](#input)
[graphics](#graphics)
[anim](#anim)
[app](#app)
[display](#display)
[ui](#ui)
[game](#game)
[three](#three)
[sound](#sound)
[social](#social)
[google](#google)

# 追記履歴
## 2015/07/16
superClass(継承)を分かりやすくした。
サンプル追加。
サンプルだけのページへのリンクを追加。





# 注意書きなど
tmlib.js のバージョンは[0.5.2](https://github.com/phi-jp/tmlib.js/releases/tag/0.5.2)です。

謎の構文が出現することがありますが、勘で理解してください。
例ですが、
`@[x,y] = arr[0,1]`は
`@x = arr[0]`
`@y = arr[1]`
だと思ってください
`== @method()`は、その項目は`@method`と大体同じということだと思ってください。
`=== @method`は、完全に同じ内容だと思ってください。
()が省略されることもあります。


`.aaa`など`.`から始まるものは、`tm.aaa`に変換して読んでください。
`..Event`など`..`や`...`などから始まるものは1個前に書いた`.event`などのnamespaceに属しているものと考えてください。

## .ns
### ..Test
この場合`tm.ns.Test`

## メンバ
クラスのコンストラクタ、メンバ変数やメソッドは以下のように記述します。

### コンストラクタ
ほとんどの場合initのことを指します。
`@(a1,a2,a3)`と書いた場合、これの一個前に書いたクラスのコンストラクタと考えてください。

必ずしも全て書いてあるとは限りません。

### インスタンスメンバ
`@member`と書いた場合、これの一個前に書いたクラスに属するインスタンスメンバと考えてください。
`@method()`とカッコつけて書いた場合は、メソッドです。
また、`this`と同一視して使用することもあります。

必ずしも全て書いてあるとは限りません。

### static
`/member`と書いた場合、これの一個前に書いたクラスに属するstaticメンバと考えてください。
`/method()`とカッコつけて書いた場合は、メソッドです。

必ずしも全て書いてあるとは限りません。

## ex
例文、サンプルはexに書きます。

```js

console.log('これは例文です');

```

## Objectなどの拡張
high.jsによる拡張は別で書きます。

ソースコードの上から順番に書いています。

# .global
globalオブジェクトです。
通常window

# .VERSION
バージョンの定数。0.1単位で変更されている様子。

# .LIB_ROOT

# .BROWSER
ユーザエージェントからなんのブラウザなのか判定し文字列で定数。

# .VENDER_PREFIX
`.BROWSER`から判定。
どのベンダープレフィクスかの定数。

# .isMobile
モバイルかどうか

# .isLocal
プロトコルが`file:`かどうか。

# .createClass
クラス定義。
superClassの指定は、文字列でもできる。
文字列のメリットは、その時点で継承したいクラスが定義されていなくても、実行時に定義されていれば良いところ。

## ex
```js

var Clas = tm.createClass({
  superClass: 'namespace.Super',//継承

  //メンバ変数
  member1: 100,
  member2: 'test',
  member3: null,  


  //コンストラクタ
  //Clas()を呼び出したとき実行される
  init: function(a, b){
    //スーパークラス(継承したクラス)のinit
    this.superInit(a, b);
    this.a = a;
    this.b = b;
  },
  
  //メソッド
  method1: function(){},
  method2: function(){},

});


```

# .classes
`tm.define`でクラス定義したときその名前でクラスをキャッシュしておく為のオブジェクト。
つまり、`namespace.Clas`というクラスを`tm.define`で定義した場合。
`namespace.Clas === tm.classes['namespace.Clas']`ということ。

# .define
クラス定義。
`.createClass`との違いは、変数に代入する必要がないのと、文字列で定義できること。
多分、namespaceが未定義でも自動で作ってくれる。

## ex
```js

tm.define('namespace.Clas', {
  superClass: 'namespace.Super',//継承

  //メンバ変数
  member1: 100,
  member2: 'test',
  member3: null,  


  //コンストラクタ
  //namespace.Clas()を呼び出したとき実行される
  init: function(a, b){
    //スーパークラス(継承したクラス)のinit
    this.superInit(a, b);
    this.a = a;
    this.b = b;
  },
  
  //メソッド
  method1: function(){},
  method2: function(){},

});

```


# .namespace
多分インスタンスを作らないようなstaticオンリーのクラスみたいなものを作る。
自分自身使ったことがなく使用例も少ないので、いまいちわからない。
多分`tm.define`使っておけば間違いない。

## ex
間違ってるかも

```js

//第二引数はオブジェクトではなく関数
tm.namespace('namespace.Static', function(){
  // thisは生成されるクラス??
  this.member = 'test';
});

```

# .using
namespaceを返す。
存在しなければ、新しいオブジェクトを生成する。

## ex

```js

var util = tm.using('tm.util');

```

# .globalize
tmlibのクラスを一部を除いて全て、windowに展開する。
除かれるオブジェクト
`.dom`
`.global`
`.event`
`.classes`

# .import
`tm.namespace`のnamespaceの部分をglobalオブジェクトに追加する。
globalオブジェクトは通常window

## ex

```js
//tm.utilが存在するとして
tm.import('util');

```

# .setLoop
ミリ秒単位での指定でループ
内部的には`setTimeout`を使用している。

## ex

```js

//33ミリ秒ごとに更新
tm.setLoop(function(){
  //updateが定義されているとして
  update();
}, 33);

```

# .inform
tmlibの情報をページに追加する関数。

## ex
[runstant](http://goo.gl/EKfVNs)

```js
tm.main(function(){
   tm.inform();
});
```

# .main
もはやおまじないのように書かれている。
`tm.main(fn)`はほぼ`window.addEventListener('load',fn);`だと思ってもらえば良いです。


# .event
line 1687

[Event](#event-1)
[TweenEvent](#tweenevent)
[TouchEvent](#touchevent)
[PointingEvent](#pointingevent)
[EventDispatcher](#eventdispatcher)

## ..Event
イベントオブジェクトを生成するクラス。
`{type:'type'}`と`tm.event.Event('type')`はほぼ同じ

### @superClass
`null`

### @type
イベントのタイプ

### @(type)
イベントのタイプをセット

## ..TweenEvent

### @superClass
[..Event](#event-1)

### @(type, time, now)

### static
`/CHANGE` = "change"
`/FINISH` = "finish"
`/LOOP` = "loop"
`/RESUME` = "resume"
`/START` = "start"
`/STOP` = "stop"

## ..MouseEvent

### @superClass
[..Event](#event-1)

### @(type, app, pointing)

## ..TouchEvent

### @superClass
[..Event](#event-1)

### @(type, app, pointing)

## ..PointingEvent

### @superClass
[..Event](#event-1)

### @(type, app, pointing)

## ..EventDispatcher
tmlibで最も活躍していると思われるクラス。
イベントを登録したり、発火したりできるクラスはこのクラスを継承している。(domを除いて)

### @superClass
`null`

### @()

### @_listeners
イベントリスナ保存用のオブジェクト

### @on(type, listener)
listenerは関数を渡す。
イベントリスナー追加

### @off(type, listener)
listenerは関数を渡す。
onで追加した関数と同じ関数があれば、それを削除する。

### @fire(e)
イベントを発火。
eはEventオブジェクト
必ずしも`tm.event.Event()`で生成したものを渡す必要はなく、
`{type:'eventname'}`などのtypeプロパティを持つオブジェクトを渡しても問題ない。(はず)

### @flare(eventName, param)
イベントtypeから発火
簡単？に書くとこういうことしてます。
`return this.fire(tm.event.Event(eventName).$extend(param||{}))`

### @one(type, listener)
一回だけ
一回実行してoffするイベントリスナ追加

### @hasEventListener(type)
type に登録されたイベントがあるかをチェック

### @clearEventListener(type)
type に登録されているリスナーを全てクリア

### @addEventListener(type, listener)
`===@on`

### @removeEventListener(type, listener)
`===@off`

### @dispatchEvent(e)
`===@fire`

### @trigger(e)
`===@fire`

# .util
line 2046

[Random](#random)
[Ajax](#ajax)
[File](#file)
[Timeline](#timeline)
[DataManager](#datamanager)
[QueryString](#querystring)
[Type](#type)
[Flow](#flow)
[GridSystem](#gridsystem)

## ..Random
乱数のクラス
ほぼ使わないので、スルー

## ..Ajax
ajaxするための関数を持つオブジェクト

### /load(params)
`params`はこれを参考に

```js
    var AJAX_DEFAULT_SETTINGS = {
        /* @property type */
        type :"GET",
        /* @property async */
        async: true,
        /* @property data */
        data: null,
        /* @property contentType */
        contentType: 'application/x-www-form-urlencoded',
        /* @property dataType */
        dataType: 'text',
        /* @property dataType */
        responseType: '', // or 'arraybuffer'
        /* @property username */
        username: null,
        /* @property password */
        password: null,
        /* @property success */
        success : function(data){ alert("success!!\n"+data); },
        /* @property error */
        error   : function(data){ alert("error!!"); },
        /* @property beforeSend */
        beforeSend: null,
    };

```

### /loadJSONP(url, callback) 
JSONPのロード

### /DATA_CONVERTE_TABLE
`/load`で使う

### /DEFAULT_SETTINGS
`load`の`params`の説明で出てきたオブジェクト

## ..File
`@(params)`
Ajaxでファイルをロードするためのクラス。

### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @load(params)
ロード

### @setData(data)
ロード完了時に受信したデータをセット

### @loadLocalStorage()
未実装

## ..Timeline

タイムライン
どこで使うのか分かってないので省略

## ..DataManager
ローカルストレージを扱うためのクラス
あまり使わないので省略

## ..QueryString
クエリ文字扱うクラス
URLの`?test=val&test2=v2`とか

### /parse(str, sep, eq)
クエリ文字列からオブジェクトに変換したものを返す。

`str``'?test=val&test2=v2'//こういうもの`
`sep`区切り文字.デフォルト`&`
`eq` nameとvalueの区切り デフォ`=`

### /stringify(obj, sep, eq)
オブジェクトからクエリ文字列にして返す。
`?`は先頭につかない。
`sep, eq`は同上
`obj`は普通に`{test:val, test2: v2}`みたいなもの

## ..Type
型チェック

## ..Flow
line 2765
多分、ファイルのロードとかの進捗がわかるようになるクラス

### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @(waits, callback)
`@setup`

### @setup(waits, callback)
セットアップ

### @pass(key, value)


### @isFinish()
終わってたら`true`

### @_check()
チェックして、進んでたら、`flowfinish`イベントを発火すると思う。


## ..GridSystem
line 2843
HTMLタグでいうTABLEっぽいものの管理する。
雰囲気は理解しているが、使ったことがないので、詳しい人追記求む。

### @(width, col)
幅と列数を指定して、何かする。

### @span(index)
スキマ?

### @center()
真ん中位置返す。

# .geom
line 2880
幾何学
ベクトルとかそういうの。

[Vector2](#vector2)
[Vector3](#vector3)
[Matrix33](#matrix33)
[Matrix44](#matrix44)
[Rect](#rect)
[Circle](#circle)

## ..Vector2
大まかに言うと縦xと横y。

### @(x, y)
`@set(x, y)`

### @clone()
複製。

### @equals(v)
等しいか
vはxとyをもつオブジェクトならなんでもいい。

### @equalsNumber(x, y)
`@equals`の引数がオブジェクトじゃなくて、`Number`2つになっただけ

### @equalsArray(arr)
`@x === arr[0] && @y === arr[1]`

### @set(x, y)
`@[=x, =y]`

### @setNumber(x, y)
`@set`とほぼ同じ

### @setArray(arr)
`@[x, y] = arr[0, 1]`

### @setObject(obj)
`{x:1,y:123}`とか渡すといい

### @setString(str)
多分`'1, 123.001'`とか渡すといい

### @setSmart(x, y)
今まで出てきたsetter全てに対応したようなやつ

### @setAngle(angle, len)
`0, 0`を原点に角度と長さでセット
angleは0~360
lenは長さ

#### ex
[runstant](http://goo.gl/c4tM6R)

### @setRadian(radian, len)
`@setAngle`がラジアンになったようなもの。

#### ex
[runstant](http://goo.gl/GuU8fx)


### @setDegree(degree, len)
`@setAngle`と同じ

### @setRandom(min, max, len)
`min`から`max`の間をランダムにとって
そこから`@setDegree`する

### @add(v)
`@[x, y] += v[x, y]`

### @sub(v)
`@[x, y] -= v[x, y]`

### @mul(n)
`@x*n`
`@y*n`
掛け算

### @div(n)
割り算
`n=0`は`n=0.01`に問答無用で変更される。
`@x/n`
`@y/n`

### @negate()
反転
`@[x, y] = -@[x, y]`

### @dot(v)
内積

#### ex
サンプル募集中

### @cross(v)
外積

#### ex
サンプル募集中

### @length()
`0, 0`からの長さ

### @lengthSquared()
長さの二乗
これで済むなら`@length()`使わずにこれ使ったほうが速い

### @distance(v)
vと自身の距離

### @distanceSquared(v)
`@distance`の２乗
これで済むなら略

### @normalize()
多分@x,@yの合計が1になるようにする。
比率みたいな感じ

### @toAngle()
`toAngle`という名前だが、radianが返ってくる。
`Math.atan2(@y, @x)`

### @toStyleString()
`'{x:@x, y:@y}'`

### @toString()
同上

### @setX(x)
set

### @setY(y)
set


### static

### /min(lhs, rhs)
lhsとrhsのx,yが小さい方を引数に渡した`..Vector2`を生成

### /max(lhs, rhs)
lhsとrhsのx,yが大きい方を引数に渡した`..Vector2`を生成

### /add(lhs, rhs)
lhsとrhsのx,yをそれぞれ加算し、引数に渡した`..Vector2`を生成

### /sub(lhs, rhs)
lhsとrhsのx,yをそれぞれ減算し、引数に渡した`..Vector2`を生成
ちなみにlhsが左で、rhsが右
`lhs.x - rhs.x`

### /mul(v, n)
`@(v.x * n, v.y * n)`

### /div(v, n)
`@(v.x / n, v.y / n)`

### /negate(v)
`@(-v.x, -v.y)`

### /dot(lhs, rhs)
内積
`lhs.x * rhs.x + lhs.y * rhs.y`

### /cross(lhs, rhs)
外積
`(lhs.x*rhs.y) - (lhs.y*rhs.x)`

### /distance(lhs, rhs)
2点間の距離

### /distanceSquared(lhs, rhs)
2点間の距離の二乗
こっちのほうが速い

### /manhattanDistance(lhs, rhs)
マンハッタン距離

### /reflect(v, normal)
反射ベクトル

### /lerp(lhs, rhs, t)
補間
0.5 で lhs と rhs の中間ベクトルを求めることができるみたいです。

#### ex
サンプル募集中


### /slerp(lhs, rhs, t)
未実装

### /random(min, max, len)
`==@().setRandom`

### 定数

### /ZERO
`@(0, 0)`

### /LEFT
`@(-1, 0)`

### /RIGHT
`@(1, 0)`

### /UP
`@(0, 1)`

### /DOWN
`@(0, -1)`

## ..Vector3
line 3440
3次元ベクトル
横x縦y奥行z

### @(x, y, z)
`==@set`

### @set(x, y, z)
`@[x, y, z] = [x, y, z]`

### @setNumber(x, y, z)
`===@set`

### @setArray(arr)
`@[x,y,z]=arr[0,1,2]`

### @setObject(obj)
`@[x,y,z]=obj[x,y,z]`

### @setString(str)
文字列からセット


### 飛ばします

## ..Matrix33
line 4024
3*3マトリックス
正直わからない

### @m
マトリックスの配列

### @([args*9])
引数に9個以上あれば、`@set`
なければ`@identity`

### @clone()
複製

### @set(m00, m01, m02, m10, m11, m12, m20, m21, m22)
`@[m00, m01, m02, m10, m11, m12, m20, m21, m22] = [m00, m01, m02, m10, m11, m12, m20, m21, m22]`

### @setArray(arr)
配列からセット

### @setObject(obj)
オブジェクトから

### @identity()
単位行列

### @transpose()
転置

### @invert()
逆行列
なんかすごい計算しています。

### @determinant()
行列式

### @zero()
ゼロクリア
`@set(0,0,0,0,0,0,0,0,0)`

### @translate(x, y)
移動

### 飛ばします

## ..Matrix44
line 4546
4*4マトリクス
わからない人が見るとヤバイ。

### わからないので飛ばします。

## ..Rect
line 5132
四角形
高校数学レベルから一気に小学生の算数レベルになって安心

### @(x, y, width, height)
`==set`

### @set(x, y, width, height)
`@[x, y, width, height] = [x, y, width, height]`

### @move(x, y)
原点からの位置へ移動
`@[x, y] = [x, y]`

### @moveBy(x, y)
現在地から移動
`@[x, y] += [x, y]`

### @resize(w, h)
`@[width, height] = [w, h]`

### @resizeBy(w, h)
`@[width, height] += [w, h]`

### @padding(top, right, bottom, left)
縮める。内側にググッと。
引数はCSS的に
1つなら全てにセット
2つなら上下、左右
3つなら上、左右、下
4つなら上、右、下、左

### @contains(x, y)
x,yが四角形の内側にあるか

### @clone()
複製

### @toCircle()
円に変換
具体的には
自分の中心座標の位置で
widthかheightの小さい方の半分を半径とする`tm.geom.Circle`インスタンスを返す

すっぽり四角の中に円が収まるイメージ

### @toArray()
`return [@x,@y,@width,@height]`

### accessor

### @left
左辺の位置を弄るのに使う

#### get
`@x`

#### set
左辺だけを動かす。
`@x`に値を代入し、左辺以外の辺の位置が動かないイメージ。
`@x`が左に行けば`@width`は大きくなり、逆なら逆

### @top
上辺の位置を移動させる


#### get
`@y`

#### set
上辺だけを動かす。
`@y`に値を代入し、左辺以外の辺の位置が動かないイメージ。
`@y`が上に行けば`@height`は大きくなり、逆なら逆

### @right
右辺を移動

#### get
`@x + @width`

#### set
右辺だけを動かす。

### @bottom
右辺を移動

#### get
`@y + @height`

#### set
下辺だけを動かす。


### @centerX
x真ん中

#### get
`@x + @width/2`

#### set
なし

### @centerY
y真ん中

#### get
`@y + @height/2`

#### set
なし 


## ..Circle
line 5339
円
..Rectと違い原点は中心
`@x`
`@y`
`@radius`半径

### @(x, y, radius)
`==@set`

### @set(x, y, radius)
`@[= x, y, radius]`

### @move(x, y)
移動
`@[=x, y]`

### @moveBy(x, y)
現在地から移動
`@[+=x, y]`

### @resize(size)
半径セット

### @resizeBy(size)
半径に加算

### @contains(x, y)
点xyが円の中に入ってるか

### @clone()
複製

### @toRect()
四角形に変換
`..Rect()`

### @toArray()
配列を返す
`[@x, @y, @radius]`

### getter

### @left
最左頂点

### @top
最上頂点

### @right
最も右側の点

### @bottom
最も下の点


# .collision
line 5475
当たり判定
命名規則的なもの
`..test{1}{2}`
1と2の形がヒットしているか、という感じでメソッド名を見ればだいたい何をしているかわかる。

## /testCircleCircle(circle0, circle1)
円同士の当たり判定


## /testRectRect(rect0, rect1)
矩形同士の

## /testCircleRect(circle, rect)
円と矩形

## /testRectCircle(rect, circle)
矩形と円
`return /testCircleRect(circle, rect)`

# .dom
DOMを扱う。
line 5566
基本的にはDOMのラッパーなので、興味がある人はソースコード見て使うってみてもいいかも。
Canvasベースでゲーム作るときにはあまり使わないので、飛ばします。

## 飛ばします


# .asset
line 6802
アセット
画像とか音とか動的ロードとか
ゲームで画像とか使うときほぼ必ず使っています。

[Manager](#manager)
[Loader](#loader)
[SpriteSheet](#spritesheet)
[MapSheet](#mapsheet)
[Texture](#texture)
[Font](#font)
[Script](#script)

## ..Manager
アセット管理オブジェクト

### /assets
アセット管理用のオブジェクト
`{}`

### /get(key)
アセットを返します。
`return /assets[key]`

### /set(key, asset)
アセットのセット
`/assets[key] = asset`

### /contains(key)
`return !!/assets[key]`


## ..Loader
アセットローダー

### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @assets
ロードしたアセット保持するオブジェクト
`{}`

### @()

### @contains(key)
存在確認
`return !!@assets[key]`

### @load(arg)
ロードする
オブジェクトか文字列でロードできる
引数の形式はオブジェクトの場合

```js

//pathの指定はurl || path || srcのどれでもいい
//拡張子はpathと同一であれば、省略可能。
{
  key0:{url:path0, type:'png'},
  key1:{path:path1, type:'mp3'},
  key2:{path:path1},
}

```

文字列の場合
`key, path, type`



### @get(key)
keyにひもづいたアセットをゲット
`@assets[key]`

### @set(key, asset)
セットする
単にセットするだけに見せかけて、**..Manager.assets**にもセットする。

### @_load(key, path, type)
このクラスでは最終的にここからロードされる。
typeかpathから拡張子判定をして、適切なロード関数へ渡される。

### @_loadString(key, path, type)
`@load`に`key, path, type`を文字列で渡した場合ここに来る。
オブジェクトに変換されて`@_loadByObject`に渡される

`{key: {url: path, type: type}}`

### @_loadByObject(hash)
アセットをロードする。
`tm.util.Flow`で進捗管理などもしている。
アセットひとつロードが完了するたびに`progress`イベントが発火する。

### static

### /_funcs
配列
拡張子ごとにロード用関数を登録しておく

### /register(type, func)
拡張子ごとのロード用関数を登録する

#### 登録されている拡張子

画像
- png
- gif
- jpg
- jpeg

音
- wav
- mp3
- ogg
- m4a

その他
- json
- tmx
- tmss
- js

フォント
- ttf
- otf
- wotf
- wotf2

tmssは`tm.asset.SpriteSheet`で使用するためのjson形式のファイル(?)

## ..Texture
line 7089
画像ファイルを動的に読み込むクラス


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @element
Imageクラス

### @loaded
ロード済みか

### @(src)
srcはURL
Imageクラスの`onload`で完了かどうかを判定している

### @getElement()
`===@element`

### getter

### @width
`@element.width`

### @height
`@element.height`

### ..SpriteSheet
スプライトシート
アニメーション用の画像とアニメーションの定義をセットすると使える。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @(src)
srcはtmss形式のファイルパスか、オブジェクト。
オブジェクトのフォーマットは`@parse`参照

### @load(path)
`@()`に文字列が渡された場合ここに来る。
Ajaxでtmssを取得して、`@parse`に渡す。
この時`@loaded=true`してるけど、loadイベントは発火しなくていいのだろうか?

### @parse(param)
paramをこのクラスで使えるようにする。
paramは以下のフォーマットのオブジェクト
ややこしく暗記できないので、
この辺がスッキリできるクラスとか作ったほうがいいかも

```js

{
  //読み込んだImageクラスやtm.asset.Manager.getに渡す文字列
  //それか、ファイルパス入れてもロードしてくれる
  image: asset,
  
  //画像をどう分割するか
  //この場合32*32のサイズに左上から右に向かって18個に分割
  frame:{
    width : 32,
    height: 32,
    count : 18
  },
  
  //アニメーションの定義
  animations: {
    //keyは任意の名前。このkeyはアニメーションの変更などで使う。
    //複数指定可
    key0: {
      //frameで指定したサイズに分割したとき、
      //左上0から右に向かって数えて、どのフレームを順番に再生するか。
      frames:[0, 1, 2, 3, 2],
      
      //nextはkeyを指定。省略可
      next  : 'keyn',
      
      //何フレームに1度アニメーションを更新するか
      frequency: 5,
    },
    
    key1: {
      frames:[4, 5],
      next  : 'key0',
      frequency: 30,
    },
    
  },
  
  
}

```

### @getFrame(index)
フレームを取得
上記説明の`frames`のindexです。

### @getAnimation(name)
nameは`animations`の説明でkeyに該当する部分

### @_calcFrames(frame)
`@parse`で使う

### @_calcAnim(animations)
`@parse`で使う


## ..MapSheet
line 7363
`tmx`形式のファイルを読み込む。
tmxのtmとtmlibのtmは多分関係ない。
確か、タイルマップのtm

多分、`..Loader`が勝手にやってくれるので、飛ばします。

### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

## ..Font
line 7654
フォントをcssの`@font-face`で読み込む。
この辺もほかの機能で使うためのクラスなので、このクラス自体は覚える必要はない。
飛ばします。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

## ..Script
line 7720
JSファイルのパスをscriptタグのsrcに入れて、
そのscriptタグをheadタグ内にブチ込むクラスです。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @element
scriptタグDOM

### @(src)
srcのjsファイルを読み込む。
srcはURL

### @getElement()
`===@element`

### static

### /load(src)
`===@(src)`

### /loadStats(version)
statsっていうfpsを表示してくれるライブラリを読み込む。
versionは省略可

### /loadDatGUI(version)
GUIが簡単に作れるライブラリを読み込む。

### /loadThree(version)
webGLライブラリ three.jsを読み込む。

### /loadBulletML(version)
弾幕が簡単に作れるライブラリを読み込む


# .input
line 7833
おもにデバイスからの入力情報を扱うためのクラス群

[Keyboard](#keyboard)
[Mouse](#mouse)
[Touch](#touch)
[Touches](#touches)

## ..Keyboard
[tm.display.CanvasApp](#canvasapp)クラスが自動的に管理してくれているので、
`app.keyboard`で使えるメソッドだと思って読むとわかりやすいかもしれません。

### @(element)

### @run(fps)
自動更新

### @_update()
更新

### @getKey(key)
keyが押されているか。
keyはキーコードでも、`'a'`でも`'A'`でもOK
どういう文字列を渡すと良いのか気になる人は、8075行目を読んでください。
line 8075

### @getKeyDown(key)
keyを押したか。
ここでいう「押した」はonkeydownのような感覚です。
今のフレームでdownしたかってことです。

### @getKeyUp(key)
離したか。onkeyupのような感覚。

### @getKeyAngle()
カーソルキーで角度を判定して返す。
右が0で左回りに増えていきます。

同時押しは中間になる。
例えば右上は45度

詳しくは8039行目を見てください。
line 8039


### @getKeyDirection()
カーソルキーが押されているかをを`-1 ~ 1`に変換して返す。
`tm.geom.Vector2`

### @setKey(key, flag)
無理やり押した状態にしたり、離した状態にします。
STGやリズムゲームのリプレイで使えるかもしれません。

### @clearKey()
全部離した状態にする


## ..Mouse
マウス情報管理クラス
これも`..Keyboard`と同様に`app.mouse`で使えます。
実際使うときは`app.pointing`ですが、
ここで説明するメソッドと同じものが使えると考えてください。

### @(element)

### @run(fps)
自動更新

### @update()
更新

### @getButton(button)
そのボタンが押されているか。
左クリック、中クリック、右クリックの判定です。
buttonは、`'left' || 'right' || 'middle'`を渡す。


### @getButtonDown(button)
そのボタンを押したか。
このフレームで押したかってことです。

### @getButtonUp(button)
そのボタンを離したか。
このフレームで


### @getPointing()
`===@getButton('left')`
`..Touch`クラスとの同じメソッド名で使えるようにしているので、
タッチとマウスをデバイスで使い分けとかを考える必要がない。

### @getPointingStart()
`===@getButtonDown('left')`

### @getPointingEnd()
`===@getButtonUp('left')`



### static

### /BUTTON_LEFT
`0x1`

### /BUTTON_MIDDLE
`0x2`

### /BUTTON_RIGHT
`0x4`

### accessor

### @x
マウス座標のx

### @y
マウス座標のy

### @dx
前フレームとの差x

### @dy
前フレームとの差y




## ..Touch
line 8586
タッチイベントとかを管理する。
上記の`..Mouse`同様`app.touch`で使用できるメソッドが書いてあると思えばいい。
`app.pointing = app.mouse || app.touch`で
タッチイベントやマウスイベントの発生によって自動的に切り替えてくれる。

`touchstart`などのタッチイベントで発生したイベントオブジェクト`e`の
`e.touches[0]`のみを`..Mouse`と近い感じで扱っている。
マルチタッチをする場合は、`..Touches`を使うなど、する必要がある。


### @(element)

### @run(fps)
自動更新

### @update()
更新

### @getTouch()
タッチしているか

### @getTouchStart()
このフレームでタッチしたか

### @getTouchEnd()
タッチ離した

### @getPointing()
`===getTouch`


### @getPointingStart()
`===getTouchStart`


### @getPointingEnd()
`===getTouchEnd`


### accessor

### @x
タッチ座標のx

### @y
タッチ座標のy

### @dx
前フレームとの差x

### @dy
前フレームとの差y


## ..Touches
line 8848
マルチタッチ
Arrayを継承しているので、`@forEach`などで、タッチされているかどうか。
判定する使い方になると思います。
`..Touch`クラスの配列なので各要素`..Touch`のメソッドが使えます。

このクラスの話ではないですが、
同時タッチはiPhoneだと5つまでしか反応しなかったと思います。

### @(elm, length)

### @update()
更新

## ..Accelerometer
line 8930
センサーの管理クラス
`devicemotion`イベントで取得できる情報を自動でまとめてくれる。

### @(element)

### @gravity
重力センサー
これはよく使うと思います。
`tm.geom.Vector3`
xyz

### @acceleration
加速度センサー
`tm.geom.Vector3`
xyz

### @rotation
回転加速度センサー
`tm.geom.Vector3`
xyz
`x===beta`
`y===gamma`
`z===alpha`

### @orientation
傾きセンサー
`deviceorientation`
`tm.geom.Vector3`
xyzにはせっとされない
`beta`
`gamma`
`alpha`

# .graphics
line 8995
色とか画像処理とか

[Color](#color)
[Canvas](#canvas)
[Bitmap](#bitmap)
[MonochromeFilter](#monochromefilter)
[ReverseFilter](#reversefilter)
[BlurFilter](#blurfilter)
[ToonFilter](#toonfilter)
[ColorMatrixFilter](#colormatrixfilter)
[Canvas.prototype.setGradient(gradient)](#canvasprototypesetgradientgradient)
[LinearGradient](#lineargradient)
[RadialGradient](#radialgradient)

## ..Color
色(rgba)

### @r
赤

### @g
緑

### @b
青

### @a
不透明度

### @(r, g, b, a)
`==@set`

### @set(r, g, b, a)
aは省略すると`1.0`

### @setFromNumber(r, g, b, a)
`===@set`

### @setFromArray(arr)
`===@set.apply(@, arr)`

### @setFromObject(obj)
オブジェクトでセット
`{r:255, g:255, b:255, a: 0.5}`

### @setFromString(str)
文字列でセット
strは`/stringToNumber`で配列に変換することができるフォーマット


### @setSmart([args])
上記のセッターから適切なものを選ぶ

### @toStyleAsHex()
CSSの16進文字列に変換
こういうやつ`#ffffff`

### @toStyleAsRGB()
CSSのRBG文字列に変換
こういうやつ`rbg(@r, @g, @b)`

### @toStyleAsRGBA()
CSSのRBGA文字列に変換
こういうやつ`rbga(@r, @g, @b, @a)`

### @toStyle()
`===@toStyleAsRGBA`

### static

### /COLOR_LIST
色の定数
詳しくは line 9193

### /strToNum(str)
文字列から数値の配列に変換？

### /stringToNumber(str)
`===/strToNum`

### /HSLtoRGB(h, s, l)
HSLからRGB

### /HSLAtoRGBA(h, s, l, a)
HSLAからRGBAに変換

### /createStyleRGB(r, g, b)
CSS用の`rgb(r, g, b)`文字列を生成。
なぜか`rgba(r, g, b)`になっている。

### /createStyleRGBA(r, g, b, a)
CSS用の`rgba(r, g, b, a)`文字列を生成。

### /createStyleHSL(h, s, l)
CSS用の`hsl(h, s%, l%)`文字列を生成

### /createStyleHSLA(h, s, l, a)
CSS用の`hsl(h, s%, l%, a)`文字列を生成

## ..Canvas
line 9366
canvasタグのDOMとcontext(2d)のラッパー
普通のCANVAS2Dの使い方とほぼ同じなので、
それを覚えれば使いこなせると思います。

### @element
canvasタグ

### @canvas
`===@element`

### @context
context(2d)

### @(canvas)
canvasは文字列の場合、querySelectorでHTMLに記述されているcanvasタグを探し、
`@canvas,@element`にセットします。
それ以外は、引数が存在すれば、そのままセット、
存在しなければ、新しくcanvasを作ってセットします。

### @resize(width, height)
リサイズ
`@canvas`タグの属性にセット

### @resizeWindow()
多分、windowサイズにリサイズ

### @resizeToFitScreen()
多分、windowサイズにリサイズして、位置をいい感じに調整

### @fitWindow(everFlag)
画面にちょうどフィットする。
everFlagはdefaultで`true`
trueならwindowのresizeイベントのたびにfitWindowされる
`false`を渡すと一度だけ実行

### @clear(x, y, width, height)
描画領域を指定して、クリアします。
`clearRect`
引数を省略すると全てクリア

### @clearColor(fillStyle, x, y, width, height)
領域を指定して、色で塗りつぶす。
引数を省略すると全部塗りつぶす。
`fillRect`

#### ex
[runstant](http://goo.gl/cUXeWm)


### @beginPath()
パス開始(リセット)

### @closePath()
パスを閉じる

### @moveTo(x, y)
新しいパスを生成

### @lineTo(x, y)
パスに追加(つなげる)

### @fill()
パス内を塗りつぶす。

### @stroke()
パス上に線を引く

### @clip()
クリップ
パスの範囲しか描画されないようにする。
詳しくはHTML5 Canvas clipなどで調べてみてください。

#### ex
[runstant](http://goo.gl/unOPOu)



### @drawPoint(x, y)
点描画
`1*1`px

### @line(x0, y0, x1, y1)
線のパスを生成
`@moveTo(x0, y0).lineTo(x1, y1)`

### @drawLine(x0, y0, x1, y1)
線を引く
`@beginPath().line(x0, y0, x1, y1).stroke()`

#### ex
[runstant](http://goo.gl/1MCQ7n)


### @drawDashLine(x0, y0, x1, y1, pattern)
ダッシュラインを描画
点線みたいなもの
patternは文字列とか数値とかを渡すらしいが、
どうやったらどういう線になるのかわからない。

#### ex
[runstant](http://goo.gl/ay2Vm9)


### @drawArrow(x0, y0, x1, y1, arrowRadius)
矢印を描画
arrowRadiusは頭のデカさ

#### ex
[runstant](http://goo.gl/iaUzd4)


### @lines([args])
直線複数のパスを生成。
偶数個の引数を渡す。

### @strokeLines([args])
複数パス指定して、直線をいくつか引く

#### ex
[runstant](http://goo.gl/IQt38U)


### @fillLines([args])
複数パスを指定して、引かれたパスを塗りつぶす。

#### ex
[runstant](http://goo.gl/Pu7sCx)

### @rect(x, y, width, height)
四角形パスを生成

### @fillRect([args])
四角形塗りつぶし。

### @strokeRect([args])
四角形線。

### @roundRect(x, y, width, height, radius)
角丸四角形パスを生成
radiusが大きいほど角がまるまる
radiusがwidthかheightの半分で100%の円
それ以上の値を指定すると謎の図形が出来上がる。

### @fillRoundRect(x, y, width, height, radius)
角丸四角形を塗りつぶす。

#### ex
[runstant](http://goo.gl/fvx9x0)


### @strokeRoundRect(x, y, width, height, radius)
角丸四角形の線を引く。

#### ex
[runstant](http://goo.gl/02NTjM)


### @polygon(x, y, size, sides, offsetAngle)
ポリゴンパス生成
簡単に言うと頂点の数がsidesの図形
x, y, 大きさ, 何角形か, 回転

### @fillPolygon(x, y, size, sides, offsetAngle)
ポリゴン塗りつぶし

#### ex
[runstant](http://goo.gl/zYMYXA)


### @strokePolygon(x, y, size, sides, offsetAngle)
ポリゴン線を引く

#### ex
[runstant](http://goo.gl/D1257C)


### @star(x, y, radius, sides, sideIndent, offsetAngle)
星のパスを生成
radiusは半径
sidesはトゲの数
sideIndentはトゲの分厚さ？
offsetAngleが回転

### @fillStar(x, y, radius, sides, sideIndent, offsetAngle)
星を塗りつぶす。

#### ex
[runstant](http://goo.gl/lYSH01)


### @strokeStar(x, y, radius, sides, sideIndent, offsetAngle)
星の線を引く

#### ex
[runstant](http://goo.gl/pCGtQv)


### @heart(x, y, radius, angle)
ハートマークパスを生成
angleはトガリ具合
angle180以上やマイナスにすると謎の図形が出来上がる。

### @fillHeart(x, y, radius, angle)
ハート塗りつぶし

#### ex
[runstant](http://goo.gl/tm13Io)


### @strokeHeart(x, y, radius, angle)
ハートの線

#### ex
[runstant](http://goo.gl/AerJDM)


### @circle(x, y, radius)
円のパス

### @fillCircle(x, y, radius)
塗りつぶしの円

#### ex
[runstant](http://goo.gl/H5S4iQ)


### @strokeCircle(x, y, radius)
円の線

#### ex
[runstant](http://goo.gl/6Y0Xyv)



### @arc(x, y, radius, startAngle, endAngle, anticlockwise)
円弧のパス
startAngleから始まって、endAngleで終わる。
angleはradianなので注意
anticlockwiseは時計回りか反時計回りか`true || false`


### @fillArc(x, y, radius, startAngle, endAngle, anticlockwise)
塗りつぶし円弧

#### ex
[runstant](http://goo.gl/N2qLCR)


### @strokeArc(x, y, radius, startAngle, endAngle, anticlockwise)
円弧の線

#### ex
[runstant](http://goo.gl/PYzTGy)


### @triangle(x0, y0, x1, y1, x2, y2)
三角形のパスを生成

### @fillTriangle(x0, y0, x1, y1, x2, y2)
塗りつぶし三角形

#### ex
[runstant](http://goo.gl/LeUN1s)


### @strokeTriangle(x0, y0, x1, y1, x2, y2)
三角形の線

#### ex
[runstant](http://goo.gl/cj59gf)


### @fillText(text, x, y)
塗りつぶしテキスト

#### ex
[runstant](http://goo.gl/uno3Fi)


### @strokeText(text, x, y)
枠線だけのテキスト

#### ex
[runstant](http://goo.gl/gnpUEO)



### @fillVerticalText(text, x, y)
縦に塗りつぶしテキスト

#### ex
[runstant](http://goo.gl/OzZjox)


### @strokeVerticalText(text, x, y)
縦に枠線だけテキスト

#### ex
[runstant](http://goo.gl/h8u3Vp)


### @_drawVerticalText(func, text, x, y)
上二つのメソッドで使います。

### @_drawLabelArea(func, param)
[`tm.ui.LabelArea`](#labelarea)などのクラスの描画用
縦書きや自動改行などできます。
等幅フォントじゃない場合は、改行位置の正確性は保証されません。

### @fillLabelArea(param)
`===@_drawLabelArea('fill', param)`

### @strokeLabelArea(param)
`===@_drawLabelArea('stroke', param)`

### @drawImage([args])
画像描画
`===@context.drawImage.apply(@context, args)`

### @drawTexture(texture, x, y)
テクスチャ描画
`@drawImage`とほぼ同じ？

### @drawScale9Image(image, rect0, rect1)
?

### @setTransform(m11, m12, m21, m22, dx, dy)
行列をセット
詳しくはCANVAS setTransformで調べてください
`===@context.setTransform(m11, m12, m21, m22, dx, dy)`

### @resetTransform()
行列をセット
多分初期位置にセット

### @setTransformCenter()
中心に移動

### @transform(m11, m12, m21, m22, dx, dy)
行列を掛ける

### @save()
保存

### @restore()
復元
確か、ひとつ前の`@save`したときの状態がpopされる

### @translate(x, y)
移動

### @rotate(rotation)
回転

### @scale(scaleX, scaleY)
拡大縮小

### @saveAsImage(mime_type)
現在のCANVASに描画されているものを新しいwindowで画像として開く。
mime_typeは拡張子?デフォルトでPNG

#### ex
[runstant](http://goo.gl/ryzTLD)


### @setCompositing(alpha, compositeOperation)
alpha とbrendModeを同時にセット
未実装

### @setFillStyle(style)
塗りつぶしをセット
`@context.fillStyle = style`


### @setStrokeStyle(style)
線の色をセット

### @setText(font, align, baseline)
引数のそれをセット

### @setLineStyle(width, cap, join, miter)
ラインのスタイルを一括セット
引数通りの

### @setShadow(color, offsetX, offsetY, blur)
影をセット
引数の

### @getElement()
`===@element`

### static

### /MIME_TYPE_PNG
`'image/png'`

### /MIME_TYPE_JPG
`'image/jpeg'`

### /MIME_TYPE_SVG
`'image/svg+xml'`

### accessor

### @width
`@canvas`のwidth

### @height
`@canvas`のheight

### @fillStyle
`@context`のfillStyle

### @strokeStyle
`@context`の

### @globalAlpha
`@context`の

### @globalCompositeOperation
`@context`の

### @shadowBlur
同上

### @shadowColor
同上

### @shadowOffsetX
同上

### @shadowOffsetY
同上

### @lineCap
同上

### @lineJoin
同上

### @miterLimit
同上

### @lineWidth
同上

### @font
同上

### @textAlign
同上

### @textBaseline
同上

### @centerX
getのみ
`@canvas.width / 2`

### @centerY
getのみ
`@canvas.height / 2`

### @imageSmoothingEnabled

#### get 
`@context.imageSmoothingEnabled`

### set
`imageSmoothingEnabled`と`webkit`と`moz`の方もセット


## ..Bitmap
line 10464
ビットマップクラス
imageDataを扱うよ。
色の変換とか色々。

### また今度

## ..MonochromeFilter
モノクロフィルタ

## ..ReverseFilter
リバースフィルタ
反転

## ..BlurFilter
ブラーフィルタ
ぼかし

## ..ToonFilter
トゥーンフィルタ
アニメ調


## ..ColorMatrixFilter
カラーマトリクスフィルタ

## ..Canvas.prototype.setGradient(gradient)
グラデーションをセット
`gradient = ..LinearGradient || ..RadialGradient`

## ..LinearGradient
線形グラデーション

## ..RadialGradient
円形グラデーション


# .anim
line 11207
[Tween](#tween)
[easing](#easing)

## ..Tween
アニメーションクラス


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @target
対象

### @time
アニメーションの時間

### @prop
?

### @nowProps
現在のプロパティ

### @now
?

### @begin

### @finish

### @duration
アニメーションにかける時間

### @isLooping
ループするかどうか

### @isPlaying
アニメーション中かどうか

### @func
`===Math.linear`

### @fps
フレームレート
デフォルト30

### @(target, finishProps, duration, func)


### @to(target, finishProps, duration, func)
指定した値までアニメーション


### @by(target, finishProps, duration, func)
現在の値に指定した値を足した値までアニメーション


### @fromTo(target, beginProps, finishProps, duration, func)
開始と終了を指定してアニメーション

### @from(target, beginProps, duration, func)
?

### @setTransition(func)
easingの指定か、コールバックの指定か調べる

### @resume()
アニメーション再開

### @start()
アニメーションの開始

### @stop()
停止

### @rewind()
開始位置まで戻る

### @fforward()
最後一まで早送り

### @yoyo()
よーよーのアニメーション

### @update()
更新

### @_resumeTime()
時間を巻き戻す

### @_startTime()
スタート時間を設定


## ..easing
イージング関数まとめオブジェクト
line 11513

### /default(t, b, c, d)
`===/linear`

### /linear(t, b, c, d)
直線

### 飛ばします

# .app
アプリケーション

[Timer](#timer)
[Updater](#updater)
[BaseApp](#baseapp)
[Element](#appelement)
[Object2D](#object2d)
[Grid](#grid)
[Scene](#scene)
[Collision](#appcollision)
[Tweener](#tweener)
[Timeline](#apptimeline)

## ..Timer
タイマー

飛ばします


## ..Updater
line 11847
`..Element`などのクラスをまとめて更新するクラス
多分覚えなくても大丈夫
飛ばします。


## ..BaseApp
ベースアプリケーション
[tm.display.CanvasApp](#canvasapp)の元になるクラスなので、
`app`で使えるメソッドが多く含まれる。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @element

### @mouse
マウス
`.input.Mouse`

### @touch
タッチ
`.input.Touch`

### @pointing
ポインティングデバイス
`@mouse`と`@touch`を適切に切り替えてくれるので、
基本的にこちらを使用する。

### @keyboard
キーボード
`.input.Keyboard`

### @accelerometer
加速度センサー
`.input.Accelerometer`

### @stats
statsライブラリ

### @timer
タイマー

### @awake
更新中か

### @_scenes
シーン管理

### @_sceneIndex
現在のシーンのインデクス

### @(elm)

### @run()
実行

### @_loop()
ループ管理

### @replaceScene(scene)
シーンを切り替える

### @pushScene(scene)
シーンをプッシュする

### @popScene()
シーンをポップ

### @enableStats()
FPS表示ライブラリStatsを表示。
あらかじめ読み込んでおかないといけない。
[tm.asset.Script.loadStats()](#loadstats)の`load`イベントで実行すれば確実。

#### ex
[runstant](http://goo.gl/DaSDkQ)


### @enableDatGUI()
GUIライブラリを有効にする。
あらかじめ読み込んでおかないと

### @start()
シーンのupdateを実行するようにする
`@awake = true`

### stop()
シーンのupdateを実行しないようにする
`@awake = false`

### @_update()
デバイスやシーンのアップデート

### @_draw()


### @getElement()
`===@element`

### @_onclick(e)


### accessor

### @currentScene
現在のシーン

### @frame
何フレーム経過

### @fps
更新頻度

## .app.Element
line 12282
.appとなっているのは、目次の都合です。

親子関係の情報を管理
`..Sprite`や`..Shape`などの元になるので、
ここにあるメソッドが使える。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @parent
親

### @children
子
配列

### @()

### @remove()
`parent`から切り離す。

### @addChild(child)
自分に子供を追加

### @addChildTo(parent)
parentに自分を追加

### @addChildren(children)
まとめて子供を追加

### @addChildAt(child, index)
indexを指定して、追加
描画の優先順位などを入れ替えたいときとかに使えるかな？

### @getChildAt(child)

### @getChildIndex(child)

### @removeChild(child)
childをremove

### @removeChildren(beginIndex)
beginIndex デフォルト 0
beginIndexから最後までのchildrenを全てremove

### @getChildByName(name)
child.nameが一致するchild

### @execChildren(func, args)
子供すべてにfuncを実行
argsはfuncの引数になる
`@children.each => (child) func.apply(child, args)`

### @getParent()
`===@parent`

### @getRoot()
一番大元の親を返す？

### @fromJSON(data)
jsonをパースしてthisに展開

### @toJSON()
未実装


## ..Object2D
`..Element`を継承している。
2Dオブジェクトの元になるクラス

### @superClass
[tm.app.Element](#appelement)

### @position
位置
`.geom.Vector2`

### @scale
拡大縮小
`.geom.Vector2`

### @rotation
回転

### @awake
動いてるか

### @_width
幅

### @_height
高さ

### @()

### @getFinalMatrix()
最終的な行列を取得

### @isHitPoint(x, y)
点と衝突しているか

#### ex
[runstant](http://goo.gl/OIzN4s)


### @isHitPointCircle(x, y)
自分の円と衝突しているか(width,heightの小さい方を直径として判定
もしくはradiusがあればそれだと思う?)

#### ex
[runstant](http://goo.gl/6o2bpu)



### @isHitPointRect(x, y)
矩形としてヒットしているか

#### ex
[runstant](http://goo.gl/UPgeZR)


### @isHitPointCircleHierarchy(x, y)
階層を考慮した円衝突判定


### @isHitPointRectHierarchy(x, y)
階層を考慮した矩形衝突判定

### @isHitElement(elm)
要素と衝突しているか。

#### ex
[runstant](http://goo.gl/eUXUMj)



### @isHitElementCircle(elm)
要素で円同士の衝突判定

#### ex
[runstant](http://goo.gl/X8VQMo)


### @isHitElementRect(elm)
要素で矩形同士の当たり判定

#### ex
[runstant](http://goo.gl/f1neio)


### @getBoundingCircle()
`.geom.Circle`取得

### @getBoundingRect()
`.geom.Rect`取得

### @localToGlobal(p)
ローカル座標をグローバル座標に変換

### @globalToLocal(p)
グローバル座標をローカル座標に変換

### @setX(x)

### @setY(y)

### @setPosition(x, y)
x,yセット

### @setRotation(rotation)
`@rotation`セット


### @setOrigin(x, y)
基準点をセット(0.5)が中心

#### ex
[runstant](http://goo.gl/wyLmQL)



### @setWidth(width)


### @setHeight(height)


### @setSize(width, height)
width,heightセット


### @wakeUp()
起動
`@awake=true`



### @sleep()
停止
`@awake = false`

### @setInteractive(flag, type)
タッチ判定の有効無効セット
typeは`'rect' || 'circle'`省略可

### @setBoundingType(type)
当たり判定のタイプをセット
`'rect' || 'circle'`

### accessor

### @x
`@position.x`

### @y
`@position.y`

### @originX
`@origin.x`

### @originY
`@origin.y`

### @scaleX
`@scale.x`

### @scaleY
`@scale.y`


### @width
`@_width`

### @height
`@_height`


### @radius
半径

### @top
上辺

### @right
右辺

### @bottom
底辺

### @left
左辺

### @centerX
x真ん中

### @centerY
y真ん中

### @boundingType

### @checkHierarchy

## ..Grid
line 13253
Grid

### @superClass
[tm.app.Object2D](#object2d)

## ..Scene
line 13310
シーン


### @superClass
[tm.app.Object2D](#object2d)


### @app
`app`

### @nextLabel
次のシーンのラベル

### @nextArguments
次のシーンに渡す引数

### @()

### @exit(param)
このシーンを終了して、`@nextLabel`に遷移する
paramは存在すれば
`@nextArguments = param.nextArguments`
`@nextLabel = param.nextLabel`


## .app.Collision
衝突管理クラス

## ..Tweener
line 13478
アニメーション
`..Element.prototype.tweener`で使えるメソッドだと考えれば良い

### @superClass
[tm.app.Element](#appelement)

### @(elm)
elmはアニメーションさせるtarget

### @_init()

### @setTarget(target)

### @update(app)
更新
基本的には`onenterframe`で実行されるが、
普通に実行することで任意のフレーム飛ばすことができる。

### @_updateTask(app)

### @_updateTween(app)


### @_updateWait(app)

### @add(param)
追加

### @by(props, duration, fn)
値を足した値までアニメーション
durationはミリ秒
fnはeasingの指定(省略可)

### @to(props, duration, fn)
値までアニメーション
durationはミリ秒
fnはeasingの指定(省略可)



### @from(props, duration, fn)

### @move(x, y, duration, fn)
`@to`に`{x:x,y:y}`を渡す

### @moveBy(x, y, duration, fn)
`@by`に`{x:x,y:y}`を渡す

### @rotate(rotation, duration, fn)
`@to`に`{rotation:rotation}`を

### @scale(scale, duration, fn)
`@to({scaleX:scale, scaleY: scale}, duration, fn)`

### @fade(value, duration)
フェードアニメーション
`@to alpha`

### @fadeIn(duration)
フェードイン
`@fade(1.0, duration)`

### @fadeOut(duration)
フェードアウト
`@fade(0.0, duration)`

### @_addTweenTask(param)

### @wait(time)
timeはミリ秒
何もしないアニメーション
待機

### @call(fn, self, args)
コールバック
その時間に実行する関数を登録しておく
fn 関数
self thisにしたいオブジェクト
args args 引数

### @set(key, value)

### @play()
アニメーションを開始

### @pause()
一時停止

### @rewind()
巻き戻し

### @setLoop(flag)
ループするかをセット

### @clear()
アニメーションをクリア。
何もなかったことにする。

### ..Element.prototype.tweener
この要素を@setTarget()したtweenerを返す

## .app.Timeline
line 13929
タイムライン

### @superClass
[tm.app.Element](#appelement)

# .display
line 14234
表示物
[CanvasApp](#canvasapp)
[CanvasElement](#canvaselement)
[Sprite](#sprite)
[Shape](#shape)
[CircleShape](#circleshape)
[TriangleShape](#triangleshape)
[RectangleShape](#rectangleshape)
[RoundRectangleShape](#roundrectangleshape)
[StarShape](#starshape)
[PolygonShape](#polygonshape)
[HeartShape](#heartshape)
[TextShape](#textshape)
[Label](#label)
[AnimationSprite](#animationsprite)
[MapSprite](#mapsprite)
[CanvasRenderer](#canvasrenderer)
[BoundingRectRenderer](#boundingrectrenderer)

## ..CanvasApp
tmlibでゲーム作るときよく出てくる`app`はこれ
[.app.BaseApp](#baseapp)もあわせて覚えると良い

### @superClass
[tm.app.BaseApp](#baseapp)

### @element
dom

### @canvas
`@element`を`.graphics.Canvas`

### @(canvas)
canvasかquerySelectorに渡す文字列。空なら新しく作る

### @resize(width, height)
`@element[=width, =height]`

### @resizeWindow()
ウィンドウサイズにリサイズ


### @fitWindow(everFlag)
画面にフィットする

### @_draw()


### accessor


### @width
`@canvas.width`

### @height
`@canvas.height`

### @background
背景色



## ..CanvasElement
`.app.Object2D`にキャンバスの描画系を追加したもの
[..Sprite](#sprite), [..Shape](#sprite)の元



### @superClass
[tm.app.Object2D](#object2d)


### @visible
表示フラグ

### @clipping
クリッピングフラグ

### @fillStyle
塗りつぶしの色

### @strokeStyle
線の色

### @alpha
不透明度

### @blendMode
ブレンドモード
詳しくはglobalCompositeOperationについて調べてみてください

### @shadowColor
影の色

### @shadowOffsetX
影の位置

### @shadowOffsetY
影の位置

### @shadowBlur
影のぼかし

### @()

### @setAlpha(alpha)
不透明度セット

### @setShadowColor(color)
影の色セット

### @setShadowBlur(blur)
影ぼかしセット

### @setShadowOffset(x, y)
影位置セット

### @drawBoundingCircle(canvas)
バウンディングサークル描画

### @drawBoundingRect(canvas)
バウンディングレクト描画

### @drawFillRect(ctx)

### @drawStrokeRect(ctx)

### @drawFillArc(ctx)

### @drawStrokeArc(ctx)

### @setVisible(flag)
表示非表示セット

### @show()
表示

### @hide()
非表示

### @setFillStyle(style)
塗りつぶしセット

### @setStrokeStyle(style)
ストローク色

### @setBlendMode(blendMode)
ブレンドモード

### @load(data)


## ..Sprite
line 14667
画像の描画

### @superClass
[tm.display.CanvasElement](#canvaselement)

### @(image, width, height)
imageはaseetにセットされてるものを文字列で指定するか。
ラップされたimage(canvas)オブジェクト

### @setImage(image, width, height)
画像をセット
`@()`だいたい一緒

### @getImage()
画像取得
`===@_image`

### @fitImage()
自分自身のサイズを同じサイズに画像を

### @setFrameIndex(index, width, height)
画像を切り替えてアニメーションするようなときに使う

### accessor


### @image
get
`==getImage`
set
`==@setImage`


### @frameIndex
フレームインデックス
get
`===@_frameIndex`

set
`==@setFrameIndex`

## ..Shape
line 14808
図形を描画するクラス
`@_render`を実装して、色々描画。

[.graphics.Canvas](#canvas)で描画できる図形がサブクラスに一通り実装されている。

使い方はこれのサブクラスを見たらわかる
サブクラスは全て、コンストラクタにオブジェクトを渡す。
例えば

```js
{
  x:100,
  y:200,
  width:50,
  height:50,
  fillStyle:'red',
  blendMode:'lighter'
}

```


### @superClass
[tm.display.CanvasElement](#canvaselement)


## ..CircleShape
円描画
ちょっと勘違いしやすいのが、コンストラクタに渡す引数。
サイズを渡すとき、半径(radius)を指定してしまうことがあるが、
widthとheightでサイズが決まるので、widthとheightに直径を渡す。

```js
{
  //radiusを基準に描画サイズが決まるわけではない
  radius: 25,
  
  //直径を指定する
  width: 50,
  height: 50,
}
```

### @superClass
[tm.display.Shape](#shape)

## ..TriangleShape
三角形

### @superClass
[tm.display.Shape](#shape)

## ..RectangleShape
四角形


### @superClass
[tm.display.Shape](#shape)


## ..RoundRectangleShape
角が丸まった四角形
角丸


### @superClass
[tm.display.Shape](#shape)

## ..StarShape
星

### @superClass
[tm.display.Shape](#shape)

## ..PolygonShape
ポリゴン


### @superClass
[tm.display.Shape](#shape)

## ..HeartShape
ハート

### @superClass
[tm.display.Shape](#shape)

## ..TextShape
テキスト
これより[..Label](#label)のほうが使いやすい
変更のないテキストを描画するのには向いている。

### @superClass
[tm.display.Shape](#shape)

## ..Label
line 15408
テキスト
ラベル
システムフォント
基本的には文字を描画したいと思ったら、これを使う。


### @superClass
[tm.display.CanvasElement](#canvaselement)

### @fill
塗りつぶしフラグ

### @stroke
ストロークフラグ

### @debugBox
デバッグボックス

### @(text, size)
現状textに数値`0`を渡すと何も描画されないので、
数値をわたすときはStringに変換してから渡したほうが良い。
sizeはフォントサイズ。

### @setAlign(align)
アライン
`@align`

### @setBaseline(baseline)
ベースライン
`@baseline`

### @setFontSize(size)
フォントサイズ
`@fontSize`

### @setFontFamily(family)
フォントファミリー
字体
書体
`@fontFamily`

### @setFontWeight(weight)
フォントウェイト
`@fontWeight`


### accessor

### @text
文字セット
コンストラクタで数値`0`を渡すと表示されないが、
アクセサは表示されるので、気にしなくて良い。

### @fontSize

### @fontFamily

### @fontWeight

### @lineHeight
行の高さ

### /default
初期設定のオブジェクト
これを変更するとデフォルト値を変更できる。

```js
{
  align: 'center',
  baseline: 'middle',
  fontFamily: "'HiraKakuProN-W3'",
}

```

## ..AnimationSprite
line 15591
アニメーションスプライト
スプライトシートをセットして使う。
[.asset.SpriteSheet](#spritesheet)

### @superClass
[tm.display.CanvasElement](#canvaselement)


### @(ss, width, height)
ssはスプライトシート名かスプライトシートそのもの

### @draw(canvas)
描画
特に考える必要はないが、オーバーライドでカスタマイズすることもできる。

### @gotoAndPlay(name)
nameのアニメーションを再生する。
`@paused`に`false`をセットしている。

### @gotoAndStop(name)
nameのアニメーションを再生する。
`@paused`に`true`をセットしている。


## ..MapSprite
マップスプライト
マップ描画
[.asset.MapSheet](#mapsheet)をセットして使う


### @superClass
[tm.display.CanvasElement](#canvaselement)


## ..CanvasRenderer
キャンバスのレンダラー
親子関係を持つキャンバスを描画する。
tmlibで普通にゲームを作る分には覚える必要はない。
`..Shape`
`..Label`
`..Sprite`
などのデフォルトの`draw`メソッドはここに定義されている。

## ..BoundingRectRenderer
バウンディングレクトレンダラ

### @superClass
[tm.display.CanvasRenderer](#canvasrenderer)


# .ui
line 16218
ユーザインタフェース
主に`.display`のような表示物の中でも、
UI成分が強いもの。
ソースコード中のコメントが少ない。

[Pad](#pad)
[BaseButton](#basebutton)
[SpriteButton](#spritebutton)
[LabelButton](#labelbutton)
[IconButton](#iconbutton)
[GlossyButton](#glossybutton)
[FlatButton](#flatbutton)
[MenuDialog](#menudialog)
[Sketch](#sketch)
[Gauge](#gauge)
[FlatGauge](#flatgauge)
[GlossyGauge](#glossygauge)
[LabelArea](#labelarea)

## ..Pad
ゲームパッド
丸いパッド
グリグリするやつ。

### @superClass
[tm.display.Shape](#shape)

### @()
カスタマイズなどは一切できない。
自分で拡張しましょう。

#### ex
[runstant](http://goo.gl/kSvY7k)



### @isTouching
タッチしてるか

### @circle
コントローラーの黒いところ
これのpositionからどのぐらい動かしているのか、取得しないといけない。つらい

## ..BaseButton
ボタンのベース
タッチ有効化され、pointingendでpushが発火するだけ。

### @superClass
[tm.display.CanvasElement](#canvaselement)


## ..SpriteButton
画像でボタン

### @superClass
[tm.ui.BaseButton](#basebutton)

### @(image)
[Sprite](#sprite)の引数に渡すimage

#### ex
[runstant](http://goo.gl/EhLFNm)


## ..LabelButton
文字のボタン
文字がホワーンって感じになる。
多分[..BaseButton](#basebutton)に追加して使うと良いが、
width,heightを設定するのがめんどう。

### @superClass
[tm.display.Label](#label)

### @(text)
textは表示文字

#### ex
[runstant](http://goo.gl/6woMsU)

### /DEFAULT_ALPHA
`0.5`
ほわり具合

## ..IconButton
スプライトでボタン
pointingendでpushイベントが発火

### @superClass
[tm.display.Sprite](#sprite)

### @([args])
`@superInit.call(@, args)`となっているが、`apply`の間違いだと思う。
`@()`を書き換えないと使えない。
SpriteButtonとほぼ同じなので、それ使ってもいい。

#### ex
[runstant](http://goo.gl/Xy6tfZ)


## ..GlossyButton
つやつやしたボタン
ガラスっぽいボタン
今まで出てきたボタンよりしっかり実装してある。
pointingendでpushイベントが発火しないので、
普通に`@on('pointingend...`で関数指定する。

### @superClass
[tm.display.Shape](#shape)

### @(width, height, backgroundColor, text)
textまで指定できる。

#### ex
[runstant](http://goo.gl/gJtd1V)



## ..FlatButton
フラットデザインのボタン
これもしっかり実装してあるが、
ボタン類の設計思想がバラバラなのが気になる。

### @superClass
[tm.ui.BaseButton](#basebutton)

### @(param)

```js
param = {
        width: 300,
        height: 100,
        fillStyle: "hsl(180, 60%, 50%)",
        strokeStyle: "transparent",
        text: "START",
        fontSize: 50,
        cornerRadius: 8,
        fontFamily: "'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif",
    };
```

#### ex
[runstant](http://goo.gl/hL0JXs)



## ..MenuDialog
メニューダイアログ
シーンを継承
おそらく`app.pushScene`して使うと良い。

### @superClass
[tm.app.Scene](#scene)


### @titleText
タイトルに表示する文字

### @menu
メニュー名配列

### @descriptions
メニュー詳細配列

/** @type {boolean} exit の表示/非表示 */
### @showExit
exitを表示するか
多分exitでpopSceneする

### @title
タイトルの[tm.display.Label](#label)

### @selections
[..LabelButton](#labelbutton)の配列

### @description
詳細のラベル配列

### @box
枠

### @cursor
選択枠

### @(params)
右側は設定例で、デフォルトの値ではない。

```js
params = {
  screenWidth: 300,
  screenHeight: 400,
  title: 'タイトルの文字',
  menu: ['スタート', 'コンフィグ' ,'チュートリアル'],
  menuDesctiptions: ['何かしら開始します', 'なにか設定', 'ちゅーとり'],
  defaultSelected: 0,//何番目
  showExit: true,
}

```

サンプルは正常に動かないが、一応書いてみた。
#### ex
[runstant](http://goo.gl/1bFi6N)


## ..Sketch
line 16814
色が塗れる`Shape`

### @superClass
[tm.display.Shape](#shape)

### @(param)
サンプルどうぞ

#### ex
[runstant](http://goo.gl/Auv2Jo)

### @clear()
画面を`@bgColor`でクリア

### accessor

### @penColor
ペンの色

### @bgColor
背景色

### @lineWidth
ペンの太さ


## ..Gauge
ゲーム用ゲージクラス
HPとかチャージとかでゲージ表示するときとかに使えるかな。
このクラスを扱う上で押さえておきたいポイントは4つのイベント
`change` 値が変更される時に発生
`changed` 値の変更が完了したときに発生
`empty` 値の変更後にゲージが空の場合に発生
`full` 値の変更後にゲージが最大の場合に発生

ちなみに最大値をセットするためのメソッドなどはなく100で固定。
どうしてもいじりたい場合`@_maxValue`にセットすると良い。

### @superClass
[tm.display.CanvasElement](#canvaselement)

### @animationFlag
アニメーションさせるか。
trueかfalseで`changed, empty, full`の発生タイミングが変わる。
タイミングはアニメーションが完了したときとなる。
アニメーションしない場合は変更後条件を満たしていれば必ず発生する。
MOTHERシリーズを思い出す。
アニメーションさせるとき変動中に再度、値をセットするとその時点から計算されてしまう。
これにより、アニメーションの有無で、
連続的なダメージを与えるときの最終的な結果が変わってしまう。
`@value`getterを上書きすることで対処。

```js

tm.ui.Gauge.prototype.accessor("value", {
    get: function() {
        return this._realValue == null ? (this._realValue = this._value) : this._realValue;
    },
    set: function(v) {
        this.setValue(v);
    },
});

```

### @animationTime
アニメーションにかかる時間。
ゲージが最大から空になるまでに何ミリ秒かけるか。
変動速度は一定。
10000をセットすると100%から0%になるとき10秒かかる。
同じ条件で100%から90%になる時は1秒かかる。
この時間はfpsに依存しない。

### @(param)
param

```js
param = {


  //幅
  width: 300,
  
  //高さ
  height: 25,
  
  //ゲージがある場所の色
  color: "hsl(220, 100%, 50%)",
  
  //ゲージが削られているところの色(背景)
  bgColor: "#444",
  
  //ゲージの枠の色
  borderColor: "white",
  
  //ゲージの枠線の太さ
  borderWidth: 4,
  
}
```

#### ex
[runstant](http://goo.gl/6Xn8nm)



### @isFull()
最大か

### @isEmpty()
空か

### @_reset(direction)
めちゃくちゃ急ぎで書いたみたいなリセット(笑)
directionは未使用。何を想定して用意したのかも推測できない。
`@originX = 0`
`@_value = 100`(ここいらない)
`@_value = @_maxValue = 100`

### @setValue(value)
valueをセットする。
valueが現在の値と同じ場合はchangeイベントまで行かずにreturn

### @getValue()
`@value`

### @setPercent(percent)
百分率
パーセントでセット

### @getPercent()
パーセントでゲット

### @setRatio(ratio)
比率でセット
パーセントの100倍しない版
`@setRatio(1) === @setPercent(100)`

### @getRatio()
比率でゲット

### @isAnimation()
`===@animationFlag`

### accessor

### @value
現在の値

### @percent
現在の値をパーセントで表現したもの

### @ratio
現在の値を比率で表現したもの

## ..FlatGauge
フラットデザインなゲージ
使い方は[..Gauge](#gauge)と全く同じでデザインが変わるだけ

### ex
[runstant](http://goo.gl/YMt0ID)


### @superClass
[tm.ui.Gauge](#gauge)

## ..GlossyGauge
つやつやな感じのゲージ
使い方は[..Gauge](#gauge)と全く同じでデザインが変わるだけ

### ex
[runstant](http://goo.gl/R9VHVV)


### @superClass
[tm.ui.Gauge](#gauge)


## ..LabelArea
ラベルエリア
テキストエリア
htmlのtextareaみたいな使い方ができそうなクラス
描画の実装は[.graphics.Canvas](#canvas)で書いてある。
自動的に改行したいときや縦書きがしたいとき、使える。
自動改行

### ex
[runstant](http://goo.gl/iW2sUT)


### @superClass
[tm.display.Shape](#shape)

# .game
line 17417
ゲーム
ゲームを作ることに特化したクラス群

[TitleScene](#titlescene)
[ResultScene](#resultscene)
[LoadingScene](#loadingscene)
[SplashScene](#splashscene)
[ManagerScene](#managerscene)
[NumericalInputScene](#numericalinputscene)
[CountScene](#countscene)

## ..setup(param)
簡単なゲームを作成するためのセットアップを行う。
`tm.globalize()`される。
`param`は`tm.game.expand`に渡される。

`param`は次のフォーマット

```js

//name: デフォルトの値, 
{
  //htmlに書いてあるcanvasタグのid
  query: "#world",
  
  //ゲームのタイトル
  title: "Title",
  
  //背景色
  background: "rgba(250, 250, 250, 1.0)",
  
  //SCREEN_WIDTH
  width: 640,
  
  //SCREEN_HEIGHT
  height: 960,
  
  //開始するシーンのラベル
  startLabel: 'title',
  
  //fitするか
  fitting: true,
  
  //更新頻度 frame per second.
  fps: 30,
  
  //素材
  assets: window.ASSETS || null,

}

```

## ..expand(param)
`param`は次のフォーマット

```js

{
  SCREEN_WIDTH: param.width,
  SCREEN_HEIGHT: param.height,
  SCREEN_CENTER_X: param.width/2,
  SCREEN_CENTER_Y: param.height/2,
  SCREEN_GRID_X: GridSystem(param.width, 16),
  SCREEN_GRID_Y: GridSystem(param.height, 16),
  
  //URLの?から始まる文字列
  QUERY: tm.util.QueryString.parse(location.search.substr(1)),
}

```


## ..TitleScene
タイトル画面が簡単に作れる

### @superClass
[tm.app.Scene](#scene)

### @(param)
`param`を元に初期化
フォーマット値はデフォルト

```js
{
    title: "Time is money",
    message: "",
    fontSize: 72,
    fontColor: "#444",
    width: 640,
    height: 960,
    bgColor: "rgb(240,240,240)",
    bgImage: null,
    autopop: true,
}

```

## ..ResultScene
リザルト画面が簡単に作れる

### @superClass
[tm.app.Scene](#scene)

### @(param)
paramを元に初期化
フォーマット及びデフォルトの値

```js
{
    score: 0,
    message: "this is tmlib.js project.",
    hashtags: "tmlibjs,game",
    related: "tmlib.js tmlife javascript",
    url: "http://phi-jp.github.io/tmlib.js/",

    width: 640,
    height: 960,
    fontColor: "#444",
    fontSize: 90,
    bgColor: "rgba(255,255,255, 0.9)",
    bgImage: null,
    record: true,
    autopop: true,
}

```

## ..LoadingScene
line 17878
ローディングシーン
ロード画面が簡単に作れる
簡単にアセットが読み込める。
よく使う。


### @superClass
[tm.app.Scene](#scene)

### @(param)

```js
{
  width: 465,
  height: 465,
  bgColor: "transparent",
  
  //読み込む素材のパスのオブジェクト
  assets: undefined,
  
  //ロード終了後に遷移するシーンのクラス(インスタンスではない)
  nextScene: undefined,
  
  //?
  autopop: undefined,
  
}

```

## SplashScene
なぜかグローバル
tmlibのスプラッシュを表示するシーン。

### @superClass
[tm.app.Scene](#scene)

## ..ManagerScene
line 18125
シーンを管理するシーン
第二のappみたいな感じ。

### @superClass
[tm.app.Scene](#scene)

### 詳しい人に任せます。


## ..NumericalInputScene
?

### @superClass
[tm.app.Scene](#scene)


## ..CountScene
カウントアップ、カウントダウン
コンティニューとかReady? ... Go!みたいなシーン


### @superClass
[tm.app.Scene](#scene)

# .three
line 18442
three.js対応用のシーン

3Dライブラリ
WEBGLライブラリ

飛ばします


# .sound
line 18896
音

[Sound](#sound-1)
[WebAudio](#webaudio)
[SoundManager](#soundmanager)


## ..globalVolume
`1.0`

## ..Sound
サウンドクラス
音
Audio
audioタグで音の再生など

飛ばします。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)



## ..WebAudio
line 19069
WebAudioを扱うクラス
WebAudioについて勉強するとかなり使いこなせるかもしれない。


### @superClass
[tm.event.EventDispatcher](#eventdispatcher)

### @loaded

### @context
`AudioContext`

### @panner
パンナー
パン
音の位置

### @volume
ボリューム
音量
1で100%

### @playing
再生中か


### @_pannerEnabled


### @(src_or_buffer)
srcかbufferを渡す
bufferなら即時ロード完了、再生可能な状態になる。
loadも発火する。

srcなら`@_load(src)`

### @play(time)
再生
timeは何秒後に再生するか指定。
省略で即時再生。
再生が終了すると、endedイベントが発火するが、
setTimeoutによる指定なので、精度は低い。

### @stop(time)
停止
timeは何秒後に停止するか指定。
省略で即時停止。


### @pause()
ポーズ
一時停止
`@source.disconnect()`

### @resume()
レジューム
`@pause`からの復帰?


### @clone()
複製
`@(@buffer).setVolume(@volume)`

### @setPosition(x, y, z)
パンナーの位置セット


### @setVelocity(x, y, z)
パンナーのヴェロシティ
`@panner.setVelocity(x, y || 0, z || 0)`

### @setOrientation(x, y, z)
パンナーのOrientation
`@panner.setOrientation(x, y || 0, z || 0)`


### @setBuffer(buffer)
バッファをセット

### @setLoop(v)
ループをセット

### @setVolume(v)
ボリューム

### @setPlaybackRate(v)
プレイバックレート

### @_load(src)
srcのURLからAjaxでarraybufferを読み込んで、デコードする。

### @_setup()


### @tone(hertz, seconds)
トーンを生成して`@buffer`にセットする。
hertzはヘルツ,周波数 デフォで200
secondsは秒数 デフォ1
チャンネル(1)やサンプルレート(44100)は今のところカッコの値で固定。

### @accessor

### @buffer
バッファ
`@source.buffer`

### @loop
ループフラグ
`@source.loop`

### @volume
ボリューム
音量
`@gainNode.gain.value`

### @playbackRate
プレイバックレート
`@source.playbackRate.value`

### @pannerEnabled
panner有効

### @loopStart
ループ開始位置(秒)
`@source.loopStart`

### @loopEnd
ループ終了位置(秒)
`@source.loopEnd`


### static

### /isAvailable
WebAudioが使用可能か
AudioContextの存在チェックをしている。

### /createContext()
AudioContextを生成し`/context`にセット
tmlibで一度実行しているので、通常使わない。

### /unlock()
iOSでWebAudioを使う場合、再生されない対策。
タッチイベントでこの関数を実行すると、再生可能な状態となる。
iPhoneなどで音が出るゲームを作るときはこいつが活きる。



## ..SoundManager
line 19449
音の管理
WebAudioの管理オブジェクト
作りかけのような状態だが、ほぼ普通に使える。

### /volume
`0.8`
効果音の音量をセットしておけば、`/play`でセットしてくれる。

### /musicVolume
BGMの音量をセットしておけば、`/playMusic`でセットしてくれる。

### /muteFlag
ミュートか

### /currentMusic
今のBGMは何か

### /play(name, volume, startTime, loop)
効果音の再生
nameは`tm.asset.Manager.get(name)`に渡す

volume, startTime, loopは未使用。

### /stop()
未実装

### /pause()
未実装

### /fade()
未実装

### /setVolume(volume)
`/volume = volume`

### /getVolume()
ミュートでなければ`/volume`を返す。

### /mute()
ミュート
消音
トグル式
`/muteFlag = !/muteFlag`
BGMの音量をセットしなおす

### /isMute()
`===/muteFlag`

### /playMusic(name, fadeTime, loop)
BGMを再生する。
いま再生しているものがあれば、`/stopMusic(fadeTime)`
nameはアセットのname
fadeTimeは再生のフェードイン及び停止のフェードアウト
クロスフェード

loopは未使用
おそらく`music.setLoop(loop === undefined || loop)`するつもりだったのを忘れている。

### /stopMusic(fadeTime)
音楽を停止
fadeTimeはフェードアウトして停止する時間を指定。
省略すると即時停止する。

### /pauseMusic()
音楽を一時停止

### /resumeMusic()
音楽を再開

### /setVolumeMusic(volume)
音楽のボリュームを設定
`/musicVolume`と今再生している音楽に設定

### /getVolumeMusic()
ミュートじゃないなら`/musicVolume`を返す。

# ..social
line 19623
ソーシャル
SNSや、その他WEBサイトのAPIなどが簡単に使えるようしてる。

[Twitter](#twitter)
[Nineleap](#nineleap)

## ..Twitter
Twitter関連のネームスペース

### /createURL(prop)
ツイートする
propはこういうの

```js
{
    type        : "tweet",              // タイプ(tweet/retweet/favorite/user)
    tweet_id    : "210219483959263232", // 対象となる Tweet
    in_reply_to : "210219483959263232", // 返信する対象となる Tweet
    text        : "Test",               // テキスト
    screen_name : "phi_jp",             // スクリーンネーム
    hashtags    : "javascript,tmlibjs", // ハッシュタグ
    url         : "http://tmlife.net",  // url
    via         : "phi_jp",             // ～から
    related     : "tmlib.js tmlife",    // 関連ワード
}

```

### /api(type, kind, param, callback)
TwitterAPI

### /search(param, callback)
検索結果をJSONPで
paramはクエリ文字列に渡すものをオブジェクトで


### /getFollowers(param, callback)
フォロワ取得
`tm.social.Twitter.api("statuses", "followers", param, callback)`

```js

param = {
  //ユーザID
  user_id : ,
  screen_name : ,
  
  //-1 を指定すると先頭から 100
  cursor : ,
  
  //trueでentitiesを取得できる
  include_entities

}

```

## ..Nineleap
line 19794
9leap 関連のネームスペース
9leap api


### /DEBUG_GAME_ID
`0`

### /createURL(id, score, result)
9leap でランキングをPOST
ゲーム終了時に使う

### /gotoLogin()
9leap ログインページへ

### /isOn9leap()
9leap上にデプロイされているか

### /getGameId()
URLからゲームIDを取得
9leap上にデプロイされてなければ`/DEBUG_GAME_ID`

### /getMyData(callback)
プレイヤーのゲームデータ取得
JSONP

### /postMyData(data, callback)
プレイヤーのゲームデータを保存する

### /createMemoryURL([args])
9leap Memory API へアクセスするURLを生成

### /createMyDataURL()
user_memory.json

### /createUserDataURL(screenName)
他のユーザのプレイデータURLを生成

### /createRecentDataURL(max)
最近プレイしたユーザのプレイデータURLを生成

### /createFriendDataURL(max)
TwitterでフォローしているユーザのプレイデータURLを生成

### /createRankingDataURL(max)
スコアランキング上位のユーザのプレイデータURLを生成

# .google
line 19960
googleのAPIを扱うネームスペース

## ..Chart
チャート


# その他
旧仕様の機能に対して、
互換性を保ったり、
注意、警告を出し、新仕様に順応していくように促進。

## tm.app.Element.prototype.getter('interaction')
使用すると注意される。

## 一部クラスを.appに
これらのクラスは `tm.app`ネームスペースからもアクセスできます。

`tm.display`
[Sprite](#sprite)
[Shape](#shape)
[CircleShape](#circleshape)
[TriangleShape](#triangleshape)
[RectangleShape](#rectangleshape)
[RoundRectangleShape](#roundrectangleshape)
[StarShape](#starshape)
[PolygonShape](#polygonshape)
[HeartShape](#heartshape)
[TextShape](#textshape)
[CanvasRenderer](#canvasrenderer)
[BoundingRectRenderer](#boundingrectrenderer)
[Label](#label)
[MapSprite](#mapsprite)
[CanvasElement](#canvaselement)
[CanvasApp](#canvasapp)
[AnimationSprite](#animationsprite)
[SpriteSheet](#spritesheet)

`tm.ui`
[LabelButton](#labelbutton)
[IconButton](#iconbutton)
[GlossyButton](#glossybutton)
[FlatButton](#flatbutton)
[LoadingScene](#loadingscene)


## tm.asset.AssetManager
`===tm.asset.Manager`

## .scene
シーン
tm.scene.ManagerScene = tm.game.ManagerScene;
tm.scene.LoadingScene = tm.game.LoadingScene;
tm.scene.TitleScene = tm.game.TitleScene;
tm.scene.ResultScene = tm.game.ResultScene;
tm.scene.NumericalInputScene = tm.game.NumericalInputScene;