arena: Allow camera scrolling with mouse drag
This commit is contained in:
parent
ccf47bb104
commit
fe9383837c
Binary file not shown.
Before Width: | Height: | Size: 141 B |
|
@ -38,9 +38,6 @@ module TK.SpaceTac {
|
||||||
// Debug mode
|
// Debug mode
|
||||||
debug = false
|
debug = false
|
||||||
|
|
||||||
// Current scaling
|
|
||||||
scaling = 1
|
|
||||||
|
|
||||||
constructor(private testmode = false) {
|
constructor(private testmode = false) {
|
||||||
super({
|
super({
|
||||||
width: 1920,
|
width: 1920,
|
||||||
|
|
|
@ -137,14 +137,11 @@ module TK.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Get proportional locations on screen
|
* Get proportional locations on screen
|
||||||
*/
|
*/
|
||||||
getScaling(): number {
|
getX(propx: number): number {
|
||||||
return this.gameui.scaling;
|
return propx * this.getWidth();
|
||||||
}
|
}
|
||||||
getX(propx: number, scaled = true): number {
|
getY(propy: number): number {
|
||||||
return propx * 1920 * (scaled ? this.getScaling() : 1);
|
return propy * this.getHeight();
|
||||||
}
|
|
||||||
getY(propy: number, scaled = true): number {
|
|
||||||
return propy * 1080 * (scaled ? this.getScaling() : 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
17
src/ui/battle/Arena.spec.ts
Normal file
17
src/ui/battle/Arena.spec.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
/// <reference path="../TestGame.ts"/>
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
|
@ -8,15 +8,9 @@ module TK.SpaceTac.UI {
|
||||||
// Link to battleview
|
// Link to battleview
|
||||||
view: BattleView
|
view: BattleView
|
||||||
|
|
||||||
// Boundaries of the arena
|
|
||||||
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
|
||||||
|
|
||||||
// Input capture
|
|
||||||
private mouse_capture?: UIImage
|
|
||||||
|
|
||||||
// List of ship sprites
|
// List of ship sprites
|
||||||
private ship_sprites: ArenaShip[] = []
|
private ship_sprites: ArenaShip[] = []
|
||||||
|
|
||||||
|
@ -54,7 +48,6 @@ module TK.SpaceTac.UI {
|
||||||
builder = builder.in(container);
|
builder = builder.in(container);
|
||||||
}
|
}
|
||||||
this.container = container;
|
this.container = container;
|
||||||
container.setPosition(this.boundaries.x, this.boundaries.y);
|
|
||||||
|
|
||||||
this.setupMouseCapture();
|
this.setupMouseCapture();
|
||||||
|
|
||||||
|
@ -94,33 +87,44 @@ module TK.SpaceTac.UI {
|
||||||
let view = this.view;
|
let view = this.view;
|
||||||
let button_down = false;
|
let button_down = false;
|
||||||
|
|
||||||
let background = new UIBuilder(view, this.container).image("battle-arena-background");
|
let zone = new UIBuilder(view, this.container).capture("arena-events");
|
||||||
background.setName("mouse-capture");
|
|
||||||
background.setScale(this.boundaries.width / background.width, this.boundaries.height / background.height)
|
|
||||||
|
|
||||||
// Capture clicks on background
|
// Capture clicks
|
||||||
background.setInteractive();
|
zone.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
|
||||||
background.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
|
console.error(pointer);
|
||||||
button_down = (pointer.buttons == 1);
|
button_down = (pointer.buttons == 1);
|
||||||
});
|
});
|
||||||
background.on("pointerup", (pointer: Phaser.Input.Pointer) => {
|
zone.on("pointerup", () => {
|
||||||
if (button_down) {
|
if (button_down) {
|
||||||
|
// TODO Only if no significant drag happened
|
||||||
button_down = false;
|
button_down = false;
|
||||||
this.callbacks_click.forEach(callback => callback());
|
this.callbacks_click.forEach(callback => callback());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
background.on("pointerout", () => {
|
zone.on("pointerout", () => {
|
||||||
this.callbacks_hover.forEach(callback => callback(null, null));
|
this.callbacks_hover.forEach(callback => callback(null, null));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Watch mouse move to capture hovering over background
|
// Watch mouse move to capture hovering
|
||||||
background.on("pointermove", (pointer: Phaser.Input.Pointer) => {
|
zone.on("pointermove", (pointer: Phaser.Input.Pointer) => {
|
||||||
let location = new ArenaLocation(pointer.x / this.view.getScaling(), pointer.y / this.view.getScaling());
|
if (button_down) {
|
||||||
let ship = this.getShip(location);
|
let dx = pointer.x - pointer.prevPosition.x;
|
||||||
this.callbacks_hover.forEach(callback => callback(location, ship));
|
let dy = pointer.y - pointer.prevPosition.y;
|
||||||
}, null);
|
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
|
* Get the boundaries of the arena on display
|
||||||
*/
|
*/
|
||||||
getBoundaries(scaled = false): IBounded {
|
getBoundaries(): IBounded {
|
||||||
if (scaled) {
|
return { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() };
|
||||||
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();
|
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);
|
ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player);
|
||||||
|
|
||||||
|
|
|
@ -187,6 +187,16 @@ module TK.SpaceTac.UI.Specs {
|
||||||
check.equals(a, 3);
|
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 => {
|
test.case("creates sub-builders, preserving text style", check => {
|
||||||
let base_style = new UITextStyle();
|
let base_style = new UITextStyle();
|
||||||
base_style.width = 123;
|
base_style.width = 123;
|
||||||
|
|
|
@ -108,7 +108,7 @@ module TK.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Internal method to add to the parent
|
* 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) {
|
if (this.parent instanceof UIImage) {
|
||||||
let gparent = this.parent.parentContainer;
|
let gparent = this.parent.parentContainer;
|
||||||
if (gparent) {
|
if (gparent) {
|
||||||
|
@ -236,6 +236,18 @@ module TK.SpaceTac.UI {
|
||||||
return result;
|
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
|
* Change the content of an component
|
||||||
*
|
*
|
||||||
|
|
7
src/ui/common/UIMouseCapture.ts
Normal file
7
src/ui/common/UIMouseCapture.ts
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
module TK.SpaceTac.UI {
|
||||||
|
/**
|
||||||
|
* UI component to capture mouse events on an area
|
||||||
|
*/
|
||||||
|
export class UIMouseCapture extends Phaser.GameObjects.Zone {
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue