From 17d9283cbd3b3bc54b9669e028c2a6c716e7fb32 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Mon, 9 Oct 2023 09:06:08 +0200 Subject: [PATCH 1/9] Sprite image initial commit --- scene-generator/actionableItemTypes.js | 1 + scene-generator/getSceneCreate.js | 4 +++ scene-generator/getScenePreload.js | 3 ++ .../helpers/getActionableItemSpriteCode.js | 22 +++++++++++++ .../scenes-requierments/Scene1.json | 33 +++++++++++++++++++ 5 files changed, 63 insertions(+) create mode 100644 scene-generator/helpers/getActionableItemSpriteCode.js diff --git a/scene-generator/actionableItemTypes.js b/scene-generator/actionableItemTypes.js index a095bcf..87aa67f 100644 --- a/scene-generator/actionableItemTypes.js +++ b/scene-generator/actionableItemTypes.js @@ -1,6 +1,7 @@ const ActionableItemType = { HITBOX: 'hitbox', IMAGE: 'image', + SPRITE: 'sprite', TEXT: 'text', }; diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index a12f110..f181ede 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -10,6 +10,7 @@ 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,6 +51,9 @@ 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; diff --git a/scene-generator/getScenePreload.js b/scene-generator/getScenePreload.js index e55a4c2..43f9827 100644 --- a/scene-generator/getScenePreload.js +++ b/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) { diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js new file mode 100644 index 0000000..615359f --- /dev/null +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -0,0 +1,22 @@ +function getActionableItemSpriteCode(actionableItem) { + return `this.${actionableItem?.name} = this.anims.create({ + key: 'walk', + frames: this.anims.generateFrameNumbers('mummy'), + frameRate: 16, + }); + + const sprite = this.add.sprite(50, 300, 'mummy').setScale(4); + + sprite.play({ key: 'walk', repeat: 7 }); + + this.tweens.add({ + targets: sprite, + x: 750, + duration: 8800, + ease: 'Linear' + }); + + `; +} + +module.exports = getActionableItemSpriteCode; diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index b52dcc3..5b9cf18 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -87,6 +87,39 @@ ] } ] + }, + { + "name": "mummy", + "type": "sprite", + "label": { + "content": "text" + }, + "scale": 0.6, + "position": { + "x": 120, + "y": 920 + }, + "image": { + "url": "src/assets/animations/mummy37x45.png" + }, + "isDraggable": false, + "hasPhysicsEnabled": true, + "actions": [ + { + "actionType": "pointerdown", + "events": [ + { + "eventType": "mainNPCDialog", + "event": { + "dialog": { + "content": "You found a mummy!", + "duration": 5000 + } + } + } + ] + } + ] } ], "mainNPC": { From 142eb296b82a276b656b8c87e97021d3a78bccaf Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Thu, 12 Oct 2023 11:16:03 +0200 Subject: [PATCH 2/9] Sprite image parameterization --- scene-generator/getSceneCreate.js | 41 ++++++------ .../helpers/getActionableItemSpriteCode.js | 24 ++++--- .../scenes-requierments/Scene1.json | 59 ++++++++++++------ src/assets/animations/mummy37x45.png | Bin 0 -> 12712 bytes 4 files changed, 72 insertions(+), 52 deletions(-) create mode 100644 src/assets/animations/mummy37x45.png diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index f181ede..a3ff21e 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -61,32 +61,35 @@ function geSceneCreate(sceneName, sceneConfig) { } createCode += getSetNameCode(actionableItem?.name); - createCode += getSetScaleCode( - actionableItem?.name, - actionableItem?.scale - ); + if(actionableItem?.type !== ActionableItemType.SPRITE) { + createCode += getSetScaleCode( + actionableItem?.name, + actionableItem?.scale + ); + createCode += getSetInteractiveCode(actionableItem?.name); + createCode += getAnimationCode( + actionableItem?.name, + actionableItem?.animation + ); + createCode += getSetDraggableCode( + actionableItem?.name, + actionableItem?.isDraggable + ); + createCode += getLabelCode( + actionableItem?.name, + actionableItem?.label, + actionableItem?.label?.styles + ); + createCode += getDragEventCode(sceneHasOneOrMoreDraggableItems); + } createCode += getSetOriginCode( actionableItem?.name, actionableItem?.origin ); - createCode += getSetInteractiveCode(actionableItem?.name); - createCode += getAnimationCode( - actionableItem?.name, - actionableItem?.animation - ); - createCode += getSetDraggableCode( - actionableItem?.name, - actionableItem?.isDraggable - ); createCode += getHasPhysicsCode( actionableItem?.name, actionableItem?.hasPhysicsEnabled ); - createCode += getLabelCode( - actionableItem?.name, - actionableItem?.label, - actionableItem?.label?.styles - ); if (actionableItem?.actions?.length > 0) { actionableItem?.actions.forEach( @@ -103,8 +106,6 @@ function geSceneCreate(sceneName, sceneConfig) { } }); - createCode += getDragEventCode(sceneHasOneOrMoreDraggableItems); - if (process.env.NODE_ENV === 'development') { createCode += 'debug(this);'; } diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js index 615359f..4407ea2 100644 --- a/scene-generator/helpers/getActionableItemSpriteCode.js +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -1,20 +1,18 @@ function getActionableItemSpriteCode(actionableItem) { return `this.${actionableItem?.name} = this.anims.create({ - key: 'walk', - frames: this.anims.generateFrameNumbers('mummy'), - frameRate: 16, + key: '${actionableItem?.key}', + frames: this.anims.generateFrameNumbers('${actionableItem?.name}'), + frameRate: ${actionableItem?.frameRate}, }); - - const sprite = this.add.sprite(50, 300, 'mummy').setScale(4); - - sprite.play({ key: 'walk', repeat: 7 }); + const ${actionableItem?.name}Sprite = this.add.sprite(${actionableItem?.position.x},${actionableItem?.position.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale}); + ${actionableItem?.name}Sprite.play({ key: '${actionableItem?.key}', repeat: ${actionableItem?.repeat} }); - this.tweens.add({ - targets: sprite, - x: 750, - duration: 8800, - ease: 'Linear' - }); + this.tweens.add({ + targets: ${actionableItem?.name}Sprite, + x: ${actionableItem?.move.x}, + duration: ${actionableItem?.duration}, + ease: '${actionableItem?.ease}' + }); `; } diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index 5b9cf18..7d4bc93 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -94,32 +94,53 @@ "label": { "content": "text" }, - "scale": 0.6, + "scale": 4, "position": { - "x": 120, - "y": 920 + "x": 190, + "y": 660 }, + "move": { + "x": 190, + "y": 0 + }, + "duration": 8800, + "repeat": 7, + "key": "walk", + "frameRate": 20, + "ease": "Linear", "image": { "url": "src/assets/animations/mummy37x45.png" }, "isDraggable": false, "hasPhysicsEnabled": true, - "actions": [ - { - "actionType": "pointerdown", - "events": [ - { - "eventType": "mainNPCDialog", - "event": { - "dialog": { - "content": "You found a mummy!", - "duration": 5000 - } - } - } - ] - } - ] + "actions": [] + }, + { + "name": "mummy2", + "type": "sprite", + "label": { + "content": "text" + }, + "scale": 4, + "position": { + "x": 250, + "y": 630 + }, + "move": { + "x": 750, + "y": 0 + }, + "duration": 9800, + "repeat": 10, + "key": "walk", + "frameRate": 16, + "ease": "Linear", + "image": { + "url": "src/assets/animations/mummy37x45.png" + }, + "isDraggable": false, + "hasPhysicsEnabled": true, + "actions": [] } ], "mainNPC": { diff --git a/src/assets/animations/mummy37x45.png b/src/assets/animations/mummy37x45.png new file mode 100644 index 0000000000000000000000000000000000000000..4d573e27e2406e5467a0570c350dad57c2857a6e GIT binary patch literal 12712 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

0;&G;uvuA|35f|vb8zuXNpo^> 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 BhC2WN literal 0 HcmV?d00001 From e9c83a96f68099afbe082b5f7f81936a0d815443 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Thu, 12 Oct 2023 11:30:24 +0200 Subject: [PATCH 3/9] Sprite image frame rate workaround --- scene-generator/helpers/getActionableItemSpriteCode.js | 1 + scene-generator/scenes-requierments/Scene1.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js index 4407ea2..a57b8d7 100644 --- a/scene-generator/helpers/getActionableItemSpriteCode.js +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -6,6 +6,7 @@ function getActionableItemSpriteCode(actionableItem) { }); const ${actionableItem?.name}Sprite = this.add.sprite(${actionableItem?.position.x},${actionableItem?.position.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale}); ${actionableItem?.name}Sprite.play({ key: '${actionableItem?.key}', repeat: ${actionableItem?.repeat} }); + ${actionableItem?.name}Sprite.anims.msPerFrame = Math.floor(${actionableItem?.duration}/(${actionableItem?.frameRate}*${actionableItem?.repeat})); this.tweens.add({ targets: ${actionableItem?.name}Sprite, diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index 7d4bc93..a586f7d 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -104,7 +104,7 @@ "y": 0 }, "duration": 8800, - "repeat": 7, + "repeat": 18, "key": "walk", "frameRate": 20, "ease": "Linear", From 4b6b5f316a2d3d14dad77e0309f10bfee8abd6ee Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Fri, 17 Nov 2023 15:51:21 +0100 Subject: [PATCH 4/9] Sprite codegen test --- .../getActionableItemSpriteCode.test.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 tests/node/helpers/getActionableItemSpriteCode.test.js diff --git a/tests/node/helpers/getActionableItemSpriteCode.test.js b/tests/node/helpers/getActionableItemSpriteCode.test.js new file mode 100644 index 0000000..8bc0403 --- /dev/null +++ b/tests/node/helpers/getActionableItemSpriteCode.test.js @@ -0,0 +1,20 @@ +const getActionableItemSpriteCode = require('../../../scene-generator/helpers/getActionableItemSpriteCode'); + +describe('getActionableItemSpriteCode', () => { + it('should return the correct code for creating a sprite with specified position', () => { + const actionableItem = { + name: 'item1', + position: { x: 100, y: 200 }, + move: { x: 190, y: 0 }, + }; + const result = getActionableItemSpriteCode(actionableItem); + const expectedBegin = `this.item1 = this.anims.create`; + const expectedPosition = `this.add.sprite(100,200,'item1')`; + expect(result.replace(/\s+/g, '')).toMatch( + new RegExp(`^${expectedBegin.replace(/\s+/g, '')}?`) + ); + expect(result.replace(/\s+/g, '')).toMatch( + expectedPosition + ); + }); +}); From 8e675809cca93a3cebf1d4434aef69ad5185fa59 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Mon, 20 Nov 2023 08:54:24 +0100 Subject: [PATCH 5/9] Sprite label added --- scene-generator/getSceneCreate.js | 7 +++++ scene-generator/helpers/getSpriteLabelCode.js | 15 +++++++++++ tests/node/getSceneCreate.test.js | 24 ++++++++++++++--- tests/node/helpers/getSpriteLabelCode.test.js | 27 +++++++++++++++++++ 4 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 scene-generator/helpers/getSpriteLabelCode.js create mode 100644 tests/node/helpers/getSpriteLabelCode.test.js diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index a3ff21e..2216ee5 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -3,6 +3,7 @@ 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'); @@ -81,6 +82,12 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.label?.styles ); createCode += getDragEventCode(sceneHasOneOrMoreDraggableItems); + } else { + createCode += getSpriteLabelCode( + actionableItem?.name, + actionableItem?.label, + actionableItem?.label?.styles + ); } createCode += getSetOriginCode( actionableItem?.name, diff --git a/scene-generator/helpers/getSpriteLabelCode.js b/scene-generator/helpers/getSpriteLabelCode.js new file mode 100644 index 0000000..e2c6d0c --- /dev/null +++ b/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 - this.${name}.height / 2, "${ + label.content + }", + ${JSON.stringify(labelStyles)} + ).setOrigin(0.5); + `; +} + +module.exports = getSpriteLabelCode; diff --git a/tests/node/getSceneCreate.test.js b/tests/node/getSceneCreate.test.js index 9078faa..80ccd42 100644 --- a/tests/node/getSceneCreate.test.js +++ b/tests/node/getSceneCreate.test.js @@ -288,19 +288,19 @@ describe('getSceneCreate function', () => { this.text1 = this.add.text(undefined, undefined, "undefined", undefined); this.text1.name = "text1"; - this.text1.setOrigin(0.5, 0.5); this.text1.setInteractive(); + this.text1.setOrigin(0.5, 0.5); this.image1 = this.add.image(undefined, undefined, "image1"); this.image1.name = "image1"; - this.image1.setOrigin(0.5, 0.5); this.image1.setInteractive(); + this.image1.setOrigin(0.5, 0.5); this.hitbox1 = this.add.rectangle(undefined, undefined, undefined, undefined, undefined); this.hitbox1.isHitbox = true; this.hitbox1.name = "hitbox1"; - this.hitbox1.setOrigin(0.5, 0.5); this.hitbox1.setInteractive(); + this.hitbox1.setOrigin(0.5, 0.5); `; const result = getSceneCreate(sceneName, sceneConfig); @@ -502,6 +502,15 @@ describe('getSceneCreate function', () => { this.scene.children.bringToTop(this.label); } }); + + this.input.on("drag", (pointer,gameObject,dragX,dragY) => { + gameObject.x = dragX; + gameObject.y = dragY; + if(gameObject.label) { + gameObject.label.x = gameObject.getBounds()?.x + gameObject.getBounds()?.width/2; + gameObject.label.y = gameObject.getBounds()?.y - gameObject.getBounds()?.height/2; + } + }); this.text1 = this.add.text(undefined, undefined, "undefined", undefined); this.text1.name = "text1"; @@ -513,6 +522,15 @@ describe('getSceneCreate function', () => { this.scene.children.bringToTop(this.label); } }); + + this.input.on("drag", (pointer,gameObject,dragX,dragY) => { + gameObject.x = dragX; + gameObject.y = dragY; + if(gameObject.label) { + gameObject.label.x = gameObject.getBounds()?.x + gameObject.getBounds()?.width/2; + gameObject.label.y = gameObject.getBounds()?.y - gameObject.getBounds()?.height/2; + } + }); this.hitbox1 = this.add.rectangle(undefined, undefined, undefined, undefined, undefined); this.hitbox1.isHitbox = true; diff --git a/tests/node/helpers/getSpriteLabelCode.test.js b/tests/node/helpers/getSpriteLabelCode.test.js new file mode 100644 index 0000000..99e1e5d --- /dev/null +++ b/tests/node/helpers/getSpriteLabelCode.test.js @@ -0,0 +1,27 @@ +const getSpriteLabelCode = require('../../../scene-generator/helpers/getSpriteLabelCode'); + +describe('getSpriteLabelCode', () => { + it('should return an empty string if label or name is falsy', () => { + const name = 'someName'; + const label = null; + const labelStyles = { fontSize: '16px', color: '#ffffff' }; + const result = getSpriteLabelCode(name, label, labelStyles); + expect(result).toEqual(''); + }); + + it('should return the correct code for valid label and name', () => { + const name = 'someName'; + const label = { content: 'Hello, World!' }; + const labelStyles = { fontSize: '16px', color: '#ffffff' }; + const result = getSpriteLabelCode(name, label, labelStyles); + + const expectedCode = ` + this.someName.label = this.add.text(this.someName.x + (this.someName.width / 2), this.someName.y - this.someName.height / 2, "Hello, World!", + {"fontSize":"16px","color":"#ffffff"} + ).setOrigin(0.5); + `; + expect(result.replace(/\s+/g, '')).toEqual( + expectedCode.replace(/\s+/g, '') + ); + }); +}); From d0cd4401588dd01b1a65313e14a7f9166e52a9ed Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Mon, 20 Nov 2023 09:30:31 +0100 Subject: [PATCH 6/9] Sprite interactive --- scene-generator/getSceneCreate.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index 2216ee5..ec99eb3 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -67,7 +67,6 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.name, actionableItem?.scale ); - createCode += getSetInteractiveCode(actionableItem?.name); createCode += getAnimationCode( actionableItem?.name, actionableItem?.animation @@ -98,6 +97,8 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.hasPhysicsEnabled ); + createCode += getSetInteractiveCode(actionableItem?.name); + if (actionableItem?.actions?.length > 0) { actionableItem?.actions.forEach( ({ actionType, events, actionTarget }) => { From 2be2dd5aa227b9bb9b55a2977041ef8fcdb9d6f7 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Mon, 11 Dec 2023 15:44:53 +0100 Subject: [PATCH 7/9] Sprite action support --- scene-generator/getSceneCreate.js | 12 ++++---- .../helpers/getActionableItemSpriteCode.js | 8 +++--- scene-generator/helpers/getEventsCode.js | 5 ++-- .../helpers/getSetInteractiveCode.js | 9 ++++-- .../scenes-requierments/Scene1.json | 28 +++++++++++++++++-- .../helpers/getSetInteractiveCode.test.js | 19 +++++++++---- 6 files changed, 58 insertions(+), 23 deletions(-) diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index ec99eb3..4b20c23 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -71,10 +71,6 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.name, actionableItem?.animation ); - createCode += getSetDraggableCode( - actionableItem?.name, - actionableItem?.isDraggable - ); createCode += getLabelCode( actionableItem?.name, actionableItem?.label, @@ -97,13 +93,17 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.hasPhysicsEnabled ); - createCode += getSetInteractiveCode(actionableItem?.name); + createCode += getSetInteractiveCode(actionableItem); + createCode += getSetDraggableCode( + actionableItem?.name, + actionableItem?.isDraggable + ); if (actionableItem?.actions?.length > 0) { actionableItem?.actions.forEach( ({ actionType, events, actionTarget }) => { createCode += getEventsCode( - actionableItem?.name, + actionableItem, actionType, actionTarget, events, diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js index a57b8d7..7e50aee 100644 --- a/scene-generator/helpers/getActionableItemSpriteCode.js +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -4,12 +4,12 @@ function getActionableItemSpriteCode(actionableItem) { frames: this.anims.generateFrameNumbers('${actionableItem?.name}'), frameRate: ${actionableItem?.frameRate}, }); - const ${actionableItem?.name}Sprite = this.add.sprite(${actionableItem?.position.x},${actionableItem?.position.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale}); - ${actionableItem?.name}Sprite.play({ key: '${actionableItem?.key}', repeat: ${actionableItem?.repeat} }); - ${actionableItem?.name}Sprite.anims.msPerFrame = Math.floor(${actionableItem?.duration}/(${actionableItem?.frameRate}*${actionableItem?.repeat})); + this.${actionableItem?.name}Sprite = this.add.sprite(${actionableItem?.position.x},${actionableItem?.position.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale}); + this.${actionableItem?.name}Sprite.play({ key: '${actionableItem?.key}', repeat: ${actionableItem?.repeat} }); + this.${actionableItem?.name}Sprite.anims.msPerFrame = Math.floor(${actionableItem?.duration}/(${actionableItem?.frameRate}*${actionableItem?.repeat})); this.tweens.add({ - targets: ${actionableItem?.name}Sprite, + targets: this.${actionableItem?.name}Sprite, x: ${actionableItem?.move.x}, duration: ${actionableItem?.duration}, ease: '${actionableItem?.ease}' diff --git a/scene-generator/helpers/getEventsCode.js b/scene-generator/helpers/getEventsCode.js index f4757a2..d19a857 100644 --- a/scene-generator/helpers/getEventsCode.js +++ b/scene-generator/helpers/getEventsCode.js @@ -3,7 +3,7 @@ const EventType = require('../eventTypes.js'); const getSceneTransitionCode = require('./getSceneTransitionCode.js'); const getMainNPCDialogEventCode = require('./getMainNPCDialogEventCode.js'); -function getEventsCode(name, actionType, actionTarget, events, sceneConfig) { +function getEventsCode(actionableItem, actionType, actionTarget, events, sceneConfig) { if (!events) return ''; let content = ''; @@ -16,7 +16,7 @@ function getEventsCode(name, actionType, actionTarget, events, sceneConfig) { ) ) { content += ` - this.physics.add.overlap(this.${name}, this.${actionTarget}, () => { + this.physics.add.overlap(this.${actionableItem.name}, this.${actionTarget}, () => { `; events.forEach(({ eventType, event }) => { if (eventType === EventType.SCENE_TRANSITION) { @@ -30,6 +30,7 @@ function getEventsCode(name, actionType, actionTarget, events, sceneConfig) { `; } } else { + const name = (actionableItem.type === 'sprite')? actionableItem.name + 'Sprite' : actionableItem.name; content += ` this.${name}.on("${actionType.toLowerCase()}", function () {`; events?.forEach(({ eventType, event }) => { diff --git a/scene-generator/helpers/getSetInteractiveCode.js b/scene-generator/helpers/getSetInteractiveCode.js index 0f3c374..4c2eef2 100644 --- a/scene-generator/helpers/getSetInteractiveCode.js +++ b/scene-generator/helpers/getSetInteractiveCode.js @@ -1,6 +1,9 @@ -function getSetInteractiveCode(name) { - if (name === 'input' || !name) return ''; - return `this.${name}.setInteractive();`; +function getSetInteractiveCode(actionableItem) { + if (actionableItem.name === 'input' || !actionableItem.name) return ''; + if (actionableItem.type === "sprite") { + return `this.${actionableItem.name}Sprite.setInteractive();` + } + return `this.${actionableItem.name}.setInteractive();`; } module.exports = getSetInteractiveCode; diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index a586f7d..7cd31f7 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -113,7 +113,19 @@ }, "isDraggable": false, "hasPhysicsEnabled": true, - "actions": [] + "actions": [{ + "actionType": "pointerup", + "events": [ + { + "eventType": "mainNPCDialog", + "event": { + "dialog": { + "content": "Watch out! It's a mummy!" + } + } + } + ] + }] }, { "name": "mummy2", @@ -140,7 +152,19 @@ }, "isDraggable": false, "hasPhysicsEnabled": true, - "actions": [] + "actions": [{ + "actionType": "pointerup", + "events": [ + { + "eventType": "mainNPCDialog", + "event": { + "dialog": { + "content": "Watch out! It's a mummy!" + } + } + } + ] + }] } ], "mainNPC": { diff --git a/tests/node/helpers/getSetInteractiveCode.test.js b/tests/node/helpers/getSetInteractiveCode.test.js index db4dc8f..a9748ad 100644 --- a/tests/node/helpers/getSetInteractiveCode.test.js +++ b/tests/node/helpers/getSetInteractiveCode.test.js @@ -2,17 +2,24 @@ const getSetInteractiveCode = require('../../../scene-generator/helpers/getSetIn describe('getSetInteractiveCode', () => { it('should return an empty string if name is "input" or not provided', () => { - const name1 = 'input'; - const name2 = undefined; - const result1 = getSetInteractiveCode(name1); - const result2 = getSetInteractiveCode(name2); + const actionableItem1 = { + name: 'input', + }; + + const actionableItem2 = { + name: undefined, + }; + const result1 = getSetInteractiveCode(actionableItem1); + const result2 = getSetInteractiveCode(actionableItem2); expect(result1.replace(/\s+/g, '')).toEqual(''); expect(result2.replace(/\s+/g, '')).toEqual(''); }); it('should return the correct code for setting interactive property', () => { - const name = 'gameObject'; - const result = getSetInteractiveCode(name); + const actionableItem1 = { + name: 'gameObject', + }; + const result = getSetInteractiveCode(actionableItem1); const expectedCode = `this.gameObject.setInteractive();`; expect(result.replace(/\s+/g, '')).toEqual( expectedCode.replace(/\s+/g, '') From 23b6fed4a0ee547445c13bbeb5ca351c041ee7e7 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Fri, 15 Dec 2023 14:42:16 +0100 Subject: [PATCH 8/9] Sprite refactoring --- scene-generator/getSceneCreate.js | 21 +++-- .../helpers/getActionableItemSpriteCode.js | 33 +++++--- scene-generator/helpers/getEventsCode.js | 79 +++++++++---------- .../helpers/getSetInteractiveCode.js | 9 +-- .../scenes-requierments/Scene1.json | 52 +++++++----- 5 files changed, 104 insertions(+), 90 deletions(-) diff --git a/scene-generator/getSceneCreate.js b/scene-generator/getSceneCreate.js index 4b20c23..a42fb03 100644 --- a/scene-generator/getSceneCreate.js +++ b/scene-generator/getSceneCreate.js @@ -63,14 +63,6 @@ function geSceneCreate(sceneName, sceneConfig) { createCode += getSetNameCode(actionableItem?.name); if(actionableItem?.type !== ActionableItemType.SPRITE) { - createCode += getSetScaleCode( - actionableItem?.name, - actionableItem?.scale - ); - createCode += getAnimationCode( - actionableItem?.name, - actionableItem?.animation - ); createCode += getLabelCode( actionableItem?.name, actionableItem?.label, @@ -84,6 +76,14 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.label?.styles ); } + createCode += getSetScaleCode( + actionableItem?.name, + actionableItem?.scale + ); + createCode += getAnimationCode( + actionableItem?.name, + actionableItem?.animation + ); createCode += getSetOriginCode( actionableItem?.name, actionableItem?.origin @@ -92,8 +92,7 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.name, actionableItem?.hasPhysicsEnabled ); - - createCode += getSetInteractiveCode(actionableItem); + createCode += getSetInteractiveCode(actionableItem?.name); createCode += getSetDraggableCode( actionableItem?.name, actionableItem?.isDraggable @@ -103,7 +102,7 @@ function geSceneCreate(sceneName, sceneConfig) { actionableItem?.actions.forEach( ({ actionType, events, actionTarget }) => { createCode += getEventsCode( - actionableItem, + actionableItem?.name, actionType, actionTarget, events, diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js index 7e50aee..209c1d5 100644 --- a/scene-generator/helpers/getActionableItemSpriteCode.js +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -1,19 +1,26 @@ function getActionableItemSpriteCode(actionableItem) { - return `this.${actionableItem?.name} = this.anims.create({ - key: '${actionableItem?.key}', + /* + PlayAnimationConfig { + "key": "", + "frameRate": 0, + "duration": 0, + "delay": 0, + "repeat": 0, + "repeatDelay": 0, + "yoyo": false, + "showOnStart": true, + "hideOnComplete": false, + } + */ + 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?.frameRate}, - }); - this.${actionableItem?.name}Sprite = this.add.sprite(${actionableItem?.position.x},${actionableItem?.position.y}, '${actionableItem?.name}').setScale(${actionableItem?.scale}); - this.${actionableItem?.name}Sprite.play({ key: '${actionableItem?.key}', repeat: ${actionableItem?.repeat} }); - this.${actionableItem?.name}Sprite.anims.msPerFrame = Math.floor(${actionableItem?.duration}/(${actionableItem?.frameRate}*${actionableItem?.repeat})); - - this.tweens.add({ - targets: this.${actionableItem?.name}Sprite, - x: ${actionableItem?.move.x}, - duration: ${actionableItem?.duration}, - ease: '${actionableItem?.ease}' + 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} }); + this.${actionableItem?.name}.anims.msPerFrame = Math.floor(${actionableItem?.animation?.options?.duration}/(${actionableItem?.animation?.options?.frameRate}*${actionableItem?.animation?.options?.repeat})); `; } diff --git a/scene-generator/helpers/getEventsCode.js b/scene-generator/helpers/getEventsCode.js index d19a857..813b160 100644 --- a/scene-generator/helpers/getEventsCode.js +++ b/scene-generator/helpers/getEventsCode.js @@ -3,54 +3,53 @@ const EventType = require('../eventTypes.js'); const getSceneTransitionCode = require('./getSceneTransitionCode.js'); const getMainNPCDialogEventCode = require('./getMainNPCDialogEventCode.js'); -function getEventsCode(actionableItem, actionType, actionTarget, events, sceneConfig) { - if (!events) return ''; +function getEventsCode(name, actionType, actionTarget, events, sceneConfig) { + if (!events) return ''; - 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.${actionableItem.name}, this.${actionTarget}, () => { + 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 { - const name = (actionableItem.type === 'sprite')? actionableItem.name + 'Sprite' : actionableItem.name; - 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; diff --git a/scene-generator/helpers/getSetInteractiveCode.js b/scene-generator/helpers/getSetInteractiveCode.js index 4c2eef2..0f3c374 100644 --- a/scene-generator/helpers/getSetInteractiveCode.js +++ b/scene-generator/helpers/getSetInteractiveCode.js @@ -1,9 +1,6 @@ -function getSetInteractiveCode(actionableItem) { - if (actionableItem.name === 'input' || !actionableItem.name) return ''; - if (actionableItem.type === "sprite") { - return `this.${actionableItem.name}Sprite.setInteractive();` - } - return `this.${actionableItem.name}.setInteractive();`; +function getSetInteractiveCode(name) { + if (name === 'input' || !name) return ''; + return `this.${name}.setInteractive();`; } module.exports = getSetInteractiveCode; diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index 7cd31f7..2df6c05 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -91,6 +91,9 @@ { "name": "mummy", "type": "sprite", + "image": { + "url": "src/assets/animations/mummy37x45.png" + }, "label": { "content": "text" }, @@ -99,17 +102,20 @@ "x": 190, "y": 660 }, - "move": { - "x": 190, - "y": 0 + "play": { + "options": { + "yoyo": false + } }, - "duration": 8800, - "repeat": 18, - "key": "walk", - "frameRate": 20, - "ease": "Linear", - "image": { - "url": "src/assets/animations/mummy37x45.png" + "animation": { + "options": { + "x": 190, + "duration": 8800, + "frameRate": 20, + "ease": "Linear", + "yoyo": false, + "repeat": 18 + } }, "isDraggable": false, "hasPhysicsEnabled": true, @@ -130,6 +136,9 @@ { "name": "mummy2", "type": "sprite", + "image": { + "url": "src/assets/animations/mummy37x45.png" + }, "label": { "content": "text" }, @@ -138,17 +147,20 @@ "x": 250, "y": 630 }, - "move": { - "x": 750, - "y": 0 + "play": { + "options": { + "yoyo": false + } }, - "duration": 9800, - "repeat": 10, - "key": "walk", - "frameRate": 16, - "ease": "Linear", - "image": { - "url": "src/assets/animations/mummy37x45.png" + "animation": { + "options": { + "x": 750, + "duration": 9800, + "frameRate": 16, + "ease": "Linear", + "yoyo": false, + "repeat": 10 + } }, "isDraggable": false, "hasPhysicsEnabled": true, From 27eac92e60909546b1343043518648df5aa9fa78 Mon Sep 17 00:00:00 2001 From: Cleo Santos Date: Tue, 2 Jan 2024 16:57:26 +0100 Subject: [PATCH 9/9] Sprite label following the move --- scene-generator/getSceneClass.js | 6 +++ scene-generator/getSceneUpdate.js | 47 +++++++++++++++++++ .../helpers/getActionableItemSpriteCode.js | 18 +------ scene-generator/helpers/getSpriteLabelCode.js | 2 +- .../helpers/getSpriteLabelUpdateCode.js | 8 ++++ .../scenes-requierments/Scene1.json | 22 ++++++--- 6 files changed, 79 insertions(+), 24 deletions(-) create mode 100644 scene-generator/getSceneUpdate.js create mode 100644 scene-generator/helpers/getSpriteLabelUpdateCode.js diff --git a/scene-generator/getSceneClass.js b/scene-generator/getSceneClass.js index 4501b89..b6004e8 100644 --- a/scene-generator/getSceneClass.js +++ b/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} + } } `; diff --git a/scene-generator/getSceneUpdate.js b/scene-generator/getSceneUpdate.js new file mode 100644 index 0000000..43a6310 --- /dev/null +++ b/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; diff --git a/scene-generator/helpers/getActionableItemSpriteCode.js b/scene-generator/helpers/getActionableItemSpriteCode.js index 209c1d5..383559c 100644 --- a/scene-generator/helpers/getActionableItemSpriteCode.js +++ b/scene-generator/helpers/getActionableItemSpriteCode.js @@ -1,18 +1,5 @@ function getActionableItemSpriteCode(actionableItem) { - /* - PlayAnimationConfig { - "key": "", - "frameRate": 0, - "duration": 0, - "delay": 0, - "repeat": 0, - "repeatDelay": 0, - "yoyo": false, - "showOnStart": true, - "hideOnComplete": false, - } - */ - let options = JSON.stringify(actionableItem?.play?.options); + 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}'), @@ -20,8 +7,7 @@ function getActionableItemSpriteCode(actionableItem) { }); 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} }); - this.${actionableItem?.name}.anims.msPerFrame = Math.floor(${actionableItem?.animation?.options?.duration}/(${actionableItem?.animation?.options?.frameRate}*${actionableItem?.animation?.options?.repeat})); - + `; } diff --git a/scene-generator/helpers/getSpriteLabelCode.js b/scene-generator/helpers/getSpriteLabelCode.js index e2c6d0c..f810af3 100644 --- a/scene-generator/helpers/getSpriteLabelCode.js +++ b/scene-generator/helpers/getSpriteLabelCode.js @@ -4,7 +4,7 @@ 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 - this.${name}.height / 2, "${ + this.${name}.x + (this.${name}.width / 2), this.${name}.y, "${ label.content }", ${JSON.stringify(labelStyles)} diff --git a/scene-generator/helpers/getSpriteLabelUpdateCode.js b/scene-generator/helpers/getSpriteLabelUpdateCode.js new file mode 100644 index 0000000..0290b20 --- /dev/null +++ b/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; diff --git a/scene-generator/scenes-requierments/Scene1.json b/scene-generator/scenes-requierments/Scene1.json index 2df6c05..2a822b0 100644 --- a/scene-generator/scenes-requierments/Scene1.json +++ b/scene-generator/scenes-requierments/Scene1.json @@ -95,7 +95,7 @@ "url": "src/assets/animations/mummy37x45.png" }, "label": { - "content": "text" + "content": "mummy" }, "scale": 4, "position": { @@ -104,7 +104,11 @@ }, "play": { "options": { - "yoyo": false + "duration": 8800, + "frameRate": 20, + "ease": "Linear", + "yoyo": false, + "repeat": 330 } }, "animation": { @@ -114,7 +118,7 @@ "frameRate": 20, "ease": "Linear", "yoyo": false, - "repeat": 18 + "repeat": 1 } }, "isDraggable": false, @@ -140,7 +144,7 @@ "url": "src/assets/animations/mummy37x45.png" }, "label": { - "content": "text" + "content": "mummy2" }, "scale": 4, "position": { @@ -149,7 +153,11 @@ }, "play": { "options": { - "yoyo": false + "duration": 980, + "frameRate": 44, + "ease": "Linear", + "yoyo": false, + "repeat": 100 } }, "animation": { @@ -158,8 +166,8 @@ "duration": 9800, "frameRate": 16, "ease": "Linear", - "yoyo": false, - "repeat": 10 + "yoyo": true, + "repeat": 1 } }, "isDraggable": false,