Memoria occidental

Esta experiencia es un juego de realidad aumentada creado con Niantic Studio. El jugador se ve inmerso en un mundo liminal, escaneado con splats gaussianos, en el que, al encontrar códigos QR incrustados en la experiencia, debe colaborar con otra persona que tenga un teléfono para escanear el código y avanzar.

Hay 5 niveles, y el último tiene un portal QR que devuelve al jugador al nivel 1, si decide descubrir secretos que no encontró la primera vez.

Cada nivel tiene diferentes características de interacción que se explorarán a continuación. Al principio de
el juego, se dan instrucciones al jugador que dicen:

El lugar donde juegues debe extenderse a tu alrededor.
Se pueden tocar o golpear ciertos elementos para despertarlos.
El sonido es clave.
¿Alguna vez te has sentido atascado? Intenta actualizar la página.
Ningún alma camina sola por este sendero. Trae a un amigo... o tal vez un extraño.

La estructura de los proyectos entre niveles se mantiene relativamente constante. Hay dos características principales que aprovechamos. Uno es el componente touchToAnimate, que utilizamos para que los jugadores interactúen con las puertas que se abren. El segundo es una personalización sobre un componente boombox, que permite a los jugadores interactuar con entidades que reproducen audio.

Otro de los aspectos principales del juego es el uso de códigos QR para permitir una dinámica multijugador. Como un jugador no puede escanear el código QR por sí solo, necesita un compañero para cargar el siguiente nivel en su teléfono.

Escena

Entidades Base: Portamos en 3D activos utilizados a lo largo de diferentes niveles. Algunos de ellos son objetos .glb normales, otros son modelos .spz de Gaussian Splat. Esto también incluye la cámara Perspective AR y Ambient/Directional Lights.
Entidades UI: Creamos una interfaz de usuario para el primer nivel que guía al usuario a través de una pantalla de inicio y un tutorial inicial.

Activos

Los assets 3D y los modelos .spz utilizados se encuentran siempre dentro del directorio Assets

Scripts

Los scripts suelen colocarse en la raíz debido a limitaciones de tiempo. Si tuviéramos más tiempo, colocaríamos cada guión en un directorio bien definido, pero el objetivo principal era conseguir una experiencia pulida.

         
import * as ecs from '@8thwall/ecs'
ecs.registerComponent({
  name: 'boombox',
  schema: {
    screenRef: ecs.eid,
    // @asset
    imagePlay: ecs.string,
    // @asset
    imagePause: ecs.string,
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    // Initially set audio to off so we let player explore the arena first.
    ecs.defineState('off')
      .onEnter(() => {
        console.log('off')
        ecs.Audio.mutate(world, eid, (cursor) => {
          cursor.paused = true
      	})
        ecs.Ui.mutate(world, schemaAttribute.get(eid).screenRef, (cursor) => {
      	  cursor.image = schemaAttribute.get(eid).imagePause
        })
      })
      .onEvent(ecs.input.SCREEN_TOUCH_START, 'on', {target: schemaAttribute.get(eid).screenRef})
      .initial()
 
    // Define on state after a touch has been registered.
    ecs.defineState('on')
      .onEnter(() => {
        console.log('on')
        ecs.Audio.mutate(world, eid, (cursor) => {
          cursor.paused = false
        })
        ecs.Ui.mutate(world, schemaAttribute.get(eid).screenRef, (cursor) => {
          cursor.image = schemaAttribute.get(eid).imagePlay
        })
      })
      .onEvent(ecs.input.SCREEN_TOUCH_START, 'off', {target: schemaAttribute.get(eid).screenRef})
  }
})

         
// Add a click event listener to the start button
startButton.addEventListener('click', () => {
	console.info('Title screen clicked')
	// Uncomment this to stop audio after Title screen.
	// ecs.Audio.mutate(world, component.eid, (cursor) => {
		// cursor.paused = true
	// })
	world.events.dispatch(world.events.globalId, 'on-title-pressed') // Dispatches an event when the button is pressed

	backgroundContainer.classList.add('hidden') // Hides the background container
	buttonContainer.classList.add('hidden')
})

         
backgroundContainer.classList.add('hidden')
instructionButton.classList.add('hidden')
world.events.addListener(world.events.globalId, 'on-title-pressed', handleIntructions)

// Add a click event listener to the start button
instructionButton.addEventListener('click', () => {
	console.info('Instructions screen clicked')
	buttonContainer.classList.add('hidden') // Hides the button container
	backgroundContainer.classList.add('hidden') // Hides the background container
})

         
import * as ecs from '@8thwall/ecs'
const portalHiderController = ecs.registerComponent({
  name: 'portalHiderController',
  schema: {
    camera: ecs.eid, // Reference to the camera entity
    hiderWalls: ecs.eid, // Reference to the Hider Walls entity
    exitHider: ecs.eid, // Reference to the Exit Hider entity
  },
  tick: (world, component) => {
  	const {camera, hiderWalls, exitHider} = component.schema
  	if (!camera || !hiderWalls || !exitHider) {
  		console.warn('Camera, hider, or portalHider entity not set in portalHiderController')
  		return
  	}
  	// Get the camera's position
  	const cameraPosition = ecs.Position.get(world, camera)
  	const threshold = -0.1 // Adjust the threshold as needed
  	if (cameraPosition.z < threshold) {
  		ecs.Hidden.set(world, hiderWalls, {}) // Hide the Hider Walls
  		ecs.Hidden.remove(world, exitHider) // Show the Exit Hider
  	} else {
  		ecs.Hidden.remove(world, hiderWalls) // Show the Hider Walls
  		ecs.Hidden.set(world, exitHider, {}) // Hide the Exit Hider
  	}
  }
})

         
add: (world, component) => {
  const {video, r, g, b, width, height, similarity, smoothness, spill} = component.schema
  if (video === '') {
    console.error('No video defined on chromakey component')
    return
  }
  const object3d = world.three.entityToObject.get(component.eid)
  const keyColor = new THREE.Color(`rgb(${r}, ${g}, ${b})`)
  const greenScreenMaterial = new ChromaKeyMaterial(video, keyColor, width, height, similarity, smoothness, spill)

  setTimeout(() => {
    object3d.material = greenScreenMaterial
  }, 0)
}

         
import './CSS/utilities.css'
import './CSS/title.css'
import './CSS/instructions.css'
const fontLink = document.createElement('link')
fontLink.href = 'https://fonts.googleapis.com/css2?family=Rubik+Mono+One'
fontLink.rel = 'stylesheet'
document.head.appendChild(fontLink)