Replaced particle spritesheet with images
This commit is contained in:
parent
1d8433c24c
commit
b35e9d47fa
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 70 KiB |
|
@ -52,9 +52,6 @@ module TK.SpaceTac.UI {
|
||||||
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
||||||
console.log("Loading menu assets");
|
console.log("Loading menu assets");
|
||||||
this.load.pack("stage1", `assets/pack1.json?t=${Date.now()}`);
|
this.load.pack("stage1", `assets/pack1.json?t=${Date.now()}`);
|
||||||
|
|
||||||
// TODO pack
|
|
||||||
this.loadSheet("common/particles.png", 32);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.required >= AssetLoadingRange.BATTLE && AssetLoading.loaded < AssetLoadingRange.BATTLE) {
|
if (this.required >= AssetLoadingRange.BATTLE && AssetLoading.loaded < AssetLoadingRange.BATTLE) {
|
||||||
|
|
|
@ -9,22 +9,22 @@ module TK.SpaceTac.UI.Specs {
|
||||||
let ship = new Ship();
|
let ship = new Ship();
|
||||||
let action = new BaseAction("something");
|
let action = new BaseAction("something");
|
||||||
let icon = new ActionIcon(bar, ship, action, 0);
|
let icon = new ActionIcon(bar, ship, action, 0);
|
||||||
check.same(icon.power_bg.visible, false, "initial state");
|
check.same(icon.power_container.visible, false, "initial state");
|
||||||
|
|
||||||
icon.refresh();
|
icon.refresh();
|
||||||
check.same(icon.power_bg.visible, false, "no change");
|
check.same(icon.power_container.visible, false, "no change");
|
||||||
|
|
||||||
let cost = 3;
|
let cost = 3;
|
||||||
check.patch(action, "getPowerUsage", () => cost);
|
check.patch(action, "getPowerUsage", () => cost);
|
||||||
icon.refresh();
|
icon.refresh();
|
||||||
check.in("power cost = 3", check => {
|
check.in("power cost = 3", check => {
|
||||||
check.equals(icon.power_bg.visible, true);
|
check.equals(icon.power_container.visible, true);
|
||||||
check.equals(icon.power_text.text, "3\n-");
|
check.equals(icon.power_text.text, "3\n-");
|
||||||
});
|
});
|
||||||
cost = -2;
|
cost = -2;
|
||||||
icon.refresh();
|
icon.refresh();
|
||||||
check.in("power cost = -2", check => {
|
check.in("power cost = -2", check => {
|
||||||
check.equals(icon.power_bg.visible, true);
|
check.equals(icon.power_container.visible, true);
|
||||||
check.equals(icon.power_text.text, "2\n+");
|
check.equals(icon.power_text.text, "2\n+");
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,37 +0,0 @@
|
||||||
module TK.SpaceTac.UI.Specs {
|
|
||||||
testing("ParticleBuilder", test => {
|
|
||||||
let testgame = setupEmptyView(test);
|
|
||||||
|
|
||||||
test.case("builds composed particles", check => {
|
|
||||||
let builder = new ParticleBuilder(testgame.view);
|
|
||||||
let particle = builder.build([
|
|
||||||
new ParticleConfig(ParticleShape.ROUND, ParticleColor.BLUE, 2, 1, 45, 10, -20),
|
|
||||||
new ParticleConfig(ParticleShape.DISK_HALO, ParticleColor.WHITE, 0.5, 1, 0, 5, 0)
|
|
||||||
]);
|
|
||||||
|
|
||||||
check.equals(particle.length, 2);
|
|
||||||
|
|
||||||
let child = particle.list[0];
|
|
||||||
if (check.instance(child, Phaser.GameObjects.Image, "first particle is an image")) {
|
|
||||||
check.equals((<any>child.data).frame, 4);
|
|
||||||
check.equals((<any>child.data).key, "common-particles");
|
|
||||||
check.equals(child.scaleX, 2);
|
|
||||||
check.equals(child.scaleY, 2);
|
|
||||||
check.equals(child.x, 10);
|
|
||||||
check.equals(child.y, -20);
|
|
||||||
check.equals(child.angle, 45);
|
|
||||||
}
|
|
||||||
|
|
||||||
child = particle.list[1];
|
|
||||||
if (check.instance(child, Phaser.GameObjects.Image, "second particle is an image")) {
|
|
||||||
check.equals((<any>child.data).frame, 16);
|
|
||||||
check.equals((<any>child.data).key, "common-particles");
|
|
||||||
check.equals(child.scaleX, 0.5);
|
|
||||||
check.equals(child.scaleY, 0.5);
|
|
||||||
check.equals(child.x, 5);
|
|
||||||
check.equals(child.y, 0);
|
|
||||||
check.equals(child.angle, 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -1,96 +0,0 @@
|
||||||
module TK.SpaceTac.UI {
|
|
||||||
/**
|
|
||||||
* Particle shapes
|
|
||||||
*/
|
|
||||||
export enum ParticleShape {
|
|
||||||
ROUND = 0,
|
|
||||||
DISK_HALO = 1,
|
|
||||||
TRAIL = 2,
|
|
||||||
FLARE = 3
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Particle colors
|
|
||||||
*/
|
|
||||||
export enum ParticleColor {
|
|
||||||
WHITE = 0,
|
|
||||||
BLACK = 1,
|
|
||||||
GREY = 2,
|
|
||||||
RED = 3,
|
|
||||||
BLUE = 4,
|
|
||||||
YELLOW = 5,
|
|
||||||
GREEN = 6,
|
|
||||||
CYAN = 7,
|
|
||||||
MAGENTA = 8,
|
|
||||||
BROWN = 9,
|
|
||||||
VIOLET = 10,
|
|
||||||
MARINE = 11,
|
|
||||||
ORANGE = 12,
|
|
||||||
YELLOWISH = 13,
|
|
||||||
GREENISH = 14,
|
|
||||||
BLUEISH = 15,
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Config for a single sub-particle
|
|
||||||
*/
|
|
||||||
export class ParticleConfig {
|
|
||||||
shape: ParticleShape
|
|
||||||
color: ParticleColor
|
|
||||||
scale: number
|
|
||||||
alpha: number
|
|
||||||
angle: number
|
|
||||||
offsetx: number
|
|
||||||
offsety: number
|
|
||||||
|
|
||||||
constructor(shape = ParticleShape.ROUND, color = ParticleColor.WHITE, scale = 1, alpha = 1, angle = 0, offsetx = 0, offsety = 0) {
|
|
||||||
this.shape = shape;
|
|
||||||
this.color = color;
|
|
||||||
this.scale = scale;
|
|
||||||
this.alpha = alpha;
|
|
||||||
this.angle = angle;
|
|
||||||
this.offsetx = offsetx;
|
|
||||||
this.offsety = offsety;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get a particle image for this config
|
|
||||||
*/
|
|
||||||
getImage(view: BaseView): UIImage {
|
|
||||||
let frame = this.shape * 16 + this.color;
|
|
||||||
let result = view.add.image(0, 0, "common-particles", frame);
|
|
||||||
result.setDataEnabled();
|
|
||||||
(<any>result.data).frame = frame;
|
|
||||||
(<any>result.data).key = "common-particles";
|
|
||||||
result.setAngle(this.angle);
|
|
||||||
result.setAlpha(this.alpha);
|
|
||||||
result.setScale(this.scale);
|
|
||||||
result.setPosition(this.offsetx, this.offsety);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Builder of particles, composed of one or several sub particles
|
|
||||||
*/
|
|
||||||
export class ParticleBuilder {
|
|
||||||
view: BaseView
|
|
||||||
|
|
||||||
constructor(view: BaseView) {
|
|
||||||
this.view = view;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Build a composed particle
|
|
||||||
*/
|
|
||||||
build(configs: ParticleConfig[]): UIContainer {
|
|
||||||
let result = this.view.add.container(0, 0);
|
|
||||||
|
|
||||||
configs.forEach(config => {
|
|
||||||
result.add(config.getImage(this.view));
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -81,6 +81,7 @@ module TK.SpaceTac.UI {
|
||||||
let mheight = this.view.getMidHeight();
|
let mheight = this.view.getMidHeight();
|
||||||
|
|
||||||
let builder = new UIBuilder(this.view, layer);
|
let builder = new UIBuilder(this.view, layer);
|
||||||
|
let random = RandomGenerator.global;
|
||||||
|
|
||||||
let galaxy = builder.container("galaxy", 0, 0, false);
|
let galaxy = builder.container("galaxy", 0, 0, false);
|
||||||
galaxy.setPosition(mwidth, mheight);
|
galaxy.setPosition(mwidth, mheight);
|
||||||
|
@ -93,28 +94,25 @@ module TK.SpaceTac.UI {
|
||||||
let back2 = builder.image("intro-galaxy2", 0, 0, true);
|
let back2 = builder.image("intro-galaxy2", 0, 0, true);
|
||||||
back2.setScale(1.5);
|
back2.setScale(1.5);
|
||||||
animations.addAnimation(back2, { rotation: Math.PI * 2 }, 300000, undefined, undefined, Infinity);
|
animations.addAnimation(back2, { rotation: Math.PI * 2 }, 300000, undefined, undefined, Infinity);
|
||||||
});
|
|
||||||
|
|
||||||
let random = RandomGenerator.global;
|
range(200).forEach(() => {
|
||||||
range(200).forEach(i => {
|
let distance = (0.3 + random.random() * 0.7) * mheight;
|
||||||
let distance = (0.3 + random.random() * 0.7) * mheight;
|
let angle = random.random() * Math.PI * 2;
|
||||||
let angle = random.random() * Math.PI * 2;
|
let power = 0.4 + random.random() * 0.6;
|
||||||
let power = 0.4 + random.random() * 0.6;
|
|
||||||
|
|
||||||
let star = this.view.add.image(distance * Math.cos(angle), distance * Math.sin(angle),
|
let star = builder.image("intro-star", distance * Math.cos(angle), distance * Math.sin(angle), true);
|
||||||
"common-particles", 16);
|
star.setScale(0.15 + random.random() * 0.2);
|
||||||
star.setScale(0.15 + random.random() * 0.2);
|
star.setAlpha(power * 0.5);
|
||||||
star.setAlpha(power * 0.5);
|
this.view.tweens.add({
|
||||||
this.view.tweens.add({
|
targets: star,
|
||||||
targets: star,
|
alpha: star.alpha + 0.5,
|
||||||
alpha: star.alpha + 0.5,
|
duration: 200 + random.random() * 500,
|
||||||
duration: 200 + random.random() * 500,
|
delay: 1000 + random.random() * 3000,
|
||||||
delay: 1000 + random.random() * 3000,
|
yoyo: true,
|
||||||
yoyo: true,
|
loop: Infinity,
|
||||||
loop: Infinity,
|
loopDelay: 2000 + random.random() * 5000
|
||||||
loopDelay: 2000 + random.random() * 5000
|
});
|
||||||
});
|
});
|
||||||
galaxy.add(star);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -125,26 +123,15 @@ module TK.SpaceTac.UI {
|
||||||
protected exitftl(): Function {
|
protected exitftl(): Function {
|
||||||
return () => {
|
return () => {
|
||||||
let layer = this.getLayer(1);
|
let layer = this.getLayer(1);
|
||||||
|
let builder = new UIBuilder(this.view, layer);
|
||||||
|
|
||||||
let builder = new ParticleBuilder(this.view);
|
let fleet = builder.image("intro-fleet", this.view.getMidWidth() + 1500, this.view.getMidHeight() - 750, true);
|
||||||
let fleet = builder.build([
|
|
||||||
new ParticleConfig(ParticleShape.TRAIL, ParticleColor.BLUEISH, 0.8, 1, 200),
|
|
||||||
new ParticleConfig(ParticleShape.FLARE, ParticleColor.CYAN, 10, 0.2, -45)
|
|
||||||
]);
|
|
||||||
fleet.setPosition(this.view.getMidWidth() + 1500, this.view.getMidHeight() - 750);
|
|
||||||
this.view.animations.addAnimation(fleet, { x: this.view.getMidWidth(), y: this.view.getMidHeight() }, 5000, "Circ.easeOut");
|
this.view.animations.addAnimation(fleet, { x: this.view.getMidWidth(), y: this.view.getMidHeight() }, 5000, "Circ.easeOut");
|
||||||
this.view.animations.addAnimation(fleet, { alpha: 0, scaleX: 1.5, scaleY: 1.5 }, 500, "Cubic.easeOut", 3500);
|
this.view.animations.addAnimation(fleet, { alpha: 0, scaleX: 1.5, scaleY: 1.5 }, 500, "Cubic.easeOut", 3500);
|
||||||
|
|
||||||
let flash = this.view.add.container(this.view.getMidWidth() + 60, this.view.getMidHeight() - 30);
|
let flash = builder.image("intro-flash", this.view.getMidWidth() + 60, this.view.getMidHeight() - 30, true);
|
||||||
flash.setAlpha(0);
|
flash.setAlpha(0);
|
||||||
flash.setScale(0.1);
|
flash.setScale(0.1);
|
||||||
new UIBuilder(this.view).in(flash, builder => {
|
|
||||||
let sub = this.view.add.image(0, 0, "common-particles", 15);
|
|
||||||
flash.add(sub);
|
|
||||||
sub = this.view.add.image(0, 0, "common-particles", 0);
|
|
||||||
sub.setScale(0.5);
|
|
||||||
flash.add(sub);
|
|
||||||
});
|
|
||||||
this.view.animations.addAnimation(flash, { alpha: 0.7, scaleX: 2.5, scaleY: 2.5 }, 300, "Quad.easeOut", 3500, undefined, true);
|
this.view.animations.addAnimation(flash, { alpha: 0.7, scaleX: 2.5, scaleY: 2.5 }, 300, "Quad.easeOut", 3500, undefined, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue