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

Added weapon blast visual effect

Browse source
This commit is contained in:
Michaël Lemaire 2017-02-15 17:41:24 +01:00
parent 8cb165e1a4
commit 27057bbef9
7 changed files with 97 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
graphics/ui/weaponeffects.svg
View file

@ -22,6 +22,34 @@
inkscape:export-ydpi="96.000008">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient4539">
<stop
style="stop-color:#f8ad88;stop-opacity:1"
offset="0"
id="stop4535" />
<stop
id="stop4549"
offset="0.67009157"
style="stop-color:#2d2d2d;stop-opacity:0.00425532" />
<stop
id="stop4547"
offset="0.85965019"
style="stop-color:#c9aea1;stop-opacity:0.96078432" />
<stop
id="stop4545"
offset="0.89241344"
style="stop-color:#f6aa84;stop-opacity:0.96078431;" />
<stop
id="stop4543"
offset="0.92985708"
style="stop-color:#e1723c;stop-opacity:0.25882353;" />
<stop
style="stop-color:#d95e22;stop-opacity:0"
offset="1"
id="stop4537" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4516">
@ -124,6 +152,17 @@
y1="113.24746"
x2="108.23768"
y2="113.18433" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4539"
id="radialGradient4541"
cx="249.12538"
cy="62.048492"
fx="249.12538"
fy="62.048492"
r="152.61015"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0,1.9515076)" />
</defs>
<sodipodi:namedview
id="base"
@ -132,11 +171,11 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="5.6"
inkscape:cx="48.929207"
inkscape:cy="69.976519"
inkscape:zoom="2.8"
inkscape:cx="133.78339"
inkscape:cy="80.621482"
inkscape:document-units="px"
inkscape:current-layer="layer4"
inkscape:current-layer="layer6"
showgrid="false"
units="px"
inkscape:measure-start="35.2291,59.599"
@ -198,7 +237,8 @@
inkscape:label="Shield impact"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-263.13331)">
transform="translate(0,-263.13331)"
style="display:none">
<circle
style="opacity:1;fill:url(#radialGradient5424);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.61623001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path5416"
@ -236,7 +276,8 @@
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="Bullets">
inkscape:label="Bullets"
style="display:none">
<g
id="g5371"
transform="matrix(0.11505865,0.11505865,-0.11505865,0.11505865,63.327458,53.088239)"
@ -327,4 +368,22 @@
style="display:inline" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer5"
inkscape:label="Stasis" />
<g
inkscape:groupmode="layer"
id="layer6"
inkscape:label="Blast">
<circle
style="opacity:1;fill:url(#radialGradient4541);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.34724236;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4533"
cx="249.12538"
cy="64"
r="152.61015"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/weapon/blast.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
out/assets/images/battle/weapon/blast.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

1
src/ui/Preload.ts
View file

