diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fe83697..cb9088f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed +- Fixed offscreen culling issue when using parallax on TileMaps - Fixed division by 0 when timescale is 0 in actions - Fixed `onTransition` on the initial scene transition - Fixed `ex.TriggerOptions` type to all optional parameters diff --git a/sandbox/tests/tilemap/tilemap.ts b/sandbox/tests/tilemap/tilemap.ts index 919048a5..2ff8948a 100644 --- a/sandbox/tests/tilemap/tilemap.ts +++ b/sandbox/tests/tilemap/tilemap.ts @@ -3,7 +3,8 @@ var game = new ex.Engine({ width: 600, height: 600, - pixelArt: true + pixelArt: true, + displayMode: ex.DisplayMode.FitScreenAndFill }); game.showDebug(true); @@ -24,15 +25,19 @@ var ss = ex.SpriteSheet.fromImageSource({ var tm = new ex.TileMap({ pos: ex.vec(-100, -100), - tileWidth: 16, - tileHeight: 16, + tileWidth: 16 * 20, + tileHeight: 16 * 20, columns: 40, rows: 40 }); -tm.transform.scale = ex.vec(2, 2); + +//tm.addComponent(new ex.ParallaxComponent(ex.vec(.4, .4))); +//tm.transform.scale = ex.vec(2, 2); // tm.transform.rotation = Math.PI / 4; var tileSprite = ss.sprites[0]; +tileSprite.destSize.width = 320; +tileSprite.destSize.height = 320; for (var i = 0; i < tm.columns * tm.rows; i++) { tm.getTileByIndex(i).addGraphic(tileSprite); @@ -54,8 +59,23 @@ game.input.pointers.primary.on('down', (evt: ex.PointerEvent) => { game.start(loader).then(async () => { await game.currentScene.camera.move(ex.Vector.Zero.clone(), 2000, ex.EasingFunctions.EaseInOutCubic); console.log(tm.getOnScreenTiles()); - await game.currentScene.camera.move(new ex.Vector(200, 600), 2000, ex.EasingFunctions.EaseInOutCubic); + await game.currentScene.camera.move(new ex.Vector(800, 600), 4000, ex.EasingFunctions.EaseInOutCubic); console.log(tm.getOnScreenTiles()); + + await ex.coroutine( + game, + function* () { + let duration = 2000; + while (duration >= 0) { + const elapsed = yield; + + game.currentScene.camera.rotation = ex.lerpAngle(0, Math.PI, ex.RotationType.ShortestPath, ex.clamp(1 - duration / 2000, 0, 1)); + + duration -= elapsed; + } + }.bind(this) + ); + await game.currentScene.camera.zoomOverTime(2, 1000); console.log(tm.getOnScreenTiles()); await game.currentScene.camera.zoomOverTime(1, 1000); diff --git a/src/engine/TileMap/TileMap.ts b/src/engine/TileMap/TileMap.ts index 26092a8f..71d12e16 100644 --- a/src/engine/TileMap/TileMap.ts +++ b/src/engine/TileMap/TileMap.ts @@ -532,18 +532,16 @@ export class TileMap extends Entity implements HasNestedPointerEvents { * Useful if you need to perform specific logic on onscreen tiles */ public getOnScreenTiles(): readonly Tile[] { - let worldBounds = this._engine.screen.getWorldBounds(); + const worldBounds = this._engine.screen.getWorldBounds(); + let parallaxOffset = vec(0, 0); + let bounds = this.transform.coordPlane === CoordPlane.Screen ? this._engine.screen.getScreenBounds() : worldBounds; const maybeParallax = this.get(ParallaxComponent); if (maybeParallax && this.isInitialized) { - let pos = this.pos; const oneMinusFactor = Vector.One.sub(maybeParallax.parallaxFactor); - const parallaxOffset = this._engine.currentScene.camera.pos.scale(oneMinusFactor); - pos = pos.sub(parallaxOffset); - // adjust world bounds by parallax factor - worldBounds = worldBounds.translate(pos); + parallaxOffset = this._engine.currentScene.camera.pos.scale(oneMinusFactor); + bounds = bounds.translate(parallaxOffset.negate()); } - const bounds = this.transform.coordPlane === CoordPlane.Screen ? this._engine.screen.getScreenBounds() : worldBounds; const topLeft = this._getTileCoordinates(bounds.topLeft); const topRight = this._getTileCoordinates(bounds.topRight); const bottomRight = this._getTileCoordinates(bounds.bottomRight);