add ui

src/sdk.ts

@@ -1,23 +1,27 @@
-import { IEngine, ISchema, MapComponentDefinition, MapResult } from '@dcl/sdk/ecs'
+import { createInputSystem, IEngine, IInputSystem, ISchema, MapComponentDefinition, MapResult } from '@dcl/sdk/ecs'
 import * as components from '@dcl/ecs/dist/components'
 import type players from '@dcl/sdk/players'
 import type { syncEntity as SyncEntityType } from '@dcl/sdk/network'
 import { IConfig } from '.'
 
-const cache: {
+type ICache = {
   engine: IEngine
   syncEntity: typeof SyncEntityType
   players: typeof players
   config: IConfig
-} = {} as typeof cache
+  inputSystem: IInputSystem
+}
+
+const cache: ICache = {} as ICache
 
 /**
  * @internal
  */
-export function setSDK(value: typeof cache) {
+export function setSDK(value: Omit<ICache, 'inputSystem'>) {
   for (const key in value) {
     ;(cache as any)[key] = (value as any)[key]
   }
+  cache.inputSystem = createInputSystem(value.engine)
 }
 
 /**
@@ -28,7 +32,14 @@ export function getSDK() {
   return {
     ...cache,
     Transform: components.Transform(cache.engine),
-    GltfContainer: components.GltfContainer(cache.engine)
+    GltfContainer: components.GltfContainer(cache.engine),
+    AudioSource: components.AudioSource(cache.engine),
+    Material: components.Material(cache.engine),
+    MeshRenderer: components.MeshRenderer(cache.engine),
+    VisibilityComponent: components.VisibilityComponent(cache.engine),
+    TextShape: components.TextShape(cache.engine),
+    PointerEvents: components.PointerEvents(cache.engine),
+    Billboard: components.Billboard(cache.engine)
     // TODO: add all the components that we use here to reuse them
   }
 }

src/test/index.ts

@@ -1,4 +1,3 @@
-import { GltfContainer as _GltfContainer, Transform as _Transform } from '@dcl/sdk/ecs'
 import { Quaternion, Vector3 } from '@dcl/sdk/math'
 
 import { getSDK } from '../sdk'

src/ui/boxIcon.ts

@@ -0,0 +1,104 @@
+import { Entity, MaterialTransparencyMode, TransformTypeWithOptionals } from '@dcl/sdk/ecs'
+import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math'
+import { IconData, ButtonShapeData, uiAtlas } from './resources'
+import { getSDK } from '../sdk'
+
+export class BoxIcon {
+  box: Entity
+  icon: Entity
+  enabled: boolean
+
+  constructor(
+    transform: TransformTypeWithOptionals,
+    buttonShapeData: ButtonShapeData,
+    icon: IconData,
+    enabledByDefault?: boolean
+  ) {
+    this.enabled = true
+    if (enabledByDefault) {
+      this.enabled = enabledByDefault
+    }
+
+    const { engine, Transform, GltfContainer, MeshRenderer, Material, VisibilityComponent } = getSDK()
+    //BUTTON
+    this.box = engine.addEntity()
+    Transform.createOrReplace(this.box, transform)
+    GltfContainer.create(this.box, { src: buttonShapeData.shape })
+    //ICON
+    this.icon = engine.addEntity()
+    Transform.createOrReplace(this.icon, {
+      rotation: Quaternion.fromEulerDegrees(90, 0, 0),
+      position: Vector3.create(0, 0.076, 0),
+      scale:
+        icon.blockWidth !== 1 ? Vector3.create(0.35, 0.35 / icon.blockWidth, 0.12) : Vector3.create(0.15, 0.15, 0.15),
+      parent: this.box
+    })
+    MeshRenderer.setPlane(this.icon, icon.uvs)
+    Material.setPbrMaterial(this.icon, {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    })
+
+    VisibilityComponent.createOrReplace(this.box, { visible: true })
+    VisibilityComponent.createOrReplace(this.icon, { visible: true })
+  }
+
+  changeIcon(iconData: IconData) {
+    const { Transform, MeshRenderer, Material } = getSDK()
+    MeshRenderer.setPlane(this.icon, iconData.uvs)
+    Material.setPbrMaterial(this.icon, {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    })
+    Transform.createOrReplace(this.icon, {
+      rotation: Quaternion.fromEulerDegrees(90, 0, 0),
+      position: Vector3.create(0, 0.076, 0),
+      scale:
+        iconData.blockWidth !== 1
+          ? Vector3.create(0.35, 0.35 / iconData.blockWidth, 0.12)
+          : Vector3.create(0.15, 0.15, 0.15),
+      parent: this.box
+    })
+  }
+  changeShape(shapeData: ButtonShapeData) {
+    const { GltfContainer } = getSDK()
+    GltfContainer.createOrReplace(this.box, { src: shapeData.shape })
+  }
+
+  playSound(sound: string) {
+    const { AudioSource } = getSDK()
+    AudioSource.createOrReplace(this.box, {
+      audioClipUrl: sound,
+      loop: false,
+      playing: true,
+      volume: 2
+    })
+  }
+
+  enable() {
+    this.enabled = true
+  }
+
+  disable() {
+    this.enabled = false
+  }
+
+  show() {
+    const { VisibilityComponent } = getSDK()
+    VisibilityComponent.getMutable(this.box).visible = true
+    VisibilityComponent.getMutable(this.icon).visible = true
+  }
+
+  hide() {
+    const { VisibilityComponent } = getSDK()
+
+    VisibilityComponent.getMutable(this.box).visible = false
+    VisibilityComponent.getMutable(this.icon).visible = false
+  }
+}

src/ui/button.ts

@@ -0,0 +1,228 @@
+import {
+  Entity,
+  InputAction,
+  MaterialTransparencyMode,
+  PBMaterial_PbrMaterial,
+  PointerEventType,
+  TransformTypeWithOptionals
+} from '@dcl/sdk/ecs'
+import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math'
+import { IconData, ButtonShapeData, uiAtlas, uiAssets } from './resources'
+import * as utils from '@dcl-sdk/utils'
+import { getSDK } from '../sdk'
+
+export class MenuButton {
+  staticFrame: Entity
+  button: Entity
+  icon: Entity
+  glowPlane: Entity
+  enabled: boolean
+  buttonShapeEnabled: ButtonShapeData
+  buttonShapeDisabled: ButtonShapeData
+  iconGlowMat: PBMaterial_PbrMaterial
+  iconDisabledMat: PBMaterial_PbrMaterial
+
+  constructor(
+    transform: TransformTypeWithOptionals,
+    buttonShapeData: ButtonShapeData,
+    icon: IconData,
+    _hoverText: string,
+    callback: () => void,
+    enabledByDefault?: boolean
+  ) {
+    const {
+      Material,
+      MeshRenderer,
+      engine,
+      Transform,
+      GltfContainer,
+      PointerEvents,
+      inputSystem,
+      VisibilityComponent
+    } = getSDK()
+
+    this.enabled = true
+    if (enabledByDefault) {
+      this.enabled = enabledByDefault
+    }
+
+    this.buttonShapeEnabled = buttonShapeData
+    this.buttonShapeDisabled = uiAssets.shapes.RECT_BLACK
+    if (!buttonShapeData.isRect) {
+      this.buttonShapeDisabled = uiAssets.shapes.SQUARE_BLACK
+    }
+    this.iconGlowMat = {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      emissiveIntensity: 2,
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    }
+
+    this.iconDisabledMat = {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.Gray(),
+      //emissiveColor: Color4.Gray(),
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    }
+
+    //FRAME
+    this.staticFrame = engine.addEntity()
+    Transform.createOrReplace(this.staticFrame, transform)
+    GltfContainer.create(this.staticFrame, { src: buttonShapeData.base })
+
+    //BUTTON
+    this.button = engine.addEntity()
+    Transform.createOrReplace(this.button, {
+      parent: this.staticFrame
+    })
+    GltfContainer.create(this.button, { src: buttonShapeData.shape })
+
+    PointerEvents.create(this.button, {
+      pointerEvents: [
+        {
+          eventType: PointerEventType.PET_DOWN,
+          eventInfo: {
+            button: InputAction.IA_POINTER,
+            showFeedback: true,
+            hoverText: _hoverText,
+            maxDistance: 18
+          }
+        }
+      ]
+    })
+
+    engine.addSystem(() => {
+      if (inputSystem.isTriggered(InputAction.IA_POINTER, PointerEventType.PET_DOWN, this.button)) {
+        if (this.enabled) {
+          callback()
+          this.playSound('mini-game-models/sounds/button_click.mp3')
+          //flash the emissive of the icon
+          Material.setPbrMaterial(this.icon, {
+            texture: Material.Texture.Common({ src: uiAtlas }),
+            albedoColor: Color4.White(),
+            emissiveColor: Color4.White(),
+            emissiveIntensity: 4,
+            alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+            transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+          })
+
+          utils.tweens.stopTranslation(this.button)
+          VisibilityComponent.getMutable(this.glowPlane).visible = true
+          //tween button inward
+          utils.tweens.startTranslation(
+            this.button,
+            Vector3.create(0, 0, 0),
+            Vector3.create(0, -0.03, 0),
+            0.05,
+            utils.InterpolationType.EASEOUTSINE,
+            () => {
+              //when finished tween button outward
+
+              utils.tweens.startTranslation(
+                this.button,
+                Vector3.create(0, -0.03, 0),
+                Vector3.create(0, 0, 0),
+                0.3,
+                utils.InterpolationType.EASEOUTSINE,
+                () => {
+                  VisibilityComponent.getMutable(this.glowPlane).visible = false
+                  //reset the emissive of the icon
+                  if (this.enabled) {
+                    Material.setPbrMaterial(this.icon, this.iconGlowMat)
+                  } else {
+                    Material.setPbrMaterial(this.icon, this.iconDisabledMat)
+                  }
+                }
+              )
+            }
+          )
+        } else {
+          this.playSound('mini-game-models/sounds/wrong.mp3')
+        }
+      }
+    })
+
+    //ICON
+    this.icon = engine.addEntity()
+    Transform.createOrReplace(this.icon, {
+      rotation: Quaternion.fromEulerDegrees(90, 0, 0),
+      position: Vector3.create(0, 0.076, 0),
+      scale:
+        icon.blockWidth !== 1 ? Vector3.create(0.35, 0.35 / icon.blockWidth, 0.12) : Vector3.create(0.15, 0.15, 0.15),
+      parent: this.button
+    })
+    MeshRenderer.setPlane(this.icon, icon.uvs)
+    Material.setPbrMaterial(this.icon, {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    })
+
+    //GLOW BACKGROUND
+    this.glowPlane = engine.addEntity()
+    Transform.createOrReplace(this.glowPlane, {
+      rotation: Quaternion.fromEulerDegrees(90, 0, 0),
+      position: Vector3.create(0, 0.03, 0),
+      scale: buttonShapeData.isRect ? Vector3.create(0.45, 0.2, 0.22) : Vector3.create(0.24, 0.24, 0.24),
+      parent: this.staticFrame
+    })
+    MeshRenderer.setPlane(this.glowPlane, icon.uvs)
+    Material.setPbrMaterial(this.glowPlane, {
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      emissiveIntensity: 4
+    })
+    VisibilityComponent.create(this.glowPlane, { visible: false })
+  }
+
+  changeIcon(iconData: IconData) {
+    const { MeshRenderer, Material, Transform } = getSDK()
+    MeshRenderer.setPlane(this.icon, iconData.uvs)
+    Material.setPbrMaterial(this.icon, {
+      texture: Material.Texture.Common({ src: uiAtlas }),
+      albedoColor: Color4.White(),
+      emissiveColor: Color4.White(),
+      alphaTexture: Material.Texture.Common({ src: uiAtlas }),
+      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
+    })
+    Transform.createOrReplace(this.icon, {
+      rotation: Quaternion.fromEulerDegrees(90, 0, 0),
+      position: Vector3.create(0, 0.076, 0),
+      scale:
+        iconData.blockWidth !== 1
+          ? Vector3.create(0.35, 0.35 / iconData.blockWidth, 0.12)
+          : Vector3.create(0.15, 0.15, 0.15),
+      parent: this.button
+    })
+  }
+
+  playSound(sound: string) {
+    const { AudioSource } = getSDK()
+    AudioSource.createOrReplace(this.button, {
+      audioClipUrl: sound,
+      loop: false,
+      playing: true,
+      volume: 2
+    })
+  }
+
+  enable() {
+    const { GltfContainer, Material } = getSDK()
+    this.enabled = true
+    GltfContainer.createOrReplace(this.button, { src: this.buttonShapeEnabled.shape })
+    Material.setPbrMaterial(this.icon, this.iconGlowMat)
+  }
+
+  disable() {
+    const { GltfContainer, Material } = getSDK()
+
+    this.enabled = false
+    GltfContainer.createOrReplace(this.button, { src: this.buttonShapeDisabled.shape })
+    Material.setPbrMaterial(this.icon, this.iconDisabledMat)
+  }
+}