@ -58,6 +58,7 @@ module TS.SpaceTac.UI {
this.loadImage("battle/weapon/bullets.png");
this.loadImage("battle/weapon/hot.png");
this.loadImage("battle/weapon/shield-impact.png");
this.loadImage("battle/weapon/blast.png");
this.loadImage("battle/attributes/power.png");
this.loadImage("battle/attributes/powercapacity.png");
this.loadImage("battle/attributes/effect-increase.png");

2
src/ui/battle/LogProcessor.ts
View file

@ -145,7 +145,7 @@ module TS.SpaceTac.UI {
var source = Target.newFromShip(event.ship);
var destination = event.target;
var effect = new WeaponEffect(this.view.arena, source, destination, event.weapon.code);
var effect = new WeaponEffect(this.view.arena, source, destination, event.weapon);
let duration = effect.start();
this.delayNextEvents(duration);

4
src/ui/battle/WeaponEffect.spec.ts
View file

@ -1,7 +1,7 @@
module TS.SpaceTac.UI.Specs {
describe("WeaponEffect", () => {
inbattleview_it("displays shield hit effect", (battleview) => {
let effect = new WeaponEffect(battleview.arena, new Target(0, 0), new Target(0, 0), "test");
let effect = new WeaponEffect(battleview.arena, new Target(0, 0), new Target(0, 0), new Equipment());
effect.shieldImpactEffect({ x: 10, y: 10 }, { x: 20, y: 15 }, 1000, 3000);
let layer = battleview.arena.layer_weapon_effects;
@ -18,7 +18,7 @@ module TS.SpaceTac.UI.Specs {
let ship = new Ship();
ship.setArenaPosition(50, 30);
TestTools.setShipHP(ship, 10, 0);
let effect = new WeaponEffect(battleview.arena, new Target(10, 0), Target.newFromShip(ship), "test");
let effect = new WeaponEffect(battleview.arena, new Target(10, 0), Target.newFromShip(ship), new Equipment());
let mock_shield_impact = spyOn(effect, "shieldImpactEffect").and.stub();
let mock_hull_impact = spyOn(effect, "hullImpactEffect").and.stub();

36
src/ui/battle/WeaponEffect.ts
View file

@ -28,19 +28,19 @@ module TS.SpaceTac.UI {
// Targetted ship
private destination: Target;
// Weapon class code (e.g. GatlingGun, ...)
private weapon: string;
// Weapon used
private weapon: Equipment;
// Effect in use
private effect: Function;
constructor(arena: Arena, source: Target, destination: Target, weapon: string) {
constructor(arena: Arena, source: Target, destination: Target, weapon: Equipment) {
this.ui = arena.getGame();
this.layer = arena.layer_weapon_effects;
this.source = source;
this.destination = destination;
this.weapon = weapon;
this.effect = this.getEffectForWeapon(weapon);
this.effect = this.getEffectForWeapon(weapon.code);
}
/**
@ -50,19 +50,21 @@ module TS.SpaceTac.UI {
*/
start(): number {
if (this.effect) {
return this.effect.call(this);
return this.effect();
} else {
return 0;
}
}
// Get the function that will be called to start the visual effect
/**
* Get the function that will be called to start the visual effect
*/
getEffectForWeapon(weapon: string): Function {
switch (weapon) {
case "gatlinggun":
return this.gunEffect;
return this.gunEffect.bind(this);
default:
return this.defaultEffect;
return this.defaultEffect.bind(this);
}
}
@ -120,19 +122,31 @@ module TS.SpaceTac.UI {
* Default firing effect
*/
defaultEffect(): number {
var missile = new Phaser.Sprite(this.ui, this.source.x, this.source.y, "battle-weapon-default");
let missile = new Phaser.Image(this.ui, this.source.x, this.source.y, "battle-weapon-default");
missile.anchor.set(0.5, 0.5);
missile.rotation = this.source.getAngleTo(this.destination);
this.layer.addChild(missile);
var tween = this.ui.tweens.create(missile);
let tween = this.ui.tweens.create(missile);
tween.to({ x: this.destination.x, y: this.destination.y }, 1000);
tween.onComplete.addOnce(() => {
missile.destroy();
if (this.weapon.blast) {
let blast = new Phaser.Image(this.ui, this.destination.x, this.destination.y, "battle-weapon-blast");
let scaling = this.weapon.blast * 2 / (blast.width * 0.9);
blast.anchor.set(0.5, 0.5);
blast.scale.set(0.001, 0.001);
let tween1 = this.ui.tweens.create(blast.scale).to({ x: scaling, y: scaling }, 1500, Phaser.Easing.Quintic.Out);
tween1.onComplete.addOnce(() => blast.destroy());
tween1.start();
let tween2 = this.ui.tweens.create(blast).to({ alpha: 0 }, 1450, Phaser.Easing.Quadratic.In);
tween2.start();
this.layer.addChild(blast);
}
});
tween.start();
return 1000;
return 1000 + (this.weapon.blast ? 1500 : 0);
}
/**

4
src/ui/common/Animation.ts
View file

@ -1,5 +1,7 @@
module TS.SpaceTac.UI {
// Utility functions for animation
/**
* Utility functions for animation
*/
export class Animation {
// Display an object, fading in using opacity