Pixi.js

pixijs.png

download(git フルソースコード)

<script src="https://rawgit.com/pixijs/pixi.js/master/bin/pixi.js" type="text/javascript"></script>

Pixi.js APIドキュメントの読み方

Pixi.js...API Referenceにクラス名や関数名が載っています。
Propertiesと書いてあるのがpublic変数で

クラス名.プロパティ名 = 好きな値

を入れることが出来ます。(read-onlyと書いてあるプロパティはダメです)
プロパティ名をクリックすると、それが数字なのか何のクラスなのかが書いてあります。
関数には関数の使い方、引数にどんな型を渡すべきかが書いてあります。
太字で書いてあるのが親クラスから派生したのではない、そのクラス固有のプロパティやメソッドのようです。

その他の特徴

math.Matrix()という行列クラスもあるが、orthoの関数はない。
行列成分はこんなかんじに並んでいる

(1)
\begin{align} \left[ \begin{array}{cc} a & b & tx \\ c & d & ty \\ 0 & 0 & 1 \\ \end{array} \right] \end{align}

Matrix.js#L10-L12

Pixi.jsの座標系について

デフォルトの座標系は
左上が(0,0)右下が(width,height)になっています
RenderTarget.js#L243-L265

背景色

var renderer = new PIXI.WebGLRenderer(200, 200, {transparent: true});

transparent:trueにすると、
gl.clearColor(0, 0, 0, 0);

になります。完全な透明です

pixi,jsの欠点

半透明でglClearできない

WebGLRenderer.jsの278行目にあるように、

var renderer = new PIXI.WebGLRenderer(200, 200, {backgroundColor: 0x533E25});

で指定した背景色はRGBのみしか効かず、アルファ値を指定することは出来ず、つねに1.0(完全不透明)固定である。
やるなら内部でglClearしてるところまで突っ込んで書き換えないといけない->pixijs-semi-transparent-background

破線が描画できない

Bibliography

サポートサイト Wikidot.com