1
0
Fork 0

Updated ship hover effect

This commit is contained in:
Michaël Lemaire 2017-01-09 01:37:15 +01:00
parent 3fba641b5b
commit f80ab3350c
7 changed files with 149 additions and 82 deletions

View file

@ -85,11 +85,11 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
inkscape:cx="112.1938"
inkscape:cy="932.35192"
inkscape:zoom="5.6568542"
inkscape:cx="101.91241"
inkscape:cy="877.88947"
inkscape:document-units="px"
inkscape:current-layer="layer14"
inkscape:current-layer="layer16"
showgrid="false"
units="px"
showguides="true"
@ -137,7 +137,8 @@
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="Ship list">
inkscape:label="Ship list"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer14"
@ -149,7 +150,10 @@
width="133.01472"
height="948.2301"
x="0"
y="104.13197" />
y="104.13197"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
<g
inkscape:groupmode="layer"
@ -157,9 +161,11 @@
inkscape:label="Ship list portraits"
style="display:inline">
<g
style=""
id="g4211"
transform="translate(-0.76574513,27.637839)">
transform="translate(-0.76574513,27.637839)"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<path
transform="translate(0,-27.637839)"
sodipodi:nodetypes="ccccc"
@ -188,21 +194,30 @@
height="42.341286"
width="5.0654392"
id="rect4437-3-3"
style="opacity:1;fill:#ffcc00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
style="opacity:1;fill:#ffcc00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
y="152.11865"
x="107.0619"
height="42.341286"
width="5.0654392"
id="rect4437-3-3-6"
style="opacity:1;fill:#d40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
style="opacity:1;fill:#d40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
y="152.11865"
x="115.23164"
height="42.341286"
width="5.0654392"
id="rect4437-3-3-6-7"
style="opacity:1;fill:#0044aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
style="opacity:1;fill:#0044aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
y="120.72739"
x="15.854823"
@ -234,6 +249,65 @@
sodipodi:role="line">2</tspan></text>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer16"
inkscape:label="Ship list hover"
style="display:inline">
<rect
y="148.93114"
x="15.297348"
height="77.905304"
width="77.905304"
id="rect4248-3"
style="display:inline;opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#a833b0;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<path
sodipodi:type="star"
style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#a833b0;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4312"
sodipodi:sides="3"
sodipodi:cx="54.25"
sodipodi:cy="156.75"
sodipodi:r1="5.131094"
sodipodi:r2="2.565547"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 54.25,161.88109 -4.443658,-7.69664 8.887316,0 z"
inkscape:transform-center-y="1.2827735" />
<use
x="0"
y="0"
xlink:href="#path4312"
inkscape:transform-center-y="-1.2827702"
id="use4314"
transform="matrix(1,0,0,-1,0,375.61555)"
width="100%"
height="100%" />
<use
x="0"
y="0"
xlink:href="#path4312"
id="use4316"
transform="matrix(0,-1,1,0,-133.125,242.13379)"
width="100%"
height="100%"
inkscape:transform-center-x="-1.2827735" />
<use
x="0"
y="0"
xlink:href="#path4312"
id="use4318"
transform="matrix(0,1,-1,0,241.5,133.63379)"
width="100%"
height="100%"
inkscape:transform-center-x="1.2827734" />
</g>
</g>
<g
inkscape:groupmode="layer"
@ -251,7 +325,10 @@
height="131.76981"
x="0"
y="-27.637838"
transform="translate(0,27.637839)" />
transform="translate(0,27.637839)"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
<g
inkscape:groupmode="layer"
@ -268,7 +345,10 @@
width="1756.4532"
height="28.991375"
x="157.68481"
y="97.121567" />
y="97.121567"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
<g
inkscape:groupmode="layer"
@ -280,7 +360,10 @@
d="m 206.22794,95.419286 1684.82326,0 16.8238,-12.121846 -1718.47077,0 z"
id="rect4437"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
sodipodi:nodetypes="ccccc"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
@ -305,7 +388,10 @@
width="1723.3817"
height="98.571426"
x="185.84662"
y="9.000001" />
y="9.000001"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
</g>
<g
@ -431,21 +517,30 @@
width="512.29291"
height="263.92389"
x="1015.7955"
y="137.88206" />
y="137.88206"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
style="opacity:1;fill:#808080;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4260"
width="114"
height="114"
x="1035.5355"
y="152.46446" />
y="152.46446"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="1188"
y="184.99998"
id="text4262"
sodipodi:linespacing="125%"><tspan
sodipodi:linespacing="125%"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"><tspan
sodipodi:role="line"
id="tspan4264"
x="1188"
@ -457,7 +552,10 @@
x="1222.749"
y="226.18408"
id="text4262-6"
sodipodi:linespacing="125%"><tspan
sodipodi:linespacing="125%"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"><tspan
sodipodi:role="line"
id="tspan4264-7"
x="1222.749"
@ -469,7 +567,10 @@
x="1205.6049"
y="261.82718"
id="text4284"
sodipodi:linespacing="125%"><tspan
sodipodi:linespacing="125%"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"><tspan
sodipodi:role="line"
x="1205.6049"
y="261.82718"
@ -479,7 +580,10 @@
xml:space="preserve"
id="flowRoot4288"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
transform="translate(114,0)"><flowRegion
transform="translate(114,0)"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"><flowRegion
id="flowRegion4290"><rect
id="rect4292"
width="478.7113"

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 745 B

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -25,6 +25,10 @@ module SpaceTac.Game {
// Boolean indicating if its the first turn
first_turn: boolean;
// Size of the battle area
width = 1000
height = 500
// Create a battle between two fleets
constructor(fleet1: Fleet = null, fleet2: Fleet = null) {
super();
@ -89,8 +93,8 @@ module SpaceTac.Game {
// Defines the initial ship positions of all engaged fleets
placeShips(): void {
this.first_turn = true;
this.placeFleetShips(this.fleets[0], 50, 320, 0);
this.placeFleetShips(this.fleets[1], 1020, 320, Math.PI);
this.placeFleetShips(this.fleets[0], this.width * 0.05, this.height * 0.5, 0);
this.placeFleetShips(this.fleets[1], this.width * 0.95, this.height * 0.5, Math.PI);
}
// Count the number of fleets still alive
@ -242,7 +246,7 @@ module SpaceTac.Game {
// facing_angle is the forward angle in radians
private placeFleetShips(fleet: Fleet, x: number, y: number, facing_angle: number): void {
var side_angle = facing_angle + Math.PI * 0.5;
var spacing = 140;
var spacing = this.height * 0.2;
var total_length = spacing * (fleet.ships.length - 1);
var dx = Math.cos(side_angle);
var dy = Math.sin(side_angle);

View file

@ -39,23 +39,23 @@ module SpaceTac.Game {
battle.placeShips();
expect(ship1.arena_x).toBeCloseTo(50, 0.0001);
expect(ship1.arena_y).toBeCloseTo(180, 0.0001);
expect(ship1.arena_y).toBeCloseTo(150, 0.0001);
expect(ship1.arena_angle).toBeCloseTo(0, 0.0001);
expect(ship2.arena_x).toBeCloseTo(50, 0.0001);
expect(ship2.arena_y).toBeCloseTo(320, 0.0001);
expect(ship2.arena_y).toBeCloseTo(250, 0.0001);
expect(ship2.arena_angle).toBeCloseTo(0, 0.0001);
expect(ship3.arena_x).toBeCloseTo(50, 0.0001);
expect(ship3.arena_y).toBeCloseTo(460, 0.0001);
expect(ship3.arena_y).toBeCloseTo(350, 0.0001);
expect(ship3.arena_angle).toBeCloseTo(0, 0.0001);
expect(ship4.arena_x).toBeCloseTo(1020, 0.0001);
expect(ship4.arena_y).toBeCloseTo(390, 0.0001);
expect(ship4.arena_x).toBeCloseTo(950, 0.0001);
expect(ship4.arena_y).toBeCloseTo(300, 0.0001);
expect(ship4.arena_angle).toBeCloseTo(Math.PI, 0.0001);
expect(ship5.arena_x).toBeCloseTo(1020, 0.0001);
expect(ship5.arena_y).toBeCloseTo(250, 0.0001);
expect(ship5.arena_x).toBeCloseTo(950, 0.0001);
expect(ship5.arena_y).toBeCloseTo(200, 0.0001);
expect(ship5.arena_angle).toBeCloseTo(Math.PI, 0.0001);
});

View file

@ -70,7 +70,7 @@ module SpaceTac.View {
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.to({ x: x, y: y });
tween_group.start();
Tools.rotationTween(tween_sprite, facing_angle);
tween_sprite.start();
@ -85,14 +85,14 @@ module SpaceTac.View {
displayDamage(hull: number, shield: number) {
if (hull > 0) {
var hull_text = new Phaser.Text(this.game, -20, -20, Math.round(hull).toString(),
{font: "bold 16px Arial", align: "center", fill: "#ffbbbb"});
{ font: "bold 16px Arial", align: "center", fill: "#ffbbbb" });
hull_text.anchor.set(0.5, 0.5);
this.addChild(hull_text);
this.animateDamageText(hull_text);
}
if (shield > 0) {
var shield_text = new Phaser.Text(this.game, 20, -20, Math.round(shield).toString(),
{font: "bold 16px Arial", align: "center", fill: "#bbbbff"});
{ font: "bold 16px Arial", align: "center", fill: "#bbbbff" });
shield_text.anchor.set(0.5, 0.5);
this.addChild(shield_text);
this.animateDamageText(shield_text);
@ -102,8 +102,8 @@ module SpaceTac.View {
private animateDamageText(text: Phaser.Text) {
text.alpha = 0;
var tween = this.game.tweens.create(text);
tween.to({alpha: 1}, 100, Phaser.Easing.Circular.In, false, 500);
tween.to({y: -50, alpha: 0}, 800, Phaser.Easing.Circular.In, false, 200);
tween.to({ alpha: 1 }, 100, Phaser.Easing.Circular.In, false, 500);
tween.to({ y: -50, alpha: 0 }, 800, Phaser.Easing.Circular.In, false, 200);
tween.onComplete.addOnce(() => {
text.destroy();
});

View file

@ -40,9 +40,6 @@ module SpaceTac.View {
// Indicator of interaction disabled
icon_waiting: Phaser.Image;
// Lines used to highlight hovered ship
private line_hover_left: Phaser.Graphics;
// Init the view, binding it to a specific battle
init(player: Game.Player, battle: Game.Battle) {
super.init();
@ -53,7 +50,6 @@ module SpaceTac.View {
this.ship_hovered = null;
this.log_processor = null;
this.background = null;
this.line_hover_left = null;
}
// Create view graphics
@ -83,11 +79,7 @@ module SpaceTac.View {
this.icon_waiting.anchor.set(0.5, 0.5);
this.icon_waiting.scale.set(0.5, 0.5);
game.add.existing(this.icon_waiting);
game.tweens.create(this.icon_waiting).to({"angle": 360}, 3000).repeat(-1).start();
this.line_hover_left = new Phaser.Graphics(this.game, 0, 0);
this.line_hover_left.visible = false;
game.add.existing(this.line_hover_left);
game.tweens.create(this.icon_waiting).to({ "angle": 360 }, 3000).repeat(-1).start();
// Start processing the battle log
this.log_processor = new LogProcessor(this);
@ -124,11 +116,6 @@ module SpaceTac.View {
this.arena = null;
}
if (this.line_hover_left) {
this.line_hover_left.destroy();
this.line_hover_left = null;
}
this.battle = null;
super.shutdown();
@ -137,10 +124,10 @@ module SpaceTac.View {
// Display an animated "BATTLE" text in the center of the view
displayFightMessage(): void {
var text = this.game.add.text(this.getMidWidth(), this.getMidHeight(), "BATTLE !",
{align: "center", font: "bold 42px Arial", fill: "#EE2233"});
{ align: "center", font: "bold 42px Arial", fill: "#EE2233" });
text.anchor.set(0.5, 0.5);
this.game.tweens.create(text.scale).to({x: 3, y: 3}).start();
var text_anim = this.game.tweens.create(text).to({alpha: 0});
this.game.tweens.create(text.scale).to({ x: 3, y: 3 }).start();
var text_anim = this.game.tweens.create(text).to({ alpha: 0 });
text_anim.onComplete.addOnce(() => {
text.destroy();
});
@ -194,34 +181,6 @@ module SpaceTac.View {
this.targetting.unsetTarget();
}
}
this.updateHoverLines();
}
// Update the hover lines
updateHoverLines(): void {
// TODO Simplify this
if (this.ship_hovered) {
var listitem = this.ship_list.findItem(this.ship_hovered);
var sprite = this.arena.findShipSprite(this.ship_hovered);
if (listitem && sprite) {
var listitemhover = listitem.layer_hover;
var spritehover = sprite.hover;
var start = listitemhover.toGlobal(new PIXI.Point(listitemhover.width / 2, 0));
var end = spritehover.toGlobal(new PIXI.Point(-spritehover.width / 2, 0));
this.line_hover_left.clear();
this.line_hover_left.lineStyle(2, 0xC7834A, 0.7);
this.line_hover_left.moveTo(start.x, start.y);
this.line_hover_left.lineTo(end.x, end.y);
Animation.fadeIn(this.game, this.line_hover_left, 200);
} else {
Animation.fadeOut(this.game, this.line_hover_left, 200);
}
} else {
Animation.fadeOut(this.game, this.line_hover_left, 200);
}
}
// Enable or disable the global player interaction

View file

@ -42,7 +42,7 @@ module SpaceTac.View {
this.addChild(this.layer_portrait);
this.layer_hover = new Phaser.Image(this.game, 30, 30, "battle-arena-shipspritehover", 0);
this.layer_hover.anchor.set(0.5, 0.5);
this.layer_hover.position.set(5, 5);
this.layer_hover.visible = false;
this.addChild(this.layer_hover);