画像などのオブジェクトを並べて表示する


画像を揃えて連結表示する方法

画像の読み込み

画像ファイルをpreload内でload.imageを使って読み込みます
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

画像を横に並べて連結表示する

alignToで対象とする画像と位置を指定する方法
第1引数に対象の画像名
第2引数に対象からみた位置関係(下部参照)
第3引数もある様ですがまだ仕様がわからないです
第3因数は対象との間隔でした、マイナスも指定可
preload(){
game.add.sprite().alignTo(対象,対象との位置関係,対象との間隔);
}
var game = new Phaser.Game(320, 120, Phaser.CANVAS, 'phaser-img', { preload: preload, create: create});

       function preload(){
    game.load.image('sample', 'http://repop.jp/phaser/assets/image/sample01s.png');
       }

create(){
    var image1 = game.add.sprite(-10, 10, 'sample');
    var image2 = game.add.sprite(0, 0, 'sample').alignTo(image1, Phaser.RIGHT_CENTER,-20);
    var image3 = game.add.sprite(0, 0, 'sample').alignTo(image2, Phaser.RIGHT_CENTER,-20);
    var image4 = game.add.sprite(0, 0, 'sample').alignTo(image3, Phaser.RIGHT_CENTER,-20);
}
結果


第2因数に使う位置関係の定義

TOP_LEFT
TOP_CENTER
TOP_RIGHT
LEFT_TOP
LEFT_CENTER
LEFT_BOTTOM
RIGHT_TOP
RIGHT_CENTER
RIGHT_BOTTOM
BOTTOM_LEFT
BOTTOM_CENTER
BOTTOM_RIGHT

縦に並べて表示する時はBOTTOM_LEFTかBOTTOM_CENTERになりますね

使用感

今回は画像を対象の記事にしましたがオブジェクト全般に対応しているのでテキストやステージ等のリスト表示等にも使えそうです

実際はfor文で回す事になるかと思いますが、折り返し等の処理は自前で書くしかないかもですね

他にも方法があると思いますが、覚えるまではこれでいこうと思います

このエントリーをはてなブックマークに追加

0 件のコメント :

コメントを投稿