phaser-framework
フェイザーで画像を追加する

Android Cordova CSS HTML html5-canvas ionic-framework JavaScript jQuery Node.js TypeScript
サーチ…


前書き

Phaserの画像オブジェクトとしてゲームに画像ファイル（pngが好ましい）を追加します。

構文

  • game.load.image（name：string、file：string）;
  • game.add.image（x：数字、y：数字、名前：文字列）;

備考

  • Imageオブジェクトは、フレームアニメーションを使用せず、スプライトである必要がないゲーム内のものに適しています。
  • デフォルトでは左上隅の画像のアンカーポイントですが、次のように変更することができます： image.anchor.setTo(0.5, 0.5);

作成して画面に追加

まず、Phaserに "Game"オブジェクトを作成する必要があります。 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

プリロードコールバック関数でイメージをロードします。 

function preload() {

    game.load.image('thing', 'assets/thing-image.png');

}
パラメータ詳細（Game.add.image）
名 game.add.imageメソッドでイメージを参照するために使用された名前。
ファイルアセットファイルへのパス（プロジェクトのルートディレクトリからの相対パス）。

次に、create関数で、ゲームオブジェクトの "add"メソッドを使用してImageオブジェクトを作成し、それを画面に表示します。 

function create() {

  var image = game.add.image(100, 100, 'thing');

}
パラメータ詳細（Game.add.image）
バツイメージが追加されるべきx座標。
y イメージが追加されるべきy座標。
名 game.load.imageメソッドで割り当てられたイメージの名前。


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow