Skip to content

Commit acac4e4

Browse files
obiotobiot
authored
Merge pull request #1258 from melonjs/fix/tmx-renderer-cleanup
Fix hex renderer centers mutation bug and clean up TMX renderers
2 parents 8fe180b + 206f12b commit acac4e4

15 files changed

Lines changed: 266 additions & 93 deletions

‎packages/melonjs/src/level/tiled/TMXGroup.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class TMXGroup {
5353
*/
5454
this.objects = [];
5555

56-
const visible = typeof data.visible !== "undefined" ? data.visible : true;
56+
const visible = data.visible ?? true;
5757
this.opacity = visible === true ? clamp(+data.opacity || 1.0, 0.0, 1.0) : 0;
5858

5959
// check if we have any user-defined properties
@@ -78,8 +78,9 @@ export default class TMXGroup {
7878
map.tileheight,
7979
map.orientation,
8080
map.tilesets,
81-
z++,
81+
z,
8282
);
83+
z++;
8384
// set a renderer
8485
layer.setRenderer(map.getRenderer());
8586
// resize container accordingly

‎packages/melonjs/src/level/tiled/TMXLayer.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,7 @@ export default class TMXLayer extends Renderable {
9898
*/
9999
this.tilesets = tilesets;
100100

101-
// the default tileset
102-
// XXX: Is this even used?
101+
// the default tileset (used as cache in cellAt)
103102
this.tileset = this.tilesets ? this.tilesets.getTilesetByIndex(0) : null;
104103

105104
// Biggest tile size to draw
@@ -235,7 +234,7 @@ export default class TMXLayer extends Renderable {
235234
this.canvasRenderer = new CanvasRenderer({
236235
canvas: createCanvas(this.width, this.height),
237236
width: this.width,
238-
heigth: this.height,
237+
height: this.height,
239238
transparent: true,
240239
});
241240
// pre render the layer on the canvas
@@ -248,8 +247,10 @@ export default class TMXLayer extends Renderable {
248247
// called when the layer is removed from the game world or a container
249248
onDeactivateEvent() {
250249
// clear all allocated objects
251-
//this.layerData = undefined;
252250
this.animatedTilesets = undefined;
251+
if (this.canvasRenderer) {
252+
this.canvasRenderer = null;
253+
}
253254
}
254255

255256
/**

‎packages/melonjs/src/level/tiled/TMXObject.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,7 @@ export default class TMXObject {
8181
* the object class
8282
* @type {string}
8383
*/
84-
this.class =
85-
typeof settings.class !== "undefined" ? settings.class : settings.type;
84+
this.class = settings.class ?? settings.type;
8685

8786
/**
8887
* object text

‎packages/melonjs/src/level/tiled/TMXTile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { degToRad } from "../../math/math.ts";
12
import { Matrix2d } from "../../math/matrix2d.ts";
23
import { Bounds } from "./../../physics/bounds.ts";
34
import Sprite from "./../../renderable/sprite.js";
@@ -102,7 +103,7 @@ export default class Tile extends Bounds {
102103
setTileTransform(transform) {
103104
transform.translate(this.width / 2, this.height / 2);
104105
if (this.flippedAD) {
105-
transform.rotate((-90 * Math.PI) / 180);
106+
transform.rotate(degToRad(-90));
106107
transform.scale(-1, 1);
107108
}
108109
if (this.flippedX) {

‎packages/melonjs/src/level/tiled/TMXTileMap.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function readImageLayer(map, data, z) {
6464
);
6565

6666
// set some additional flags
67-
const visible = typeof data.visible !== "undefined" ? data.visible : true;
67+
const visible = data.visible ?? true;
6868
imageLayer.setOpacity(visible ? +data.opacity : 0);
6969

7070
return imageLayer;
@@ -215,21 +215,15 @@ export default class TMXTileMap {
215215
// deprecation warning if map tiled version is older than 1.5
216216
if (checkVersion(this.version, "1.5") < 0) {
217217
warning(
218-
"(" + this.name + ") Tiled Map format version 1.4 and below",
218+
`(${this.name}) Tiled Map format version 1.4 and below`,
219219
"format 1.5 or higher",
220220
"10.4.4",
221221
);
222222
}
223223
// warning if map version is newer than what we currently support
224224
if (checkVersion(this.version, TILED_SUPPORTED_VERSION) > 0) {
225225
console.warn(
226-
"(" +
227-
this.name +
228-
") Tiled Map format version " +
229-
this.version +
230-
" is newer than the currently supported version " +
231-
TILED_SUPPORTED_VERSION +
232-
". Some features may not work as expected.",
226+
`(${this.name}) Tiled Map format version ${this.version} is newer than the currently supported version ${TILED_SUPPORTED_VERSION}. Some features may not work as expected.`,
233227
);
234228
}
235229
}
@@ -491,8 +485,8 @@ export default class TMXTileMap {
491485
if (typeof shape === "undefined") {
492486
shape = polygonPool.get(0, 0, [
493487
vector2dPool.get(0, 0),
494-
vector2dPool.get(this.width, 0),
495-
vector2dPool.get(this.width, this.height),
488+
vector2dPool.get(settings.width, 0),
489+
vector2dPool.get(settings.width, settings.height),
496490
]);
497491
}
498492
// check if a me.Tile object is embedded
@@ -519,8 +513,8 @@ export default class TMXTileMap {
519513
if (typeof shape === "undefined") {
520514
shape = polygonPool.get(0, 0, [
521515
vector2dPool.get(0, 0),
522-
vector2dPool.get(this.width, 0),
523-
vector2dPool.get(this.width, this.height),
516+
vector2dPool.get(settings.width, 0),
517+
vector2dPool.get(settings.width, settings.height),
524518
]);
525519
}
526520
obj.anchorPoint.set(0, 0);

‎packages/melonjs/src/level/tiled/TMXTileset.js‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default class TMXTileset {
2828
// load the external tileset (TSX/XML/JSON/TSJ)
2929
tileset = getTMX(getBasename(src));
3030
if (!tileset) {
31-
throw new Error(src + " external tileset not found");
31+
throw new Error(`${src} external tileset not found`);
3232
}
3333
}
3434
}
@@ -112,11 +112,7 @@ export default class TMXTileset {
112112
const image = getImage(tile.image);
113113
if (!image) {
114114
throw new Error(
115-
"melonJS: '" +
116-
tile.image +
117-
"' file for tile '" +
118-
(tileId + this.firstgid) +
119-
"' not found!",
115+
`melonJS: '${tile.image}' file for tile '${tileId + this.firstgid}' not found!`,
120116
);
121117
}
122118
this.imageCollection[tileId + this.firstgid] = image;
@@ -149,11 +145,7 @@ export default class TMXTileset {
149145

150146
if (!this.image) {
151147
throw new Error(
152-
"melonJS: '" +
153-
tileset.image +
154-
"' file for tileset '" +
155-
this.name +
156-
"' not found!",
148+
`melonJS: '${tileset.image}' file for tileset '${this.name}' not found!`,
157149
);
158150
}
159151

@@ -183,11 +175,7 @@ export default class TMXTileset {
183175
this.lastgid - this.firstgid + 1 !== +tileset.tilecount
184176
) {
185177
console.warn(
186-
"Computed tilecount (" +
187-
(this.lastgid - this.firstgid + 1) +
188-
") does not match expected tilecount (" +
189-
tileset.tilecount +
190-
")",
178+
`Computed tilecount (${this.lastgid - this.firstgid + 1}) does not match expected tilecount (${tileset.tilecount})`,
191179
);
192180
}
193181
}

‎packages/melonjs/src/level/tiled/TMXTilesetGroup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,6 @@ export default class TMXTilesetGroup {
6767
this._lastTileset = fallback;
6868
return fallback;
6969
}
70-
throw new Error("no matching tileset found for gid " + gid);
70+
throw new Error(`no matching tileset found for gid ${gid}`);
7171
}
7272
}

‎packages/melonjs/src/level/tiled/TMXUtils.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function coerceTMXValue(name, type, raw) {
7070
try {
7171
return JSON.parse(body);
7272
} catch {
73-
throw new Error("Unable to parse JSON: " + body);
73+
throw new Error(`Unable to parse JSON: ${body}`);
7474
}
7575
}
7676
}
@@ -82,9 +82,9 @@ function coerceTMXValue(name, type, raw) {
8282
const expr = raw.slice(5);
8383
try {
8484
// eslint-disable-next-line
85-
return Function("'use strict';return (" + expr + ")")();
85+
return Function(`'use strict';return (${expr})`)();
8686
} catch {
87-
throw new Error("Unable to evaluate: " + expr);
87+
throw new Error(`Unable to evaluate: ${expr}`);
8888
}
8989
}
9090
}
@@ -95,7 +95,7 @@ function coerceTMXValue(name, type, raw) {
9595
raw[0] === "#" &&
9696
((colorMatch = SHORT_ARGB.exec(raw)) || (colorMatch = LONG_ARGB.exec(raw)))
9797
) {
98-
return "#" + colorMatch[2] + colorMatch[1];
98+
return `#${colorMatch[2]}${colorMatch[1]}`;
9999
}
100100

101101
// plain string — return as-is

‎packages/melonjs/src/level/tiled/renderer/TMXHexagonalRenderer.js‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
114114
* @ignore
115115
*/
116116
topLeft(x, y, v) {
117-
const ret = v || new Vector2d();
117+
const ret = v || vector2dPool.get();
118118

119119
if (!this.staggerX) {
120120
if ((y & 1) ^ this.staggerEven) {
@@ -136,7 +136,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
136136
* @ignore
137137
*/
138138
topRight(x, y, v) {
139-
const ret = v || new Vector2d();
139+
const ret = v || vector2dPool.get();
140140

141141
if (!this.staggerX) {
142142
if ((y & 1) ^ this.staggerEven) {
@@ -158,7 +158,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
158158
* @ignore
159159
*/
160160
bottomLeft(x, y, v) {
161-
const ret = v || new Vector2d();
161+
const ret = v || vector2dPool.get();
162162

163163
if (!this.staggerX) {
164164
if ((y & 1) ^ this.staggerEven) {
@@ -180,7 +180,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
180180
* @ignore
181181
*/
182182
bottomRight(x, y, v) {
183-
const ret = v || new Vector2d();
183+
const ret = v || vector2dPool.get();
184184

185185
if (!this.staggerX) {
186186
if ((y & 1) ^ this.staggerEven) {
@@ -203,7 +203,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
203203
* @ignore
204204
*/
205205
pixelToTileCoords(x, y, v) {
206-
const ret = v || new Vector2d();
206+
const ret = v || vector2dPool.get();
207207

208208
if (this.staggerX) {
209209
//flat top
@@ -266,7 +266,10 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
266266
let nearest = 0;
267267
let minDist = Number.MAX_VALUE;
268268
for (let i = 0; i < 4; ++i) {
269-
const dc = this.centers[i].sub(rel).length2();
269+
// calculate squared distance without mutating this.centers[i]
270+
const dx = this.centers[i].x - rel.x;
271+
const dy = this.centers[i].y - rel.y;
272+
const dc = dx * dx + dy * dy;
270273
if (dc < minDist) {
271274
minDist = dc;
272275
nearest = i;
@@ -293,7 +296,7 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
293296
tileToPixelCoords(x, y, v) {
294297
const tileX = Math.floor(x);
295298
const tileY = Math.floor(y);
296-
const ret = v || new Vector2d();
299+
const ret = v || vector2dPool.get();
297300

298301
if (this.staggerX) {
299302
ret.y = tileY * (this.tileheight + this.sidelengthy);
@@ -312,20 +315,6 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
312315
return ret;
313316
}
314317

315-
/**
316-
* fix the position of Objects to match
317-
* the way Tiled places them
318-
* @ignore
319-
*/
320-
adjustPosition(obj) {
321-
// only adjust position if obj.gid is defined
322-
if (typeof obj.gid === "number") {
323-
// Tiled objects origin point is "bottom-left" in Tiled,
324-
// "top-left" in melonJS)
325-
obj.y -= obj.height;
326-
}
327-
}
328-
329318
/**
330319
* draw the tile map
331320
* @ignore
@@ -369,8 +358,8 @@ export default class TMXHexagonalRenderer extends TMXRenderer {
369358
vector2dPool.get(),
370359
);
371360

372-
const rowTile = startTile.clone();
373-
const rowPos = startPos.clone();
361+
const rowTile = vector2dPool.get().setV(startTile);
362+
const rowPos = vector2dPool.get().setV(startPos);
374363

375364
/* Determine in which half of the tile the top-left corner of the area we
376365
* need to draw is. If we're in the upper half, we need to start one row

‎packages/melonjs/src/level/tiled/renderer/TMXIsometricRenderer.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Vector2d, vector2dPool } from "../../../math/vector2d.ts";
1+
import { vector2dPool } from "../../../math/vector2d.ts";
22
import { boundsPool } from "../../../physics/bounds.ts";
33
import TMXLayer from "./../TMXLayer.js";
44
import TMXRenderer from "./TMXRenderer.js";
@@ -46,7 +46,7 @@ export default class TMXIsometricRenderer extends TMXRenderer {
4646
* @ignore
4747
*/
4848
pixelToTileCoords(x, y, v) {
49-
const ret = v || new Vector2d();
49+
const ret = v || vector2dPool.get();
5050
return ret.set(
5151
y / this.tileheight + (x - this.originX) / this.tilewidth,
5252
y / this.tileheight - (x - this.originX) / this.tilewidth,
@@ -58,7 +58,7 @@ export default class TMXIsometricRenderer extends TMXRenderer {
5858
* @ignore
5959
*/
6060
tileToPixelCoords(x, y, v) {
61-
const ret = v || new Vector2d();
61+
const ret = v || vector2dPool.get();
6262
return ret.set(
6363
(x - y) * this.hTilewidth + this.originX,
6464
(x + y) * this.hTileheight,
@@ -155,8 +155,8 @@ export default class TMXIsometricRenderer extends TMXRenderer {
155155
// Determine whether the current row is shifted half a tile to the right
156156
let shifted = inUpperHalf ^ inLeftHalf;
157157

158-
// initialize the columItr vector
159-
const columnItr = rowItr.clone();
158+
// initialize the columnItr vector
159+
const columnItr = vector2dPool.get().setV(rowItr);
160160

161161
// main drawing loop
162162
for (

0 commit comments

Comments
 (0)