Frozen Coin Hunt Guía de Aventura

Esta experiencia es un juego WebAR creado con Niantic Studio Beta, octubre de 2024.

El personaje principal es el famoso Capitán Doty. Enfréntate a tres capítulos diferentes:

The Tiny Mushroom
- Recoge 20 monedas de oro mientras evitas al champiñón diminuto que te persigue.
The Angry Mushroom
- Corecoge 20 monedas de oro mientras evitas al champiñón enfadado que intenta atraparte. Las monedas están todas escondidas, muévete con el copo de nieve mágico flotando cerca para revelar las monedas.
El Rey Champiñón
-En tsu desafío final, inicia una lucha de bolas de nieve con el Rey Champiñón para ganar. Recoge las bolas de nieve delsuelo de y lánzalas al rey para derrotarlo.

Tienes tres corazones que representan tus vidas. Si se pierden los tres, se acaba el juego.

Un temporizador permite al jugador controlar el tiempo que tarda en completar los tres retos, y la puntuación final se muestra una vez ganada la partida.

Hay tres niveles de dificultad, que cambian la velocidad de las setas que te persiguen.

Usa el dedo en la pantalla para mover a Doty y recoger monedas o bolas de nieve.

Escena 3D

Entidades Base: Incluye la cámara AR en Perspectiva y las Luces de Ambiente/Direccionales.
Entidades UI: Comprende todos los elementos de la interfaz de usuario que se muestran en la pantalla, proporcionando información y retroalimentación al jugador. Se muestra un tutorial entre cada desafío.

Activos

Incluye todos los modelos 3D, archivos de audio e imágenes utilizados en el juego.

Scripts

La carpeta de scripts está dividida en tres carpetas anidadas:
- Componentes:

Contiene la lógica principal del juego. Incluye las pantallas de interfaz de usuario, el movimiento del jugador, la lógica de generación de monedas en el suelo congelado, los comportamientos de los champiñones y la lógica de seguimiento, así como el gestor del juego, que gestiona los eventos durante la sesión de juego.

- Ayudante:

Incluye varias funciones de utilidad utilizadas a través de los componentes, ayudando a simplificar y organizar la lógica del juego.

- Clases:

Contiene el material de sombreado utilizado para gestionar el sistema de partículas, que representa la nieve que cae sobre el campo de juego.

Un enfoque detallado de los scripts principales del juego, que gestionan toda la lógica central de esta experiencia.

Cada componente puede tener diferentes escuchas clave para diferentes propósitos:
- game-start: Se activa cuando el juego comienza o se reanuda tras una pausa.
- reset: Maneja el estado de reinicio del componente al pasar al siguiente desafío.
- pause: Detiene animaciones y comprobaciones, como la proximidad entre la seta y el jugador o entre una moneda y el jugador.
- hide: Se utiliza para los elementos de interfaz de usuario, ocultando la interfaz cuando el juego está en pausa o cuando la interfaz de usuario no es necesario.

Los oyentes se envían desde el componente game-manager.ts

         
   ecs.GltfModel.set(world, eid, {url: coinAsset})


   world.events.addListener(eid, ecs.events.GLTF_MODEL_LOADED, (result) => {
     // @ts-ignore
     const {data: {model}} = result


     storeCoinMaterial(model, eid)
     applyRandomPositionToCoin(world, eid)
   })

         
const spreadCoins = (world, component) => {
 const {eid, schema: {totalCoins}} = component


 for (let i = 0; i < totalCoins; i++) {
   const coinEntity = world.createEntity()
   // @ts-ignore
   const floatingSpeed = THREE.MathUtils.randFloat(0.0005, 0.0015)
   // @ts-ignore
   const floatingAmplitude = THREE.MathUtils.randFloat(0.5, 2)
   Coin.set(world, coinEntity, {floatingSpeed, floatingAmplitude})
   world.setParent(coinEntity, eid)  // Set coin created as a children of Coins group
   coins.push(coinEntity)
 }
}

         
const checkPlayerProximity = (world, component) => {
 coins.forEach((coin) => {
   ......
   const distanceToPlayer = vecCoinPosition.distanceTo(vecPlayerPosition)
   if (!collecting && distanceToPlayer <= collectionDistance) {
     collecting = true
     world.events.dispatch(eid, 'coin-collect')  // Updated UI score
     coins = coins.filter(c => c !== coin)  // Clear collected coin from the coins array
     disableCoin(world, coin)
     collecting = false
   }
 })
}

         
const handleGameStart = () => {
     HoldDrag.set(world, eid, {factor: 12, lag: 0.25, distanceThreshold: 0.05, cone, help, timer})
   }


   const handleReset = () => {
     HoldDrag.remove(world, eid)


     const position = ecs.Position.cursor(world, eid)
     position.x = 0
     position.y = 0
     position.z = 0


     const quaternion = ecs.Quaternion.cursor(world, eid)
     quaternion.x = 0
     quaternion.y = 0
     quaternion.z = 0
     quaternion.w = 0
   }


   world.events.addListener(eid, 'reset', handleReset)
   world.events.addListener(eid, 'game-start', handleGameStart)

         
