Merge pull request #45 from ArcaneAssemblers/willem/add-tutorial-text

Add optional tutorial for new players

client/public/story/Config.yaml

@@ -5,6 +5,9 @@ positions:
   LEFT: 
     x: 100
     y: 1920
+  MID_LEFT: 
+    x: 350
+    y: 1920
   DEFAULT:
     x: 540
     y: 1920

client/public/story/GUI.yaml

@@ -36,14 +36,14 @@ config:
       sfx: none
       text:
         x: 110
-        'y': 34
+        'y': 50
         style:
           font: fontsaudimat-mono
-          fontSize: 45px
+          fontSize: 40px
           fill: '#BF9FE6'
           align: left
           wordWrap: true
-          wordWrapWidth: '870'
+          wordWrapWidth: '850'
       ctc:
         x: 960
         'y': 280

client/public/story/Setup.yaml

@@ -10,6 +10,12 @@ backgrounds:
   cave: assets/backgrounds/cave.png
 
 characters:
+  wizard:
+    displayName: Wizard
+    speechColour: "#ca90cf"
+    looks:
+      normal: assets/characters/wizard.png
+
   raven:
     displayName: Raven
     speechColour: "#ca90cf"
@@ -45,6 +51,9 @@ cgs:
   back-button: assets/objects/back-button.png
   barrier: assets/objects/barrier.png
   barrier-broken: assets/objects/barrier-broken.png
+  arrow: assets/objects/arrow.png
+  elemental-grid: assets/objects/elemental-grid.png
+
   topbar: assets/objects/topbar.png
   topbarhang: assets/objects/topbarhang.png
 

client/public/story/Story.yaml

@@ -2,17 +2,99 @@ start:
   - if ({dead}):
     - scene: deathScreen
 
-  - play mysterious: LOOPED
-  - scene: manageActions
-
-manageActions:
-  - show tower: WITH FADE
+  - show outside: WITH FADE
 
 
   - if ({time} > 0):
     - text: Welcome back Acolyte
   - else:
-    - text: A new recruit! Welcome to the tower. Do you need to be shown around?
+    - text: A new recruit! Do you need to be shown around?
+    - choice:
+      - "Yes (Tutorial)":
+        - scene: tutorial
+      - "No":
+        - text: Very well. I will leave you to your work.
+
+  - scene: manageActions
+
+tutorial:
+  - show wizard: AT MID_LEFT WITH FADE
+  - wizard says: "Ah, you must be new acolyte from the academy. Let's go over the basics."
+  - wizard says: "You’re trying to create the most powerful spell, aren't you?"
+
+  - wizard says: "You can see your current power up there."
+  - show arrow: WITH FADE AT 200,380
+    angle: -90
+    zoom: 0.3
+  - wait: click
+  - hide arrow: WITH FADE
+
+  - wizard says: Spells are chaotic and difficult to control. Eventually your spell will become too chaotic and…
+  - wizard says: …Well, you'll see.
+  - wizard says: You can see its current chaos level up there.
+  - show arrow: WITH FADE AT 400,380
+    angle: -90
+    zoom: 0.3
+  - wait: click
+  - hide arrow: WITH FADE
+
+  - wizard says: Some spells are also infused with elements. You can see hot/cold and light/dark up there.
+  - show arrow: WITH FADE AT 550,380
+    angle: -70
+    zoom: 0.3
+  - wait: click
+  - hide arrow: WITH FADE
+  - wizard says: Hot and cold are opposed, as are light and dark. Imagine them like this….
+  - show elemental-grid: WITH FADE AT 540,600
+  - wait: click
+  - hide elemental-grid: WITH FADE
+
+
+  - wizard says: Oh, you've got some protective barrier charms!
+  - show arrow: WITH FADE AT 750,450
+    angle: -70
+    zoom: 0.3
+  - wizard says: Thats good. Those are up here too.
+  - hide arrow: WITH FADE
+  - wizard says: As your spell tries to break loose these will break
+  - wizard says: So try not to let them all crack.
+
+  - wizard says: But of course you've covered all of that at the academy. Now let's talk about what you're doing here…
+
+  - show tower: WITH FADE
+
+  # (Point to Add ingredients button)
+  - wizard says: This is your tower, where you can add to your spell. 
+  - wizard says: Your ingredients will infuse the spell with their essence.
+  - wizard says: Be conscious of how many items you carry… Your pockets are only big enough for 7.
+
+  # (Back to main selection screen, pointing to forage button)
+  - wizard says: You'll have to go out and get new things to feed your spell. There are various options…
+  # (Show forage option screen)
+  - wizard says: The cold forest, the bright meadow, the dark cave, the burning volcano…
+  - wizard says: Each area provides its own set of ingredients… I suppose it depends what you're looking for.
+
+  # (Back to main selection screen, pointing to summon familiar button)
+  - wizard says: Of course those in the arcane arts also have familiars. They run errands to their preferred habitat.
+
+  # (Show familiar option screen)
+  - wizard says: The Raven visits the forest, the Cat to a meadow, Spider to the cave, Salamander to the volcano.
+  - wizard says: Don't forget to send them out to fetch… Familiars are always a little clingy.
+
+  - hide ALL: WITH FADE
+  - wizard says: Oh! One last thing.
+  - show altar: WITH FADE
+  - wizard says: Only when you summon or forage, you leave the spell unattended.
+  - wizard says: "Chaos builds and builds(pause: 500).(pause: 500).(pause: 500)."
+  - wizard says: But you'll probably be fine.
+  - hide ALL: WITH FADE
+
+  - scene: manageActions
+
+
+manageActions:
+  - play mysterious: LOOPED
+  - show tower: WITH FADE
 
   # upkeep
   - call SpellCrafter: printDebug

client/ren_client/plugins/spellcrafter_plugin.ts

@@ -45,21 +45,21 @@ export class SpellcrafterPlugin extends RenJS.Plugin {
         this.game.gui.hud.add(this.game.add.image(625, 160, "topbarhang"));
 
         this.game.gui.hud.add(this.game.add.image(100, 62, "orbpower"));
-        this.powerText = this.game.add.text(195, -83, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
+        this.powerText = this.game.add.text(195, 57, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
         this.game.gui.hud.add(this.powerText);
 
         this.game.gui.hud.add(this.game.add.image(100+230, 62, "orbchaos"));
-        this.chaosText = this.game.add.text(195+230, -83, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
+        this.chaosText = this.game.add.text(195+230, 57, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
         this.game.gui.hud.add(this.chaosText);
 
         this.hotColdOrb = this.game.add.image(100+490, 62, "orbhot");
         this.game.gui.hud.add(this.hotColdOrb);
-        this.hotColdText = this.game.add.text(195+490, -83, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
+        this.hotColdText = this.game.add.text(195+490, 57, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
         this.game.gui.hud.add(this.hotColdText);
 
         this.lightDarkOrb = this.game.add.image(100+680, 62, "orblight");
         this.game.gui.hud.add(this.lightDarkOrb);
-        this.lightDarkText = this.game.add.text(195+680, -83, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
+        this.lightDarkText = this.game.add.text(195+680, 57, "0", { font: "60px fontsaudimat-mono", fill: "#AA85BD", boundsAlignV: "top", boundsAlignH: "center" });
         this.game.gui.hud.add(this.lightDarkText);
 
         this.cardDisplayGroup = this.game.add.group()