Added background for action buttons, with active state
This commit is contained in:
parent
66f86b4ddb
commit
9b09bb96ec
Binary file not shown.
BIN
src/assets/images/battle/action-active.png
Normal file
BIN
src/assets/images/battle/action-active.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.2 KiB |
BIN
src/assets/images/battle/action-inactive.png
Normal file
BIN
src/assets/images/battle/action-inactive.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 138 B After Width: | Height: | Size: 122 B |
|
@ -15,6 +15,8 @@ module SpaceTac.View {
|
||||||
this.load.image("battle-shiplist-enemy", "assets/images/battle/shiplist-enemy.png");
|
this.load.image("battle-shiplist-enemy", "assets/images/battle/shiplist-enemy.png");
|
||||||
this.load.image("battle-arena-background", "assets/images/battle/arena/background.png");
|
this.load.image("battle-arena-background", "assets/images/battle/arena/background.png");
|
||||||
this.load.image("battle-actionbar", "assets/images/battle/actionbar.png");
|
this.load.image("battle-actionbar", "assets/images/battle/actionbar.png");
|
||||||
|
this.load.image("battle-action-inactive", "assets/images/battle/action-inactive.png");
|
||||||
|
this.load.image("battle-action-active", "assets/images/battle/action-active.png");
|
||||||
this.load.image("battle-actionpointsempty", "assets/images/battle/actionpointsempty.png");
|
this.load.image("battle-actionpointsempty", "assets/images/battle/actionpointsempty.png");
|
||||||
this.load.image("battle-actionpointsfull", "assets/images/battle/actionpointsfull.png");
|
this.load.image("battle-actionpointsfull", "assets/images/battle/actionpointsfull.png");
|
||||||
this.load.image("battle-arena-shipspritehover", "assets/images/battle/arena/shipspritehover.png");
|
this.load.image("battle-arena-shipspritehover", "assets/images/battle/arena/shipspritehover.png");
|
||||||
|
|
|
@ -40,7 +40,7 @@ module SpaceTac.View {
|
||||||
|
|
||||||
// Add an action icon
|
// Add an action icon
|
||||||
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
||||||
var icon = new ActionIcon(this, 110 + this.actions.length * 50, 25, ship, action);
|
var icon = new ActionIcon(this, 90 + this.actions.length * 62, 2, ship, action);
|
||||||
this.actions.push(icon);
|
this.actions.push(icon);
|
||||||
return icon;
|
return icon;
|
||||||
}
|
}
|
||||||
|
@ -73,6 +73,9 @@ module SpaceTac.View {
|
||||||
// Called by an action icon when the action has been applied
|
// Called by an action icon when the action has been applied
|
||||||
actionEnded(): void {
|
actionEnded(): void {
|
||||||
this.updateActionPoints();
|
this.updateActionPoints();
|
||||||
|
this.actions.forEach((action: ActionIcon) => {
|
||||||
|
action.updateActiveStatus();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,9 @@ module SpaceTac.View {
|
||||||
// Current targetting
|
// Current targetting
|
||||||
private targetting: Targetting;
|
private targetting: Targetting;
|
||||||
|
|
||||||
|
// Layer applied when the action is active
|
||||||
|
private active: Phaser.Image;
|
||||||
|
|
||||||
// Create an icon for a single ship action
|
// Create an icon for a single ship action
|
||||||
constructor(bar: ActionBar, x: number, y: number, ship: Game.Ship, action: Game.BaseAction) {
|
constructor(bar: ActionBar, x: number, y: number, ship: Game.Ship, action: Game.BaseAction) {
|
||||||
this.bar = bar;
|
this.bar = bar;
|
||||||
|
@ -25,15 +28,20 @@ module SpaceTac.View {
|
||||||
this.ship = ship;
|
this.ship = ship;
|
||||||
this.action = action;
|
this.action = action;
|
||||||
|
|
||||||
super(bar.game, x, y, "action-" + action.code);
|
super(bar.game, x, y, "battle-action-inactive");
|
||||||
bar.addChild(this);
|
bar.addChild(this);
|
||||||
|
|
||||||
// TODO Handle action.canBeUsed() result to enable/disable the button
|
// Active layer
|
||||||
|
this.active = new Phaser.Image(bar.battleview.game, 0, 0, "battle-action-active", 0);
|
||||||
|
this.addChild(this.active);
|
||||||
|
|
||||||
this.input.useHandCursor = true;
|
// Click process
|
||||||
this.onInputUp.add(() => {
|
this.onInputUp.add(() => {
|
||||||
this.processClick();
|
this.processClick();
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
this.updateActiveStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Process a click event on the action icon
|
// Process a click event on the action icon
|
||||||
|
@ -70,5 +78,16 @@ module SpaceTac.View {
|
||||||
this.bar.actionEnded();
|
this.bar.actionEnded();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update the active status, from the action canBeUsed result
|
||||||
|
updateActiveStatus() {
|
||||||
|
var active = this.action.canBeUsed(this.battleview.battle, this.ship);
|
||||||
|
|
||||||
|
var tween = this.battleview.game.tweens.create(this.active);
|
||||||
|
tween.to({alpha: active ? 1 : 0});
|
||||||
|
tween.start();
|
||||||
|
|
||||||
|
this.input.useHandCursor = active;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue