-
Notifications
You must be signed in to change notification settings - Fork 0
/
3-level-layout.html
108 lines (91 loc) · 2.92 KB
/
3-level-layout.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Building your first Phaser 3 Game</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style type="text/css">
body { margin: 0; }
canvas { display: block; margin: auto; }
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
/***** CHANGE *****/
// Adjust height and background colour to look better
height: 576,
backgroundColor: '#2d2d2d',
/******************/
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var sprite;
var player;
/***** New *****/
var map;
var groundLayer;
var coinLayer;
/***************/
function preload ()
{
this.load.image('staticPlayer', 'assets/sprites/dude.png');
this.load.spritesheet('animatedPlayer', 'assets/sprites/animated-dude.png', { frameWidth: 32, frameHeight: 48 });
/***** New *****/
// Load the Level assets
this.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
this.load.spritesheet('coin', 'assets/sprites/coin.png', { frameWidth: 32, frameHeight: 32 });
this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile-collision-test.json');
/***************/
}
function create ()
{
sprite = this.physics.add.sprite(100, 450, 'staticPlayer');
player = this.physics.add.sprite(200, 450, 'animatedPlayer');
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('animatedPlayer', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'idle',
frames: [ { key: 'animatedPlayer', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('animatedPlayer', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
player.anims.play('right', true);
/***** New *****/
// Add the tile textures
map = this.make.tilemap({ key: 'map' });
var groundTiles = map.addTilesetImage('ground_1x1');
var coinTiles = map.addTilesetImage('coin');
// Create the different Layers
map.createDynamicLayer('Background Layer', groundTiles, 0, 0);
groundLayer = map.createDynamicLayer('Ground Layer', groundTiles, 0, 0);
coinLayer = map.createDynamicLayer('Coin Layer', coinTiles, 0, 0);
/**************/
}
function update (time, delta)
{
}
</script>
</body>
</html>