world.events.addListener(eid, ecs.input.SCREEN_TOUCH_START, handleStart)
world.events.addListener(eid, ecs.input.SCREEN_TOUCH_MOVE, handleMove)
world.events.addListener(eid, ecs.input.SCREEN_TOUCH_END, handleEnd)

         
   // Collision event listener
   world.events.addListener(eid, ecs.physics.COLLISION_START_EVENT, (event) => {
     const {data: {other}} = event
     // Check if there is a collision with the target "Tree"
     if (target && target.toString() === other.toString()) {
       const {x, y, z} = ecs.Scale.get(world, target)
       const toX = x - 0.2
       const toY = y - 0.2
       const toZ = z - 0.2
       ecs.ScaleAnimation.set(
         world,
         target, {
           fromX: x, fromY: y, fromZ: z, toX, toY, toZ, duration: 100, loop: false,
         }
       )
       if (toX <= 1) { console.log('GAME WIN!')
         ecs.GltfModel.set(world, target, {
           animationClip: 'Death',
           loop: false,
           paused: false,
         })
         world.events.dispatch(eid, 'game-win')
       }
     }
   })

La función spawnProjectile crea y lanza una nueva entidad proyectil en la escena. Establece la posición y orientación iniciales del proyectil en función de la posición y rotación mundiales del generador. La función calcula la trayectoria del proyectil, incluida su dirección hacia delante y una componente vertical para un movimiento parabólico. También configura las propiedades físicas del proyectil, como la masa, el radio y el rebote, antes de fijar su velocidad y dirección para lanzarlo.

         
world.events.addListener(eid, ecs.events.GLTF_MODEL_LOADED, () => {
     applyRandomPosition(world, eid)
     const snowballScale = ecs.Scale.cursor(world, eid)
     snowballScale.x = scale
     snowballScale.y = scale
     snowballScale.z = scale
   })

UI - Screens

Cada componente UI dentro de esta carpeta representa una pantalla o simplemente un elemento UI como iconos o un solo botón mostrado a lo largo de la sesión de juego. Todos ellos tienen una función setupCss que añade su CSS específico dentro de la etiqueta <style> del head <>.

game-over-screen.ts

Muestra el logo del juego
Pausa todo el audio del juego
Finalmente reproduce el audio del juego

landing-screen.ts

Esta es la pantalla que se muestra al principio al ejecutar el juego
Es donde el usuario puede seleccionar el nivel de dificultad que desea experimentar. Se crea un elemento desplegable con un oyente que cambiará el nivel de dificultad al seleccionar una opción:

         
// DIFFICULTY DROPDOWN
......
const dropdown = document.createElement('select')
......
const options = ['[ Game Difficulty ]', 'easy', 'normal', 'hard']
options.forEach((option) => {
  const optionElement = document.createElement('option')
  optionElement.value = option
  optionElement.textContent = option
  ......
  dropdown.appendChild(optionElement)
})


