From fe9383837ca4576ad567eec9b6a3c768b6eb64a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Fri, 10 May 2019 00:57:21 +0200 Subject: [PATCH] arena: Allow camera scrolling with mouse drag --- data/stage2/image/battle/arena/background.png | Bin 141 -> 0 bytes src/MainUI.ts | 3 - src/ui/BaseView.ts | 11 ++-- src/ui/battle/Arena.spec.ts | 17 +++++ src/ui/battle/Arena.ts | 62 ++++++++---------- src/ui/battle/ShipTooltip.ts | 2 +- src/ui/common/UIBuilder.spec.ts | 10 +++ src/ui/common/UIBuilder.ts | 14 +++- src/ui/common/UIMouseCapture.ts | 7 ++ 9 files changed, 80 insertions(+), 46 deletions(-) delete mode 100644 data/stage2/image/battle/arena/background.png create mode 100644 src/ui/battle/Arena.spec.ts create mode 100644 src/ui/common/UIMouseCapture.ts diff --git a/data/stage2/image/battle/arena/background.png b/data/stage2/image/battle/arena/background.png deleted file mode 100644 index 7347a6404dff0685ded5f99210bd9401bdbd572d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 141 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&kwgiCK(KP54cJDo{wu)5S3);_%ypjEq2DlfwV?c^(cR a=6f~)1qR0H-@~s1ISihzelF{r5}E*p)glo9 diff --git a/src/MainUI.ts b/src/MainUI.ts index c9c9dff..034386b 100644 --- a/src/MainUI.ts +++ b/src/MainUI.ts @@ -38,9 +38,6 @@ module TK.SpaceTac { // Debug mode debug = false - // Current scaling - scaling = 1 - constructor(private testmode = false) { super({ width: 1920, diff --git a/src/ui/BaseView.ts b/src/ui/BaseView.ts index 82090c4..7047f21 100644 --- a/src/ui/BaseView.ts +++ b/src/ui/BaseView.ts @@ -137,14 +137,11 @@ module TK.SpaceTac.UI { /** * Get proportional locations on screen */ - getScaling(): number { - return this.gameui.scaling; + getX(propx: number): number { + return propx * this.getWidth(); } - 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); + getY(propy: number): number { + return propy * this.getHeight(); } /** diff --git a/src/ui/battle/Arena.spec.ts b/src/ui/battle/Arena.spec.ts new file mode 100644 index 0000000..0c12ec3 --- /dev/null +++ b/src/ui/battle/Arena.spec.ts @@ -0,0 +1,17 @@ +/// + +module TK.SpaceTac.UI.Specs { + testing("Arena", test => { + let testgame = setupBattleview(test); + + test.case("scrolls the camera", check => { + let arena = testgame.view.arena; + expect(arena.container.x).toEqual(0); + expect(arena.container.y).toEqual(0); + + arena.scrollCamera(50, -12); + expect(arena.container.x).toEqual(50); + expect(arena.container.y).toEqual(-12); + }); + }); +} diff --git a/src/ui/battle/Arena.ts b/src/ui/battle/Arena.ts index f2d9a1a..4f2a4b6 100644 --- a/src/ui/battle/Arena.ts +++ b/src/ui/battle/Arena.ts @@ -8,15 +8,9 @@ module TK.SpaceTac.UI { // Link to battleview view: BattleView - // Boundaries of the arena - private boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 } - // Hint for weapon or move range range_hint: RangeHint - // Input capture - private mouse_capture?: UIImage - // List of ship sprites private ship_sprites: ArenaShip[] = [] @@ -54,7 +48,6 @@ module TK.SpaceTac.UI { builder = builder.in(container); } this.container = container; - container.setPosition(this.boundaries.x, this.boundaries.y); this.setupMouseCapture(); @@ -94,33 +87,44 @@ module TK.SpaceTac.UI { let view = this.view; let button_down = false; - let background = new UIBuilder(view, this.container).image("battle-arena-background"); - background.setName("mouse-capture"); - background.setScale(this.boundaries.width / background.width, this.boundaries.height / background.height) + let zone = new UIBuilder(view, this.container).capture("arena-events"); - // Capture clicks on background - background.setInteractive(); - background.on("pointerdown", (pointer: Phaser.Input.Pointer) => { + // Capture clicks + zone.on("pointerdown", (pointer: Phaser.Input.Pointer) => { + console.error(pointer); button_down = (pointer.buttons == 1); }); - background.on("pointerup", (pointer: Phaser.Input.Pointer) => { + zone.on("pointerup", () => { if (button_down) { + // TODO Only if no significant drag happened button_down = false; this.callbacks_click.forEach(callback => callback()); } }); - background.on("pointerout", () => { + zone.on("pointerout", () => { this.callbacks_hover.forEach(callback => callback(null, null)); }); - // Watch mouse move to capture hovering over background - background.on("pointermove", (pointer: Phaser.Input.Pointer) => { - 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); + // Watch mouse move to capture hovering + zone.on("pointermove", (pointer: Phaser.Input.Pointer) => { + if (button_down) { + let dx = pointer.x - pointer.prevPosition.x; + let dy = pointer.y - pointer.prevPosition.y; + this.scrollCamera(dx, dy); + } else { + let location = new ArenaLocation(pointer.x - this.container.x, pointer.y - this.container.y); + let ship = this.getShip(location); + this.callbacks_hover.forEach(callback => callback(location, ship)); + } + }); + } - this.mouse_capture = background; + /** + * Scroll the camera of a given relative amount + */ + scrollCamera(dx: number, dy: number): void { + this.container.setPosition(this.container.x + dx, this.container.y + dy); + this.callbacks_hover.forEach(callback => callback(null, null)); } /** @@ -274,18 +278,8 @@ module TK.SpaceTac.UI { /** * Get the boundaries of the arena on display */ - 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; - } + getBoundaries(): IBounded { + return { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() }; } /** diff --git a/src/ui/battle/ShipTooltip.ts b/src/ui/battle/ShipTooltip.ts index e51b3cb..a99bd8b 100644 --- a/src/ui/battle/ShipTooltip.ts +++ b/src/ui/battle/ShipTooltip.ts @@ -21,7 +21,7 @@ module TK.SpaceTac.UI { let builder = this.getBuilder(); - builder.configure(10, 6, this.battleview.arena.getBoundaries(true)); + builder.configure(10, 6, this.battleview.arena.getBoundaries()); ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player); diff --git a/src/ui/common/UIBuilder.spec.ts b/src/ui/common/UIBuilder.spec.ts index b3e49cf..a6c392f 100644 --- a/src/ui/common/UIBuilder.spec.ts +++ b/src/ui/common/UIBuilder.spec.ts @@ -187,6 +187,16 @@ module TK.SpaceTac.UI.Specs { check.equals(a, 3); }) + test.case("can create capture zones", check => { + let builder = new UIBuilder(testgame.view); + + builder.capture("test-capture1"); + checkcomp(["View layers", "base", 0], UIMouseCapture, "test-capture1", { x: 0, y: 0, width: 1920, height: 1080 }); + + builder.capture("test-capture2", 5, 10, 20, 30); + checkcomp(["View layers", "base", 1], UIMouseCapture, "test-capture2", { x: 5, y: 10, width: 20, height: 30 }); + }) + test.case("creates sub-builders, preserving text style", check => { let base_style = new UITextStyle(); base_style.width = 123; diff --git a/src/ui/common/UIBuilder.ts b/src/ui/common/UIBuilder.ts index d0ae2f3..41e84f4 100644 --- a/src/ui/common/UIBuilder.ts +++ b/src/ui/common/UIBuilder.ts @@ -108,7 +108,7 @@ module TK.SpaceTac.UI { /** * Internal method to add to the parent */ - private add(child: UIText | UIImage | UIButton | UIContainer | UIGraphics): void { + private add(child: UIText | UIImage | UIButton | UIContainer | UIGraphics | UIMouseCapture): void { if (this.parent instanceof UIImage) { let gparent = this.parent.parentContainer; if (gparent) { @@ -236,6 +236,18 @@ module TK.SpaceTac.UI { return result; } + /** + * Add a mouse capture area + */ + capture(name: string, x = 0, y = 0, width = this.parent.width || this.view.getWidth(), height = this.parent.height || this.view.getHeight()) { + let result = new UIMouseCapture(this.view, x, y, width, height); + result.setOrigin(0); + result.setName(name); + result.setInteractive(); + this.add(result); + return result; + } + /** * Change the content of an component * diff --git a/src/ui/common/UIMouseCapture.ts b/src/ui/common/UIMouseCapture.ts new file mode 100644 index 0000000..ac48939 --- /dev/null +++ b/src/ui/common/UIMouseCapture.ts @@ -0,0 +1,7 @@ +module TK.SpaceTac.UI { + /** + * UI component to capture mouse events on an area + */ + export class UIMouseCapture extends Phaser.GameObjects.Zone { + } +}