需要があるかどうか分かりませんが作ってみました。
プロジェクト作成時のテンプレートです。
2022/10/09 現在（3.55.2 Ichika）
記述方法は2種類？あるかと思います。
どちらも動くのでどちらを使っても良いと思いますが
将来的にどちらか一つに、、、なるかならないかは不明ですが
私はＥＳ６の形式で記述しようかなと考えています。
以下、サンプルコード
テンプレート 1
//変数
let Game = {};
let Data = {};//このサンプルでは使用しません。
//Game Size
Game.width = 360;
Game.height = 480;
var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function SceneA ()
{
Phaser.Scene.call(this, { key: 'sceneA' });
},
preload:function(){
this.load.image("samples", "./assets/sample_image.png");
this.load.image("samples2", "./assets/sample_image2.png");
},
create: function ()
{
this.hoge="hogehoge";
let img_obj=this.add.image(100,100,"samples");
img_obj.setOrigin(0.5,0.5);
let img_obj2=new SampleImageClass2(this,Game.width/2,Game.height/2,"samples2");
this.children.add(img_obj2);
let txt_obj=this.add.text(Game.width/2,Game.height/2+100, 'Phaser3 Test', { fontSize: '16px', fill: '#fff' });
},
update:function(){
console.log(this.hoge);
},
});
var SampleImageClass2 = new Phaser.Class({
Extends: Phaser.GameObjects.Image,
initialize:
function SampleImageClass2 (my_scene, x, y,images)
{
Phaser.GameObjects.Image.call(this, my_scene);
this.setTexture(images);
this.setPosition(x, y);
this.setScale(1);
},
preUpdate (time, delta){
}
});
//config
let config = {
type: Phaser.AUTO,
parent: 'canvas',
width: Game.width,
height: Game.height,
pixelArt: true,
fps: {
target: 60,// フレームレート
forceSetTimeOut: true
},
scale: {
autoCenter: [Phaser.Scale.CENTER_BOTH]
},
physics: {
default:'arcade',
arcade: {
/*debug: true,*/
gravity: {
y: 0
}
},
},
scene: [SceneA]
};
let game = new Phaser.Game(config);SampleImageClass2 クラスは Phaser.GameObjects.Imageを継承したカスタムクラスです。
またテンプレート２と共通ですが
configのdebug: true のコメントを外すと当たり判定が発生するオブジェクト（スプライト等）に
四角い枠が表示されます。3.55.2時点でdebug: false にしても表示は消えなかったので
コメントアウトするなどして表示を消す必要があると思います。
ネット上でのサンプルでは上記のサンプルがよく見られます（公式サンプルもこの形式が多い）
テンプレート 2（ＥＳ６）
//変数
let Game = {};
let Data = {};//このサンプルでは使用しません。
//Game Size
Game.width = 360;
Game.height = 480;
class SceneA extends Phaser.Scene {
constructor (config)
{
super(config);
}
preload ()
{
this.load.image('sample', 'assets/sample_image.png');
this.load.image('sample2', 'assets/sample_image2.png');
}
create(){
this.hoge="hogehoge";
let img_obj=this.add.image(100,100,"sample");
let img_obj2=new CustomImages(this,Game.width/2,Game.height/2,"sample2");
this.children.add(img_obj2);
let txt_obj=this.add.text(Game.width/2,Game.height/2+100, 'Phaser3 ES6 Test', { fontSize: '16px', fill: '#fff' });
}
update ()
{
console.log(this.hoge);
}
}
class CustomImages extends Phaser.GameObjects.Image{
constructor (my_scene, x, y,images)
{
super(my_scene, x, y,images);
//
//引数(hoge)はhoge、constructor関数内の変数はthis
//preUpdate内で引数を使用する場合は
//constructor内で
//this.my_scene=my_scene;など宣言して使う必要がある。
//またJS用の関数のコールバック関数で使用するthisと
//Phaserのthisは異なるので注意。
//this.my_scene=my_scene;
this.setTexture(images);
this.setPosition(x, y);
this.setActive(true);
this.setVisible(true);
//my_scene.add.existing(this);
//my_scene.physics.world.enable(this);
//my_scene.physics.add.collider(player_obj,this,function(po,eo){
//}, null, this);
}
preUpdate (time, delta){
}
}
//config
let config = {
type: Phaser.AUTO,
parent: 'canvas',
width: Game.width,
height: Game.height,
pixelArt: true,
fps: {
target: 60,// フレームレート
forceSetTimeOut: true
},
scale: {
//mode:Phaser.Scale.FIT,
//autoCenter: [Phaser.Scale.CENTER_HORIZONTALLY,Phaser.Scale.CENTER_VERTICALLY]
autoCenter: [Phaser.Scale.CENTER_BOTH]
},
physics: {
default:'arcade',
arcade: {
/*debug: true,*/// スプライトに緑の枠を表示します
gravity: {
y: 0
}
},
},
scene: [SceneA]
};
let game = new Phaser.Game(config);CustomImages クラス内にmy_scene.add.existing(this);がありますが
this.children.add(img_obj2);を実行しないで、表示させる場合は
コメントアウトを外します。
またGameObjectsクラスはColliderを持たないので
Phaser.Physics.Arcade.Sprite を継承させた後に
my_scene.physics.world.enable(this);で衝突判定を発生差せる必要があるようです。
config内のmode:Phaser.Scale.FIT,でキャンバスを画面にフィットさせることが出来ます。
autoCenter:[Phaser.Scale.CENTER_HORIZONTALLY,Phaser.Scale.CENTER_VERTICALLY]
でも、上下左右中央揃えが可能ですが、
[Phaser.Scale.CENTER_BOTH] でも可能なようです。
テンプレートに使用した画像
コメント