More than 5 years have passed since last update.

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

Last updated at 2016-04-17Posted at 2015-07-13

phina.js

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

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

_

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

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

サンプルだけ

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

追記履歴

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')はほぼ同じ

@(type)

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

..TweenEvent

@(type, time, now)

static

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

..MouseEvent

@(type, app, pointing)

..TouchEvent

@(type, app, pointing)

..PointingEvent

@(type, app, pointing)

..EventDispatcher

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

@()

@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するイベントリスナ追加

@addEventListener(type, listener)

===@on

@removeEventListener(type, listener)

===@off

.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

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

..File

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

@load(params)

ロード

..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
多分、ファイルのロードとかの進捗がわかるようになるクラス

@(waits, callback)

@setup

@setup(waits, callback)

セットアップ

@pass(key, value)

..GridSystem

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

@(width, col)

幅と列数を指定して、何かする。

@span(index)

スキマ?

.geom

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

Vector2
Vector3
Matrix33
Matrix44
Rect
Circle

..Vector2

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

@(x, y)

@set(x, y)

@equalsNumber(x, y)

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

@set(x, y)

@[=x, =y]

@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する

@div(n)

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

@toAngle()

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

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]

飛ばします

..Matrix33

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

@m

マトリックスの配列

@([args*9])

引数に9個以上あれば、@set
なければ@identity

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

飛ばします

..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]

@padding(top, right, bottom, left)

縮める。内側にググッと。
引数はCSS的に
1つなら全てにセット
2つなら上下、左右
3つなら上、左右、下
4つなら上、右、下、左

@toCircle()

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

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

accessor

@left

左辺の位置を弄るのに使う

get

@x

set

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

@top

上辺の位置を移動させる

get

@y

set

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

..Circle

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

@(x, y, radius)

==@set

@set(x, y, radius)

@[= x, y, radius]

@move(x, y)

移動
@[=x, y]

getter

.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

アセットローダー

@()

@get(key)

keyにひもづいたアセットをゲット
@assets[key]

@set(key, asset)

セットする
単にセットするだけに見せかけて、..Manager.assetsにもセットする。

@_load(key, path, type)

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

@_loadString(key, path, type)

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

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

@_loadByObject(hash)

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

static

/_funcs

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

/register(type, func)

拡張子ごとのロード用関数を登録する

登録されている拡張子

画像

png
gif
jpg
jpeg

音

その他

json
tmx
tmss
js

フォント

ttf
otf
wotf
wotf2

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

..Texture

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

@(src)

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

getter

..SpriteSheet

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

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

@_calcAnim(animations)

@parseで使う

..MapSheet

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

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

..Font

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

..Script

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

@(src)

srcのjsファイルを読み込む。
srcはURL

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)

自動更新

@getKey(key)

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

@getKeyDown(key)

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

@getKeyAngle()

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

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

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

@getKeyDirection()

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

@setKey(key, flag)

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

..Mouse

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

@(element)

@run(fps)

自動更新

@getButton(button)

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

@getPointing()

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

static

/BUTTON_LEFT

0x1

/BUTTON_MIDDLE

0x2

/BUTTON_RIGHT

0x4

accessor

@x

マウス座標のx

@y

マウス座標のy

..Touch

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

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

@(element)

@run(fps)

自動更新

accessor

@x

タッチ座標のx

@y

タッチ座標のy

..Touches

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

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

@(elm, length)

..Accelerometer

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

@(element)

@gravity

重力センサー
これはよく使うと思います。
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

@setFromObject(obj)

オブジェクトでセット
{r:255, g:255, b:255, a: 0.5}

@setFromString(str)

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

@toStyleAsRGBA()

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

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の使い方とほぼ同じなので、
それを覚えれば使いこなせると思います。

@(canvas)

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

@resize(width, height)

リサイズ
@canvasタグの属性にセット

@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

@clip()

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

ex

runstant

@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])

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

@rect(x, y, width, height)

四角形パスを生成

@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

@strokeVerticalText(text, x, y)

縦に枠線だけテキスト

ex

runstant

@_drawVerticalText(func, text, x, y)

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

@_drawLabelArea(func, param)

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

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

@transform(m11, m12, m21, m22, dx, dy)

行列を掛ける

@rotate(rotation)

回転

@scale(scaleX, scaleY)

拡大縮小

@saveAsImage(mime_type)

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

ex

runstant

@setCompositing(alpha, compositeOperation)

alpha とbrendModeを同時にセット
未実装

@setText(font, align, baseline)

引数のそれをセット

@setLineStyle(width, cap, join, miter)

ラインのスタイルを一括セット
引数通りの

@setShadow(color, offsetX, offsetY, blur)

影をセット
引数の

static

/MIME_TYPE_PNG

'image/png'

/MIME_TYPE_JPG

'image/jpeg'

/MIME_TYPE_SVG

'image/svg+xml'

accessor

set

imageSmoothingEnabledとwebkitとmozの方もセット

..Bitmap

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

また今度

..MonochromeFilter

モノクロフィルタ

..ReverseFilter

