Western Memory

Diese Erfahrung ist ein Web-AR-Spiel, das mit Niantic Studio erstellt wurde. Der Spieler wird in eine liminale, gaussisch gescannte Welt versetzt, in der er QR-Codes finden muss, die in das Erlebnis eingebettet sind. Um weiterzukommen, muss er mit einer anderen Person zusammenarbeiten, die ein Smartphone besitzt, um den Code zu scannen.

Es gibt 5 Levels, wobei das letzte Level ein QR-Portal enthält, das den Spieler zurück zum ersten Level schickt, wenn er sich entscheidet, Geheimnisse aufzudecken, die er beim ersten Mal nicht gefunden hat.

Jedes Level verfügt über unterschiedliche Interaktionsmöglichkeiten, die im Folgenden näher erläutert werden. Zu Beginn des Spiels "
" erhält der Spieler folgende Anweisungen: "

Streck dich weit aus.) Der Bereich, in dem du spielst, muss weit um dich herum reichen.
Beweg
dich
Bestimmte Elemente können berührt oder angeklickt werden, um sie zu aktivieren.
"
!) Der Ton ist entscheidend.
" (Stick und tap!) Hast du dich schon einmal festgefahren gefühlt? Versuchen Sie, die Seite zu aktualisieren.
Niemand geht diesen Weg allein. Bringen Sie einen Freund mit... oder vielleicht ein Fremder.

Die Projektstruktur zwischen den Ebenen bleibt relativ einheitlich. Wir nutzen vor allem zwei Funktionen. Eine davon ist die Komponente "touchToAnimate ", mit der wir den Spielern die Interaktion mit Türen ermöglichen, die sich öffnen lassen. Die zweite ist eine Anpassung einer Boombox- Komponente, die es Spielern ermöglicht, mit Entitäten zu interagieren, die Audio abspielen.

Ein weiterer wichtiger Aspekt des Spiels ist die Verwendung von QR-Codes, um eine Multiplayer-Dynamik zu ermöglichen. Da ein Spieler den QR-Code nicht selbst scannen kann, benötigt er einen Partner, der das nächste Level auf sein Smartphone lädt.

3D-Szenen

-Basisentitäten: Wir portieren 3D-Assets, die in verschiedenen Levels verwendet werden. Einige davon sind reguläre .glb -Objekte, andere sind Gaussian Splat .spz -Modelle. Dazu gehören auch die Perspective AR-Kamera und Umgebungs-/Richtungslichter.
UI-Elemente für
: Wir haben eine Benutzeroberfläche für das erste Level erstellt, die den Benutzer durch einen Startbildschirm und ein erstes Tutorial führt.

Assets

für

Die verwendeten 3D-Assets und .spz -Modelle befinden sich immer im Verzeichnis "Assets".

Skripte

Skripte werden aus Zeitgründen in der Regel im Stammverzeichnis abgelegt. Wenn wir mehr Zeit gehabt hätten, hätten wir jedes Skript ordentlich in einem klar definierten Verzeichnis abgelegt, aber das Hauptziel war es, ein ausgefeiltes Ergebnis zu erzielen.

`touchToAnimate.ts`

Eine der wichtigsten Komponenten, die wir selbst entwickelt haben, war die Komponente "touchToAnimate". Eine ausführliche Beschreibung des Skripts finden Sie in der Datei README.md im Beispielprojekt für die Komponente hier. Der Kürze halber werde ich die Anleitung hier nicht einfügen, da sie unter dem folgenden Link zu finden ist:

Dies war ein wichtiger Bestandteil, der für das taktile Gefühl des Spiels unerlässlich war. Es vermittelt dem Spieler das Gefühl, auf intuitive Weise mit einer Welt zu interagieren.

         
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)

Westliche Erinnerung

Gestalten Sie es mit dem Beispielprojekt ganz nach Ihren Wünschen.

Tap to Animate

Behind the Build: Western Memory

Introduction

Project Structure

3D-Szenen

Assets

Skripte

Implementation

`touchToAnimate.ts`

`boombox.ts`

UI-

Portal

Shader und Video-

Andere Skripte