はじめに

この記事では、phina.jsのv0.2を使用しています。
https://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js

Shape一つだけのものから画像を出力する

ShapeはCanvasに描画しているので、Canvasを取得できれば後は何とでもできます。
ただしShape系のオブジェクトは、インスタンスを生成した時点では、まだ、Canvasに図形が描画されていないので、update前に画像として使いたい場合は、明示的に描画する必要があります。

v0.2での一番簡単な方法

var canvas = StarShape().flare('enterframe').canvas.domElement;

これで星の描画されたCanvasが取得できます。
このCanvasから別タブで画像を開く場合は、toDataURL()でURLを取得して、open()で開くと良いです。

サンプル
http://runstant.com/simiraaaa/projects/shapeToImage

この方法は、まず、StarShapeのインスタンスを生成し、flareでenterframeイベントを強制的に発火させています。
Shape系のクラスはインスタンス生成時に、enterframeで描画するように設定されるため、これで描画されます。

ただし、今後仕様が変わってくる可能性があるので、実はあまりおすすめできません。

少し面倒だけど、次以降のバージョンでも多分互換性のある方法

少し手間ですが、Shapeの仕様が大きく変わらない限り確実に描画できるものも紹介します。


var heart = HeartShape();
heart.render(heart.canvas);
var canvas = heart.canvas.domElement;

明示的に、renderメソッドを呼んでいます。
renderメソッドは、描画対象のphina.graphics.Canvasオブジェクトを引数に指定しないといけないため、このような書き方になります。

imageタグで表示するサンプル
http://runstant.com/simiraaaa/projects/shapeToImage2

ぶっちゃけ、デフォルトで自分のCanvasになるようにすればいいのに、と思ってますが、もしかしたら、今後デフォルトで、自分のCanvasになるかもしれません。

そうなれば、
var canvas = HeartShape().render().canvas.domElement;
と書けるので楽ですね。

Spriteにセットする

別にSpriteにセットしなくてもShapeで使えばいいじゃん。
と思うかもしれませんが、例えば、同じShapeを大量に生成する場合など、生成した分のメモリを消費してしまいます。
全く同じShape(弾幕とか)を使用する場合など一度、画像としてキャッシュしておき、Spriteにセットすることで、画像一つ分のメモリで済みます。

やり方はほとんどさっきと同じで、
heart.canvas.domElementの部分のheart.canvasをSpriteにセットすれば良いです。


var heart = HeartShape();
heart.render(heart.canvas);
var canvas = heart.canvas;

// こんな感じ
Sprite(canvas).addChildTo(this).setPosition(300, 400);

サンプル
http://runstant.com/simiraaaa/projects/shapeToSprite

おわりに

複数のShapeをまとめて出力するやつは!?と思った方がいるかもしれませんが、また再来週ぐらいに書く予定です。
超ざっくり説明したので、質問あれば、気軽にコメントしてください。Qiitaのアカウント作るのめんどくさい場合は、Twitterでも答えます。

エラーが出て動かない!
こういう時はどうやったらいい？
なんか思った通りに動かないんだけど？
記事に書いてある内容が理解できない
この処理ってどういう意味があるの？

等ほんとに些細な事でも気軽にコメントしてもらって構いません。

phina.jsのShapeを画像として使う