リバースフィルタ
反転

..BlurFilter

ブラーフィルタ
ぼかし

..ToonFilter

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

..ColorMatrixFilter

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

..Canvas.prototype.setGradient(gradient)

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

..LinearGradient

線形グラデーション

..RadialGradient

円形グラデーション

.anim

line 11207
Tween
easing

..Tween

アニメーションクラス

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

..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で使えるメソッドが多く含まれる。

@pointing

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

@(elm)

@enableStats()

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

ex

runstant

stop()

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

accessor

.app.Element

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

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

@()

@addChildAt(child, index)

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

@removeChildren(beginIndex)

beginIndex デフォルト 0
beginIndexから最後までのchildrenを全てremove

@execChildren(func, args)

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

..Object2D

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

@()

@isHitPointCircle(x, y)

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

ex

runstant

@isHitPointCircleHierarchy(x, y)

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

@isHitPointRectHierarchy(x, y)

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

@setSize(width, height)

width,heightセット

@setInteractive(flag, type)

タッチ判定の有効無効セット
typeは'rect' || 'circle'省略可

accessor

@x

@position.x

@y

@position.y

..Grid

line 13253
Grid

..Scene

line 13310
シーン

@()

@exit(param)

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

.app.Collision

衝突管理クラス

..Tweener

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

@(elm)

elmはアニメーションさせるtarget

@update(app)

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

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

@wait(time)

timeはミリ秒
何もしないアニメーション
待機

@call(fn, self, args)

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

@set(key, value)

..Element.prototype.tweener

この要素を@setTarget()したtweenerを返す

.app.Timeline

line 13929
タイムライン

.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もあわせて覚えると良い

@(canvas)

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

@resize(width, height)

@element[=width, =height]

accessor

..CanvasElement

.app.Object2Dにキャンバスの描画系を追加したもの
..Sprite, ..Shapeの元

@blendMode

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

@()

@load(data)

..Sprite

line 14667
画像の描画

@(image, width, height)

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

@setImage(image, width, height)

画像をセット
@()だいたい一緒

@setFrameIndex(index, width, height)

画像を切り替えてアニメーションするようなときに使う

accessor

@frameIndex

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

set
==@setFrameIndex

..Shape

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

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

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

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

..CircleShape

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

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

..TriangleShape

三角形

..RectangleShape

四角形

..RoundRectangleShape

角が丸まった四角形
角丸

..StarShape

星

..PolygonShape

ポリゴン

..HeartShape

ハート

..TextShape

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

..Label

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

@(text, size)

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

accessor

@text

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

/default

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

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

..AnimationSprite

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

@(ss, width, height)

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

@draw(canvas)

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

@gotoAndPlay(name)

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

@gotoAndStop(name)

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

..MapSprite

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

..CanvasRenderer

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

..BoundingRectRenderer

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

.ui

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

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

..Pad

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

@()

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

ex

runstant

@circle

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

..BaseButton

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

..SpriteButton

画像でボタン

@(image)

Spriteの引数に渡すimage

ex

runstant

..LabelButton

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

@(text)

textは表示文字

ex

runstant

/DEFAULT_ALPHA

0.5
ほわり具合

..IconButton

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

@([args])

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

ex

runstant

..GlossyButton

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

@(width, height, backgroundColor, text)

textまで指定できる。

ex

runstant

..FlatButton

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

@(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 PGothic', sans-serif",
    };

ex

runstant

..MenuDialog

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

@descriptions

メニュー詳細配列

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

@(params)

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

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

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

ex

runstant

..Sketch

line 16814
色が塗れるShape

@(param)

サンプルどうぞ

ex

runstant

accessor

..Gauge

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

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

アニメーションさせるか。
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()される。
paramはtm.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;

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

phina.js

_

サンプルだけ

目次

追記履歴

2015/07/16

注意書きなど

.ns

..Test

メンバ

コンストラクタ

インスタンスメンバ

static

ex

Objectなどの拡張

.global

.VERSION

.LIB_ROOT

.BROWSER

.VENDER_PREFIX

.isMobile

.isLocal

.createClass

ex

.classes

.define

ex

.namespace

ex

.using

ex

.globalize

.import

ex

.setLoop

ex

.inform

ex

.main

.event

..Event

@(type)

..TweenEvent

@(type, time, now)

static

..MouseEvent

@(type, app, pointing)

..TouchEvent

@(type, app, pointing)

..PointingEvent

@(type, app, pointing)

..EventDispatcher

@()

@on(type, listener)

@off(type, listener)

@fire(e)

@flare(eventName, param)

@one(type, listener)

@hasEventListener(type)

@clearEventListener(type)

@addEventListener(type, listener)

@removeEventListener(type, listener)

@dispatchEvent(e)

@trigger(e)

.util

..Random

..Ajax

/load(params)

/loadJSONP(url, callback)

/DATA_CONVERTE_TABLE

/DEFAULT_SETTINGS

..File

@load(params)

@setData(data)

@loadLocalStorage()

..Timeline

..DataManager

..QueryString

/parse(str, sep, eq)