diff --git a/dcl-workspace.json b/dcl-workspace.json index 7a49b9a..7af5ba9 100644 --- a/dcl-workspace.json +++ b/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" }, diff --git a/scenes/30,20-pointer-events-feedback/.dclignore b/scenes/30,20-pointer-events-feedback/.dclignore new file mode 100644 index 0000000..cf77336 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/scenes/30,20-pointer-events-feedback/README.md b/scenes/30,20-pointer-events-feedback/README.md new file mode 100644 index 0000000..dfdf3e4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/scenes/30,20-pointer-events-feedback/images/scene-thumbnail.png b/scenes/30,20-pointer-events-feedback/images/scene-thumbnail.png new file mode 100644 index 0000000..b3dc580 Binary files /dev/null and b/scenes/30,20-pointer-events-feedback/images/scene-thumbnail.png differ diff --git a/scenes/30,20-pointer-events-feedback/package.json b/scenes/30,20-pointer-events-feedback/package.json new file mode 100644 index 0000000..c7da618 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/scenes/30,20-pointer-events-feedback/scene.json b/scenes/30,20-pointer-events-feedback/scene.json new file mode 100644 index 0000000..298ade3 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/scenes/30,20-pointer-events-feedback/src/index.ts b/scenes/30,20-pointer-events-feedback/src/index.ts new file mode 100644 index 0000000..0e7de9d --- /dev/null +++ b/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, 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, '') diff --git a/scenes/30,20-pointer-events-feedback/tsconfig.json b/scenes/30,20-pointer-events-feedback/tsconfig.json new file mode 100644 index 0000000..a1616a2 --- /dev/null +++ b/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" +} \ No newline at end of file