feat(WIP): improve RPG demo to modernise scripting syntax

fix(Sprites): Sprites were rendering on every layer instead of just their assigned one feat(Sprites): new empty_sprites function to delete all sprites (optionally on a layer) fix(Conditions): Allow equality condition with only one parameter (useful for hacky code) chore(demo): remove hacky buttons system for displaying enemies and player and replace it with dynamic sprites chore(demo): use custom yaml file to store data about possible enemies and classes
liana-p · Jun 27, 2023 · 2faaad6 · 2faaad6
1 parent 55302bc
commit 2faaad6
Show file tree

Hide file tree

Showing 16 changed files with 457 additions and 368 deletions.
diff --git a/packages/narrat/examples/games/rpg/data/buttons.yaml b/packages/narrat/examples/games/rpg/data/buttons.yaml
@@ -1,103 +1 @@
-buttons:
-  goblin:
-    enabled: false
-    background: rpg/img/enemies/goblin.webp
-    position:
-      left: 100
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  slime:
-    enabled: false
-    background: rpg/img/enemies/slime.webp
-    position:
-      left: 150
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  skeleton:
-    enabled: false
-    background: rpg/img/enemies/skeleton.webp
-    position:
-      left: 100
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  wizard:
-    enabled: false
-    background: rpg/img/players/wizard.webp
-    position:
-      left: 600
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  rogue:
-    enabled: false
-    background: rpg/img/players/wizard.webp
-    position:
-      left: 600
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  warrior:
-    enabled: false
-    background: rpg/img/players/wizard.webp
-    position:
-      left: 600
-      top: 600
-      width: 255
-      height: 512
-    anchor:
-      x: 0.5
-      y: 1
-  go_left:
-    enabled: false
-    background: rpg/img/ui/left.webp
-    position:
-      left: 100
-      top: 250
-      width: 96
-      height: 96
-    anchor:
-      x: 0.5
-      y: 0.5
-    action: choose_left
-  go_right:
-    enabled: false
-    background: rpg/img/ui/right.webp
-    position:
-      left: 770
-      top: 250
-      width: 96
-      height: 96
-    anchor:
-      x: 0.5
-      y: 0.5
-    action: choose_right
-  go_front:
-    enabled: false
-    background: rpg/img/ui/front.webp
-    position:
-      left: 440
-      top: 120
-      width: 96
-      height: 96
-    anchor:
-      x: 0.5
-      y: 0.5
-    action: choose_front
+buttons: {}
diff --git a/packages/narrat/examples/games/rpg/data/classes.yaml b/packages/narrat/examples/games/rpg/data/classes.yaml
@@ -0,0 +1,62 @@
+wizard:
+  stats:
+    maxHp: 30
+    maxMp: 60
+    def: 1
+    spd: 1
+    strength: 1
+    agility: 2
+    intelligence: 3
+  spells:
+    fireball:
+      cost: 10
+    heal:
+      cost: 12
+  sprite:
+    background: rpg/img/players/wizard.webp
+    x: 600
+    y: 600
+    width: 255
+    height: 512
+    anchor:
+      x: 0.5
+      y: 1
+rogue:
+  stats:
+    maxHp: 50
+    maxMp: 30
+    def: 2
+    spd: 3
+    strength: 2
+    agility: 3
+    intelligence: 1
+  sprite:
+    background: rpg/img/players/wizard.webp
+    x: 600
+    y: 600
+    width: 255
+    height: 512
+    anchor:
+      x: 0.5
+      y: 1
+warrior:
+  stats:
+    maxHp: 100
+    maxMp: 15
+    def: 3
+    spd: 2
+    strength: 2
+    agility: 3
+    intelligence: 1
+  skills:
+    whirlwind:
+      cost: 12
+  sprite:
+    background: rpg/img/players/wizard.webp
+    x: 600
+    y: 600
+    width: 255
+    height: 512
+    anchor:
+      x: 0.5
+      y: 1
diff --git a/packages/narrat/examples/games/rpg/data/enemies.yaml b/packages/narrat/examples/games/rpg/data/enemies.yaml
@@ -0,0 +1,49 @@
+enemies:
+  - id: goblin
+    name: Goblin
+    stats:
+      hp: 3
+      str: 2
+      def: 1
+      spd: 3
+    sprite:
+      background: rpg/img/enemies/goblin.webp
+      x: 100
+      y: 600
+      width: 255
+      height: 512
+      anchor:
+        x: 0.5
+        y: 1
+  - id: slime
+    name: Slime
+    stats:
+      hp: 10
+      str: 1
+      def: 1
+      spd: 1
+    sprite:
+      background: rpg/img/enemies/slime.webp
+      x: 150
+      y: 600
+      width: 255
+      height: 512
+      anchor:
+        x: 0.5
+        y: 1
+  - id: skeleton
+    name: Skeleton
+    stats:
+      hp: 5
+      str: 2
+      def: 2
+      spd: 2
+    sprite:
+      background: rpg/img/enemies/skeleton.webp
+      x: 100
+      y: 600
+      width: 255
+      height: 512
+      anchor:
+        x: 0.5
+        y: 1
diff --git a/packages/narrat/examples/games/rpg/data/rooms.yaml b/packages/narrat/examples/games/rpg/data/rooms.yaml
@@ -0,0 +1,33 @@
+battle_rooms:
+  - screen: battle_grass
+    id: grass
+  - screen: battle_cave
+    id: cave
+  - screen: battle_dungeon
+    id: dungeon
+dungeon_rooms:
+  FRL:
+    screen: dungeon_FRL
+    directions:
+      left: true
+      right: true
+      front: true
+  F:
+    screen: dungeon_F
+    directions:
+      front: true
+  FL:
+    screen: dungeon_FL
+    directions:
+      front: true
+      left: true
+  FR:
+    screen: dungeon_FR
+    directions:
+      front: true
+      right: true
+  LR:
+    screen: dungeon_LR
+    directions:
+      left: true
+      right: true
diff --git a/packages/narrat/examples/games/rpg/data/screens.yaml b/packages/narrat/examples/games/rpg/data/screens.yaml
@@ -18,53 +18,17 @@ screens:
         action: setup_rpg
   battle_grass:
     background: rpg/img/levels/grass.webp
