Added hover effects on ships in the arena
This commit is contained in:
parent
fc5c8a7c55
commit
a4edaf5430
|
@ -17,6 +17,7 @@ module SpaceTac.View {
|
||||||
this.load.image("ui-battle-actionbar", "assets/images/ui/battle/actionbar.png");
|
this.load.image("ui-battle-actionbar", "assets/images/ui/battle/actionbar.png");
|
||||||
this.load.image("ui-battle-actionpointsempty", "assets/images/ui/battle/actionpointsempty.png");
|
this.load.image("ui-battle-actionpointsempty", "assets/images/ui/battle/actionpointsempty.png");
|
||||||
this.load.image("ui-battle-actionpointsfull", "assets/images/ui/battle/actionpointsfull.png");
|
this.load.image("ui-battle-actionpointsfull", "assets/images/ui/battle/actionpointsfull.png");
|
||||||
|
this.load.image("ui-battle-shipspritehover", "assets/images/ui/battle/shipspritehover.png");
|
||||||
this.load.image("ui-ship-card", "assets/images/battle/ship-card.png");
|
this.load.image("ui-ship-card", "assets/images/battle/ship-card.png");
|
||||||
this.load.image("arena-ship", "assets/images/battle/ship01.png");
|
this.load.image("arena-ship", "assets/images/battle/ship01.png");
|
||||||
this.load.image("ui-bar-standard-background", "assets/images/ui/bars/standard-background.png");
|
this.load.image("ui-bar-standard-background", "assets/images/ui/bars/standard-background.png");
|
||||||
|
|
|
@ -27,6 +27,7 @@ module SpaceTac.View {
|
||||||
|
|
||||||
// TODO Handle action.canBeUsed() result to enable/disable the button
|
// TODO Handle action.canBeUsed() result to enable/disable the button
|
||||||
|
|
||||||
|
this.input.useHandCursor = true;
|
||||||
this.onInputUp.add(() => {
|
this.onInputUp.add(() => {
|
||||||
this.processClick();
|
this.processClick();
|
||||||
}, this);
|
}, this);
|
||||||
|
|
|
@ -14,8 +14,9 @@ module SpaceTac.View {
|
||||||
private battleview: BattleView;
|
private battleview: BattleView;
|
||||||
|
|
||||||
// List of ship sprites
|
// List of ship sprites
|
||||||
private ship_sprites: ShipArenaSprite[];
|
private ship_sprites: ArenaShip[];
|
||||||
|
|
||||||
|
// Create a graphical arena for ship sprites to fight in a 2D space
|
||||||
constructor(battleview: BattleView) {
|
constructor(battleview: BattleView) {
|
||||||
this.battleview = battleview;
|
this.battleview = battleview;
|
||||||
this.ship_sprites = [];
|
this.ship_sprites = [];
|
||||||
|
@ -23,7 +24,7 @@ module SpaceTac.View {
|
||||||
super(battleview.game);
|
super(battleview.game);
|
||||||
|
|
||||||
var background = new Phaser.Button(battleview.game, 0, 0, "ui-arena-background");
|
var background = new Phaser.Button(battleview.game, 0, 0, "ui-arena-background");
|
||||||
background.scale.set(20, 10);
|
background.scale.set(this.stage.width / background.width, this.stage.height / background.height);
|
||||||
this.background = background;
|
this.background = background;
|
||||||
|
|
||||||
// Capture clicks on background
|
// Capture clicks on background
|
||||||
|
@ -54,21 +55,29 @@ module SpaceTac.View {
|
||||||
|
|
||||||
// Add ship sprites
|
// Add ship sprites
|
||||||
this.battleview.battle.play_order.forEach(function (ship: Game.Ship) {
|
this.battleview.battle.play_order.forEach(function (ship: Game.Ship) {
|
||||||
var sprite = new ShipArenaSprite(arena.battleview, ship);
|
var sprite = new ArenaShip(arena.battleview, ship);
|
||||||
arena.add(sprite);
|
arena.addChild(sprite);
|
||||||
arena.ship_sprites.push(sprite);
|
arena.ship_sprites.push(sprite);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Find the sprite for a ship
|
// Find the sprite for a ship
|
||||||
findShipSprite(ship: Game.Ship): ShipArenaSprite {
|
findShipSprite(ship: Game.Ship): ArenaShip {
|
||||||
var result: ShipArenaSprite = null;
|
var result: ArenaShip = null;
|
||||||
this.ship_sprites.forEach((sprite: ShipArenaSprite) => {
|
this.ship_sprites.forEach((sprite: ArenaShip) => {
|
||||||
if (sprite.ship === ship) {
|
if (sprite.ship === ship) {
|
||||||
result = sprite;
|
result = sprite;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set the hovered state on a ship sprite
|
||||||
|
setShipHovered(ship: Game.Ship, hovered: boolean): void {
|
||||||
|
var arena_ship = this.findShipSprite(ship);
|
||||||
|
if (arena_ship) {
|
||||||
|
arena_ship.setHovered(hovered);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
74
src/scripts/view/battle/ArenaShip.ts
Normal file
74
src/scripts/view/battle/ArenaShip.ts
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
module SpaceTac.View {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Ship sprite in the arena (BattleView)
|
||||||
|
export class ArenaShip extends Phaser.Group {
|
||||||
|
// Link to displayed ship
|
||||||
|
ship: Game.Ship;
|
||||||
|
|
||||||
|
// Ship sprite
|
||||||
|
sprite: Phaser.Button;
|
||||||
|
|
||||||
|
// Hover effect
|
||||||
|
hover: Phaser.Image;
|
||||||
|
|
||||||
|
// Create a ship sprite usable in the Arena
|
||||||
|
constructor(battleview: BattleView, ship: Game.Ship) {
|
||||||
|
this.ship = ship;
|
||||||
|
|
||||||
|
super(battleview.game);
|
||||||
|
|
||||||
|
// Add hover effect
|
||||||
|
this.hover = new Phaser.Image(battleview.game, 0, 0, "ui-battle-shipspritehover");
|
||||||
|
this.hover.scale.set(0.4, 0.4);
|
||||||
|
this.hover.anchor.set(0.5, 0.5);
|
||||||
|
this.hover.visible = false;
|
||||||
|
this.addChild(this.hover);
|
||||||
|
|
||||||
|
// Add ship sprite
|
||||||
|
this.sprite = new Phaser.Button(battleview.game, 0, 0, "arena-ship");
|
||||||
|
this.sprite.scale.set(0.1, 0.1);
|
||||||
|
this.sprite.rotation = ship.arena_angle;
|
||||||
|
this.sprite.anchor.set(0.5, 0.5);
|
||||||
|
this.addChild(this.sprite);
|
||||||
|
|
||||||
|
// Handle input on ship sprite
|
||||||
|
this.sprite.input.useHandCursor = true;
|
||||||
|
this.sprite.onInputOver.add(() => {
|
||||||
|
battleview.cursorOnShip(ship);
|
||||||
|
});
|
||||||
|
this.sprite.onInputOut.add(() => {
|
||||||
|
battleview.cursorOffShip(ship);
|
||||||
|
});
|
||||||
|
this.sprite.onInputUp.add(() => {
|
||||||
|
battleview.cursorClicked();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set location
|
||||||
|
this.position.set(ship.arena_x, ship.arena_y);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the hovered state on this ship
|
||||||
|
// This will toggle the hover effect
|
||||||
|
setHovered(hovered: boolean) {
|
||||||
|
this.hover.visible = hovered;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move the sprite to a location
|
||||||
|
moveTo(x: number, y: number, animate: boolean = true) {
|
||||||
|
var angle = Math.atan2(y - this.y, x - this.x);
|
||||||
|
if (animate) {
|
||||||
|
var tween_group = this.game.tweens.create(this);
|
||||||
|
var tween_sprite = this.game.tweens.create(this.sprite);
|
||||||
|
tween_group.to({x: x, y: y});
|
||||||
|
tween_group.start();
|
||||||
|
tween_sprite.to({rotation: angle});
|
||||||
|
tween_sprite.start();
|
||||||
|
} else {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.sprite.rotation = angle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -133,6 +133,9 @@ module SpaceTac.View {
|
||||||
|
|
||||||
// Set the currently hovered ship
|
// Set the currently hovered ship
|
||||||
setShipHovered(ship: Game.Ship): void {
|
setShipHovered(ship: Game.Ship): void {
|
||||||
|
if (this.ship_hovered) {
|
||||||
|
this.arena.setShipHovered(this.ship_hovered, false);
|
||||||
|
}
|
||||||
this.ship_hovered = ship;
|
this.ship_hovered = ship;
|
||||||
this.card_hovered.setShip(ship);
|
this.card_hovered.setShip(ship);
|
||||||
if (this.targetting) {
|
if (this.targetting) {
|
||||||
|
@ -142,6 +145,9 @@ module SpaceTac.View {
|
||||||
this.targetting.unsetTarget();
|
this.targetting.unsetTarget();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (ship) {
|
||||||
|
this.arena.setShipHovered(this.ship_hovered, true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enter targetting mode
|
// Enter targetting mode
|
||||||
|
|
|
@ -41,10 +41,7 @@ module SpaceTac.View {
|
||||||
case "move":
|
case "move":
|
||||||
var sprite = this.view.arena.findShipSprite(event.ship);
|
var sprite = this.view.arena.findShipSprite(event.ship);
|
||||||
if (sprite) {
|
if (sprite) {
|
||||||
var angle = Math.atan2(event.target.y - sprite.y, event.target.x - sprite.x);
|
sprite.moveTo(event.target.x, event.target.y);
|
||||||
var tween = this.view.game.tweens.create(sprite);
|
|
||||||
tween.to({x: event.target.x, y: event.target.y, rotation: angle});
|
|
||||||
tween.start();
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,30 +0,0 @@
|
||||||
module SpaceTac.View {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// Ship sprite in the arena (BattleView)
|
|
||||||
export class ShipArenaSprite extends Phaser.Button {
|
|
||||||
// Link to displayed ship
|
|
||||||
ship: Game.Ship;
|
|
||||||
|
|
||||||
constructor(battleview: BattleView, ship: Game.Ship) {
|
|
||||||
this.ship = ship;
|
|
||||||
|
|
||||||
super(battleview.game, ship.arena_x, ship.arena_y, "arena-ship");
|
|
||||||
|
|
||||||
this.scale.set(0.1, 0.1);
|
|
||||||
this.rotation = ship.arena_angle;
|
|
||||||
this.anchor.set(0.5, 0.5);
|
|
||||||
|
|
||||||
this.input.useHandCursor = true;
|
|
||||||
this.onInputOver.add(() => {
|
|
||||||
battleview.cursorOnShip(ship);
|
|
||||||
});
|
|
||||||
this.onInputOut.add(() => {
|
|
||||||
battleview.cursorOffShip(ship);
|
|
||||||
});
|
|
||||||
this.onInputUp.add(() => {
|
|
||||||
battleview.cursorClicked();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -20,7 +20,7 @@ module SpaceTac.View {
|
||||||
private battleview: BattleView;
|
private battleview: BattleView;
|
||||||
|
|
||||||
// Source of the targetting
|
// Source of the targetting
|
||||||
private source: PIXI.Sprite;
|
private source: PIXI.DisplayObject;
|
||||||
|
|
||||||
// Create a default targetting mode
|
// Create a default targetting mode
|
||||||
constructor(battleview: BattleView) {
|
constructor(battleview: BattleView) {
|
||||||
|
@ -63,7 +63,7 @@ module SpaceTac.View {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the source sprite for the targetting (for visual effects)
|
// Set the source sprite for the targetting (for visual effects)
|
||||||
setSource(sprite: PIXI.Sprite) {
|
setSource(sprite: PIXI.DisplayObject) {
|
||||||
this.source = sprite;
|
this.source = sprite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue