JavaScript
HTML5
canvas
tmlib.js
ゲーム制作

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

More than 3 years have passed since last update.


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;