// Add an event listener to get the selected value when it changes
dropdown.addEventListener('change', (event) => {
 // @ts-ignore
 const {target: {value}} = event
 // Update mode
 updateMode(value)
 // Handle option title selection assigned normal as default selection in that case
 if (value === options[0]) defaultSelectedValue.selected = true
})

         
// ENTER BUTTON
const button = document.createElement('button')
button.id = 'enter-btn'
button.innerText = 'ENTER'
button.addEventListener('click', () => {
  ......
  world.events.dispatch(tutorial, 'show-game-tutorial', {speed, mode})
})

         
// Handle on press start game
   button.addEventListener('click', () => {
     const dataAttr = dataAttribute.cursor(eid)
     world.events.dispatch(hearts, 'game-start', {})
     world.events.dispatch(timer, 'game-start', {mode: dataAttr.mode})
 ......

hearts.ts

Crea los 3 iconos de corazones UI en la esquina inferior izquierda de la pantalla que representan las 3 vidas del doty

help.ts

Es un botón que muestra el "?"icono que el usuario puede pulsar durante una sesión de juego para mostrar el tutorial si es necesario
Mientras se muestra el tutorial, el juego está en pausa, por lo que el usuario puede volver a leer las instrucciones con seguridad

score.ts

Este componente está diseñado específicamente para la IU de puntuación y ayuda a ocultar o mostrar la puntuación

snowball-button.ts

Se trata de un botón que permite al usuario activar un evento para lanzar una bola de nieve durante la parte final del juego:

         
   /**
    * STATES
    */
   ecs.defineState('default').initial().onEnter(() => {
     // When entering the 'default' state, add listeners for the required events
     world.events.addListener(world.events.globalId,
       'coin-collect', coinCollect)
     world.events.addListener(world.events.globalId,
       'heart-lost', heartLost)
     world.events.addListener(world.events.globalId,
       'game-win', gameWinState)
     world.events.addListener(world.events.globalId,
       'game-over', gameOverState)
     world.events.addListener(world.events.globalId,
       'game-pause', gamePauseState)
   }).onExit(() => {
     // When exiting the 'default' state, remove the listeners
     world.events.removeListener(world.events.globalId,
       'coin-collect', coinCollect)
     world.events.removeListener(world.events.globalId,
       'heart-lost', heartLost)
     world.events.removeListener(world.events.globalId,
       'game-win', gameWinState)
     world.events.removeListener(world.events.globalId,
       'game-over', gameOverState)
     world.events.removeListener(world.events.globalId,
       'game-pause', gamePauseState)
   })

mushroom.ts

El componente seta es la entidad enemiga del juego. Como ya se ha mencionado, existen 3 tipos diferentes de seta: la seta pequeña, la seta enfadada y la seta rey

Las principales piezas lógicas de este componente son:
- función growMushroom: que se encarga de hacer crecer la seta cuando el jugador se mueve de su punto de origen y el juego está comenzando

- función followPlayer: encargada de establecer la siguiente posición y rotación de la seta para seguir los movimientos del jugador.

         
export const followPlayer = (world, component, ecsMushroomPosition) => {
 const {eid, data: {speed}} = component
 // Smoothly move mushroom towards player using lerp
 const lerpFactor = speed
 ecsMushroomPosition.x = lerp(ecsMushroomPosition.x, vecPlayerPosition.x, lerpFactor)
 ecsMushroomPosition.y = lerp(ecsMushroomPosition.y, vecPlayerPosition.y, lerpFactor)
 ecsMushroomPosition.z = lerp(ecsMushroomPosition.z, vecPlayerPosition.z, lerpFactor)
 // Update mushroom's position
 vecMushroomPosition = vec3.xyz(ecsMushroomPosition.x, ecsMushroomPosition.y, ecsMushroomPosition.z)
 // Make the mushroom face the player, but only rotate on the Y axis
 const direction = vecPlayerPosition.minus(vecMushroomPosition)  // Define the direction from mushroom to player
 // Calculate the angle based on the X and Z axes of the player position
 const angle = Math.atan2(direction.x, direction.z)
 // Set the Y rotation of the mushroom to face the player
 const rotationQuat = quat.yRadians(angle)
 // Directly set the new quaternion in ECS
 const currentQuaternion = getQuaternion(world, eid)
 currentQuaternion.x = rotationQuat.x
 currentQuaternion.y = rotationQuat.y
 currentQuaternion.z = rotationQuat.z
 currentQuaternion.w = rotationQuat.w
}

         
const dispatchLosingHeart = (world, mushroomId, trigger = 500) => {
 if (hearts.length <= 0) return
 const currentTime = Date.now()  // Get the current time in milliseconds
 if (currentTime - lastExecutionTime >= trigger) {  // Check if 500 second has passed
   lastExecutionTime = currentTime  // Update the last execution time
   world.events.dispatch(mushroomId, 'heart-lost', {mushroomId})
 }
}


export const checkPlayerProximity = (world, component, distanceToPlayer) => {
 const {eid, schema: {distanceCatch}} = component
 // Check if the distance is less than distanceCatch
 if (distanceToPlayer <= distanceCatch) {
   dispatchLosingHeart(world, eid)
 }
}

La función dispatchLosingHeart tiene una lógica de estrangulamiento, esto asegura que la función no se ejecute más a menudo que el intervalo de disparo. Para evitar perder los 3 corazones en 1 frame por ejemplo

snow-particles.ts

Es el componente encargado de crear las partículas de nieve que caen en cada escenario
Utiliza el material SnowParticles que se encuentra en scripts/classes/SnowParticles

snowflake.ts

Es la entidad 3D que flota alrededor de Doty en el capítulo 2
Este componente se encarga de mostrar u ocultar el componente, ya que no es necesario durante toda la sesión de juego
Hay un

Ayudantes

Estos ayudantes son un conjunto de archivos que proporcionan un desglose de la lógica llamada en diferentes lugares del código aquí el principal que quiero ir a través de:

datos.ts

En este archivo encontrarás un montón de configuraciones y ajustes utilizados a lo largo del código como los valores de velocidad, los datos de los hongos (clip a reproducir, su tamaño, urls). Todos los datos de los tutoriales como los títulos, instrucciones de texto.

store.ts

En este archivo se encuentran las funciones storeTimer y getAllTimers. Se encargan de almacenar el valor del tiempo y el modo de dificultad que utilizó el jugador al llegar al final del juego

Aventura de búsqueda de monedas congeladas

Hazlo tuyo con el proyecto de ejemplo

Estudio: Coin Scatter

Estudio: Doty Snowball Party

Behind the Build: Frozen Coin Hunt Adventure

Introduction

Project Structure

Escena 3D

Activos

Scripts

Implementation

UI - Screens

IU - Elementos