[phaser] Example clean-up

This commit is contained in:
Mario Zechner 2023-04-24 10:33:40 +02:00
parent cf68a9fd07
commit 125d7c9903
16 changed files with 60 additions and 62 deletions

View File

@ -13,7 +13,7 @@
<h1>Arcade Physics example</h1> <h1>Arcade Physics example</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -36,7 +36,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("coin-data", "assets/coin-pro.skel"); this.load.spineBinary("coin-data", "assets/coin-pro.skel");
@ -44,7 +44,7 @@
} }
function create() { function create() {
let coin = this.add.spine(400, 200, 'coin-data', "coin-atlas"); const coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
coin.animationState.setAnimation(0, "animation", true); coin.animationState.setAnimation(0, "animation", true);
coin.setScale(0.3); coin.setScale(0.3);
coin.setSize(280, 280); coin.setSize(280, 280);

View File

@ -13,7 +13,7 @@
<h1>Basic example</h1> <h1>Basic example</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,

View File

@ -14,7 +14,7 @@
<h1>Basic example</h1> <h1>Basic example</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -30,7 +30,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -38,7 +38,7 @@
} }
function create() { function create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }

View File

@ -13,7 +13,7 @@
<h1>Batching test</h1> <h1>Batching test</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -30,7 +30,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
let debug; let debug;
function preload() { function preload() {
@ -41,12 +41,12 @@
} }
function create() { function create() {
let plugin = this.spine; const plugin = this.spine;
let x = 25; let x = 25;
let y = 60; let y = 60;
for (let j = 0; j < 10; j++, y += 600 / 10) { for (let j = 0; j < 10; j++, y += 600 / 10) {
for (let i = 0; i < 20; i++, x += 800 / 20) { for (let i = 0; i < 20; i++, x += 800 / 20) {
let obj = Math.random() > 0.5 const obj = Math.random() > 0.5
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas") ? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
: this.add.spine(x, y, 'raptor-data', "raptor-atlas"); : this.add.spine(x, y, 'raptor-data', "raptor-atlas");
obj.animationState.setAnimation(0, "walk", true); obj.animationState.setAnimation(0, "walk", true);

View File

@ -13,7 +13,7 @@
<h1>Blend test</h1> <h1>Blend test</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -32,7 +32,7 @@
}; };
let controls; let controls;
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -41,14 +41,14 @@
function create() { function create() {
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
let obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25); const obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
obj.setScale(0.25); obj.setScale(0.25);
obj.animationState.setAnimation(0, "idle", true); obj.animationState.setAnimation(0, "idle", true);
obj.animationState.setAnimation(1, "shoot", true); obj.animationState.setAnimation(1, "shoot", true);
} }
var cursors = this.input.keyboard.createCursorKeys(); const cursors = this.input.keyboard.createCursorKeys();
var controlConfig = { const controlConfig = {
camera: this.cameras.main, camera: this.cameras.main,
left: cursors.left, left: cursors.left,
right: cursors.right, right: cursors.right,

View File

@ -13,7 +13,7 @@
<h1>Bounds test</h1> <h1>Bounds test</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -30,7 +30,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
let spineboy; let spineboy;
function preload() { function preload() {
@ -49,7 +49,7 @@
let time = 0; let time = 0;
function update(t, delta) { function update(t, delta) {
time += delta / 1000; time += delta / 1000;
let scale = 0.4 + Math.cos(time) * 0.2; const scale = 0.4 + Math.cos(time) * 0.2;
spineboy.scale = scale; spineboy.scale = scale;
spineboy.angle++; spineboy.angle++;
} }

View File

@ -12,7 +12,7 @@
<body> <body>
<h1>Camera pipeline test</h1> <h1>Camera pipeline test</h1>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -98,7 +98,7 @@
// FIXME: Need a dummy sprite so the MultiPipeline sets up state // FIXME: Need a dummy sprite so the MultiPipeline sets up state
// so rendering the Spine sprite actually works. Unsure what state // so rendering the Spine sprite actually works. Unsure what state
// is needed. // is needed.
var s = this.add.sprite(0, 0, 'img'); this.add.sprite(0, 0, 'img');
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;

View File

@ -13,7 +13,7 @@
<h1>Canvas test</h1> <h1>Canvas test</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -29,7 +29,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -37,7 +37,7 @@
} }
function create() { function create() {
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }

View File

@ -12,7 +12,7 @@
<body> <body>
<h1>Control bones</h1> <h1>Control bones</h1>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -28,7 +28,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel"); this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
@ -36,33 +36,31 @@
} }
function create() { function create() {
let stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas"); const stretchyman = this.add.spine(400, 550, 'stretchyman-data', "stretchyman-atlas");
stretchyman.scale = 0.8; stretchyman.scale = 0.8;
stretchyman.skeleton.updateWorldTransform(); stretchyman.skeleton.updateWorldTransform();
var controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"]; const controlBones = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"];
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
var bone = stretchyman.skeleton.findBone(controlBones[i]); const bone = stretchyman.skeleton.findBone(controlBones[i]);
let point = { x: bone.worldX, y: bone.worldY }; const point = { x: bone.worldX, y: bone.worldY };
stretchyman.skeletonToPhaserWorldCoordinates(point); stretchyman.skeletonToPhaserWorldCoordinates(point);
var control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone); const control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
control.setInteractive(); control.setInteractive();
this.input.setDraggable(control); this.input.setDraggable(control);
this.input.on('drag', function (pointer, gameObject, dragX, dragY) { this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
gameObject.x = dragX; gameObject.x = dragX;
gameObject.y = dragY; gameObject.y = dragY;
var bone = gameObject.getData('bone'); const bone = gameObject.getData('bone');
let point = { x: dragX, y: dragY }; const point = { x: dragX, y: dragY };
stretchyman.phaserWorldCoordinatesToBone(point, bone); stretchyman.phaserWorldCoordinatesToBone(point, bone);
bone.x = point.x; bone.x = point.x;
bone.y = point.y; bone.y = point.y;
bone.update(); bone.update();
}, this); }, this);
} }
} }

