Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [#1733][#1734] New FullScreen and Dynamic DisplayModes #1735

Merged
merged 3 commits into from
Jan 1, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix lint
eonarheim committed Dec 22, 2020
commit c3585624bcde764e2f6347fdfe1538e3e8847834
40 changes: 20 additions & 20 deletions src/engine/Screen.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ export enum DisplayMode {
/**
* Use as much space as possible that still fits in the screen while maintaining aspect ratio and resolution.
* This is not the same as [[Screen.goFullScreen]]
*
*
* You may want to center your game here is an example
* ```html
* <!-- html -->
@@ -22,7 +22,7 @@ export enum DisplayMode {
* </main>
* </body>
* ```
*
*
* ```css
* // css
* main {
@@ -33,7 +33,7 @@ export enum DisplayMode {
* width: 100%;
* }
* ```
*
*
*/
FullScreen = 'FullScreen',

@@ -42,15 +42,15 @@ export enum DisplayMode {
* change dynamically as the window is resized This is not the same as [[Screen.goFullScreen]]
*/
Dynamic = 'Dynamic',

/**
* Default, use a specified resolution for the game. Like 800x600 pixels for example.
*/
Fixed = 'Fixed',

/**
* Allow the game to be positioned with the [[EngineOptions.position]] option
* @deprecated Use CSS to position the game
* @deprecated Use CSS to position the game canvas, will be removed in v0.26.0
*/
Position = 'Position',

@@ -373,12 +373,12 @@ export class Screen {
}

/**
* Takes a coordinate in normal html page space, for example from a pointer move event, and translates it to
* Takes a coordinate in normal html page space, for example from a pointer move event, and translates it to
* Excalibur screen space.
*
*
* Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the
* bottom right corner (resolutionX, resolutionY)
* @param point
* @param point
*/
public pageToScreenCoordinates(point: Vector): Vector {
let newX = point.x;
@@ -405,19 +405,19 @@ export class Screen {
}

/**
* Takes a coordinate in Excalibur screen space, and translates it to normal html page space. For example,
* Takes a coordinate in Excalibur screen space, and translates it to normal html page space. For example,
* this is where html elements might live if you want to position them relative to Excalibur.
*
*
* Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the
* bottom right corner (resolutionX, resolutionY)
* @param point
* @param point
*/
public screenToPageCoordinates(point: Vector): Vector {
let newX = point.x;
let newY = point.y;

newX = (newX / this.resolution.width) * this.viewport.width;
newY = (newY / this.resolution.height) * this.viewport.height
newY = (newY / this.resolution.height) * this.viewport.height;

if (this._isFullScreen) {
if (window.innerWidth / this.aspectRatio < window.innerHeight) {
@@ -435,9 +435,9 @@ export class Screen {

/**
* Takes a coordinate in Excalibur screen space, and translates it to Excalibur world space.
*
* World space is where [[entities|Entity]] in Excalibur live by default [[CoordPlane.World]]
* and extends infinitely out relative from the [[Camera]].
*
* World space is where [[entities|Entity]] in Excalibur live by default [[CoordPlane.World]]
* and extends infinitely out relative from the [[Camera]].
* @param point Screen coordinate to convert
*/
public screenToWorldCoordinates(point: Vector): Vector {
@@ -461,7 +461,7 @@ export class Screen {

/**
* Takes a coordinate in Excalibur world space, and translates it to Excalibur screen space.
*
*
* Screen space is where [[ScreenElements]] and [[entities|Entity]] with [[CoordPlane.Screen]] live.
* @param point World coordinate to convert
*/
@@ -497,7 +497,7 @@ export class Screen {
/**
* Returns a BoundingBox of the top left corner of the screen
* and the bottom right corner of the screen.
*
*
* World bounds are in world coordinates, useful for culling objects offscreen
*/
public getWorldBounds(): BoundingBox {
@@ -574,8 +574,8 @@ export class Screen {
}

private _computeFullScreen() {
document.body.style.margin = "0px";
document.body.style.overflow = "hidden";
document.body.style.margin = '0px';
document.body.style.overflow = 'hidden';
const aspect = this.aspectRatio;
let adjustedWidth = 0;
let adjustedHeight = 0;
4 changes: 2 additions & 2 deletions src/engine/TileMap.ts
Original file line number Diff line number Diff line change
@@ -181,8 +181,8 @@ export class TileMapImpl extends Entity<TransformComponent | CanvasDrawComponent
this.emit('preupdate', new Events.PreUpdateEvent(engine, delta, this));

const worldBounds = engine.getWorldBounds();
const worldCoordsUpperLeft = vec(worldBounds.left, worldBounds.top);// engine.screenToWorldCoordinates(new Vector(0, 0));
const worldCoordsLowerRight = vec(worldBounds.right, worldBounds.bottom);// engine.screenToWorldCoordinates(new Vector(engine.canvas.clientWidth, engine.canvas.clientHeight));
const worldCoordsUpperLeft = vec(worldBounds.left, worldBounds.top);
const worldCoordsLowerRight = vec(worldBounds.right, worldBounds.bottom);

this._onScreenXStart = Math.max(Math.floor((worldCoordsUpperLeft.x - this.x) / this.cellWidth) - 2, 0);
this._onScreenYStart = Math.max(Math.floor((worldCoordsUpperLeft.y - this.y) / this.cellHeight) - 2, 0);
14 changes: 7 additions & 7 deletions src/spec/ScreenSpec.ts
Original file line number Diff line number Diff line change
@@ -118,8 +118,8 @@ describe('A Screen', () => {

canvas.dispatchEvent(new Event('fullscreenchange'));
expect(sut.isFullScreen).toBe(true);
const fullScreenScreenCoord = sut.pageToScreenCoordinates(ex.vec(100, 100))

const fullScreenScreenCoord = sut.pageToScreenCoordinates(ex.vec(100, 100));
expect(nonFullScreenScreenCoord.sub(fullScreenScreenCoord)).toBeVector(ex.vec(0, 20));
});

@@ -139,8 +139,8 @@ describe('A Screen', () => {

canvas.dispatchEvent(new Event('fullscreenchange'));
expect(sut.isFullScreen).toBe(true);
const fullScreenScreenCoord = sut.pageToScreenCoordinates(ex.vec(100, 100))

const fullScreenScreenCoord = sut.pageToScreenCoordinates(ex.vec(100, 100));
expect(nonFullScreenScreenCoord.sub(fullScreenScreenCoord)).toBeVector(ex.vec(87.5, 0));
});

@@ -154,7 +154,7 @@ describe('A Screen', () => {
displayMode: ex.DisplayMode.FullScreen,
viewport: { width: 800, height: 600 }
});

const page = new ex.Vector(100, 200);
const screen = sut.pageToScreenCoordinates(page);

@@ -171,7 +171,7 @@ describe('A Screen', () => {
expect(page).toBeVector(page2);
expect(page).toBeVector(page3);
expect(screen).toBeVector(screen2);
expect(world).toBeVector(world2)
expect(world).toBeVector(world2);

});

@@ -273,7 +273,7 @@ describe('A Screen', () => {
}
);
const canvasStub = { ...canvas, style: styleProxy } as HTMLCanvasElement;
canvasStub.addEventListener = () => {};
canvasStub.addEventListener = () => { /* nothing */ };

const sut = new ex.Screen({
canvas: canvasStub,