-    buttons:
-      - goblin
-      - slime
-      - skeleton
-      - wizard
-      - rogue
-      - warrior
   battle_cave:
     background: rpg/img/levels/cave.webp
-    buttons:
-      - goblin
-      - slime
-      - skeleton
-      - wizard
-      - rogue
-      - warrior
   battle_dungeon:
     background: rpg/img/levels/dungeon.webp
-    buttons:
-      - goblin
-      - slime
-      - skeleton
-      - wizard
-      - rogue
-      - warrior
   dungeon_FRL:
     background: rpg/img/levels/dungeon_FRL.webp
-    buttons:
-      - go_left
-      - go_front
-      - go_right
   dungeon_F:
     background: rpg/img/levels/dungeon_F.webp
-    buttons:
-      - go_front
   dungeon_FL:
     background: rpg/img/levels/dungeon_FL.webp
-    buttons:
-      - go_left
-      - go_front
   dungeon_FR:
     background: rpg/img/levels/dungeon_FR.webp
-    buttons:
-      - go_front
-      - go_right
   dungeon_LR:
     background: rpg/img/levels/dungeon_LR.webp
-    buttons:
-      - go_left
-      - go_right
diff --git a/packages/narrat/examples/games/rpg/data/sprites.yaml b/packages/narrat/examples/games/rpg/data/sprites.yaml
@@ -0,0 +1,30 @@
+go_left:
+  background: rpg/img/ui/left.webp
+  x: 100
+  y: 250
+  anchor:
+    x: 0.5
+    y: 0.5
+  onClick: choose_left
+go_right:
+  enabled: false
+  background: rpg/img/ui/right.webp
+  x: 770
+  y: 250
+  width: 96
+  height: 96
+  anchor:
+    x: 0.5
+    y: 0.5
+  onClick: choose_right
+go_front:
+  enabled: false
+  background: rpg/img/ui/front.webp
+  x: 440
+  y: 120
+  width: 96
+  height: 96
+  anchor:
+    x: 0.5
+    y: 0.5
+  onClick: choose_front
diff --git a/packages/narrat/src/components/screen-layer.vue b/packages/narrat/src/components/screen-layer.vue
@@ -18,7 +18,7 @@
       v-html="getButtonText(button as string)"
     ></div>
     <ScreenObject
-      v-for="screenObject in screenObjectsStore.tree"
+      v-for="screenObject in screenObjects"
       :key="screenObject.id"
       :screenObject="screenObject"
       :transitioning="transitioning"
@@ -45,14 +45,11 @@ import { error } from '@/utils/error-handling';
 import ScreenObject from './screen-objects/screen-object.vue';
 import { isViewportElementClickable } from '@/utils/viewport-utils';
 
-const props = defineProps({
-  layer: String,
-  layerIndex: Number,
-  transitioning: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = defineProps<{
+  layer: string;
+  layerIndex: number;
+  transitioning: boolean;
+}>();
 const vmStore = useVM();
 const main = useMain();
 const screensStore = useScreens();

diff --git a/packages/narrat/src/components/screens.vue b/packages/narrat/src/components/screens.vue
@@ -30,7 +30,12 @@
           />
         </template>
       </NarratTransition>
-      <Layer :layer="layer.screen" v-else-if="layer.screen" />
+      <Layer
+        :layer="layer.screen"
+        v-else-if="layer.screen"
+        :layerIndex="index"
+        :transitioning="false"
+      />
     </div>
   </div>
 </template>

diff --git a/packages/narrat/src/examples/rpg/scripts.ts b/packages/narrat/src/examples/rpg/scripts.ts
@@ -1,3 +1,5 @@
 import rpg from './scripts/rpg.narrat';
+import battle from './scripts/battle.narrat';
+import levels from './scripts/levels.narrat';
 
-export default [rpg];
+export default [rpg, battle, levels];