Restored game area scaling to fit the screen
This commit is contained in:
parent
d6e1cff964
commit
26ee6c12bb
2
TODO.md
2
TODO.md
|
@ -4,8 +4,6 @@ To-Do-list
|
|||
Phaser 3 migration
|
||||
------------------
|
||||
|
||||
* Fit the game in window size
|
||||
* Fix top-right messages positions
|
||||
* Fix valuebar requiring to be in root display list
|
||||
* Restore unit tests about boundaries (in UITools)
|
||||
|
||||
|
|
|
@ -46,7 +46,6 @@
|
|||
<script src="build.js"></script>
|
||||
|
||||
<script>
|
||||
window.oncontextmenu = function (e) { e.preventDefault(); };
|
||||
window.onload = function () {
|
||||
window.game = new TK.SpaceTac.MainUI();
|
||||
};
|
||||
|
|
|
@ -38,13 +38,18 @@ module TK.SpaceTac {
|
|||
// Debug mode
|
||||
debug = false
|
||||
|
||||
// Current scaling
|
||||
scaling = 1
|
||||
|
||||
constructor(headless: boolean = false) {
|
||||
super({
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
type: headless ? Phaser.HEADLESS : Phaser.AUTO,
|
||||
backgroundColor: '#000000',
|
||||
parent: '-space-tac'
|
||||
parent: '-space-tac',
|
||||
disableContextMenu: true,
|
||||
"render.autoResize": true,
|
||||
});
|
||||
|
||||
this.storage = localStorage;
|
||||
|
@ -69,10 +74,27 @@ module TK.SpaceTac {
|
|||
this.scene.add('creation', UI.FleetCreationView);
|
||||
this.scene.add('universe', UI.UniverseMapView);
|
||||
|
||||
this.resizeToFitWindow();
|
||||
window.addEventListener("resize", () => this.resizeToFitWindow());
|
||||
|
||||
this.goToScene('boot');
|
||||
}
|
||||
}
|
||||
|
||||
resize(width: number, height: number, scaling?: number) {
|
||||
super.resize(width, height);
|
||||
|
||||
this.scaling = scaling ? scaling : 1;
|
||||
cfilter(this.scene.scenes, UI.BaseView).forEach(scene => scene.resize());
|
||||
}
|
||||
|
||||
resizeToFitWindow() {
|
||||
let width = window.innerWidth;
|
||||
let height = window.innerHeight;
|
||||
let scale = Math.min(width / 1920, height / 1080);
|
||||
this.resize(1920 * scale, 1080 * scale, scale);
|
||||
}
|
||||
|
||||
boot() {
|
||||
super.boot();
|
||||
this.options = new UI.GameOptions(this);
|
||||
|
|
|
@ -33,9 +33,9 @@ module TK.SpaceTac.UI {
|
|||
}
|
||||
|
||||
preload() {
|
||||
let bg = this.add.image(643, 435, "preload-background");
|
||||
let bg = this.add.image(this.getX(0.5) - 317, this.getY(0.5) - 105, "preload-background");
|
||||
bg.setOrigin(0);
|
||||
let bar = this.add.image(643, 435, "preload-bar");
|
||||
let bar = this.add.image(this.getX(0.5) - 317, this.getY(0.5) - 105, "preload-bar");
|
||||
bar.setOrigin(0);
|
||||
let mask = this.make.graphics({ x: bar.x, y: bar.y, add: false });
|
||||
mask.fillStyle(0xffffff);
|
||||
|
@ -46,7 +46,7 @@ module TK.SpaceTac.UI {
|
|||
mask.fillRect(0, 0, value * bar.width, bar.height);
|
||||
});
|
||||
|
||||
let text = this.add.text(this.getMidWidth(), 466, "... Loading ...", { font: "normal 36pt SpaceTac", fill: "#dbeff9" });
|
||||
let text = this.add.text(this.getX(0.5), this.getY(0.5) - 74, "... Loading ...", { font: "normal 36pt SpaceTac", fill: "#dbeff9" });
|
||||
text.setOrigin(0.5);
|
||||
|
||||
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
||||
|
|
|
@ -39,16 +39,16 @@ module TK.SpaceTac.UI {
|
|||
|
||||
// Get the size of display
|
||||
getWidth(): number {
|
||||
return this.cameras.main.width;
|
||||
return 1920;
|
||||
}
|
||||
getHeight(): number {
|
||||
return this.cameras.main.height;
|
||||
return 1080;
|
||||
}
|
||||
getMidWidth(): number {
|
||||
return this.getWidth() / 2;
|
||||
return 960;
|
||||
}
|
||||
getMidHeight(): number {
|
||||
return this.getHeight() / 2;
|
||||
return 540;
|
||||
}
|
||||
|
||||
init(data: object) {
|
||||
|
@ -93,6 +93,8 @@ module TK.SpaceTac.UI {
|
|||
this.messages = new Messages(this);
|
||||
this.dialogs_opened = [];
|
||||
|
||||
this.resize();
|
||||
|
||||
// Browser console variable (for debugging purpose)
|
||||
if (typeof window != "undefined") {
|
||||
let session = this.gameui.session;
|
||||
|
@ -105,6 +107,20 @@ module TK.SpaceTac.UI {
|
|||
}
|
||||
}
|
||||
|
||||
resize() {
|
||||
if (this.gameui) {
|
||||
if (this.layers) {
|
||||
this.layers.setScale(this.gameui.scaling);
|
||||
}
|
||||
if (this.dialogs_layer) {
|
||||
this.dialogs_layer.setScale(this.gameui.scaling);
|
||||
}
|
||||
if (this.cameras.main) {
|
||||
this.cameras.main.setViewport(0, 0, 1920 * this.gameui.scaling, 1080 * this.gameui.scaling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get options() {
|
||||
return this.gameui.options;
|
||||
}
|
||||
|
@ -134,6 +150,19 @@ module TK.SpaceTac.UI {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get proportional locations on screen
|
||||
*/
|
||||
getScaling(): number {
|
||||
return this.gameui.scaling;
|
||||
}
|
||||
getX(propx: number, scaled = true): number {
|
||||
return propx * 1920 * (scaled ? this.getScaling() : 1);
|
||||
}
|
||||
getY(propy: number, scaled = true): number {
|
||||
return propy * 1080 * (scaled ? this.getScaling() : 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a network connection to the backend server
|
||||
*/
|
||||
|
|
|
@ -9,7 +9,7 @@ module TK.SpaceTac.UI {
|
|||
view: BattleView
|
||||
|
||||
// Boundaries of the arena
|
||||
boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
|
||||
private boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
|
||||
|
||||
// Hint for weapon or move range
|
||||
range_hint: RangeHint
|
||||
|
@ -114,7 +114,7 @@ module TK.SpaceTac.UI {
|
|||
return;
|
||||
}
|
||||
|
||||
let location = new ArenaLocation(pointer.x, pointer.y);
|
||||
let location = new ArenaLocation(pointer.x / this.view.getScaling(), pointer.y / this.view.getScaling());
|
||||
let ship = this.getShip(location);
|
||||
this.callbacks_hover.forEach(callback => callback(location, ship));
|
||||
}, null);
|
||||
|
@ -273,8 +273,18 @@ module TK.SpaceTac.UI {
|
|||
/**
|
||||
* Get the boundaries of the arena on display
|
||||
*/
|
||||
getBoundaries(): IBounded {
|
||||
return this.boundaries;
|
||||
getBoundaries(scaled = false): IBounded {
|
||||
if (scaled) {
|
||||
let scaling = this.view.getScaling();
|
||||
return {
|
||||
x: Math.ceil(this.boundaries.x * scaling),
|
||||
y: Math.ceil(this.boundaries.y * scaling),
|
||||
width: Math.floor(this.boundaries.width * scaling),
|
||||
height: Math.floor(this.boundaries.height * scaling),
|
||||
}
|
||||
} else {
|
||||
return this.boundaries;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -21,7 +21,7 @@ module TK.SpaceTac.UI {
|
|||
|
||||
let builder = this.getBuilder();
|
||||
|
||||
builder.configure(10, 6, this.battleview.arena.getBoundaries());
|
||||
builder.configure(10, 6, this.battleview.arena.getBoundaries(true));
|
||||
|
||||
ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player);
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ module TK.SpaceTac.UI {
|
|||
UITools.drawBackground(this.text, this.background, 6);
|
||||
|
||||
let bounds = UITools.getBounds(this);
|
||||
this.setPosition(parent.view.getWidth() - bounds.width - 10, 10);
|
||||
this.setPosition(parent.view.getX(1) - bounds.width - 25, 25);
|
||||
parent.view.timer.schedule(duration, () => this.hide());
|
||||
}
|
||||
|
||||
|
@ -52,13 +52,11 @@ module TK.SpaceTac.UI {
|
|||
*/
|
||||
addMessage(text: string, duration: number = 3000): void {
|
||||
let message = new Message(this, text, duration);
|
||||
this.container.add(message);
|
||||
|
||||
let bounds = UITools.getBounds(message);
|
||||
|
||||
cfilter(this.container.list, Message).forEach(child => {
|
||||
child.y += bounds.height + 5;
|
||||
child.y += bounds.height + 15;
|
||||
});
|
||||
this.container.add(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -43,7 +43,12 @@ module TK.SpaceTac.UI {
|
|||
}
|
||||
|
||||
getBestPosition(item: IBounded, width: number, height: number): [number, number] {
|
||||
let viewport = this.viewport || { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() };
|
||||
let viewport = this.viewport || {
|
||||
x: this.view.getX(0),
|
||||
y: this.view.getY(0),
|
||||
width: this.view.getX(1) - this.view.getX(0),
|
||||
height: this.view.getY(1) - this.view.getY(0)
|
||||
};
|
||||
let candidates = [
|
||||
this.tryPosition(viewport, { x: item.x + item.width / 2 - width / 2, y: item.y + item.height + this.margin, width: width, height: height }),
|
||||
this.tryPosition(viewport, { x: item.x + item.width + this.margin, y: item.y + item.height / 2 - height / 2, width: width, height: height }),
|
||||
|
|
|
@ -148,6 +148,7 @@ module TK.SpaceTac.UI {
|
|||
});
|
||||
result.setFont(`${style.bold ? "bold " : ""}${style.size}pt SpaceTac`);
|
||||
result.setOrigin(style.center ? 0.5 : 0, style.vcenter ? 0.5 : 0);
|
||||
result.setScaleMode(Phaser.ScaleModes.LINEAR);
|
||||
if (style.width) {
|
||||
result.setWordWrapWidth(style.width);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue