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
|
Phaser 3 migration
|
||||||
------------------
|
------------------
|
||||||
|
|
||||||
* Fit the game in window size
|
|
||||||
* Fix top-right messages positions
|
|
||||||
* Fix valuebar requiring to be in root display list
|
* Fix valuebar requiring to be in root display list
|
||||||
* Restore unit tests about boundaries (in UITools)
|
* Restore unit tests about boundaries (in UITools)
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,6 @@
|
||||||
<script src="build.js"></script>
|
<script src="build.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.oncontextmenu = function (e) { e.preventDefault(); };
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
window.game = new TK.SpaceTac.MainUI();
|
window.game = new TK.SpaceTac.MainUI();
|
||||||
};
|
};
|
||||||
|
|
|
@ -38,13 +38,18 @@ module TK.SpaceTac {
|
||||||
// Debug mode
|
// Debug mode
|
||||||
debug = false
|
debug = false
|
||||||
|
|
||||||
|
// Current scaling
|
||||||
|
scaling = 1
|
||||||
|
|
||||||
constructor(headless: boolean = false) {
|
constructor(headless: boolean = false) {
|
||||||
super({
|
super({
|
||||||
width: 1920,
|
width: 1920,
|
||||||
height: 1080,
|
height: 1080,
|
||||||
type: headless ? Phaser.HEADLESS : Phaser.AUTO,
|
type: headless ? Phaser.HEADLESS : Phaser.AUTO,
|
||||||
backgroundColor: '#000000',
|
backgroundColor: '#000000',
|
||||||
parent: '-space-tac'
|
parent: '-space-tac',
|
||||||
|
disableContextMenu: true,
|
||||||
|
"render.autoResize": true,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.storage = localStorage;
|
this.storage = localStorage;
|
||||||
|
@ -69,10 +74,27 @@ module TK.SpaceTac {
|
||||||
this.scene.add('creation', UI.FleetCreationView);
|
this.scene.add('creation', UI.FleetCreationView);
|
||||||
this.scene.add('universe', UI.UniverseMapView);
|
this.scene.add('universe', UI.UniverseMapView);
|
||||||
|
|
||||||
|
this.resizeToFitWindow();
|
||||||
|
window.addEventListener("resize", () => this.resizeToFitWindow());
|
||||||
|
|
||||||
this.goToScene('boot');
|
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() {
|
boot() {
|
||||||
super.boot();
|
super.boot();
|
||||||
this.options = new UI.GameOptions(this);
|
this.options = new UI.GameOptions(this);
|
||||||
|
|
|
@ -33,9 +33,9 @@ module TK.SpaceTac.UI {
|
||||||
}
|
}
|
||||||
|
|
||||||
preload() {
|
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);
|
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);
|
bar.setOrigin(0);
|
||||||
let mask = this.make.graphics({ x: bar.x, y: bar.y, add: false });
|
let mask = this.make.graphics({ x: bar.x, y: bar.y, add: false });
|
||||||
mask.fillStyle(0xffffff);
|
mask.fillStyle(0xffffff);
|
||||||
|
@ -46,7 +46,7 @@ module TK.SpaceTac.UI {
|
||||||
mask.fillRect(0, 0, value * bar.width, bar.height);
|
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);
|
text.setOrigin(0.5);
|
||||||
|
|
||||||
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
||||||
|
|
|
@ -39,16 +39,16 @@ module TK.SpaceTac.UI {
|
||||||
|
|
||||||
// Get the size of display
|
// Get the size of display
|
||||||
getWidth(): number {
|
getWidth(): number {
|
||||||
return this.cameras.main.width;
|
return 1920;
|
||||||
}
|
}
|
||||||
getHeight(): number {
|
getHeight(): number {
|
||||||
return this.cameras.main.height;
|
return 1080;
|
||||||
}
|
}
|
||||||
getMidWidth(): number {
|
getMidWidth(): number {
|
||||||
return this.getWidth() / 2;
|
return 960;
|
||||||
}
|
}
|
||||||
getMidHeight(): number {
|
getMidHeight(): number {
|
||||||
return this.getHeight() / 2;
|
return 540;
|
||||||
}
|
}
|
||||||
|
|
||||||
init(data: object) {
|
init(data: object) {
|
||||||
|
@ -93,6 +93,8 @@ module TK.SpaceTac.UI {
|
||||||
this.messages = new Messages(this);
|
this.messages = new Messages(this);
|
||||||
this.dialogs_opened = [];
|
this.dialogs_opened = [];
|
||||||
|
|
||||||
|
this.resize();
|
||||||
|
|
||||||
// Browser console variable (for debugging purpose)
|
// Browser console variable (for debugging purpose)
|
||||||
if (typeof window != "undefined") {
|
if (typeof window != "undefined") {
|
||||||
let session = this.gameui.session;
|
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() {
|
get options() {
|
||||||
return this.gameui.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
|
* Get a network connection to the backend server
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -9,7 +9,7 @@ module TK.SpaceTac.UI {
|
||||||
view: BattleView
|
view: BattleView
|
||||||
|
|
||||||
// Boundaries of the arena
|
// 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
|
// Hint for weapon or move range
|
||||||
range_hint: RangeHint
|
range_hint: RangeHint
|
||||||
|
@ -114,7 +114,7 @@ module TK.SpaceTac.UI {
|
||||||
return;
|
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);
|
let ship = this.getShip(location);
|
||||||
this.callbacks_hover.forEach(callback => callback(location, ship));
|
this.callbacks_hover.forEach(callback => callback(location, ship));
|
||||||
}, null);
|
}, null);
|
||||||
|
@ -273,9 +273,19 @@ module TK.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Get the boundaries of the arena on display
|
* Get the boundaries of the arena on display
|
||||||
*/
|
*/
|
||||||
getBoundaries(): IBounded {
|
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;
|
return this.boundaries;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if a new drone as been deployed
|
* Check if a new drone as been deployed
|
||||||
|
|
|
@ -21,7 +21,7 @@ module TK.SpaceTac.UI {
|
||||||
|
|
||||||
let builder = this.getBuilder();
|
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);
|
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);
|
UITools.drawBackground(this.text, this.background, 6);
|
||||||
|
|
||||||
let bounds = UITools.getBounds(this);
|
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());
|
parent.view.timer.schedule(duration, () => this.hide());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,13 +52,11 @@ module TK.SpaceTac.UI {
|
||||||
*/
|
*/
|
||||||
addMessage(text: string, duration: number = 3000): void {
|
addMessage(text: string, duration: number = 3000): void {
|
||||||
let message = new Message(this, text, duration);
|
let message = new Message(this, text, duration);
|
||||||
this.container.add(message);
|
|
||||||
|
|
||||||
let bounds = UITools.getBounds(message);
|
let bounds = UITools.getBounds(message);
|
||||||
|
|
||||||
cfilter(this.container.list, Message).forEach(child => {
|
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] {
|
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 = [
|
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 / 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 }),
|
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.setFont(`${style.bold ? "bold " : ""}${style.size}pt SpaceTac`);
|
||||||
result.setOrigin(style.center ? 0.5 : 0, style.vcenter ? 0.5 : 0);
|
result.setOrigin(style.center ? 0.5 : 0, style.vcenter ? 0.5 : 0);
|
||||||
|
result.setScaleMode(Phaser.ScaleModes.LINEAR);
|
||||||
if (style.width) {
|
if (style.width) {
|
||||||
result.setWordWrapWidth(style.width);
|
result.setWordWrapWidth(style.width);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue