LoginSignup
22

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-13

phina.js

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

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

_

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

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

サンプルだけ

サンプルだけ見たい時はこちらへどうぞ
[tmlib.js] 関数やクラスのサンプル

目次

tm
event
util
geom
collision
dom
asset
input
graphics
anim
app
display
ui
game
three
sound
social
google

追記履歴

2015/07/16

superClass(継承)を分かりやすくした。
サンプル追加。
サンプルだけのページへのリンクを追加。

注意書きなど

tmlib.js のバージョンは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に書きます。


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

Objectなどの拡張

high.jsによる拡張は別で書きます。

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

.global

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

.VERSION

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

.LIB_ROOT

.BROWSER

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

.VENDER_PREFIX

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

.isMobile

モバイルかどうか

.isLocal

プロトコルがfile:かどうか。

.createClass

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

ex


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


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

間違ってるかも


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

.using

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

ex


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

.globalize

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

.import

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

ex

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

.setLoop

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

ex


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

.inform

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

ex

runstant

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

.main

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

.event

line 1687

Event
TweenEvent
TouchEvent
PointingEvent
EventDispatcher

..Event

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

@superClass

null

@type

イベントのタイプ

@(type)

イベントのタイプをセット

..TweenEvent

@superClass

..Event

@(type, time, now)

static

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

..MouseEvent

@superClass

..Event

@(type, app, pointing)

..TouchEvent

@superClass

..Event

@(type, app, pointing)

..PointingEvent

@superClass

..Event

