feat: add global events, pointer events and nft shape (decentraland#2)

* feat: add global events, pointer events and nft shape

* fix

* move system to a global one

* fix

* better test

* apply @lean feedback

* feat: add animation component
fix: fix gltf visible collision layer

package.json

@@ -25,6 +25,7 @@
     "trailingComma": "none"
   },
   "dependencies": {
+    "@dcl-sdk/utils": "^1.1.2",
     "@dcl/posix": "^1.0.4",
     "@types/buffers": "^0.1.31",
     "@types/text-encoding": "^0.0.36",

sdk6-tests/package.json

@@ -20,5 +20,11 @@
     "node": ">=14.0.0",
     "npm": ">=6.0.0",
     "yarn": "please use npm"
-  }
+  },
+  "dependencies": {
+    "@dcl/ecs-scene-utils": "^1.7.5"
+  },
+  "bundleDependencies": [
+    "@dcl/ecs-scene-utils"
+  ]
 }

sdk6-tests/src/game.ts

@@ -1,8 +1,5 @@
 /// --- Set up a system ---
-
-import { getCurrentRealm } from "@decentraland/EnvironmentAPI"
-import { getParcel } from "@decentraland/ParcelIdentity"
-import { getProvider } from "@decentraland/web3-provider"
+import * as utils from '@dcl/ecs-scene-utils'
 
 class RotatorSystem {
   // this group will contain every entity that has a Transform component
@@ -35,33 +32,57 @@ function spawnCube(x: number, y: number, z: number) {
   // add a shape to the entity
   cube.addComponent(new BoxShape())
 
+  const material = new Material()
+  material.albedoColor = Color3.Red()
+  cube.addComponent(material)
+
   // add the entity to the engine
   engine.addEntity(cube)
 
+  cube.addComponent(
+    new utils.TriggerComponent(
+      new utils.TriggerBoxShape(new Vector3(5,5,5)), //shape
+      {
+        onCameraEnter: () => {
+          cube.getComponent(Material).albedoColor = Color3.Blue()
+        },
+        onCameraExit: () => {
+          cube.getComponent(Material).albedoColor = Color3.Red()
+        }
+      }
+    )
+  )
+
+  cube.addComponent(
+    new OnPointerUp(() => {
+      log('OnPointerUp', cube)
+    })
+  )
   return cube
 }
 
 /// --- Spawn a cube ---
 
 const cube = spawnCube(8, 1, 8)
-
+log('Hello world')
 cube.addComponent(
   new OnPointerDown(() => {
+    log('OnPointerDown')
     cube.getComponent(Transform).scale.z *= 1.1
     cube.getComponent(Transform).scale.x *= 0.9
 
     spawnCube(Math.random() * 8 + 1, Math.random() * 8, Math.random() * 8 + 1)
   })
 )
 
-getParcel().then((e) => {
-  log('getParcel:', JSON.stringify(e))
-})
 
-getProvider().then((e) => {
-  log('getProvider:', JSON.stringify(e))
-})
-
-getCurrentRealm().then((e) => {
-  log('getCurrentRealm:', JSON.stringify(e))
-})
+cube.addComponent(
+  new OnPointerHoverEnter(() => {
+    log('OnPointerHoverEnter')
+  })
+)
+cube.addComponent(
+  new OnPointerHoverExit(() => {
+    log('OnPointerHoverExit')
+  })
+)

sdk6-tests/tsconfig.json

@@ -2,8 +2,17 @@
   "compilerOptions": {
     "outFile": "./bin/game.js",
     "allowJs": true,
-    "strict": true
+    "strict": true,
+    "paths": {
+      "@dcl/ecs-scene-utils": [
+        "node_modules/@dcl/ecs-scene-utils/dist/index.d.ts"
+      ]
+    },
+    "baseUrl": "."
   },
-  "include": ["src/**/*.ts"],
-  "extends": "./node_modules/decentraland-ecs/types/tsconfig.json"
-}
+  "include": [
+    "src/**/*.ts"
+  ],
+  "extends": "./node_modules/decentraland-ecs/types/tsconfig.json",
+  "compileOnSave": false
+}

src/components-bridge/Animation.ts

@@ -0,0 +1,35 @@
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
+import { ECS6State } from '../types'
+
+import { Animator, PBAnimationState } from '@dcl/sdk/ecs'
+
+function convertAnimationState(states: any): PBAnimationState[] {
+  const animationStates: PBAnimationState[] = []
+
+  for (const state of states) {
+    animationStates.push({
+      name: state.clip, // TODO: Review if this is right
+      clip: state.clip,
+      loop: state.looping,
+      weight: state.weight,
+      playing: state.playing,
+      shouldReset: state.shouldReset,
+      speed: state.speed,
+    })
+  }
+
+  return animationStates
+}
+
+export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
+
+  Animator.createOrReplace(ecs7Entity, {
+    states: convertAnimationState(payload.states)
+  })
+}
+
+export function remove(state: ECS6State, ecs6EntityId: EntityID) {
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
+  Animator.deleteFrom(ecs7Entity)
+}

src/components-bridge/BasicMaterial.ts

@@ -1,11 +1,11 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State } from '../types'
 
 import { Material } from '@dcl/ecs'
 import { convertTexture } from './commons/utils'
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   Material.setBasicMaterial(ecs7Entity, {
     texture: convertTexture(state, payload.albedoTexture),
     alphaTest: payload.alphaTest,
@@ -14,7 +14,7 @@ export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   if (Material.getOrNull(ecs7Entity)) {
     Material.deleteFrom(ecs7Entity)
   }

src/components-bridge/BoxShape.ts

@@ -1,11 +1,11 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State } from '../types'
 
-import { MeshRenderer, MeshCollider, ColliderLayer } from '@dcl/ecs'
+import { MeshRenderer, MeshCollider } from '@dcl/ecs'
 import { getColliderLayer } from './commons/utils'
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
 
   if (payload.visible) {
     const uvs: number[] = payload.uvs || []
@@ -24,7 +24,7 @@ export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   if (MeshRenderer.getOrNull(ecs7Entity)) {
     MeshRenderer.deleteFrom(ecs7Entity)
   }

src/components-bridge/CylinderShape.ts

@@ -1,11 +1,11 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State } from '../types'
 
 import { MeshRenderer, MeshCollider } from '@dcl/ecs'
 import { getColliderLayer } from './commons/utils'
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
 
   if (payload.visible) {
     MeshRenderer.setCylinder(ecs7Entity, payload.radiusTop || 0, payload.radiusBottom || 1)
@@ -22,7 +22,7 @@ export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   if (MeshRenderer.getOrNull(ecs7Entity)) {
     MeshRenderer.deleteFrom(ecs7Entity)
   }

src/components-bridge/GltfShape.ts

@@ -1,21 +1,24 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State } from '../types'
 
 import { GltfContainer } from '@dcl/ecs'
 import { getColliderLayer } from './commons/utils'
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
 
-  GltfContainer.createOrReplace(ecs7Entity, {
-    src: payload.src,
-    invisibleMeshesCollisionMask: getColliderLayer(payload)
-  })
+  if (payload.visible) {
+    GltfContainer.createOrReplace(ecs7Entity, {
+      src: payload.src,
+      invisibleMeshesCollisionMask: getColliderLayer(payload),
+      visibleMeshesCollisionMask: getColliderLayer(payload)
+    })
+  } else {
+    GltfContainer.deleteFrom(ecs7Entity)
+  }
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
-  if (GltfContainer.getOrNull(ecs7Entity)) {
-    GltfContainer.deleteFrom(ecs7Entity)
-  }
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
+  GltfContainer.deleteFrom(ecs7Entity)
 }

src/components-bridge/Material.ts

@@ -1,4 +1,4 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State, ECS6_CLASS_ID } from '../types'
 
 import { Material, TextureUnion, TextureWrapMode } from '@dcl/ecs'
@@ -43,7 +43,7 @@ function convertTexture(state: ECS6State, textureEntityId: any): TextureUnion |
 }
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   Material.setPbrMaterial(ecs7Entity, {
     texture: convertTexture(state, payload.albedoTexture),
     alphaTest: payload.alphaTest,
@@ -65,7 +65,7 @@ export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   if (Material.getOrNull(ecs7Entity)) {
     Material.deleteFrom(ecs7Entity)
   }

src/components-bridge/NftShape.ts

@@ -0,0 +1,37 @@
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
+import { ECS6State } from '../types'
+
+import { NftShape, MeshCollider } from '@dcl/ecs'
+import { getColliderLayer } from './commons/utils'
+
+function convertNftSrcToUrn(src: string): string {
+    src = src.substring('ethereum://'.length)
+    src = src.replace('/', ':')
+    return `urn:decentraland:ethereum:erc721:${src}`
+}
+
+export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
+
+  if (payload.visible) {
+    NftShape.createOrReplace(ecs7Entity, {
+        urn: convertNftSrcToUrn(payload.src),
+        color: payload.color,
+        style: payload.style
+    })
+  } else {
+    NftShape.deleteFrom(ecs7Entity)
+  }
+
+  const colliderLayer = getColliderLayer(payload)
+  if (colliderLayer) {
+    MeshCollider.setPlane(ecs7Entity, colliderLayer)
+  } else {
+    MeshCollider.deleteFrom(ecs7Entity)
+  }
+}
+
+export function remove(state: ECS6State, ecs6EntityId: EntityID) {
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
+  NftShape.deleteFrom(ecs7Entity)
+}

src/components-bridge/PlaneShape.ts

@@ -1,11 +1,11 @@
-import { ecs7EnsureEntity } from '../ecs7/ECS7'
+import { sdk7EnsureEntity } from '../ecs7/ECS7'
 import { ECS6State } from '../types'
 
 import { MeshRenderer, MeshCollider } from '@dcl/ecs'
 import { getColliderLayer } from './commons/utils'
 
 export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
 
   if (payload.visible) {
     const uvs: number[] = payload.uvs || []
@@ -17,14 +17,14 @@ export function update(state: ECS6State, ecs6EntityId: EntityID, payload: any) {
 
   const colliderLayer = getColliderLayer(payload)
   if (colliderLayer) {
-    MeshCollider.setBox(ecs7Entity, colliderLayer)
+    MeshCollider.setPlane(ecs7Entity, colliderLayer)
   } else if (MeshCollider.getOrNull(ecs7Entity)) {
     MeshCollider.deleteFrom(ecs7Entity)
   }
 }
 
 export function remove(state: ECS6State, ecs6EntityId: EntityID) {
-  const ecs7Entity = ecs7EnsureEntity(state, ecs6EntityId)
+  const ecs7Entity = sdk7EnsureEntity(state, ecs6EntityId)
   if (MeshRenderer.getOrNull(ecs7Entity)) {
     MeshRenderer.deleteFrom(ecs7Entity)
   }