Added action tooltip (very WIP)
This commit is contained in:
parent
b3bb84b81a
commit
7eec39276e
130
graphics/logo.svg
Normal file
130
graphics/logo.svg
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="logo.svg">
|
||||
<defs
|
||||
id="defs4">
|
||||
<linearGradient
|
||||
id="linearGradient3803">
|
||||
<stop
|
||||
style="stop-color:#b99434;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop3805" />
|
||||
<stop
|
||||
id="stop3849"
|
||||
offset="0.71379268"
|
||||
style="stop-color:#907d4d;stop-opacity:0.78546715" />
|
||||
<stop
|
||||
style="stop-color:#6c6c6c;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop3807" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient3803"
|
||||
id="linearGradient4609"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(3.326324,3.4488765)"
|
||||
x1="395.9798"
|
||||
y1="467.48386"
|
||||
x2="684.88342"
|
||||
y2="346.26553" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.98994949"
|
||||
inkscape:cx="499.73794"
|
||||
inkscape:cy="518.05435"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1030"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-global="true"
|
||||
inkscape:snap-object-midpoints="true"
|
||||
inkscape:snap-nodes="true"
|
||||
inkscape:snap-center="true"
|
||||
inkscape:snap-bbox="false" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
sodipodi:type="arc"
|
||||
style="fill:#370e81;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:16.60000000000000142;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="path2985"
|
||||
sodipodi:cx="392.85715"
|
||||
sodipodi:cy="475.21933"
|
||||
sodipodi:rx="212.85715"
|
||||
sodipodi:ry="212.85715"
|
||||
d="m 605.71429,475.21933 a 212.85715,212.85715 0 1 1 -425.71429,0 212.85715,212.85715 0 1 1 425.71429,0 z" />
|
||||
<path
|
||||
style="fill:#6c6c6c;fill-opacity:1;stroke:#000000;stroke-width:9.93900000000000006;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="m 255.83375,152.48166 286.90392,0 -56.25735,191.66626 -176.40603,0 z"
|
||||
id="path3757"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path3757"
|
||||
id="use3759"
|
||||
transform="matrix(-0.76604444,0.64278761,-0.64278761,-0.76604444,1009.3727,567.31849)"
|
||||
width="744.09448"
|
||||
height="1052.3622" />
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path3757"
|
||||
id="use3761"
|
||||
transform="matrix(-0.76604444,-0.64278761,0.64278761,-0.76604444,380.44982,1077.1097)"
|
||||
width="744.09448"
|
||||
height="1052.3622" />
|
||||
<path
|
||||
style="fill:url(#linearGradient4609);fill-opacity:1;stroke:none"
|
||||
d="M 395.26551,473.96321 732.65646,423.45558 657.90517,265.87178 z"
|
||||
id="path3801"
|
||||
inkscape:connector-curvature="0" />
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path3801"
|
||||
id="use3811"
|
||||
transform="matrix(-1,0,0,1,790.23513,-1.428571)"
|
||||
width="744.09448"
|
||||
height="1052.3622" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/battle/action-tooltip.png
Normal file
BIN
src/assets/images/battle/action-tooltip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
|
|
@ -30,6 +30,7 @@ module SpaceTac.View {
|
|||
this.loadImage("battle/action-inactive.png");
|
||||
this.loadImage("battle/action-active.png");
|
||||
this.loadImage("battle/action-fading.png");
|
||||
this.loadImage("battle/action-tooltip.png");
|
||||
this.loadImage("battle/actionpointsempty.png");
|
||||
this.loadImage("battle/actionpointsfull.png");
|
||||
this.loadImage("battle/arena/shipspritehover.png");
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ module SpaceTac.View {
|
|||
// Progress bar displaying action points
|
||||
actionpoints: ValueBar;
|
||||
|
||||
// Tooltip to display hovered action info
|
||||
tooltip: ActionTooltip;
|
||||
|
||||
// Current ship, whose actions are displayed
|
||||
ship: Game.Ship;
|
||||
|
||||
|
|
@ -44,6 +47,10 @@ module SpaceTac.View {
|
|||
this.cancel.visible = false;
|
||||
this.cancel.input.useHandCursor = true;
|
||||
this.addChild(this.cancel);
|
||||
|
||||
// Tooltip
|
||||
this.tooltip = new ActionTooltip(this);
|
||||
this.addChild(this.tooltip);
|
||||
}
|
||||
|
||||
// Clear the action icons
|
||||
|
|
@ -59,6 +66,9 @@ module SpaceTac.View {
|
|||
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
||||
var icon = new ActionIcon(this, 90 + this.actions.length * 62, 2, ship, action);
|
||||
this.actions.push(icon);
|
||||
|
||||
this.tooltip.bringToTop();
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,11 +64,13 @@ module SpaceTac.View {
|
|||
this.processClick();
|
||||
});
|
||||
|
||||
// Range hints on hover
|
||||
// Information on hover
|
||||
this.onInputOver.add(() => {
|
||||
this.bar.tooltip.setAction(this);
|
||||
this.battleview.arena.range_hint.setSecondary(this.ship, this.action);
|
||||
});
|
||||
this.onInputOut.add(() => {
|
||||
this.bar.tooltip.setAction(null);
|
||||
this.battleview.arena.range_hint.clearSecondary();
|
||||
});
|
||||
|
||||
|
|
|
|||
28
src/scripts/view/battle/ActionTooltip.ts
Normal file
28
src/scripts/view/battle/ActionTooltip.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
module SpaceTac.View {
|
||||
"use strict";
|
||||
|
||||
// Tooltip to display action information
|
||||
export class ActionTooltip extends Phaser.Sprite {
|
||||
// Action name
|
||||
title: Phaser.Text;
|
||||
|
||||
constructor(parent: ActionBar) {
|
||||
super(parent.game, 0, 0, "battle-action-tooltip");
|
||||
this.visible = false;
|
||||
|
||||
this.title = new Phaser.Text(this.game, 0, 0, "", {font: "14px Arial", fill: "#000000"});
|
||||
this.addChild(this.title);
|
||||
}
|
||||
|
||||
// Set current action to display, null to hide
|
||||
setAction(action: ActionIcon): void {
|
||||
if (action) {
|
||||
this.position.set(action.x, action.y + action.height);
|
||||
this.title.setText(action.action.code);
|
||||
Animation.fadeIn(this.game, this, 200);
|
||||
} else {
|
||||
Animation.fadeOut(this.game, this, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue