(REVIEW ONLY) Jeremy bubble exercises

src/components/BubbleEmitterComponent.ts

@@ -13,6 +13,7 @@ import { NO_PROXY, getState } from "@etherealengine/hyperflux"
 import { useExecute } from "@etherealengine/engine/src/ecs/functions/SystemFunctions"
 import { SimulationSystemGroup } from "@etherealengine/engine/src/ecs/functions/EngineFunctions"
 import { EngineState } from "@etherealengine/engine/src/ecs/classes/EngineState"
+import { LocalTransformComponent } from "@etherealengine/engine/src/transform/components/TransformComponent"
 
 export const BubbleEmitterComponent = defineComponent({
   //name: The human-readable label for the component. This will be displayed in the editor and debugging tools.
@@ -92,21 +93,31 @@ export const BubbleEmitterComponent = defineComponent({
       // Spawning a single bubble as an example
       // [Exercise 1]: Using this system. Spawn multiple bubbles with varying x,z Localtransform positons
       // [Exercise 3]: Remove them if they are too old(bubble.age > N seconds)[This can be done in a couple ways(reactively and within this sytem synchronosly)]
-      if(emitterComponent.bubbleEntities.value!.length < 1) { //For example ensuring there is only one bubble being added
+      const bubbles: Array<Entity> = []
+      const numExistingBubbles = emitterComponent.bubbleEntities.value!.length
+      const numBubbles = 10
+      for (let i = numExistingBubbles; i < numBubbles; i++) {
         const bubbleEntity = createEntity()
         setComponent(bubbleEntity, BubbleComponent)
+        setComponent(bubbleEntity, LocalTransformComponent, {
+          position: new Vector3((Math.random() - 0.5) * 100, 0, (Math.random() - 0.5) * 100)
+        })
         setComponent(bubbleEntity, EntityTreeComponent, {
           parentEntity: entity,
           uuid: MathUtils.generateUUID() as EntityUUID
         })
-        emitterComponent.bubbleEntities.merge([bubbleEntity])
+        bubbles.push(bubbleEntity)
       }
+      emitterComponent.bubbleEntities.merge(bubbles)
 
-      const bubble = getComponent(emitterComponent.bubbleEntities.value![0], BubbleComponent)
-
-      if(bubble.age >= 5) { // Delete one bubble after its age is greater than 5 seconds
-        removeBubble(entity,emitterComponent.bubbleEntities.value![0])
+      const bubbleEntities = emitterComponent.bubbleEntities.value!.slice()
+      for (const bubbleEntity of bubbleEntities) {
+        const bubble = getComponent(bubbleEntity, BubbleComponent)
+        if (bubble.age >= 5) {
+          removeBubble(entity, bubbleEntity)
+        }
       }
+
     }, { after: SimulationSystemGroup })
 
     return null

src/systems/BubbleSystem.ts

@@ -1,13 +1,18 @@
 import { defineQuery, getComponent, getMutableComponent } from "@etherealengine/engine/src/ecs/functions/ComponentFunctions";
 import { defineSystem } from "@etherealengine/engine/src/ecs/functions/SystemFunctions";
 import { BubbleEmitterComponent, removeBubble } from "../components/BubbleEmitterComponent";
-import { LocalTransformComponent } from "@etherealengine/engine/src/transform/components/TransformComponent";
+import { BubbleComponent } from "../components/BubbleComponent";
+import { LocalTransformComponent, TransformComponent } from "@etherealengine/engine/src/transform/components/TransformComponent";
 import { NO_PROXY, getState } from "@etherealengine/hyperflux";
 import { EngineState } from "@etherealengine/engine/src/ecs/classes/EngineState";
 import { Vector3 } from "three";
 import { SimulationSystemGroup } from "@etherealengine/engine/src/ecs/functions/EngineFunctions";
+import { AvatarComponent } from "@etherealengine/engine/src/avatar/components/AvatarComponent";
+import { EntityTreeComponent } from "@etherealengine/engine/src/ecs/functions/EntityTree";
 
 const bubbleEmitterQuery = defineQuery([BubbleEmitterComponent])
+const bubbleQuery = defineQuery([BubbleComponent])
+const avatarQuery = defineQuery([AvatarComponent, TransformComponent])
 const velocity = new Vector3(0,0,0)
 
 export const BubbleSystem = defineSystem({
@@ -18,14 +23,26 @@ export const BubbleSystem = defineSystem({
       // [Exercise 2]: Using the below basic setup. Move every bubble not just the first one
       const tempvector = new Vector3(0,0,0)
       const emitterComponent = getComponent(entity, BubbleEmitterComponent)
-      const localTransform = getComponent(emitterComponent.bubbleEntities![0], LocalTransformComponent)
-      if(!localTransform) continue;
-      velocity.copy(emitterComponent.direction).multiplyScalar(emitterComponent.speed)
-      tempvector.addVectors(localTransform.position, velocity)
-      localTransform.position.copy(tempvector)
-
+      for (const bubbleEntity of emitterComponent.bubbleEntities!) {
+        const localTransform = getComponent(bubbleEntity, LocalTransformComponent)
+        if(!localTransform) continue;
+        velocity.copy(emitterComponent.direction).multiplyScalar(emitterComponent.speed)
+        tempvector.addVectors(localTransform.position, velocity)
+        localTransform.position.copy(tempvector)
+      }
       // [Exercise 4]: Utilizing an AvatarComponent Query, TransformComponent positions of bubble entities, and Vector3.distanceTo
       // Detect if the player is near a bubble and remove it
     }
+
+    for (const bubbleEntity of bubbleQuery()) {
+      const bubbleWorldPosition = getComponent(bubbleEntity, TransformComponent).position
+      for (const avatarEntity of avatarQuery()) {
+        if (getComponent(avatarEntity, TransformComponent).position.distanceTo(bubbleWorldPosition) < 1) {
+          const emitter = getComponent(bubbleEntity, EntityTreeComponent).parentEntity!
+          removeBubble(emitter, bubbleEntity)
+          break
+        }
+      }
+    }
   }
 })