Engine Not Rendering TileMap Full Screen

[jlbeard84]

Steps to Reproduce

1. Create TileMap with cells that make it wider than half of the canvas
2. Add TileMap to a Scene
3. Start engine

Expected Result

Tilemap is rendered to the width of the canvas

Actual Result

Tilemap is rendered to the last cell that at the point of half the width of the canvas

Environment

• browsers and versions: Chrome (61.0.3163.100)
• operating system: Windows 10 / Mac OS 10.13
• Excalibur versions: 0.13.1

Context

I'd like to render a TileMap that represents the background for a 2D game with an overhead view. As such, I'd like it to be the full size of the canvas (minus space for a HUD). I've done some basic troubleshooting and believe the issue lies in the screenToWorldCoordinates method on Engine. I created a class that derived from Engine and copied the contents of this method into it. If I comment out the line newX = newX - this.getDrawWidth() / 2; it renders as expected.

Proposal

I might be missing something, but I don't see why the engine is determining the width of the drawable space without taking into account the zoom level; it appears to be arbitrarily halving it. Checking zoom level here seems to be appropriate.

[bferguson3]

We were both seeing this on both of our respective projects, which is strange because @jlbeard84 is rendering using a hand-built TileMap and I am using the -tiled extension.

In both cases, our individual TileMaps had the following property:
_onScreenXEnd = 27

Which didn't seem to change regardless of TileMap size, game canvas size, etc.
Thanks!

[kamranayub]

Can you include some screenshots and isolated test cases (CodePen/JSFiddle) for us to troubleshoot?

Something must be different from the last time we successfully used TileMap (http://excaliburjs.com/ludum-38) and now for this to be an issue...

[jlbeard84]

Sure, I'll write a couple and add them here.

[bferguson3]

I'm layering a new tilemap over the screen for a UI.
Code is not complex:

export function LoadWindows(){
   combatWindows.x += 250; //exact pixel measurements for testing
   combatWindows.y += 360;
   game.currentScene.add(combatWindows);
}

Pretty sure this is at least related to the problem, excalibur.js @ 8241:

TileMap.prototype.update = function (engine, delta) {
            this.emit('preupdate', new Events.PreUpdateEvent(engine, delta, this));
            var worldCoordsUpperLeft = engine.screenToWorldCoordinates(new Algebra_16.Vector(0, 0));
            var worldCoordsLowerRight = engine.screenToWorldCoordinates(new Algebra_16.Vector(engine.canvas.clientWidth, engine.canvas.clientHeight));
            this._onScreenXStart = Math.max(Math.floor(worldCoordsUpperLeft.x / this.cellWidth) - 2, 0);
            this._onScreenYStart = Math.max(Math.floor((worldCoordsUpperLeft.y - this.y) / this.cellHeight) - 2, 0);
            this._onScreenXEnd = Math.max(Math.floor(worldCoordsLowerRight.x / this.cellWidth) + 2, 0);
            this._onScreenYEnd = Math.max(Math.floor((worldCoordsLowerRight.y - this.y) / this.cellHeight) + 2, 0);
            this.emit('postupdate', new Events.PostUpdateEvent(engine, delta, this));
 };

The engine is outputting _onScreenXStart as 6. This is accurate for the way the code is written, but it should obviously be 0.

There's no way to manually override this var - in the meantime this is being debugged, to save me from making a brand new branch, do you think you could make these _onscreen vars protected instead of private?

Thanks

[kamranayub]

Since it's JavaScript, you could hook into postupdate event and set the variables to whatever values you need as a hack. Just cast 'this' to any and TS will let you do what you like!

…

On Fri, Oct 27, 2017, 17:51 bferguson3 ***@***.***> wrote: [image: screen shot 2017-10-27 at 1 43 04] <https://user-images.githubusercontent.com/32964659/32127762-f648cc7c-bb2d-11e7-9e0f-6ceb52d0f9cb.png> I'm layering a new tilemap over the screen for a UI. Code is not complex: export function LoadWindows(){ combatWindows.x += 250; //exact pixel measurements for testing combatWindows.y += 360; game.currentScene.add(combatWindows); } Pretty sure this is at least related to the problem, excalibur.js @ 8241: TileMap.prototype.update = function (engine, delta) { this.emit('preupdate', new Events.PreUpdateEvent(engine, delta, this)); var worldCoordsUpperLeft = engine.screenToWorldCoordinates(new Algebra_16.Vector(0, 0)); var worldCoordsLowerRight = engine.screenToWorldCoordinates(new Algebra_16.Vector(engine.canvas.clientWidth, engine.canvas.clientHeight)); this._onScreenXStart = Math.max(Math.floor(worldCoordsUpperLeft.x / this.cellWidth) - 2, 0); this._onScreenYStart = Math.max(Math.floor((worldCoordsUpperLeft.y - this.y) / this.cellHeight) - 2, 0); this._onScreenXEnd = Math.max(Math.floor(worldCoordsLowerRight.x / this.cellWidth) + 2, 0); this._onScreenYEnd = Math.max(Math.floor((worldCoordsLowerRight.y - this.y) / this.cellHeight) + 2, 0); this.emit('postupdate', new Events.PostUpdateEvent(engine, delta, this)); }; The engine is outputting _onScreenXStart as 6. This is accurate for the way the code is written, but it should obviously be 0. There's no way to manually override this var - in the meantime this is being debugged, to save me from making a brand new branch, do you think you could make these _onscreen vars protected instead of private? Thanks — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#904 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiaaw0duaFV9CNXWhYD72bJfW9KL0x2ks5swl6KgaJpZM4QFByo> .

[kamranayub]

@jlbeard84 Sorry, I'm a little confused by the steps to repro.

Do you mean use a cell size that is wider than half the canvas? So two tiles == canvas width?

I was hoping to see some code I could run to debug since I'm not really understanding the bug from the descriptions here, I'm obviously missing some context. I'd like to actually run the code locally and step through it to understand what you're expecting vs. what the engine is doing.

Could either of you use https://codesandbox.io or https://codepen.io (or a fresh GitHub repo) to showcase the issue?

[jlbeard84]

Sorry, been busy and forgot that I needed to do this. I'll see if I can replicate on codepen.

[jlbeard84]

@kamranayub It was easier to just create a new repo. I replicated the issue here. I commented the mapColumn variable to show you how to duplicate. Please let me know if you have any questions!

https://github.com/jlbeard84/excalibur-display-issue

[kamranayub]

Perfect, I plan to take a look tomorrow!

…

On Mon, Nov 6, 2017 at 10:01 PM Josh Beard ***@***.***> wrote: @kamranayub <https://github.com/kamranayub> It was easier to just create a new repo. I replicated the issue here. I commented the mapColumn variable to show you how to duplicate. Please let me know if you have any questions! https://github.com/jlbeard84/excalibur-display-issue <http://url> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#904 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiaa_uL1UxrOoOHTT_zvyyV9enqqbAMks5sz9YBgaJpZM4QFByo> .

[eonarheim]

Hi @jlbeard84,

I've taken a look at this and it definitely is a bug. I think I might have found a work around, if you keep your tilemap x,y coordinates positive and adjust the camera things seem to work as expected. I think there is an issue with offscreen culling when the x,y coordinates are negative.

I've opened a PR with a workaround jlbeard84/excalibur-display-issue#1

Let me know if this helps!