Managing display modesД®xcalibur supports multiple display modes for a game. In this HiDPI scenario, Engine.canvasWidth and Engine.canvasHeight would still return the native 1280x720 resolution. Any time you need to get this 'actual' width and height of what's being drawn to the canvas, the engine exposes Engine.drawWidth and Engine.drawHeight that takes into account the device pixel ratio. However, on a 2X HiDPI display what's actually drawn is multiplied by a device pixel ratio of 2 so, 25. For example, on a normal monitor, a 1280x720 game canvas will return 1280 and 720 for the width and height respectively. Your game logic and positioning logic will still work since the game world is still 720px wide even though it may be displaying at 1080px wide on a high-res screen. For example, you may want to design a game that depends on a fixed size of 1280x720 but you want to allow the user to view it at higher resolutions on their browser, so you may scale the canvas to a 16:9 ratio. You would want to explicitly set a native resolution if your game depends on having a specific width/height of the 'draw area'. Scaled ResolutionДЄlternatively, if a native resolution is set and then CSS is used to change the styled width and height, this makes your game scale to whatever the CSS dimensions are.

Games which can be played on mobile devices and desktop will work, since your game logic can detect what screen size the game is being played on and respond accordingly. This means your game logic must be responsive if the resolution of the game changes and you cannot depend on a 'fixed' width/height coordinate system. If you don't explicitly set canvasWidth or canvasHeight Excalibur will manage the values for you, meaning that the 'native' resolution will be the physical screen width/height so there is no 'scaling' happening. In Excalibur, these can be set using canvasWidth and canvasHeight respectively. Game resolutionДЄn HTML canvas element has a 'native' resolution which is specified using the width and height HTML attributes. Use these methods to convert between coordinate systems as they take into account all the information Excalibur collects to appropriately do the math for you including scaling, device pixel ratio, and more. Sometimes though, you need to convert between systems when interfacing with input.Д®xcalibur provides two methods to convert between systems, Engine.screenToWorldCoordinates and Engine.worldToScreenCoordinates. Usually, your game logic should only deal in terms of world coordinates because this is the coordinate system you're positioning actors in or drawing in. (0, 0) in the game world may be displayed at the center of your game because that may be the camera's focal point. The world space is the default place where actors operate. World coordinatesДЄ world coordinate is a point in the game world relative to a scene's camera. Screen coordinates ignore the game camera, think of it like where the user is physically pointing on top of your game. Excalibur translates mouse event positions into screen coordinates for you. (0, 0) in screen coordinates is the top-left of the canvas. Screen coordinatesДЄ screen coordinate is a point on a user's physical screen. In Excalibur, due to HTML canvas native and scaled resolution, there are essentially two kinds of coordinates: a screen coordinate and a world coordinate. applyResolutionAndViewport ( ) Coordinate systems applyResolutionAndViewport ( ) // Show some animation or do something at NES resolution // Restore the old resolution and viewport, then apply pushResolutionAndViewport ( ) // Change and apply Save the current resolution and viewport

Native game resolutions