How to use decentraland-ecs - 10 common examples

let shapeComponent = sharkEntity.getComponent(GLTFShape)
    shapeComponent.visible = !shapeComponent.visible
  })
)
engine.addEntity(sharkVisibilityTrigger)

// PUSHABLE COLLIDING NPC
let npcEntity = configureShapeEntityPositions([new Vector3(16, 0, 0)], 0.7, new GLTFShape('models/Avatar_Idle.glb'))

let npcLeftMovementTrigger = new Entity()
npcLeftMovementTrigger.addComponentOrReplace(new BoxShape());
npcLeftMovementTrigger.setParent(npcEntity)
npcLeftMovementTrigger.addComponent(
  new Transform({
    position: new Vector3(-0.25, 3, 0),
    scale: new Vector3(0.3, 0.5, 2)
  })
)
npcLeftMovementTrigger.addComponent(
  new OnClick(e => {
    npcEntity.getComponent(Transform).position.x += 1
  })
)
engine.addEntity(npcLeftMovementTrigger)

let npcRightMovementTrigger = new Entity()
npcRightMovementTrigger.addComponentOrReplace(new BoxShape());
npcRightMovementTrigger.setParent(npcEntity)
npcRightMovementTrigger.addComponent(
  new Transform({
    position: new Vector3(0.25, 3, 0),
    scale: new Vector3(0.3, 0.5, 2)

shark2.addComponent(new OnPointerUp(
  e => {}, {
    button: ActionButton.POINTER,
      hoverText: "OnPointerUp!", distance: 100 }))
engine.addEntity(shark2)

// Add 3D model for scenery
const seaBed = new Entity()
seaBed.addComponent(new GLTFShape('models/Underwater.gltf'))
seaBed.addComponent(
  new Transform({
    position: new Vector3(10, 0, 8),
    scale: new Vector3(0.5, 0.5, 0.5)
  })
)
engine.addEntity(seaBed)

const SIZE = 4

// HIDE_AVATARS
const hideAvatarsEntity = new Entity()
hideAvatarsEntity.addComponent(new AvatarModifierArea({ area: { box: new Vector3(SIZE, SIZE, SIZE) }, modifiers: [AvatarModifiers.HIDE_AVATARS] }))
hideAvatarsEntity.addComponent(new Transform({ position: new Vector3(5, SIZE / 2, 8) }))
hideAvatarsEntity.addComponent(new TextShape('Invisible'))
hideAvatarsEntity.addComponent(new Billboard(true, true, true))
engine.addEntity(hideAvatarsEntity)

const box1 = new Entity()
const shape1 = new BoxShape()
shape1.withCollisions = false
box1.addComponent(shape1)
box1.addComponent(new Transform({ position: new Vector3(5, 0.125, 8), scale: new Vector3(SIZE, 0.25, SIZE) }))
engine.addEntity(box1)

// DISABLE_PASSPORTS
const disablePassportsEntity = new Entity()
disablePassportsEntity.addComponent(new AvatarModifierArea({ area: { box: new Vector3(SIZE, SIZE, SIZE) }, modifiers: [AvatarModifiers.DISABLE_PASSPORTS] }))
disablePassportsEntity.addComponent(new Transform({ position: new Vector3(11, SIZE / 2, 8) }))
disablePassportsEntity.addComponent(new TextShape('No Passports'))
disablePassportsEntity.addComponent(new Billboard(true, true, true))
engine.addEntity(disablePassportsEntity)

const box2 = new Entity()
const shape2 = new BoxShape()
shape2.withCollisions = false
box2.addComponent(shape2)
box2.addComponent(new Transform({ position: new Vector3(11, 0.125, 8), scale: new Vector3(SIZE, 0.25, SIZE) }))
engine.addEntity(box2)

import { Entity, engine, Vector3, Transform, BoxShape, Material, Color3, Attachable } from 'decentraland-ecs/src'

// This entity will rotate with the camera, when in first person mode
const followTheCamera = new Entity()
followTheCamera.addComponent(new BoxShape())
followTheCamera.addComponent(new Transform({
  position: new Vector3(1, 0, 1),
  scale: new Vector3(0.5, 0.5, 2)
}))
engine.addEntity(followTheCamera)
followTheCamera.setParent(Attachable.PLAYER)

// This entity will follow the avatar, and remain unaffected by the camera rotation
const followAvatar = new Entity()
followAvatar.addComponent(new BoxShape())
followAvatar.addComponent(new Transform({
  position: new Vector3(0, 0, 0.5),
  scale: new Vector3(0.5, 0.5, 0.5)
}))
const material = new Material()
material.albedoColor = Color3.FromHexString('#FF00FF')
material.metallic = 0.2
material.roughness = 1.0
followAvatar.addComponent(material)
engine.addEntity(followAvatar)
followAvatar.setParent(Attachable.AVATAR_POSITION)

configureShapeEntityPositions([new Vector3(-1, 1, 8), new Vector3(17, 1, 8)], 0.8, new BoxShape())
configureShapeEntityPositions([new Vector3(8, 1, 16),
          new Vector3(8, 1, 0),
          new Vector3(8, 1, -16),
          new Vector3(8, 1, -24),
          new Vector3(24, 1, -24),
          new Vector3(40, 1, -24),
          new Vector3(40, 1, -40),
          new Vector3(24, 1, -40),
          new Vector3(24, 1, -24)
        ], 0.7, new BoxShape())

// PUSHABLE ANIMATED SHARK
let sharkEntity = configureShapeEntityPositions([new Vector3(31.5, 1.2, -16)], 0.7, new GLTFShape('models/shark.gltf'))
let animator = new Animator()
let clipSwim = new AnimationState('swim')
animator.addClip(clipSwim)
sharkEntity.addComponent(animator)
clipSwim.play()

let sharkLeftMovementTrigger = new Entity()
sharkLeftMovementTrigger.addComponentOrReplace(new BoxShape());
sharkLeftMovementTrigger.setParent(sharkEntity)
sharkLeftMovementTrigger.addComponent(
  new Transform({
    position: new Vector3(-0.25, 2, 0),
    scale: new Vector3(0.3, 1, 3)
  })
)
sharkLeftMovementTrigger.addComponent(
  new OnClick(e => {
    sharkEntity.getComponent(Transform).position.x += 1

// Add Shark
let shark = new Entity()
shark.addComponent(
  new Transform({
    position: new Vector3(10, 3, 10)
  })
)
shark.addComponent(new GLTFShape('models/shark.gltf'))

// Add animations
/*
NOTE: when you try to get an animation clip that hasn't been created
from a GLTFShape component, the clip is created automatically.
*/
const animator = new Animator()
let clipSwim = new AnimationState('swim')
let clipBite = new AnimationState('bite')
animator.addClip(clipBite)
animator.addClip(clipSwim)

shark.addComponent(animator)

// Activate swim animation
clipSwim.play()

// Add click interaction
let onClickComponent = new OnPointerDown(
  e => {
    clipBite.playing = !clipBite.playing
  }, {
    button: ActionButton.POINTER,
     hoverText: "OnPointerDown!", distance: 100 })

npcVisibilityTrigger.addComponent(
  new Transform({
    position: new Vector3(-0.25, 4, 0),
    scale: new Vector3(0.3, 0.3, 0.3)
  })
)
npcVisibilityTrigger.addComponent(
  new OnClick(e => {
    let shapeComponent = npcEntity.getComponent(GLTFShape)
    shapeComponent.visible = !shapeComponent.visible
  })
)
engine.addEntity(npcVisibilityTrigger)

// Dynamically scaled platform
@Component('ObjectScaling')
export class ObjectScaling {
  speed: number = 1
  initialScale: number = 1
  targetScale: number = 2
  lerpTime: number = 0
  scalingUp: boolean = true

  constructor(initialScale: number, targetScale: number, speed: number) {
    this.speed = speed
    this.initialScale = initialScale
    this.targetScale = targetScale
  }
}
let scalingCubes = engine.getComponentGroup(ObjectScaling)

export class ObjectScalingSystem implements ISystem {

let scalingSystem = new ObjectScalingSystem()
engine.addSystem(scalingSystem)

let scalingCubeEntity = new Entity()
engine.addEntity(scalingCubeEntity)
scalingCubeEntity.addComponentOrReplace(new BoxShape())
scalingCubeEntity.addComponentOrReplace(
  new Transform({
    position: new Vector3(8, 1, 15),
    scale: new Vector3(2, 2, 2)
  })
)
scalingCubeEntity.addComponentOrReplace(new ObjectScaling(2, 4, 1))

// Rotating platform
@Component('ObjectRotation')
export class ObjectRotation {
  speed: number = 1
  rotationAxis: Vector3

  constructor(speed: number, axis: Vector3) {
    this.speed = speed
    this.rotationAxis = axis
  }
}
let rotatingCubes = engine.getComponentGroup(ObjectRotation)

export class ObjectRotationSystem implements ISystem {
  update(dt: number) {
    for (let cubeEntity of rotatingCubes.entities) {
      let rotationComponent = cubeEntity.getComponent(ObjectRotation)

if (scriptGroup.hasEntity(entity)) {
            // ...remove the placeholder
            entity.removeComponent(GLTFShape)
            // ...create the host entity
            const transform = entity.getComponent(Transform)
            const hostTransform = new Transform()
            hostTransform.position.copyFrom(transform.position)
            hostTransform.rotation.copyFrom(transform.rotation)
            hostTransform.scale.copyFrom(transform.scale)
            const name = (entity as any).name // TODO fix this on the kernel's side
            const placeholder = Object.values(engine.entities).find(entity => (entity as Entity).name === name)
            if (placeholder) {
              engine.removeEntity(placeholder)
            }
            const host = new Entity(name)
            engine.addEntity(host)
            host.addComponent(hostTransform)
            // ...and execute the script on the host entity
            const { assetId, values } = entity.getComponent(Script)
            const script = scriptInstances.get(assetId)!
            const channel = createChannel('channel-id', host as any, new MockMessageBus())
            script.spawn(host, values, channel)
          }
        }
      } else {
        for (const entityId in engine.entities) {
          const entity = engine.entities[entityId]
          const staticEntities = engine.getComponentGroup(StaticEntity)
          if (!staticEntities.hasEntity(entity)) {
            entity.addComponentOrReplace(gizmo)
          }
        }

import { NFTShape, Entity, engine, Transform, Vector3, Color3 } from 'decentraland-ecs/src'

const entity = new Entity()
const shapeComponent = new NFTShape('ethereum://0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536')
entity.addComponent(shapeComponent)
entity.addComponent(
  new Transform({
    position: new Vector3(3, 1.5, 4)
  })
)
engine.addEntity(entity)

const entity2 = new Entity()
const shapeComponent2 = new NFTShape('ethereum://0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536', Color3.Green())
entity2.addComponent(shapeComponent2)
entity2.addComponent(
  new Transform({
    position: new Vector3(5, 1.5, 4)
  })
)
engine.addEntity(entity2)