diff --git a/src/js/stendhal/Client.ts b/src/js/stendhal/Client.ts index 65d69b0f2e..524347cef0 100644 --- a/src/js/stendhal/Client.ts +++ b/src/js/stendhal/Client.ts @@ -477,7 +477,7 @@ export class Client { !Number.isNaN(musicVolume) ? musicVolume : 1.0); // parallax background - stendhal.data.map.parallax.setImage(zoneinfo["parallax"]); + stendhal.data.map.setParallax(zoneinfo["parallax"]); // coloring information if (zoneinfo["color"] && stendhal.config.getBoolean("effect.lighting")) { diff --git a/src/js/stendhal/data/Map.ts b/src/js/stendhal/data/Map.ts index 951ca6a81a..a6d7415caf 100644 --- a/src/js/stendhal/data/Map.ts +++ b/src/js/stendhal/data/Map.ts @@ -65,6 +65,7 @@ export class Map { ]; private parallax: ParallaxBackground; + private parallaxImage?: string; /** Singleton instance. */ private static instance: Map; @@ -126,6 +127,11 @@ export class Map { this.layerGroupIndexes = this.mapLayerGroup(); this.strategy.onMapLoaded(this); + + if (this.parallaxImage) { + this.parallax.setImage(this.parallaxImage, this.zoneSizeX * this.tileWidth, + this.zoneSizeY * this.tileHeight); + } } decodeTileset(content: any, name: string) { @@ -226,4 +232,17 @@ export class Map { hasSafeTileset(filename: string) { return this.knownSafeTilesets.indexOf(filename) > -1; } + + /** + * Sets or unsets parallax image. + * + * @param {string=} name + * Background image filename. + */ + setParallax(name?: string) { + this.parallaxImage = name; + if (typeof(name) === "undefined") { + this.parallax.reset(); + } + } } diff --git a/src/js/stendhal/landscape/ParallaxBackground.ts b/src/js/stendhal/landscape/ParallaxBackground.ts index ea331ff1a4..f32472d943 100644 --- a/src/js/stendhal/landscape/ParallaxBackground.ts +++ b/src/js/stendhal/landscape/ParallaxBackground.ts @@ -45,17 +45,34 @@ export class ParallaxBackground { /** * Sets image to be drawn. * - * @param name {string} + * @param {string} name * Relative path (exluding .png filename suffix) to image inside "data/maps/parallax" directory * or `undefined` to unset. + * @param {number} width + * Map pixel width. + * @param {number} height + * Map pixel height. */ - public setImage(name?: string) { - if (!name) { - this.image = undefined; - return; - } + setImage(name: string, width: number, height: number) { const fullPath = singletons.getPaths().parallax + "/" + name + ".png"; this.image = singletons.getSpriteStore().get(fullPath); + + /* FIXME: + //this.image = singletons.getTileStore().getParallax(name, ParallaxBackground.SCROLL, width, height); + singletons.getTileStore().getParallaxPromise(name, ParallaxBackground.SCROLL, width, height) + .then(image => { + this.image = image; + }).catch(error => { + console.error("Error setting parallax background \"" + name + "\"\n", error); + }); + */ + } + + /** + * Unsets parallax background image. + */ + reset() { + this.image = undefined; } draw(ctx: CanvasRenderingContext2D, offsetX: number, offsetY: number) { @@ -71,5 +88,11 @@ export class ParallaxBackground { ctx.drawImage(this.image, dx, dy); } } + + /* TODO: use the following when `setImage` fixed + const tileLeft = offsetX - (offsetX * ParallaxBackground.SCROLL); + const tileTop = offsetY - (offsetY * ParallaxBackground.SCROLL); + ctx.drawImage(this.image, tileLeft, tileTop); + */ } }