Sprite image

scene-generator/actionableItemTypes.js

@@ -1,6 +1,7 @@
 const ActionableItemType = {
   HITBOX: 'hitbox',
   IMAGE: 'image',
+  SPRITE: 'sprite',
   TEXT: 'text',
 };
 

scene-generator/getSceneClass.js

@@ -1,9 +1,11 @@
 const getScenePreload = require('./getScenePreload');
 const getSceneCreate = require('./getSceneCreate');
+const getSceneUpdate = require('./getSceneUpdate');
 
 function getSceneClass(sceneName, sceneConfig) {
   const preloadCode = getScenePreload(sceneName, sceneConfig);
   const createCode = getSceneCreate(sceneName, sceneConfig);
+  const updateCode = getSceneUpdate(sceneName, sceneConfig);
 
   const sceneClass = `
 import * as Phaser from 'phaser';
@@ -31,6 +33,10 @@ export class ${sceneName} extends Phaser.Scene {
   create() {
     ${createCode}
   }
+
+  update() {
+    ${updateCode}
+  }
 }
 `;
 

scene-generator/getSceneCreate.js

@@ -3,13 +3,15 @@ const getSetNameCode = require('./helpers/getSetNameCode.js');
 const getAnimationCode = require('./helpers/getAnimationCode.js');
 const getBackgroundCode = require('./helpers/getBackgroundCode.js');
 const getLabelCode = require('./helpers/getLabelCode.js');
+const getSpriteLabelCode = require('./helpers/getSpriteLabelCode.js');
 const getDragEventCode = require('./helpers/getDragEventCode.js');
 const getSetScaleCode = require('./helpers/getSetScaleCode.js');
 const getSetOriginCode = require('./helpers/getSetOriginCode.js');
 
 const getSetInteractiveCode = require('./helpers/getSetInteractiveCode.js');
 const getHasPhysicsCode = require('./helpers/getHasPhysicsCode.js');
 const getActionableItemImageCode = require('./helpers/getActionableItemImageCode.js');
+const getActionableItemSpriteCode = require('./helpers/getActionableItemSpriteCode.js');
 const getActionableItemTextCode = require('./helpers/getActionableItemTextCode.js');
 const getActionableItemHitboxCode = require('./helpers/getActionableItemHitboxCode.js');
 const getEventsCode = require('./helpers/getEventsCode.js');
@@ -50,38 +52,50 @@ function geSceneCreate(sceneName, sceneConfig) {
           case ActionableItemType.IMAGE:
             createCode += getActionableItemImageCode(actionableItem);
             break;
+          case ActionableItemType.SPRITE:
+            createCode += getActionableItemSpriteCode(actionableItem);
+            break;
           case ActionableItemType.TEXT:
             createCode += getActionableItemTextCode(actionableItem);
             break;
           default:
         }
 
         createCode += getSetNameCode(actionableItem?.name);
+        if(actionableItem?.type !== ActionableItemType.SPRITE) {
+          createCode += getLabelCode(
+              actionableItem?.name,
+              actionableItem?.label,
+              actionableItem?.label?.styles
+          );
+          createCode += getDragEventCode(sceneHasOneOrMoreDraggableItems);
+        } else {
+          createCode += getSpriteLabelCode(
+              actionableItem?.name,
+              actionableItem?.label,
+              actionableItem?.label?.styles
+          );
+        }
         createCode += getSetScaleCode(
-          actionableItem?.name,
-          actionableItem?.scale
-        );
-        createCode += getSetOriginCode(
-          actionableItem?.name,
-          actionableItem?.origin
+            actionableItem?.name,
+            actionableItem?.scale
         );
-        createCode += getSetInteractiveCode(actionableItem?.name);
         createCode += getAnimationCode(
-          actionableItem?.name,
-          actionableItem?.animation
+            actionableItem?.name,
+            actionableItem?.animation
         );
-        createCode += getSetDraggableCode(
+        createCode += getSetOriginCode(
           actionableItem?.name,
-          actionableItem?.isDraggable
+          actionableItem?.origin
         );
         createCode += getHasPhysicsCode(
           actionableItem?.name,
           actionableItem?.hasPhysicsEnabled
         );
-        createCode += getLabelCode(
-          actionableItem?.name,
-          actionableItem?.label,
-          actionableItem?.label?.styles
+        createCode += getSetInteractiveCode(actionableItem?.name);
+        createCode += getSetDraggableCode(
+            actionableItem?.name,
+            actionableItem?.isDraggable
         );
 
         if (actionableItem?.actions?.length > 0) {
@@ -99,8 +113,6 @@ function geSceneCreate(sceneName, sceneConfig) {
         }
       });
 
-      createCode += getDragEventCode(sceneHasOneOrMoreDraggableItems);
-
       if (process.env.NODE_ENV === 'development') {
         createCode += 'debug(this);';
       }

scene-generator/getScenePreload.js

@@ -11,6 +11,9 @@ function getScenePreload(sceneName, sceneConfig) {
     if (type === 'image') {
       preloadCode += `this.load.image("${name}", "${image.url}");\n`;
     }
+    if (type === 'sprite') {
+      preloadCode += `this.load.spritesheet("${name}", "${image.url}", { frameWidth: 37, frameHeight: 45 });\n`;
+    }
   });
 
   if (mainNPC) {

scene-generator/getSceneUpdate.js

@@ -0,0 +1,47 @@
+const ActionableItemType = require('./actionableItemTypes.js');
+
+const getSpriteLabelUpdateCode = require('./helpers/getSpriteLabelUpdateCode');
+
+function geSceneUpdate(sceneName, sceneConfig) {
+  if (
+    !sceneName ||
+    typeof sceneName !== 'string' ||
+    !/^[A-Z][a-zA-Z0-9]*$/.test(sceneName)
+  ) {
+    throw new Error(
+      'Invalid sceneName. A valid PascalCase string sceneName is required.'
+    );
+  }
+
+  if (!sceneConfig || typeof sceneConfig !== 'object') {
+    throw new Error('Invalid sceneConfig. An object sceneConfig is required.');
+  }
+
+  let updateCode = '';
+
+  renderSceneUpdate(sceneName, sceneConfig);
+
+  function renderSceneUpdate(sceneName, sceneConfig) {
+    const { background, actionableItems, mainNPC } = sceneConfig;
+
+    if (actionableItems?.length > 0) {
+      actionableItems.forEach((actionableItem) => {
+
+        if(actionableItem?.type === ActionableItemType.SPRITE) {
+          updateCode += getSpriteLabelUpdateCode(
+              actionableItem?.name,
+              actionableItem?.label
+          );
+        }
+      });
+
+      if (process.env.NODE_ENV === 'development') {
+        updateCode += 'debug(this);';
+      }
+    }
+  }
+
+  return updateCode;
+}
+
+module.exports = geSceneUpdate;

scene-generator/helpers/getActionableItemSpriteCode.js

@@ -0,0 +1,14 @@
+function getActionableItemSpriteCode(actionableItem) {
+  let options = JSON.stringify(actionableItem?.play?.options);
+  return `this.${actionableItem?.name}Anim = this.anims.create({
+    key: '${actionableItem?.name}Key',
+    frames: this.anims.generateFrameNumbers('${actionableItem?.name}'),
+    frameRate: ${actionableItem?.animation?.options?.frameRate},
+  });
+  this.${actionableItem?.name} = this.add.sprite(${actionableItem?.position?.x},${actionableItem?.position?.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale});
+  this.${actionableItem?.name}.play({ key: '${actionableItem?.name}Key', ...${options} });
+
+ `;
+}
+
+module.exports = getActionableItemSpriteCode;

scene-generator/helpers/getEventsCode.js

@@ -4,52 +4,52 @@ const getSceneTransitionCode = require('./getSceneTransitionCode.js');
 const getMainNPCDialogEventCode = require('./getMainNPCDialogEventCode.js');
 
 function getEventsCode(name, actionType, actionTarget, events, sceneConfig) {
-  if (!events) return '';
+    if (!events) return '';
 
-  let content = '';
-  if (actionType === ActionType.COLLIDE) {
-    if (
-      events.some(
-        ({ eventType }) =>
-          eventType === EventType.SCENE_TRANSITION ||
-          eventType === EventType.MAIN_NPC_DIALOG
-      )
-    ) {
-      content += `
+    let content = '';
+    if (actionType === ActionType.COLLIDE) {
+        if (
+            events.some(
+                ({ eventType }) =>
+                    eventType === EventType.SCENE_TRANSITION ||
+                    eventType === EventType.MAIN_NPC_DIALOG
+            )
+        ) {
+            content += `
        this.physics.add.overlap(this.${name}, this.${actionTarget}, () => {
      `;
-      events.forEach(({ eventType, event }) => {
-        if (eventType === EventType.SCENE_TRANSITION) {
-          content += getSceneTransitionCode(event, sceneConfig);
-        }
-        if (eventType === EventType.MAIN_NPC_DIALOG) {
-          content += getMainNPCDialogEventCode(event, sceneConfig);
-        }
-      });
-      content += `});
+            events.forEach(({ eventType, event }) => {
+                if (eventType === EventType.SCENE_TRANSITION) {
+                    content += getSceneTransitionCode(event, sceneConfig);
+                }
+                if (eventType === EventType.MAIN_NPC_DIALOG) {
+                    content += getMainNPCDialogEventCode(event, sceneConfig);
+                }
+            });
+            content += `});
      `;
-    }
-  } else {
-    content += `
+        }
+    } else {
+        content += `
        this.${name}.on("${actionType.toLowerCase()}", function () {`;
-    events?.forEach(({ eventType, event }) => {
-      content += `
+        events?.forEach(({ eventType, event }) => {
+            content += `
          ${
-           eventType === EventType.SCENE_TRANSITION
-             ? getSceneTransitionCode(event)
-             : ''
-         }
+                eventType === EventType.SCENE_TRANSITION
+                    ? getSceneTransitionCode(event)
+                    : ''
+            }
          ${
-           eventType === EventType.MAIN_NPC_DIALOG
-             ? getMainNPCDialogEventCode(event)
-             : ''
-         }`;
-    });
-    content += `
+                eventType === EventType.MAIN_NPC_DIALOG
+                    ? getMainNPCDialogEventCode(event)
+                    : ''
+            }`;
+        });
+        content += `
        }, this);
       `;
-  }
-  return content;
+    }
+    return content;
 }
 
 module.exports = getEventsCode;

scene-generator/helpers/getSpriteLabelCode.js

@@ -0,0 +1,15 @@
+const sceneConfig = require('../../src/configs/sceneConfig.json');
+
+function getSpriteLabelCode(name, label, labelStyles = sceneConfig?.labelStyles) {
+  if (!label || !name) return '';
+  return `
+    this.${name}.label = this.add.text(
+     this.${name}.x + (this.${name}.width / 2), this.${name}.y, "${
+       label.content
+     }",
+     ${JSON.stringify(labelStyles)}
+   ).setOrigin(0.5);
+ `;
+}
+
+module.exports = getSpriteLabelCode;

scene-generator/helpers/getSpriteLabelUpdateCode.js

@@ -0,0 +1,8 @@
+function getSpriteLabelUpdateCode(name, label) {
+  if (!label || !name) return '';
+  return `
+    this.${name}.label.setPosition(this.${name}.x + (this.${name}.width / 2), this.${name}.y);
+ `;
+}
+
+module.exports = getSpriteLabelUpdateCode;