Replaced particle spritesheet with images
Bu işleme şunda yer alıyor:
ebeveyn
1d8433c24c
işleme
b35e9d47fa
İkili dosya gösterilmiyor.
Sonra Genişlik: | Yükseklik: | Boyut: 1.3 KiB |
İkili dosya gösterilmiyor.
Sonra Genişlik: | Yükseklik: | Boyut: 26 KiB |
İkili dosya gösterilmiyor.
Sonra Genişlik: | Yükseklik: | Boyut: 1.1 KiB |
İkili dosya gösterilmiyor.
İkili dosya gösterilmiyor.
Önce Genişlik: | Yükseklik: | Boyut: 70 KiB |
|
@ -52,9 +52,6 @@ module TK.SpaceTac.UI {
|
|||
if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
|
||||
console.log("Loading menu assets");
|
||||
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) {
|
||||
|
|
|
@ -9,22 +9,22 @@ module TK.SpaceTac.UI.Specs {
|
|||
let ship = new Ship();
|
||||
let action = new BaseAction("something");
|
||||
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();
|
||||
check.same(icon.power_bg.visible, false, "no change");
|
||||
check.same(icon.power_container.visible, false, "no change");
|
||||
|
||||
let cost = 3;
|
||||
check.patch(action, "getPowerUsage", () => cost);
|
||||
icon.refresh();
|
||||
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-");
|
||||
});
|
||||
cost = -2;
|
||||
icon.refresh();
|
||||
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+");
|
||||
});
|
||||
})
|
||||
|
|
|
@ -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 builder = new UIBuilder(this.view, layer);
|
||||
let random = RandomGenerator.global;
|
||||
|
||||
let galaxy = builder.container("galaxy", 0, 0, false);
|
||||
galaxy.setPosition(mwidth, mheight);
|
||||
|
@ -93,28 +94,25 @@ module TK.SpaceTac.UI {
|
|||
let back2 = builder.image("intro-galaxy2", 0, 0, true);
|
||||
back2.setScale(1.5);
|
||||
animations.addAnimation(back2, { rotation: Math.PI * 2 }, 300000, undefined, undefined, Infinity);
|
||||
});
|
||||
|
||||
let random = RandomGenerator.global;
|
||||
range(200).forEach(i => {
|
||||
let distance = (0.3 + random.random() * 0.7) * mheight;
|
||||
let angle = random.random() * Math.PI * 2;
|
||||
let power = 0.4 + random.random() * 0.6;
|
||||
range(200).forEach(() => {
|
||||
let distance = (0.3 + random.random() * 0.7) * mheight;
|
||||
let angle = random.random() * Math.PI * 2;
|
||||
let power = 0.4 + random.random() * 0.6;
|
||||
|
||||
let star = this.view.add.image(distance * Math.cos(angle), distance * Math.sin(angle),
|
||||
"common-particles", 16);
|
||||
star.setScale(0.15 + random.random() * 0.2);
|
||||
star.setAlpha(power * 0.5);
|
||||
this.view.tweens.add({
|
||||
targets: star,
|
||||
alpha: star.alpha + 0.5,
|
||||
duration: 200 + random.random() * 500,
|
||||
delay: 1000 + random.random() * 3000,
|
||||
yoyo: true,
|
||||
loop: Infinity,
|
||||
loopDelay: 2000 + random.random() * 5000
|
||||
let star = builder.image("intro-star", distance * Math.cos(angle), distance * Math.sin(angle), true);
|
||||
star.setScale(0.15 + random.random() * 0.2);
|
||||
star.setAlpha(power * 0.5);
|
||||
this.view.tweens.add({
|
||||
targets: star,
|
||||
alpha: star.alpha + 0.5,
|
||||
duration: 200 + random.random() * 500,
|
||||
delay: 1000 + random.random() * 3000,
|
||||
yoyo: true,
|
||||
loop: Infinity,
|
||||
loopDelay: 2000 + random.random() * 5000
|
||||
});
|
||||
});
|
||||
galaxy.add(star);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -125,26 +123,15 @@ module TK.SpaceTac.UI {
|
|||
protected exitftl(): Function {
|
||||
return () => {
|
||||
let layer = this.getLayer(1);
|
||||
let builder = new UIBuilder(this.view, layer);
|
||||
|
||||
let builder = new ParticleBuilder(this.view);
|
||||
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);
|
||||
let fleet = builder.image("intro-fleet", this.view.getMidWidth() + 1500, this.view.getMidHeight() - 750, true);
|
||||
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);
|
||||
|
||||
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.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);
|
||||
}
|
||||
}
|
||||
|
|
Yükleniyor…
Yeni konuda referans