fonts

src/actors/text/resources.ts

@@ -1,22 +1,69 @@
 import { ImageSource, SpriteFont, SpriteSheet } from "excalibur";
-import spriteFont1Image from "../../assets/images/fonts/font1.png";
+import spriteFont1DarkImage from "../../assets/images/fonts/font1.png";
+import spriteFont1LightImage from "../../assets/images/fonts/font1-light.png";
+import spriteFont2DarkImage from "../../assets/images/fonts/font2.png";
+import spriteFont2DLightImage from "../../assets/images/fonts/font2-light.png";
 
 export const TextResources = {
-  Font1: new ImageSource(spriteFont1Image),
+  Font1: new ImageSource(spriteFont1DarkImage),
+  Font1Light: new ImageSource(spriteFont1LightImage),
+  Font2: new ImageSource(spriteFont2DarkImage),
+  Font2Light: new ImageSource(spriteFont2DLightImage),
 } as const;
 
+const grid8x12 = {
+  rows: 1,
+  columns: 64,
+  spriteWidth: 8,
+  spriteHeight: 12,
+};
+
+const grid12x16 = {
+  rows: 1,
+  columns: 64,
+  spriteWidth: 12,
+  spriteHeight: 16,
+};
+
+const alphabet =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890.";
+
 export const spriteFont1Sheet = SpriteSheet.fromImageSource({
   image: TextResources.Font1,
-  grid: {
-    rows: 1,
-    columns: 64,
-    spriteWidth: 6,
-    spriteHeight: 13,
-  },
+  grid: grid8x12,
+});
+
+export const spriteFont2Sheet = SpriteSheet.fromImageSource({
+  image: TextResources.Font2,
+  grid: grid12x16,
+});
+
+export const spriteFont1LightSheet = SpriteSheet.fromImageSource({
+  image: TextResources.Font1Light,
+  grid: grid8x12,
+});
+
+export const spriteFont2LightSheet = SpriteSheet.fromImageSource({
+  image: TextResources.Font2Light,
+  grid: grid12x16,
 });
 
 export const spriteFont1 = new SpriteFont({
-  alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890. ",
-  caseInsensitive: false,
+  alphabet,
   spriteSheet: spriteFont1Sheet,
 });
+
+export const spriteFont2 = new SpriteFont({
+  alphabet,
+  spriteSheet: spriteFont2Sheet,
+});
+
+export const spriteFont1Light = new SpriteFont({
+  alphabet,
+  spriteSheet: spriteFont1LightSheet,
+});
+
+export const spriteFont2Light = new SpriteFont({
+  alphabet,
+  spriteSheet: spriteFont2LightSheet,
+});

src/scenes/main_menu/main_menu.ts

@@ -1,9 +1,10 @@
-import { Scene, vec } from "excalibur";
+import { Color, Scene, Text, vec } from "excalibur";
 import { mainMenuSpriteSheet } from "../../actors/ui/resources";
 import { SoundResources } from "../../actors/sounds/resources";
 import Button from "../../actors/ui/button";
 import { GAME_HEIGHT, GAME_WIDTH } from "../../helpers/consts";
 import StaticImage from "../../actors/ui/static_image";
+import { spriteFont2Light } from "../../actors/text/resources";
 
 class MainMenu extends Scene {
   startButton = new Button({
@@ -49,17 +50,27 @@ class MainMenu extends Scene {
     sprite: mainMenuSpriteSheet.sprites[7],
   });
 
-  knpmasterLabel = new StaticImage({
-    pos: vec(10, GAME_HEIGHT - 10),
-    anchor: vec(0, 1),
-    sprite: mainMenuSpriteSheet.sprites[8],
-  });
-
   /**
    * Start-up logic, called once
    */
   public onInitialize() {}
 
+  public initCredits() {
+    const text = new Text({
+      text: "KNPMASTER 2000",
+      font: spriteFont2Light,
+      color: Color.Red,
+    });
+
+    const textIndicator = new StaticImage({
+      pos: vec(9, GAME_HEIGHT - 8),
+      anchor: vec(0, 1),
+      sprite: text,
+    });
+
+    this.add(textIndicator);
+  }
+
   /**
    * Each time the scene is entered (Engine.goToScene)
    */
@@ -79,10 +90,8 @@ class MainMenu extends Scene {
     this.add(this.loadButton);
     this.add(this.exitButton);
 
-    // draw labels
-    this.add(this.knpmasterLabel);
-    // this.add(this.androettopLabel);
-    // this.add(this.tributeLabel);
+    // draw credits
+    this.initCredits();
   }
 
   /**