Previous Phaser tutorials:Phaser tutorial: Phaser and Spriter skeletal animation Phaser tutorial: DronShooter - simple game in Typescript - Part 3 Phaser tutorial: DronShooter - simple game in Typescript - Part 2 Phaser tutorial: adding 9-patch image support to Phaser Phaser tutorial: DronShooter - simple game in Typescript - Part 1 Phaser tutorial: custom easing functions for tweening and easing functions with parameters Phaser tutorial: sprites and custom properties for atlas frames Phaser tutorial: manage different screen sizesPhaser tutorial: How to wrap bitmap text When building scene tree in
Phaser engine the sprites added as last are rendered on top. Unlike, for example, in Unity, you cannot change order of sprites with setting its z position. You can only set z property and sort sprites within one group.
Now, take a look at following example:
You can try to achieve this with:
- making two groups (walls and gems) and tween them. But, in such case all gems will be under or above walls, depending on groups order,
- making one group with all the walls and gems, but to move them you will have to create 8 tweens.
There is third way which allows you to put all sprites in one group (like in 2.) and transform gems and walls at once (like in 1.).
To achieve it you have to create 3 groups: one for all the sprites and two empty. In group with sprites you will maintain your z order and empty groups will be tweened. Now comes the trick - sprites will not be transformed with their parent group, but walls will be transformed with on of the empty groups and gems with the second. In other words: when engine is transforming sprite, you give it group parent different from its original one.
Source code for this example is short and self explanatory. Sprites are created and added to spritesGroup. All sprites are MySprite class objects and they are given another group they will use as their parent when updating transform. Two empty groups are named group1 and group2. These groups are then tweened.
While the code is simple, the final effect looks like complicated pattern of sprites and groups.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84 | // -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class Game extends Phaser.Game {
// -------------------------------------------------------------------------
constructor() {
// init game
super(640, 400, Phaser.CANVAS, "content", State);
}
}
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class MySprite extends Phaser.Sprite {
private _parentTransform: Phaser.Group;
// -------------------------------------------------------------------------
constructor(aGame: Phaser.Game, aX: number, aY: number, aKey: string, aParentTransform: Phaser.Group) {
super(aGame, aX, aY, aKey);
this._parentTransform = aParentTransform;
}
// -------------------------------------------------------------------------
public updateTransform(): void {
if (!this.visible) {
return;
}
this.displayObjectUpdateTransform(this._parentTransform);
}
}
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class State extends Phaser.State {
// -------------------------------------------------------------------------
preload() {
// sprites
this.load.image("Wall", "assets/Wall.png");
this.load.image("Gem0", "assets/Gem0.png");
this.load.image("Gem1", "assets/Gem1.png");
this.load.image("Gem2", "assets/Gem2.png");
this.load.image("Gem3", "assets/Gem3.png");
}
// -------------------------------------------------------------------------
create() {
this.stage.backgroundColor = 0x0F3043;
var group1 = this.add.group();
var group2 = this.add.group();
var spritesGroup = this.add.group();
for (var i = 0; i < 4; i++) {
// wall sprite
var wall = new MySprite(this.game, 50, 90 + i * 70, "Wall", group1);
wall.width = 440;
wall.z = i * 2;
spritesGroup.add(wall);
// gem sprite
var gem = new MySprite(this.game, 170 + 100 * i, 50, "Gem" + i, group2);
gem.anchor.setTo(0.5, 0.5);
gem.z = i * 2 + 1;
spritesGroup.add(gem);
}
// move groups
this.add.tween(group1).to({ x: 100 }, 1000, Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
this.add.tween(group2).to({ y: 320 }, 3000, Phaser.Easing.Linear.None, true, 0, -1, true);
}
}
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
window.onload = () => {
new Game();
};
|
No comments:
Post a Comment