LQDB Liberty Questの技術メモサイト。

What do you need?

キャラの顔素材などトリミングが必要な画像を画面上に表示する

コード

var file    = 'img/faces/' + encodeURIComponent('Monster') + '.png';
var texture = new PIXI.Texture( PIXI.BaseTexture.fromImage( file ), new PIXI.Rectangle( 0, 0, 144, 144 ) ); 
var sprite = new PIXI.Sprite( texture );
stage.addChild( sprite ); // stage は要変更

上記のコードを使うと画面上にトリミングされた画像を表示する事が出来ます。

1行目では変数 file に名前が “Monster” の顔素材を指定しており、例えば “Monster” の箇所を “Actor1” とする事で別な画像を読み込む事が出来ます。

2行目では読み込んだ画像を x:0, y:0 の位置から 幅:144, 縦:144のサイズでトリミングしています。
PIXI.Rectangleの引数は左から x, y, 横幅, 縦幅となっているので例えば x を 144 にすると次の顔を指定出来ます。

そして3行目でスプライトを生成し、4行目で画面上に表示させています。

(0) Comments

コメントを残す

コメント内容の項目は必須入力です。
コメントは承認後に公開されますので反映に時間がかかる場合がございます。また、メールアドレスは公開されません。

返信先: