@dcl/playground-assets 7.0.5-3640831568.commit-60f39b0 → 7.0.5-3649654995.commit-ad4efbc

package/dist/playground/snippets/billboard.ts

@@ -0,0 +1,121 @@
+import {
+  Entity,
+  engine,
+  Material,
+  Transform,
+  MeshRenderer,
+  Billboard,
+  BillboardMode,
+  TextShape,
+  Schemas
+} from '@dcl/sdk/ecs'
+import { Vector3, Color3, Color4 } from '@dcl/sdk/math'
+
+function createPlaneTexture(x: number, y: number, z: number): Entity {
+  const meshEntity = engine.addEntity()
+
+  Material.create(meshEntity, {
+    material: {
+      $case: 'pbr',
+      pbr: {
+        texture: {
+          tex: {
+            $case: 'texture',
+            texture: { src: 'models/polaroid2.png' }
+          }
+        }
+      }
+    }
+  })
+  Transform.create(meshEntity, {
+    position: { x, y, z },
+    scale: Vector3.create(2, 2, 2)
+  })
+  MeshRenderer.create(meshEntity, {
+    mesh: {
+      $case: 'plane',
+      plane: {
+        uvs: [...Array.from({ length: 40 }, () => 0), 0, 1, 1, 1, 1, 0, 0, 0]
+      }
+    }
+  })
+  return meshEntity
+}
+
+function createBillboards() {
+  const plane1 = createPlaneTexture(8, 3, 1)
+  const plane2 = createPlaneTexture(12, 3, 1)
+  createPlaneTexture(4, 3, 1)
+
+  const plane5 = createPlaneTexture(8, 3, 8)
+  const plane4 = createPlaneTexture(12, 3, 8)
+  createPlaneTexture(4, 3, 8)
+
+  Billboard.create(plane1, {
+    billboardMode: BillboardMode.BM_Y_AXE
+  })
+  Billboard.create(plane2)
+  Billboard.create(plane4, {
+    oppositeDirection: true,
+    billboardMode: BillboardMode.BM_ALL_AXES
+  })
+  Billboard.create(plane5, {
+    oppositeDirection: true,
+    billboardMode: BillboardMode.BM_Y_AXE
+  })
+}
+
+function createTextShape(text: string, position: Vector3, textColor: Color4) {
+  const entity = engine.addEntity()
+  Transform.create(entity, { position })
+  return TextShape.create(entity, {
+    text,
+    fontSize: 3,
+    outlineWidth: 0.1,
+    outlineColor: Color3.Black(),
+    textColor
+  })
+}
+
+function createTextShapes() {
+  const regularColor = Color4.create(1, 0.2, 0.8, 0.8)
+  const oppositeColor = Color4.create(0.8, 0.2, 1, 0.8)
+
+  createTextShape(
+    'Regular, only Y-rotation',
+    Vector3.create(8, 1, 1),
+    regularColor
+  )
+  createTextShape('Regular', Vector3.create(12, 1, 1), regularColor)
+  createTextShape('Without billboard', Vector3.create(4, 1, 1), regularColor)
+  createTextShape('Opposite, only Y', Vector3.create(8, 1, 8), oppositeColor)
+  createTextShape('Opposite', Vector3.create(12, 1, 8), oppositeColor)
+  createTextShape('Without billboard', Vector3.create(4, 1, 8), oppositeColor)
+}
+
+createBillboards()
+createTextShapes()
+
+const BouncingBillboard = engine.defineComponent(
+  {
+    t: Schemas.Number,
+    originalPosition: Schemas.Vector3
+  },
+  123123
+)
+
+engine.addSystem((dt: number) => {
+  for (const [entity] of engine.getEntitiesWith(Billboard, Transform)) {
+    if (BouncingBillboard.getOrNull(entity) === null) {
+      BouncingBillboard.create(entity, {
+        originalPosition: Transform.get(entity).position
+      })
+    }
+
+    const bounce = BouncingBillboard.getMutable(entity)
+    bounce.t += dt
+
+    Transform.getMutable(entity).position.y =
+      bounce.originalPosition.y + 0.05 * Math.sin(10 * bounce.t)
+  }
+})

package/dist/playground/snippets/cube-spawner.ts

@@ -0,0 +1,50 @@
+import {
+  Entity,
+  engine,
+  pointerEventsSystem,
+  Transform,
+  MeshRenderer,
+  MeshCollider,
+  InputAction
+} from '@dcl/sdk/ecs'
+import { Quaternion, Vector3 } from '@dcl/sdk/math'
+
+// Cube factory
+function createCube(x: number, y: number, z: number): Entity {
+  const meshEntity = engine.addEntity()
+  Transform.create(meshEntity, { position: { x, y, z } })
+  MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
+  MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
+
+  return meshEntity
+}
+
+// Systems
+function circularSystem(dt: number) {
+  const entitiesWithMeshRenderer = engine.getEntitiesWith(
+    MeshRenderer,
+    Transform
+  )
+  for (const [entity, _meshRenderer, _transform] of entitiesWithMeshRenderer) {
+    const mutableTransform = Transform.getMutable(entity)
+
+    mutableTransform.rotation = Quaternion.multiply(
+      mutableTransform.rotation,
+      Quaternion.fromAngleAxis(dt * 10, Vector3.Up())
+    )
+  }
+}
+
+// Init
+const initEntity = createCube(8, 1, 8)
+pointerEventsSystem.onPointerDown(
+  initEntity,
+  () => {
+    createCube(1 + Math.random() * 8, Math.random() * 8, 1 + Math.random() * 8)
+  },
+  { button: InputAction.IA_PRIMARY, hoverText: 'Press E to spawn' }
+)
+
+engine.addSystem(circularSystem)
+
+export {}

package/dist/playground/snippets/info.json

@@ -0,0 +1 @@
+[{"name":"Billboard","category":"sample","path":"billboard.ts"},{"name":"Cube Spawner","category":"sample","path":"cube-spawner.ts"},{"name":"Material","category":"component","path":"material.ts"},{"name":"Mesh","category":"component","path":"mesh.ts"},{"name":"Pointer Events","category":"sample","path":"pointer-events.ts"},{"name":"Raycast Hit","category":"component","path":"raycast-hit.ts"},{"name":"Raycast Hit many","category":"sample","path":"raycast-hit-many.ts"},{"name":"Container","category":"ui","path":"ui.tsx"}]

package/dist/playground/snippets/material.ts

@@ -0,0 +1,57 @@
+import {
+  Entity,
+  engine,
+  Transform,
+  MeshRenderer,
+  Material,
+  MaterialTransparencyMode
+} from '@dcl/sdk/ecs'
+
+function createSphere(x: number, y: number, z: number): Entity {
+  const meshEntity = engine.addEntity()
+  Transform.create(meshEntity, { position: { x, y, z } })
+  MeshRenderer.create(meshEntity, { mesh: { $case: 'sphere', sphere: {} } })
+  return meshEntity
+}
+
+Material.create(createSphere(15, 1, 15), {
+  material: {
+    $case: 'pbr',
+    pbr: {
+      albedoColor: { r: 0, g: 0, b: 1 },
+      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
+      metallic: 0.8,
+      roughness: 0.1
+    }
+  }
+})
+
+Material.create(createSphere(13, 1, 15), {
+  material: {
+    $case: 'pbr',
+    pbr: {
+      albedoColor: { r: 1, g: 1, b: 0 },
+      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
+      metallic: 0.1,
+      roughness: 0.8,
+
+      alphaTest: 0.2,
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    }
+  }
+})
+
+Material.create(createSphere(11, 1, 15), {
+  material: {
+    $case: 'pbr',
+    pbr: {
+      albedoColor: { r: 0, g: 0, b: 1 },
+      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
+      metallic: 0.1,
+      roughness: 0.1
+    }
+  }
+})
+
+// add textures
+export {}

package/dist/playground/snippets/mesh.ts

@@ -0,0 +1,70 @@
+import { engine, Transform, MeshRenderer, MeshCollider } from '@dcl/sdk/ecs'
+
+enum Mesh {
+  BOX,
+  CYLINDER,
+  SPHERE,
+  CONE
+}
+
+function createMesh(
+  x: number,
+  y: number,
+  z: number,
+  mesh: Mesh,
+  withCollider: boolean = false
+) {
+  const meshEntity = engine.addEntity()
+  Transform.create(meshEntity, { position: { x, y, z } })
+
+  switch (mesh) {
+    case Mesh.BOX:
+      MeshRenderer.create(meshEntity, {
+        mesh: { $case: 'box', box: { uvs: [] } }
+      })
+      if (withCollider)
+        MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
+      break
+    case Mesh.SPHERE:
+      MeshRenderer.create(meshEntity, { mesh: { $case: 'sphere', sphere: {} } })
+      if (withCollider)
+        MeshCollider.create(meshEntity, {
+          mesh: { $case: 'sphere', sphere: {} }
+        })
+      break
+    case Mesh.CONE:
+    case Mesh.CYLINDER:
+      MeshRenderer.create(meshEntity, {
+        mesh: {
+          $case: 'cylinder',
+          cylinder: {
+            radiusBottom: 1,
+            radiusTop: mesh === Mesh.CONE ? 0 : 1
+          }
+        }
+      })
+      if (withCollider)
+        MeshCollider.create(meshEntity, {
+          mesh: {
+            $case: 'cylinder',
+            cylinder: {
+              radiusBottom: 1,
+              radiusTop: mesh === Mesh.CONE ? 0 : 1
+            }
+          }
+        })
+      break
+  }
+  return meshEntity
+}
+
+createMesh(15, 1, 15, Mesh.BOX)
+createMesh(12, 1, 15, Mesh.CONE)
+createMesh(9, 1, 15, Mesh.SPHERE)
+createMesh(6, 1, 15, Mesh.CYLINDER)
+createMesh(15, 1, 1, Mesh.BOX, true)
+createMesh(12, 1, 1, Mesh.CONE, true)
+createMesh(9, 1, 1, Mesh.SPHERE, true)
+createMesh(6, 1, 1, Mesh.CYLINDER, true)
+
+export {}

package/dist/playground/snippets/pointer-events.ts

@@ -0,0 +1,62 @@
+import {
+  Entity,
+  engine,
+  Transform,
+  MeshRenderer,
+  MeshCollider,
+  InputAction,
+  PBPointerHoverFeedback_Entry,
+  PointerHoverFeedback,
+  PointerEventType
+} from '@dcl/sdk/ecs'
+
+// Cube factory
+function createCube(
+  x: number,
+  y: number,
+  z: number,
+  pointerEvents: PBPointerHoverFeedback_Entry[]
+): Entity {
+  const meshEntity = engine.addEntity()
+  Transform.create(meshEntity, { position: { x, y, z } })
+  MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
+  MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
+  PointerHoverFeedback.create(meshEntity, { pointerEvents })
+  return meshEntity
+}
+
+createCube(15, 1, 15, [
+  {
+    eventType: PointerEventType.PET_DOWN,
+    eventInfo: {
+      button: InputAction.IA_PRIMARY,
+      hoverText: 'PrimaryDown',
+      maxDistance: 5,
+      showFeedback: true
+    }
+  }
+])
+
+createCube(13, 1, 15, [
+  {
+    eventType: PointerEventType.PET_UP,
+    eventInfo: {
+      button: InputAction.IA_SECONDARY,
+      hoverText: 'Secondary Up',
+      maxDistance: 5,
+      showFeedback: true
+    }
+  }
+])
+
+createCube(11, 1, 15, [
+  {
+    eventType: PointerEventType.PET_HOVER_ENTER,
+    eventInfo: {
+      button: InputAction.IA_ANY,
+      hoverText: 'Infinity Hover',
+      maxDistance: 10000000,
+      showFeedback: true
+    }
+  }
+])

package/dist/playground/snippets/raycast-hit-many.ts

@@ -0,0 +1,78 @@
+import {
+  engine,
+  Transform,
+  MeshRenderer,
+  MeshCollider,
+  InputAction,
+  pointerEventsSystem,
+  Raycast,
+  RaycastQueryType,
+  RaycastResult
+} from '@dcl/sdk/ecs'
+import { Vector3 } from '@dcl/sdk/math'
+
+function createCube(
+  x: number,
+  y: number,
+  z: number,
+  scaleMultiplier: number = 1
+) {
+  const cubeEntity = engine.addEntity()
+
+  Transform.create(cubeEntity, {
+    position: { x, y, z },
+    scale: { x: scaleMultiplier, y: scaleMultiplier, z: scaleMultiplier }
+  })
+
+  MeshRenderer.create(cubeEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
+  MeshCollider.create(cubeEntity, { mesh: { $case: 'box', box: {} } })
+
+  return cubeEntity
+}
+
+// Create cube to hit
+const cubeEntity = createCube(8, 1, 8)
+const _cubeEntity2 = createCube(8, 1, 13)
+const raycastEntity = engine.addEntity()
+
+// Add OnPointerDown component to cube entity to trigger ray casting on interaction
+pointerEventsSystem.onPointerDown(
+  cubeEntity,
+  () => {
+    Raycast.createOrReplace(raycastEntity, {
+      origin: Vector3.create(8, 1, 0.1),
+      direction: Vector3.create(0, 0, 1),
+      maxDistance: 16,
+      queryType: RaycastQueryType.RQT_QUERY_ALL
+    })
+  },
+  {
+    button: InputAction.IA_POINTER,
+    hoverText: 'CAST RAY'
+  }
+)
+
+// System to detect new raycast responses and instantiate a cube where the ray hits
+let lastRaycastTimestamp = -1
+engine.addSystem(() => {
+  for (const [_entity, result] of engine.getEntitiesWith(RaycastResult)) {
+    if (result.hits?.length === 0 || result.timestamp <= lastRaycastTimestamp)
+      continue
+    lastRaycastTimestamp = result.timestamp
+
+    if (result.hits[0] && result.hits[0].position) {
+      createCube(
+        result.hits[0].position.x,
+        result.hits[0].position.y,
+        result.hits[0].position.z,
+        0.3
+      )
+    }
+
+    console.log(
+      `Hits (this should be '2' the first time): '${result.hits.length}'`
+    )
+  }
+})
+
+export {}

package/dist/playground/snippets/raycast-hit.ts

@@ -0,0 +1,75 @@
+import {
+  engine,
+  Transform,
+  MeshRenderer,
+  MeshCollider,
+  InputAction,
+  pointerEventsSystem,
+  Raycast,
+  RaycastQueryType,
+  RaycastResult
+} from '@dcl/sdk/ecs'
+import { Vector3 } from '@dcl/sdk/math'
+
+function createCube(
+  x: number,
+  y: number,
+  z: number,
+  scaleMultiplier: number = 1
+) {
+  const cubeEntity = engine.addEntity()
+
+  Transform.create(cubeEntity, {
+    position: { x, y, z },
+    scale: { x: scaleMultiplier, y: scaleMultiplier, z: scaleMultiplier }
+  })
+
+  MeshRenderer.create(cubeEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
+  MeshCollider.create(cubeEntity, { mesh: { $case: 'box', box: {} } })
+
+  return cubeEntity
+}
+
+// Create cube to hit
+const cubeEntity = createCube(8, 1, 8)
+const raycastEntity = engine.addEntity()
+
+// Add OnPointerDown component to cube entity to trigger ray casting on interaction
+pointerEventsSystem.onPointerDown(
+  cubeEntity,
+  () => {
+    Raycast.createOrReplace(raycastEntity, {
+      origin: Vector3.create(8, 1, 0.1),
+      direction: Vector3.create(0, 0, 1),
+      maxDistance: 16,
+      queryType: RaycastQueryType.RQT_HIT_FIRST
+    })
+  },
+  {
+    button: InputAction.IA_POINTER,
+    hoverText: 'CAST RAY'
+  }
+)
+
+// System to detect new raycast responses and instantiate a cube where the ray hits
+let lastRaycastTimestamp = -1
+engine.addSystem(() => {
+  for (const [_entity, result] of engine.getEntitiesWith(RaycastResult)) {
+    if (result.hits?.length === 0 || result.timestamp <= lastRaycastTimestamp)
+      continue
+    lastRaycastTimestamp = result.timestamp
+
+    if (result.hits[0] && result.hits[0].position) {
+      createCube(
+        result.hits[0].position.x,
+        result.hits[0].position.y,
+        result.hits[0].position.z,
+        0.3
+      )
+    }
+
+    console.log(`Hits (this should be '1'): '${result.hits.length}'`)
+  }
+})
+
+export {}

package/dist/playground/snippets/ui.tsx

@@ -0,0 +1,143 @@
+import {
+  Entity,
+  engine,
+  Transform,
+  MeshRenderer,
+  MeshCollider,
+  InputAction,
+  inputSystem,
+  PointerHoverFeedback,
+  YGAlign,
+  YGDisplay,
+  YGJustify,
+  PointerEventType
+} from '@dcl/sdk/ecs'
+import { Vector3, Color4, Quaternion } from '@dcl/sdk/math'
+import ReactEcs, { UiEntity, ReactEcsRenderer } from '@dcl/sdk/react-ecs'
+
+let counter = 0
+
+export const uiComponent = () => (
+  <UiEntity
+    uiTransform={{
+      width: 700,
+      height: 400,
+      margin: { top: '35px', left: '500px' }
+    }}
+    uiBackground={{ backgroundColor: Color4.create(0.5, 0.8, 0.1, 0.6) }}
+  >
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: '20%',
+        justifyContent: YGJustify.YGJ_CENTER,
+        alignItems: YGAlign.YGA_CENTER,
+        display: YGDisplay.YGD_FLEX
+      }}
+    >
+      <UiEntity
+        uiText={{ value: 'SDK 7', fontSize: 80 }}
+        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      />
+    </UiEntity>
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: '20%',
+        justifyContent: YGJustify.YGJ_CENTER,
+        alignItems: YGAlign.YGA_CENTER,
+        display: YGDisplay.YGD_FLEX
+      }}
+    >
+      <UiEntity
+        uiText={{ value: `Counter: ${counter}`, fontSize: 60 }}
+        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      />
+    </UiEntity>
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: '100px',
+        justifyContent: YGJustify.YGJ_CENTER,
+        alignItems: YGAlign.YGA_CENTER,
+        display: YGDisplay.YGD_FLEX
+      }}
+    >
+      <UiEntity
+        uiText={{ value: `Player: ${getPlayerPosition()}`, fontSize: 40 }}
+        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      />
+    </UiEntity>
+  </UiEntity>
+)
+
+function getPlayerPosition() {
+  const playerPosition = Transform.getOrNull(engine.PlayerEntity)
+  if (!playerPosition) return ''
+  const { x, y, z } = playerPosition.position
+  return `{x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }`
+}
+
+ReactEcsRenderer.setUiRenderer(uiComponent)
+
+// Cube factory
+function createCube(x: number, y: number, z: number, spawner = true): Entity {
+  const meshEntity = engine.addEntity()
+  Transform.create(meshEntity, { position: { x, y, z } })
+  MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
+  MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
+  if (spawner) {
+    PointerHoverFeedback.create(meshEntity, {
+      pointerEvents: [
+        {
+          eventType: PointerEventType.PET_DOWN,
+          eventInfo: {
+            button: InputAction.IA_PRIMARY,
+            hoverText: 'Press E to spawn',
+            maxDistance: 100,
+            showFeedback: true
+          }
+        }
+      ]
+    })
+  }
+  return meshEntity
+}
+
+// Systems
+function circularSystem(dt: number) {
+  const entitiesWithMeshRenderer = engine.getEntitiesWith(
+    MeshRenderer,
+    Transform
+  )
+  for (const [entity, _meshRenderer, _transform] of entitiesWithMeshRenderer) {
+    const mutableTransform = Transform.getMutable(entity)
+
+    mutableTransform.rotation = Quaternion.multiply(
+      mutableTransform.rotation,
+      Quaternion.fromAngleAxis(dt * 10, Vector3.Up())
+    )
+  }
+}
+
+function spawnerSystem() {
+  const clickedCubes = engine.getEntitiesWith(PointerHoverFeedback)
+  for (const [entity] of clickedCubes) {
+    if (
+      inputSystem.isTriggered(
+        InputAction.IA_PRIMARY,
+        PointerEventType.PET_DOWN,
+        entity
+      )
+    ) {
+      counter++
+    }
+  }
+}
+
+// Init
+createCube(8, 1, 8)
+engine.addSystem(circularSystem)
+engine.addSystem(spawnerSystem)
+
+export {}