feat: pointer events feedback scene (#21)

dcl-workspace.json

@@ -51,6 +51,9 @@
     {
       "path": "scenes/5,90-scene-bounds-check"
     },
+    {
+      "path": "scenes/30,20-pointer-events-feedback"
+    },
     {
       "path": "scenes/2,22-virtual-cameras"
     },

scenes/30,20-pointer-events-feedback/.dclignore

@@ -0,0 +1,13 @@
+.*
+package.json
+package-lock.json
+yarn-lock.json
+build.json
+export
+tsconfig.json
+tslint.json
+node_modules
+*.ts
+*.tsx
+Dockerfile
+dist

scenes/30,20-pointer-events-feedback/README.md

@@ -0,0 +1,6 @@
+This test scene shows how to configure the following pointer event feedback scenarios:
+
+* Highlight ON + Hover Text ON
+* Highlight ON + Hover Text OFF
+* Highlight OFF + Hover Text OFF
+* Highlight OFF + Hover Text ON

scenes/30,20-pointer-events-feedback/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "pointer-events-feedback",
+  "description": "ECS7 ",
+  "version": "1.0.0",
+  "dependencies": {
+    "@dcl/sdk": "^7.6.5-11672040830.commit-680459b",
+    "@dcl/js-runtime": "7.6.5-11672040830.commit-680459b"
+  },
+  "scripts": {
+    "build": "sdk-commands build --skip-install",
+    "deploy": "sdk-commands deploy",
+    "start": "sdk-commands start"
+  }
+}

scenes/30,20-pointer-events-feedback/scene.json

@@ -0,0 +1,50 @@
+{
+  "ecs7": true,
+  "runtimeVersion": "7",
+  "display": {
+    "title": "pointer events feedback test scene",
+    "description": "pointer events feedback test scene",
+    "navmapThumbnail": "images/scene-thumbnail.png",
+    "favicon": "favicon_asset"
+  },
+  "owner": "",
+  "contact": {
+    "name": "sdk-team",
+    "email": ""
+  },
+  "main": "bin/game.js",
+  "tags": [],
+  "spawnPoints": [
+    {
+      "name": "spawn1",
+      "default": true,
+      "position": {
+        "x": [
+          0,
+          3
+        ],
+        "y": [
+          0,
+          0
+        ],
+        "z": [
+          0,
+          3
+        ]
+      },
+      "cameraTarget": {
+        "x": 8,
+        "y": 1,
+        "z": 8
+      }
+    }
+  ],
+  "featureToggles": {},
+  "scene": {
+    "base": "30,20",
+    "parcels": [
+      "30,20"
+    ]
+  },
+  "name": "pointer events feedback test scene"
+}

scenes/30,20-pointer-events-feedback/src/index.ts

@@ -0,0 +1,36 @@
+import { Vector3, Color4 } from '@dcl/sdk/math'
+import { engine, TextShape, Entity, Transform, TransformType, MeshRenderer, MeshCollider, PointerEvents, PointerEventType, pointerEventsSystem, InputAction } from '@dcl/sdk/ecs'
+export function createCube(transformProps: Partial<TransformType>, feedback: boolean, highlight: boolean, useHoverText: boolean, text: string): Entity {
+  const textEntity = engine.addEntity()
+  Transform.create(textEntity, { position: Vector3.add(transformProps.position!, Vector3.create(0, 1.25, 0)) })
+
+  const defaultExplorerTextUsed = feedback && !useHoverText
+  TextShape.create(textEntity, {
+    fontSize: 2,
+    textColor: Color4.Yellow(),
+    text: `HIGHLIGHT: ${(feedback && highlight) ? 'ON' : 'OFF'}
+        \nHOVER TEXT: ${(defaultExplorerTextUsed || (feedback && useHoverText && text !== '')) ? 'ON' : 'OFF'}`
+  })
+  const cubeEntity = engine.addEntity()
+  Transform.create(cubeEntity, transformProps)
+  MeshRenderer.setBox(cubeEntity)
+  MeshCollider.setBox(cubeEntity)
+  PointerEvents.create(cubeEntity, {
+    pointerEvents: [
+      {
+        eventType: PointerEventType.PET_DOWN, eventInfo: {
+          button: InputAction.IA_POINTER,
+          hoverText: useHoverText ? text : undefined,
+          showFeedback: feedback,
+          showHighlight: highlight
+        }
+      }
+    ]
+  })
+  return cubeEntity
+}
+createCube({ position: { x: 2, y: 1.5, z: 8 } }, false, true, true, 'SHOULD NOT HIGHLIGHT')
+createCube({ position: { x: 4, y: 1.5, z: 8 } }, true, true, true, 'SHOULD HIGHLIGHT')
+createCube({ position: { x: 6, y: 1.5, z: 8 } }, true, false, true, 'SHOULD NOT HIGHLIGHT')
+createCube({ position: { x: 8, y: 1.5, z: 8 } }, true, true, true, '')
+createCube({ position: { x: 10, y: 1.5, z: 8 } }, true, true, false, '')

scenes/30,20-pointer-events-feedback/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"strict": true
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx"
+	],
+	"extends": "@dcl/sdk/types/tsconfig.ecs7.json"
+}