@(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
Ajax
File
Timeline
DataManager
QueryString
Type
Flow
GridSystem

..Random

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

..Ajax

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

/load(params)

paramsはこれを参考に

    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

loadparamsの説明で出てきたオブジェクト

..File

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

@superClass

tm.event.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

@(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
Vector3
Matrix33
Matrix44
Rect
Circle

..Vector2

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

@(x, y)

@set(x, y)

@clone()

複製。

@equals(v)

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

@equalsNumber(x, y)

@equalsの引数がオブジェクトじゃなくて、Number2つになっただけ

@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

@setRadian(radian, len)

@setAngleがラジアンになったようなもの。

ex

runstant

@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=0n=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の2乗
これで済むなら略

@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
Loader
SpriteSheet
MapSheet
Texture
Font
Script

..Manager

アセット管理オブジェクト

/assets

アセット管理用のオブジェクト
{}

/get(key)

アセットを返します。
return /assets[key]

/set(key, asset)

アセットのセット
/assets[key] = asset

/contains(key)

return !!/assets[key]

..Loader

アセットローダー

@superClass

tm.event.EventDispatcher

@assets

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

@()

@contains(key)

存在確認
return !!@assets[key]

@load(arg)

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


//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)

@loadkey, 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

@element

Imageクラス

@loaded

ロード済みか

@(src)

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

@getElement()

===@element

getter

@width

@element.width

@height

@element.height

..SpriteSheet

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

@superClass

tm.event.EventDispatcher

@(src)

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

@load(path)

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

@parse(param)

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


{
  //読み込んだ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

..Font

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

@superClass

tm.event.EventDispatcher

..Script

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

@superClass

tm.event.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
Mouse
Touch
Touches

..Keyboard

tm.display.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
Canvas
Bitmap
MonochromeFilter
ReverseFilter
BlurFilter
ToonFilter
ColorMatrixFilter
Canvas.prototype.setGradient(gradient)
LinearGradient
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

@beginPath()

パス開始(リセット)

@closePath()

パスを閉じる

@moveTo(x, y)

新しいパスを生成

@lineTo(x, y)

パスに追加(つなげる)

@fill()

パス内を塗りつぶす。

@stroke()

パス上に線を引く

@clip()

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

ex

runstant

@drawPoint(x, y)

点描画
1*1px

@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

@drawDashLine(x0, y0, x1, y1, pattern)

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

ex

runstant

@drawArrow(x0, y0, x1, y1, arrowRadius)

矢印を描画
arrowRadiusは頭のデカさ

ex

runstant

@lines([args])

直線複数のパスを生成。
偶数個の引数を渡す。

@strokeLines([args])

複数パス指定して、直線をいくつか引く

ex

runstant

@fillLines([args])

複数パスを指定して、引かれたパスを塗りつぶす。

ex

runstant

@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

@strokeRoundRect(x, y, width, height, radius)

角丸四角形の線を引く。

ex

runstant

@polygon(x, y, size, sides, offsetAngle)

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

@fillPolygon(x, y, size, sides, offsetAngle)

ポリゴン塗りつぶし

ex

runstant

@strokePolygon(x, y, size, sides, offsetAngle)

ポリゴン線を引く

ex

runstant

@star(x, y, radius, sides, sideIndent, offsetAngle)

星のパスを生成
radiusは半径
sidesはトゲの数
sideIndentはトゲの分厚さ?
offsetAngleが回転

@fillStar(x, y, radius, sides, sideIndent, offsetAngle)

星を塗りつぶす。

ex

runstant

@strokeStar(x, y, radius, sides, sideIndent, offsetAngle)

星の線を引く

ex

runstant

@heart(x, y, radius, angle)

ハートマークパスを生成
angleはトガリ具合
angle180以上やマイナスにすると謎の図形が出来上がる。

@fillHeart(x, y, radius, angle)

ハート塗りつぶし

ex

runstant

@strokeHeart(x, y, radius, angle)

ハートの線

ex

runstant

@circle(x, y, radius)

円のパス

@fillCircle(x, y, radius)

塗りつぶしの円

ex

runstant

@strokeCircle(x, y, radius)

円の線

ex

runstant

@arc(x, y, radius, startAngle, endAngle, anticlockwise)

円弧のパス
startAngleから始まって、endAngleで終わる。
angleはradianなので注意
anticlockwiseは時計回りか反時計回りかtrue || false

@fillArc(x, y, radius, startAngle, endAngle, anticlockwise)

塗りつぶし円弧

ex

runstant

@strokeArc(x, y, radius, startAngle, endAngle, anticlockwise)

円弧の線

ex

runstant

@triangle(x0, y0, x1, y1, x2, y2)

三角形のパスを生成

@fillTriangle(x0, y0, x1, y1, x2, y2)

塗りつぶし三角形

ex

runstant

@strokeTriangle(x0, y0, x1, y1, x2, y2)

三角形の線

ex

runstant

@fillText(text, x, y)

塗りつぶしテキスト

ex

runstant

@strokeText(text, x, y)

枠線だけのテキスト

ex

runstant

@fillVerticalText(text, x, y)

縦に塗りつぶしテキスト

ex

runstant

@strokeVerticalText(text, x, y)

縦に枠線だけテキスト

ex

runstant

@_drawVerticalText(func, text, x, y)

上二つのメソッドで使います。

@_drawLabelArea(func, param)

tm.ui.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

@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

imageSmoothingEnabledwebkitmozの方もセット

..Bitmap

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

また今度

..MonochromeFilter

モノクロフィルタ

..ReverseFilter

リバースフィルタ
反転

..BlurFilter

ブラーフィルタ
ぼかし

..ToonFilter

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

..ColorMatrixFilter

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

..Canvas.prototype.setGradient(gradient)

グラデーションをセット
gradient = ..LinearGradient || ..RadialGradient

..LinearGradient

線形グラデーション

..RadialGradient

円形グラデーション

.anim

line 11207
Tween
easing

..Tween

アニメーションクラス

@superClass

tm.event.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
Updater
BaseApp
Element
Object2D
Grid
Scene
Collision
Tweener
Timeline

..Timer

タイマー

飛ばします

..Updater

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

..BaseApp

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

@superClass

tm.event.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()loadイベントで実行すれば確実。

ex

runstant

@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

@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

@position

位置
.geom.Vector2

@scale

拡大縮小
.geom.Vector2

@rotation

回転

@awake

動いてるか

@_width

@_height

高さ

@()

@getFinalMatrix()

最終的な行列を取得

@isHitPoint(x, y)

点と衝突しているか

ex

runstant

@isHitPointCircle(x, y)

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

ex

runstant

@isHitPointRect(x, y)

矩形としてヒットしているか

ex

runstant

@isHitPointCircleHierarchy(x, y)

階層を考慮した円衝突判定

@isHitPointRectHierarchy(x, y)

階層を考慮した矩形衝突判定

@isHitElement(elm)

要素と衝突しているか。

ex

runstant

@isHitElementCircle(elm)

要素で円同士の衝突判定

ex

runstant

@isHitElementRect(elm)

要素で矩形同士の当たり判定

ex

runstant

@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

@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

..Scene

line 13310
シーン

@superClass

tm.app.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

@(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

.display

line 14234
表示物
CanvasApp
CanvasElement
Sprite
Shape
CircleShape
TriangleShape
RectangleShape
RoundRectangleShape
StarShape
PolygonShape
HeartShape
TextShape
Label
AnimationSprite
MapSprite
CanvasRenderer
BoundingRectRenderer

..CanvasApp

tmlibでゲーム作るときよく出てくるappはこれ
.app.BaseAppもあわせて覚えると良い

@superClass

tm.app.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, ..Shapeの元

@superClass

tm.app.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

@(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で描画できる図形がサブクラスに一通り実装されている。

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

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

@superClass

tm.display.CanvasElement

..CircleShape

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

{
  //radiusを基準に描画サイズが決まるわけではない
  radius: 25,

  //直径を指定する
  width: 50,
  height: 50,
}

@superClass

tm.display.Shape

..TriangleShape

三角形

@superClass

tm.display.Shape

..RectangleShape

四角形

@superClass

tm.display.Shape

..RoundRectangleShape

角が丸まった四角形
角丸

@superClass

tm.display.Shape

..StarShape

@superClass

tm.display.Shape

..PolygonShape

ポリゴン

@superClass

tm.display.Shape

..HeartShape

ハート

@superClass

tm.display.Shape

..TextShape

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

@superClass

tm.display.Shape

..Label

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

@superClass

tm.display.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

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

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

..AnimationSprite

line 15591
アニメーションスプライト
スプライトシートをセットして使う。
.asset.SpriteSheet

@superClass

tm.display.CanvasElement

@(ss, width, height)

ssはスプライトシート名かスプライトシートそのもの

@draw(canvas)

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

@gotoAndPlay(name)

nameのアニメーションを再生する。
@pausedfalseをセットしている。

@gotoAndStop(name)

nameのアニメーションを再生する。
@pausedtrueをセットしている。

..MapSprite

マップスプライト
マップ描画
.asset.MapSheetをセットして使う

@superClass

tm.display.CanvasElement

..CanvasRenderer

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

..BoundingRectRenderer

バウンディングレクトレンダラ

@superClass

tm.display.CanvasRenderer

.ui

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

Pad
BaseButton
SpriteButton
LabelButton
IconButton
GlossyButton
FlatButton
MenuDialog
Sketch
Gauge
FlatGauge
GlossyGauge
LabelArea

..Pad

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

@superClass

tm.display.Shape

@()

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

ex

runstant

@isTouching

タッチしてるか

@circle

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

..BaseButton

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

@superClass

tm.display.CanvasElement

..SpriteButton

画像でボタン

@superClass

tm.ui.BaseButton

@(image)

Spriteの引数に渡すimage

ex

runstant

..LabelButton

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

@superClass

tm.display.Label

@(text)

textは表示文字

ex

runstant

/DEFAULT_ALPHA

0.5
ほわり具合

..IconButton

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

@superClass

tm.display.Sprite

@([args])

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

ex

runstant

..GlossyButton

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

@superClass

tm.display.Shape

@(width, height, backgroundColor, text)

textまで指定できる。

ex

runstant

..FlatButton

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

@superClass

tm.ui.BaseButton

@(param)

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 Pゴシック', 'MS PGothic', sans-serif",
    };

ex

runstant

..MenuDialog

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

@superClass

tm.app.Scene

@titleText

タイトルに表示する文字

@menu

メニュー名配列

@descriptions

メニュー詳細配列

/** @type {boolean} exit の表示/非表示 */

@showExit

exitを表示するか
多分exitでpopSceneする

@title

タイトルのtm.display.Label

@selections

..LabelButtonの配列

@description

詳細のラベル配列

@box

@cursor

選択枠

@(params)

右側は設定例で、デフォルトの値ではない。

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

サンプルは正常に動かないが、一応書いてみた。

ex

runstant

..Sketch

line 16814
色が塗れるShape

@superClass

tm.display.Shape

@(param)

サンプルどうぞ

ex

runstant

@clear()

画面を@bgColorでクリア

accessor

@penColor

ペンの色

@bgColor

背景色

@lineWidth

ペンの太さ

..Gauge

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

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

@superClass

tm.display.CanvasElement

@animationFlag

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


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

param = {


  //幅
  width: 300,

  //高さ
  height: 25,

  //ゲージがある場所の色
  color: "hsl(220, 100%, 50%)",

  //ゲージが削られているところの色(背景)
  bgColor: "#444",

  //ゲージの枠の色
  borderColor: "white",

  //ゲージの枠線の太さ
  borderWidth: 4,

}

ex

runstant

@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と全く同じでデザインが変わるだけ

ex

runstant

@superClass

tm.ui.Gauge

..GlossyGauge

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

ex

runstant

@superClass

tm.ui.Gauge

..LabelArea

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

ex

runstant

@superClass

tm.display.Shape

.game

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

TitleScene
ResultScene
LoadingScene
SplashScene
ManagerScene
NumericalInputScene
CountScene

..setup(param)

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

paramは次のフォーマット


//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は次のフォーマット


{
  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

@(param)

paramを元に初期化
フォーマット値はデフォルト

{
    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

@(param)

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

{
    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

@(param)

{
  width: 465,
  height: 465,
  bgColor: "transparent",

  //読み込む素材のパスのオブジェクト
  assets: undefined,

  //ロード終了後に遷移するシーンのクラス(インスタンスではない)
  nextScene: undefined,

  //?
  autopop: undefined,

}

SplashScene

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

@superClass

tm.app.Scene

..ManagerScene

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

@superClass

tm.app.Scene

詳しい人に任せます。

..NumericalInputScene

?

@superClass

tm.app.Scene

..CountScene

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

@superClass

tm.app.Scene

.three

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

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

飛ばします

.sound

line 18896

Sound
WebAudio
SoundManager

..globalVolume

1.0

..Sound

サウンドクラス

Audio
audioタグで音の再生など

飛ばします。

@superClass

tm.event.EventDispatcher

..WebAudio

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

@superClass

tm.event.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
Nineleap

..Twitter

Twitter関連のネームスペース

/createURL(prop)

ツイートする
propはこういうの

{
    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)


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
Shape
CircleShape
TriangleShape
RectangleShape
RoundRectangleShape
StarShape
PolygonShape
HeartShape
TextShape
CanvasRenderer
BoundingRectRenderer
Label
MapSprite
CanvasElement
CanvasApp
AnimationSprite
SpriteSheet

tm.ui
LabelButton
IconButton
GlossyButton
FlatButton
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;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22