games/spacetac
games
/
spacetac
1
0
Fork 0
Code Releases Activity

Improved ghost display while planning

This commit is contained in:
Michaël Lemaire 2019-05-20 23:09:10 +02:00
parent fa73b5485d
commit 61cab14005
5 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/MainUI.ts
View File

@ -47,7 +47,7 @@ module TK.SpaceTac {
super({
width: 1920,
height: 1080,
type: testmode ? Phaser.CANVAS : Phaser.WEBGL, // cannot really use HEADLESS because of bugs
type: testmode ? Phaser.CANVAS : Phaser.AUTO, // cannot really use HEADLESS because of bugs
backgroundColor: '#000000',
parent: '-space-tac',
disableContextMenu: true,

3
src/ui/BaseView.ts
View File

@ -50,6 +50,9 @@ module TK.SpaceTac.UI {
getMidHeight(): number {
return 540;
}
isTintSupported() {
return this.game.renderer.type == Phaser.WEBGL;
}
init(data: object) {
console.log(`Starting scene ${classname(this)}`);

13
src/ui/battle/ArenaShip.ts
View File

@ -14,7 +14,7 @@ module TK.SpaceTac.UI {
enemy: boolean
// Ship sprite
sprite: UIImage
sprite: UIContainer
// Stasis effect
stasis: UIImage
@ -50,13 +50,20 @@ module TK.SpaceTac.UI {
// Add frame indicating which side this ship is on
this.frame_owner = builder.image(this.enemy ? "battle-hud-ship-enemy" : "battle-hud-ship-own", 0, 0, true);
this.frame_owner.setVisible(this.ship.alive && !this.battleview.isTintSupported());
this.frame_selected = builder.image(this.enemy ? "battle-hud-ship-enemy-selected" : "battle-hud-ship-own-selected", 0, 0, true);
this.setSelected(false);
this.frame_hover = builder.image("battle-hud-ship-hover", 0, 0, true);
this.frame_hover.setVisible(false);
// Add ship sprite
this.sprite = builder.image(`ship-${ship.model.code}-sprite`, 0, 0, true);
this.sprite = builder.container("sprite");
if (this.battleview.isTintSupported()) {
const outline = this.sprite.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true);
outline.setScale(1.1);
outline.setTintFill(this.enemy ? 0xc06858 : 0x65a898);
}
this.sprite.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true);
this.sprite.setRotation(ship.arena_angle);
// Add stasis effect
@ -230,7 +237,7 @@ module TK.SpaceTac.UI {
* This will alter the HUD frame to show this state
*/
async setSelected(selected: boolean, animate = true): Promise<void> {
this.frame_owner.setVisible(this.ship.alive);
this.frame_owner.setVisible(this.ship.alive && !this.battleview.isTintSupported());
this.frame_selected.setVisible(this.ship.alive && selected);
if (selected && animate) {

8
src/ui/battle/BattleSplash.ts
View File

@ -21,8 +21,8 @@ module TK.SpaceTac.UI {
builder.in(player1, builder => {
builder.image("battle-splash-moving-part", 0, 0, true);
let player1_name = builder.text(this.fleet1.name, -224, 0, { size: 22, bold: true, color: "#154d13" });
player1_name.angle = -48;
let player1_name = builder.text(this.fleet1.name, -224, 0, { size: 22, bold: true, color: "#65a898", shadow: true });
player1_name.angle = -49;
this.fleet1.ships.forEach((ship, index) => {
let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true);
@ -38,8 +38,8 @@ module TK.SpaceTac.UI {
builder.in(player2, builder => {
builder.image("battle-splash-moving-part", 0, 0, true);
let player2_name = builder.text(this.fleet2.name, -224, 0, { size: 22, bold: true, color: "#651713" });
player2_name.angle = -228;
let player2_name = builder.text(this.fleet2.name, -224, 0, { size: 22, bold: true, color: "#c06858", shadow: true });
player2_name.angle = -229;
this.fleet2.ships.forEach((ship, index) => {
let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true);

30
src/ui/battle/TurnPlanDisplay.ts
View File

@ -55,20 +55,20 @@ module TK.SpaceTac.UI {
if (ship) {
const move = first(plan.actions, action => action.category === ActionCategory.MOVE);
this.updateMoveAction(ship, move, parent);
const final_location = (move && move.target) ? move.target : ship.location;
const active = first(plan.actions, action => action.category === ActionCategory.ACTIVE);
this.updateMoveAction(ship, move, active, parent);
this.updateActiveAction(ship, final_location, active, parent);
} else {
console.error("Ship not found to update actions", plan);
}
}
private updateMoveAction(ship: Ship, plan: ActionPlan | null, parent: UIContainer) {
private updateMoveAction(ship: Ship, plan: ActionPlan | null, active: ActionPlan | null, parent: UIContainer) {
let builder = parent.getBuilder();
let child = parent.getByName("moveline");
const graphics = child ? as(UIGraphics, child) : parent.getBuilder().graphics("moveline");
const graphics = child ? as(UIGraphics, child) : builder.graphics("moveline");
graphics.clear();
if (plan && plan.target) {
graphics.addLine({
@ -80,12 +80,17 @@ module TK.SpaceTac.UI {
}
child = parent.getByName("moveghost");
const ghost = child ? as(UIImage, child) : parent.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true);
const ghost = child ? as(UIImage, child) : builder.image(`ship-${ship.model.code}-sprite`, 0, 0, true);
ghost.setName("moveghost");
if (plan && plan.target) {
ghost.setVisible(true);
ghost.setPosition(plan.target.x, plan.target.y);
ghost.setTint(PLAN_COLOR);
if (builder.view.isTintSupported()) {
ghost.setTintFill(PLAN_COLOR);
} else {
ghost.setAlpha(0.6);
}
ghost.setRotation((active && active.target) ? arenaAngle(plan.target, active.target) : arenaAngle(ship.location, plan.target));
} else {
ghost.setVisible(false);
}
@ -124,7 +129,16 @@ module TK.SpaceTac.UI {
border: { color: PLAN_COLOR_HL, alpha: 0.2, width: 4 },
});
} else {
const center = plan ? plan.target : from;
const center = plan ? nn(plan.target) : from;
if (arenaDistance(from, center) > 0.0) {
graphics.addLine({
start: from,
end: center,
width: 6,
alpha: 0.2,
color: PLAN_COLOR_HL
});
}
graphics.addCircle({
center,
radius,