View File

@ -13,7 +13,7 @@
<h1>Depth test</h1> <h1>Depth test</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -29,7 +29,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.image('logo', 'phaser.png'); this.load.image('logo', 'phaser.png');
@ -39,7 +39,7 @@
function create() { function create() {
this.add.image(400, 350, 'logo').setName('logo1').setDepth(2); this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
let spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
spineboy.animationState.setAnimation(0, "walk", true) spineboy.animationState.setAnimation(0, "walk", true)
spineboy.setScale(0.5) spineboy.setScale(0.5)
spineboy.setDepth(1); spineboy.setDepth(1);

View File

@ -22,7 +22,7 @@
} }
function create() { function create() {
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
@ -71,11 +71,11 @@
create() { create() {
this.add.image(0, 0, 'logo').setOrigin(0); this.add.image(0, 0, 'logo').setOrigin(0);
let custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true); const custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true);
custom1.spine.setScale(0.5); custom1.spine.setScale(0.5);
let custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true); const custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true);
custom2.spine.setScale(0.5); custom2.spine.setScale(0.5);
let custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true); const custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true);
custom3.spine.setScale(0.5); custom3.spine.setScale(0.5);
this.add.image(400, 0, 'logo').setOrigin(0); this.add.image(400, 0, 'logo').setOrigin(0);

View File

@ -13,7 +13,7 @@
<h1>Mix and match</h1> <h1>Mix and match</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -29,7 +29,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("mix-and-match-data", "assets/mix-and-match-pro.skel"); this.load.spineBinary("mix-and-match-data", "assets/mix-and-match-pro.skel");
@ -37,12 +37,12 @@
} }
function create() { function create() {
let mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas"); const mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas");
mixAndMatch.scale = 0.5; mixAndMatch.scale = 0.5;
mixAndMatch.animationState.setAnimation(0, "walk", true); mixAndMatch.animationState.setAnimation(0, "walk", true);
let skeletonData = mixAndMatch.skeleton.data; const skeletonData = mixAndMatch.skeleton.data;
let skin = new spine.Skin("custom"); const skin = new spine.Skin("custom");
skin.addSkin(skeletonData.findSkin("skin-base")); skin.addSkin(skeletonData.findSkin("skin-base"));
skin.addSkin(skeletonData.findSkin("nose/short")); skin.addSkin(skeletonData.findSkin("nose/short"));
skin.addSkin(skeletonData.findSkin("eyelids/girly")); skin.addSkin(skeletonData.findSkin("eyelids/girly"));

View File

@ -25,7 +25,7 @@
} }
create() { create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
this.input.once('pointerdown', () => this.scene.start('Scene2')); this.input.once('pointerdown', () => this.scene.start('Scene2'));
@ -43,14 +43,14 @@
} }
create() { create() {
let raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas"); const raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
raptor.scale = 0.5; raptor.scale = 0.5;
raptor.animationState.setAnimation(0, "walk", true); raptor.animationState.setAnimation(0, "walk", true);
this.input.once('pointerdown', () => this.scene.start('Scene1')); this.input.once('pointerdown', () => this.scene.start('Scene1'));
} }
} }
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -62,7 +62,7 @@
] ]
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
</script> </script>
</html> </html>

View File

@ -13,7 +13,7 @@
<h1>Render to texture</h1> <h1>Render to texture</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -29,7 +29,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -37,8 +37,8 @@
} }
function create() { function create() {
let renderTexture = this.add.renderTexture(0, 0, 800, 600); const renderTexture = this.add.renderTexture(0, 0, 800, 600);
let spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
this.add.text(200, 8, 'Click to stamp SpineBoy'); this.add.text(200, 8, 'Click to stamp SpineBoy');

View File

@ -8,14 +8,14 @@ class SpineDemo extends Scene {
} }
create() { create() {
let spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
this.make this.make
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
} }
} }
var config = { const config = {
width: 800, width: 800,
height: 600, height: 600,
type: Phaser.WEBGL, type: Phaser.WEBGL,
@ -27,4 +27,4 @@ var config = {
} }
}; };
let game = new Phaser.Game(config); new Phaser.Game(config);

View File

@ -14,7 +14,7 @@
<h1>Basic example</h1> <h1>Basic example</h1>
</body> </body>
<script> <script>
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
@ -30,7 +30,7 @@
} }
}; };
let game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload() { function preload() {
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel"); this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
@ -38,11 +38,11 @@
} }
function create() { function create() {
let spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas"); const spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
spineboy.scale = 0.5; spineboy.scale = 0.5;
spineboy.animationState.setAnimation(0, "walk", true); spineboy.animationState.setAnimation(0, "walk", true);
let spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas"); const spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
spineboy2.scale = 0.5; spineboy2.scale = 0.5;
spineboy2.animationState.setAnimation(0, "run", true); spineboy2.animationState.setAnimation(0, "run", true);