画像ファイルの読み込みと表示

画像の読み込み

画像ファイルはpreload内でload.imageを使って読み込みます
第一引数に名前を付けた名前で呼び出す事ができます
第一引数にはファイルパスを指定します
preload(){
    game.load.image('sample', 'assets/image/sample.png');
}

画像の表示

画像の表示はadd.spriteを使います
preload(){
game.add.sprite(X座標,Y座標, 'sample');
}

サンプル

サンプルコード①
 var game = new Phaser.Game(300, 200, Phaser.CANVAS, 'phaser', { preload: preload, create: create});

       function preload(){
    game.load.image('sample', 'assets/image/sample.png');
       }
        
       function create(){
    var sample1 = game.add.sprite(150, 100, 'sample');
       }
結果

座標はXYともに中央を指定していますが、これだと位置が悪いです
原因は画像の始点が左上になっているからですね
anchorで始点も中央に設定します
    sample1.anchor.set(0.5,0.5);
このままでは大きいのでscaleで大きさを調節します
    sample1.scale.set(0.5);
結果



🔺サンプルに使った画像
このエントリーをはてなブックマークに追加

0 件のコメント :

コメントを投稿