Updated intro graphics

src/ui/common/UIConversation.ts

@@ -15,17 +15,20 @@ module TK.SpaceTac.UI {
         padding = 10
 
         // Background fill color
-        background = 0x202225
+        background = 0x1B3B4B
         alpha = 0.9
 
         // Border color and width
-        border = 0x404450
+        border = 0x3A6479
         border_width = 2
 
-        // Text font style
-        text_color = "#ffffff"
-        text_size = 20
-        text_bold = true
+        // Text style
+        text: UITextStyleI = {
+            color: "#DBEFF9",
+            size: 20,
+            bold: true,
+            shadow: true
+        }
 
         // Portrait or image to display (from atlases)
         image = ""
@@ -42,23 +45,30 @@ module TK.SpaceTac.UI {
 
             this.drawBackground(style.background, style.border, style.border_width, style.alpha);
 
+            let builder = this.builder.styled(style.text);
+            if (!style.center) {
+                builder = builder.styled({ center: false, vcenter: false });
+            }
+
             let offset = 0;
             if (style.image_size && style.image) {
                 offset = style.image_size + style.padding;
                 width -= offset;
 
                 let ioffset = style.padding + Math.floor(style.image_size / 2);
-                this.addImage(ioffset, ioffset, style.image);
+                builder.image(style.image, ioffset, ioffset);
 
                 if (style.image_caption) {
-                    let text_size = Math.ceil(style.text_size * 0.6);
-                    this.addText(ioffset, style.padding + style.image_size + text_size, style.image_caption,
-                        style.text_color, text_size, false, true, style.image_size);
+                    let text_size = Math.ceil(style.text.size ? style.text.size * 0.6 : 16);
+                    builder.text(style.image_caption, ioffset, style.padding + style.image_size + text_size, {
+                        size: text_size
+                    });
                 }
             }
 
-            let text = this.addText(offset + (style.center ? width / 2 : style.padding), style.center ? height / 2 : style.padding, message,
-                style.text_color, style.text_size, style.text_bold, style.center, width - style.padding * 2, style.center);
+            let text = builder.text(message, offset + (style.center ? width / 2 : style.padding), style.center ? height / 2 : style.padding, {
+                width: width - style.padding * 2
+            });
 
             let i = 0;
             let colorchar = () => {

src/ui/intro/IntroSteps.ts

@@ -82,30 +82,29 @@ module TK.SpaceTac.UI {
 
                 let galaxy = game.add.group(layer, "galaxy");
                 galaxy.position.set(mwidth, mheight);
-                game.tweens.create(galaxy).to({ rotation: Math.PI * 2 }, 60000).loop().start();
+                game.tweens.create(galaxy).to({ rotation: Math.PI * 2 }, 150000).loop().start();
                 game.tweens.create(galaxy).from({ alpha: 0 }, 3000).start();
 
-                let random = RandomGenerator.global;
-                range(500).forEach(i => {
-                    let distance = random.random() * mheight;
-                    let angle = random.random() * Math.PI * 2;
+                let builder = new UIBuilder(this.view, galaxy);
+                let back1 = builder.image("intro-galaxy1", 0, 0, true);
+                back1.scale.set(2.5);
+                let back2 = builder.image("intro-galaxy2", 0, 0, true);
+                back2.scale.set(1.5);
+                game.tweens.create(back2).to({ rotation: Math.PI * 2 }, 300000).loop().start();
 
-                    let color = random.weighted([5000, 0, 40, 10, 3, 15, 2, 10, 6, 30, 40, 50, 100, 80, 120, 140]);
+                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;
 
                     let star = game.add.image(distance * Math.cos(angle), distance * Math.sin(angle),
-                        "common-particles", 16 + color, galaxy);
-                    star.scale.set(0.1 + random.random() * 0.2);
+                        "common-particles", 16, galaxy);
+                    star.scale.set(0.15 + random.random() * 0.2);
                     star.anchor.set(0.5);
                     star.alpha = power * 0.5;
                     game.tweens.create(star).to({ alpha: star.alpha + 0.5 }, 200 + random.random() * 500,
                         undefined, true, 1000 + random.random() * 3000, undefined, true).repeat(-1, 2000 + random.random() * 5000).start();
-
-                    let dust = game.add.image(distance * Math.cos(angle), distance * Math.sin(angle),
-                        "common-particles", color, galaxy);
-                    dust.anchor.set(0.5);
-                    dust.alpha = 0.05 * power;
-                    dust.scale.set(5);
                 });
             }
         }

src/ui/menu/MainMenu.ts

@@ -24,7 +24,7 @@ module TK.SpaceTac.UI {
 
             // Presents...
             builder.in(layer_presents, builder => {
-                builder.styled({ center: true }, builder => {
+                builder.styled({ center: true, color: "#DBEFF9", shadow: true }, builder => {
                     builder.text("Michael Lemaire", this.getMidWidth(), this.getHeight() * 0.4, { size: 32 });
                     builder.text("presents", this.getMidWidth(), this.getHeight() * 0.6, { size: 24 });
                 });