Skip to content

Commit a76a39b

Browse files
author
obiot
committed
ticket #8 : updated the platformer example to use TexturePacker sprite for all entities
1 parent a82b91c commit a76a39b

File tree

8 files changed

+97
-62
lines changed

8 files changed

+97
-62
lines changed

‎examples/platformer/data/gfx/texture.json

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,57 @@
11
{"frames": [
22

3+
{
4+
"filename": "coin.png",
5+
"frame": {"x":2,"y":194,"w":35,"h":35},
6+
"rotated": false,
7+
"trimmed": false,
8+
"spriteSourceSize": {"x":0,"y":0,"w":35,"h":35},
9+
"sourceSize": {"w":35,"h":35}
10+
},
311
{
412
"filename": "fly_dead.png",
5-
"frame": {"x":141,"y":194,"w":69,"h":32},
13+
"frame": {"x":110,"y":194,"w":69,"h":32},
614
"rotated": false,
715
"trimmed": false,
816
"spriteSourceSize": {"x":0,"y":0,"w":69,"h":32},
917
"sourceSize": {"w":69,"h":32}
1018
},
1119
{
1220
"filename": "fly_fly.png",
13-
"frame": {"x":212,"y":194,"w":69,"h":31},
21+
"frame": {"x":181,"y":194,"w":69,"h":31},
1422
"rotated": false,
1523
"trimmed": false,
1624
"spriteSourceSize": {"x":0,"y":0,"w":69,"h":31},
1725
"sourceSize": {"w":69,"h":31}
1826
},
1927
{
2028
"filename": "fly_normal.png",
21-
"frame": {"x":70,"y":194,"w":69,"h":32},
29+
"frame": {"x":39,"y":194,"w":69,"h":32},
2230
"rotated": false,
2331
"trimmed": false,
2432
"spriteSourceSize": {"x":0,"y":0,"w":69,"h":32},
2533
"sourceSize": {"w":69,"h":32}
2634
},
2735
{
2836
"filename": "slime_dead.png",
29-
"frame": {"x":2,"y":194,"w":54,"h":8},
30-
"rotated": true,
37+
"frame": {"x":2,"y":231,"w":54,"h":8},
38+
"rotated": false,
3139
"trimmed": false,
3240
"spriteSourceSize": {"x":0,"y":0,"w":54,"h":8},
3341
"sourceSize": {"w":54,"h":8}
3442
},
3543
{
3644
"filename": "slime_normal.png",
37-
"frame": {"x":12,"y":194,"w":43,"h":28},
38-
"rotated": true,
45+
"frame": {"x":252,"y":190,"w":43,"h":28},
46+
"rotated": false,
3947
"trimmed": false,
4048
"spriteSourceSize": {"x":0,"y":0,"w":43,"h":28},
4149
"sourceSize": {"w":43,"h":28}
4250
},
4351
{
4452
"filename": "slime_walk.png",
45-
"frame": {"x":42,"y":194,"w":43,"h":26},
46-
"rotated": true,
53+
"frame": {"x":58,"y":228,"w":43,"h":26},
54+
"rotated": false,
4755
"trimmed": false,
4856
"spriteSourceSize": {"x":0,"y":0,"w":43,"h":26},
4957
"sourceSize": {"w":43,"h":26}
@@ -143,6 +151,6 @@
143151
"format": "RGBA8888",
144152
"size": {"w":512,"h":256},
145153
"scale": "1",
146-
"smartupdate": "$TexturePacker:SmartUpdate:0ffcf24dac533fe8b3dec6145cd6ea39$"
154+
"smartupdate": "$TexturePacker:SmartUpdate:cf4a6f90a36031cc6cdf179b67921d61$"
147155
}
148156
}

‎examples/platformer/data/gfx/texture.png

1.11 KB
Loading

‎examples/platformer/data/gfx/texture.tps

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<key>autoSDSettings</key>
1111
<array/>
1212
<key>allowRotation</key>
13-
<true/>
13+
<false/>
1414
<key>quiet</key>
1515
<false/>
1616
<key>premultiplyAlpha</key>
@@ -158,6 +158,7 @@
158158
<filename>../../../../../../../Desktop/Perso/melonjs/platformerArt_v3 (1)/png/enemies/slime_dead.png</filename>
159159
<filename>../../../../../../../Desktop/Perso/melonjs/platformerArt_v3 (1)/png/enemies/slime_normal.png</filename>
160160
<filename>../../../../../../../Desktop/Perso/melonjs/platformerArt_v3 (1)/png/enemies/slime_walk.png</filename>
161+
<filename>../../../../../../../Desktop/Perso/melonjs/platformerArt_v3 (1)/png/coin.png</filename>
161162
</array>
162163
<key>ignoreFileList</key>
163164
<array/>

‎examples/platformer/data/map/map1.json

-4
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,6 @@
133133
"name":"SlimeEntity",
134134
"properties":
135135
{
136-
"image":"slime_sheet",
137136
"spriteheight":"35",
138137
"spritewidth":"55"
139138
},
@@ -148,7 +147,6 @@
148147
"name":"SlimeEntity",
149148
"properties":
150149
{
151-
"image":"slime_sheet",
152150
"spriteheight":"35",
153151
"spritewidth":"55"
154152
},
@@ -213,7 +211,6 @@
213211
{
214212
"animationspeed":"12",
215213
"gravity":"0",
216-
"image":"fly_sheet",
217214
"spriteheight":"35",
218215
"spritewidth":"70",
219216
"velX":"2"
@@ -231,7 +228,6 @@
231228
{
232229
"animationspeed":"12",
233230
"gravity":"0",
234-
"image":"fly_sheet",
235231
"spriteheight":"35",
236232
"spritewidth":"70",
237233
"velX":"2"

‎examples/platformer/data/map/map1.tmx

-4
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,12 @@
8989
<objectgroup color="#ff0000" name="slimes" width="50" height="17">
9090
<object name="SlimeEntity" x="1295" y="420" width="420" height="35">
9191
<properties>
92-
<property name="image" value="slime_sheet"/>
9392
<property name="spriteheight" value="35"/>
9493
<property name="spritewidth" value="55"/>
9594
</properties>
9695
</object>
9796
<object name="SlimeEntity" x="140" y="140" width="210" height="35">
9897
<properties>
99-
<property name="image" value="slime_sheet"/>
10098
<property name="spriteheight" value="35"/>
10199
<property name="spritewidth" value="55"/>
102100
</properties>
@@ -115,7 +113,6 @@
115113
<properties>
116114
<property name="animationspeed" value="12"/>
117115
<property name="gravity" value="0"/>
118-
<property name="image" value="fly_sheet"/>
119116
<property name="spriteheight" value="35"/>
120117
<property name="spritewidth" value="70"/>
121118
<property name="velX" value="2"/>
@@ -125,7 +122,6 @@
125122
<properties>
126123
<property name="animationspeed" value="12"/>
127124
<property name="gravity" value="0"/>
128-
<property name="image" value="fly_sheet"/>
129125
<property name="spriteheight" value="35"/>
130126
<property name="spritewidth" value="70"/>
131127
<property name="velX" value="2"/>

‎examples/platformer/data/map/map2.tmx

-8
Original file line numberDiff line numberDiff line change
@@ -77,42 +77,36 @@
7777
<objectgroup color="#ff0000" name="slimes" width="49" height="17">
7878
<object name="SlimeEntity" x="700" y="420" width="840" height="35">
7979
<properties>
80-
<property name="image" value="slime_sheet"/>
8180
<property name="spriteheight" value="35"/>
8281
<property name="spritewidth" value="55"/>
8382
</properties>
8483
</object>
8584
<object name="SlimeEntity" x="490" y="490" width="210" height="35">
8685
<properties>
87-
<property name="image" value="slime_sheet"/>
8886
<property name="spriteheight" value="35"/>
8987
<property name="spritewidth" value="55"/>
9088
</properties>
9189
</object>
9290
<object name="SlimeEntity" x="770" y="350" width="700" height="35">
9391
<properties>
94-
<property name="image" value="slime_sheet"/>
9592
<property name="spriteheight" value="35"/>
9693
<property name="spritewidth" value="55"/>
9794
</properties>
9895
</object>
9996
<object name="SlimeEntity" x="840" y="280" width="560" height="35">
10097
<properties>
101-
<property name="image" value="slime_sheet"/>
10298
<property name="spriteheight" value="35"/>
10399
<property name="spritewidth" value="55"/>
104100
</properties>
105101
</object>
106102
<object name="SlimeEntity" x="910" y="210" width="420" height="35">
107103
<properties>
108-
<property name="image" value="slime_sheet"/>
109104
<property name="spriteheight" value="35"/>
110105
<property name="spritewidth" value="55"/>
111106
</properties>
112107
</object>
113108
<object name="SlimeEntity" x="980" y="140" width="280" height="35">
114109
<properties>
115-
<property name="image" value="slime_sheet"/>
116110
<property name="spriteheight" value="35"/>
117111
<property name="spritewidth" value="55"/>
118112
</properties>
@@ -142,7 +136,6 @@
142136
<properties>
143137
<property name="animationspeed" value="12"/>
144138
<property name="gravity" value="0"/>
145-
<property name="image" value="fly_sheet"/>
146139
<property name="spriteheight" value="35"/>
147140
<property name="spritewidth" value="70"/>
148141
<property name="velX" value="2"/>
@@ -152,7 +145,6 @@
152145
<properties>
153146
<property name="animationspeed" value="12"/>
154147
<property name="gravity" value="0"/>
155-
<property name="image" value="fly_sheet"/>
156148
<property name="spriteheight" value="35"/>
157149
<property name="spritewidth" value="70"/>
158150
<property name="velX" value="2"/>

‎examples/platformer/entities.js

+73-29
Original file line numberDiff line numberDiff line change
@@ -148,23 +148,12 @@ var CoinEntity = me.CollectableEntity.extend({
148148
* constructor
149149
*/
150150
init: function (x, y, settings) {
151-
// define this here instead of tiled
152-
settings.image = "coin_sheet";
153-
settings.spritewidth = 35;
154151

155152
// call the parent constructor
156153
this.parent(x, y , settings);
157154

158-
// animation speed
159-
this.renderable.animationspeed = 8;
160-
161-
// bounding box
162-
//this.updateColRect(8,16,16,16);
163-
164-
// walking animatin
165-
this.renderable.addAnimation("spin", [0,1,2,3]);
166-
167-
this.renderable.setCurrentAnimation("spin");
155+
// add the coin sprite as renderable
156+
this.renderable = game.texture.createSpriteFromName("coin.png");
168157

169158
// set the renderable position to bottom center
170159
this.anchorPoint.set(0.5, 1.0);
@@ -215,22 +204,6 @@ var PathEnemyEntity = me.ObjectEntity.extend({
215204
// make it collidable
216205
this.collidable = true;
217206
this.type = me.game.ENEMY_OBJECT;
218-
219-
// custom animation speed ?
220-
if (settings.animationspeed) {
221-
this.renderable.animationspeed = settings.animationspeed;
222-
}
223-
224-
// walking animatin
225-
this.renderable.addAnimation ("walk", [0,1]);
226-
// dead animatin
227-
this.renderable.addAnimation ("dead", [2]);
228-
229-
// set default one
230-
this.renderable.setCurrentAnimation("walk");
231-
232-
// set the renderable position to bottom center
233-
this.anchorPoint.set(0.5, 1.0);
234207
},
235208

236209

@@ -289,6 +262,77 @@ var PathEnemyEntity = me.ObjectEntity.extend({
289262

290263
});
291264

265+
/**
266+
* An Slime enemy entity
267+
* follow a horizontal path defined by the box size in Tiled
268+
*/
269+
var SlimeEnemyEntity = PathEnemyEntity.extend({
270+
/**
271+
* constructor
272+
*/
273+
init: function (x, y, settings) {
274+
// parent constructor
275+
this.parent(x, y, settings);
276+
277+
// set a renderable
278+
this.renderable = game.texture.createAnimationFromName([
279+
"slime_normal.png", "slime_walk.png", "slime_dead.png"
280+
]);
281+
282+
// custom animation speed ?
283+
if (settings.animationspeed) {
284+
this.renderable.animationspeed = settings.animationspeed;
285+
}
286+
287+
// walking animatin
288+
this.renderable.addAnimation ("walk", [0,1]);
289+
// dead animatin
290+
this.renderable.addAnimation ("dead", [2]);
291+
292+
// set default one
293+
this.renderable.setCurrentAnimation("walk");
294+
295+
// set the renderable position to bottom center
296+
this.anchorPoint.set(0.5, 1.0);
297+
}
298+
});
299+
300+
/**
301+
* An Fly enemy entity
302+
* follow a horizontal path defined by the box size in Tiled
303+
*/
304+
var FlyEnemyEntity = PathEnemyEntity.extend({
305+
/**
306+
* constructor
307+
*/
308+
init: function (x, y, settings) {
309+
// parent constructor
310+
this.parent(x, y, settings);
311+
312+
// set a renderable
313+
this.renderable = game.texture.createAnimationFromName([
314+
"fly_normal.png", "fly_fly.png", "fly_dead.png"
315+
]);
316+
317+
// custom animation speed ?
318+
if (settings.animationspeed) {
319+
this.renderable.animationspeed = settings.animationspeed;
320+
}
321+
322+
// walking animatin
323+
this.renderable.addAnimation ("walk", [0,1]);
324+
// dead animatin
325+
this.renderable.addAnimation ("dead", [2]);
326+
327+
// set default one
328+
this.renderable.setCurrentAnimation("walk");
329+
330+
// set the renderable position to bottom center
331+
this.anchorPoint.set(0.5, 1.0);
332+
}
333+
});
334+
335+
292336
/**
293337
* a GUI object
294338
* display score on screen

‎examples/platformer/main.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,13 @@ var game = {
1111
assets : [
1212
{name: "tileset", type:"image", src: "data/gfx/tileset.png"},
1313
{name: "atascii", type:"image", src: "data/gfx/atascii_24px.png"},
14-
{name: "slime_sheet", type:"image", src: "data/gfx/slime_sheet.png"},
15-
{name: "fly_sheet", type:"image", src: "data/gfx/fly_sheet.png"},
16-
{name: "coin_sheet", type:"image", src: "data/gfx/coin_sheet.png"},
1714
{name: "background", type:"image", src: "data/gfx/background.png"},
1815
{name: "cling", type: "audio", src: "data/audio/", channel : 2},
1916
{name: "die", type: "audio", src: "data/audio/", channel : 1},
2017
{name: "enemykill", type: "audio", src: "data/audio/", channel : 1},
2118
{name: "jump", type: "audio", src: "data/audio/", channel : 2},
2219
{name: "DST-GameForest",type: "audio", src: "data/audio/", channel : 1},
20+
// level map
2321
{name: "map1", type: "tmx", src: "data/map/map1.json"},
2422
{name: "map2", type: "tmx", src: "data/map/map2.tmx"},
2523
// texturePacker
@@ -76,8 +74,8 @@ var game = {
7674
// add our player entity in the entity pool
7775
me.entityPool.add("mainPlayer", PlayerEntity);
7876
// add our enemy entity in the entity pool
79-
me.entityPool.add("SlimeEntity", PathEnemyEntity);
80-
me.entityPool.add("FlyEntity", PathEnemyEntity);
77+
me.entityPool.add("SlimeEntity", SlimeEnemyEntity);
78+
me.entityPool.add("FlyEntity", FlyEnemyEntity);
8179
me.entityPool.add("CoinEntity", CoinEntity);
8280

8381
// load the texture atlas file
@@ -93,7 +91,7 @@ var game = {
9391
var PlayScreen = me.ScreenObject.extend( {
9492
// we just defined what to be done on reset
9593
// no need to do somehting else
96-
onResetEvent: function() {
94+
onResetEvent: function() {
9795
// load a level
9896
me.levelDirector.loadLevel("map1");
9997

0 commit comments

Comments
 (0)