Western Memory

この体験は、Niantic Studioを使用して作成されたWeb ARゲームです。プレイヤーは、境界的なガウス分布のスplatスキャンされた世界に置かれ、体験内に埋め込まれたQRコードを発見すると、スマートフォンを持つ別のプレイヤーと協力してコードをスキャンし、前進する必要があります。

5つのレベルがあり、最終レベルにはQRポータルが設置されており、プレイヤーが初回プレイ時に発見しなかった秘密を解き明かす選択をした場合、レベル1に戻されます。

各レベルには異なるインタラクションの要素が用意されており、以下で詳細に説明されます。『
』のゲーム開始時、プレイヤーに以下の指示が表示されます：

プレイする場所は、周囲に広く広がっている必要があります。
特定の要素を触ったりタップしたりすることで、それらを目覚めさせることができます。
音は重要です。
行き詰まったと感じたことはありますか？ページを再読み込みしてみてください。
この道を一人で歩く者はいない。友達を連れてきて... あるいは、見知らぬ人かもしれません。

レベル間のプロジェクト構造は、おおむね一貫しています。当社が活用している主な機能は2つあります。一つはtouchToAnimateコンポーネントで、これを使用してプレイヤーが開くドアとインタラクションできるようにします。 2つ目は、ブームボックスコンポーネントのカスタマイズで、プレイヤーがオーディオを再生するエンティティとインタラクションできるようにする機能です。

ゲームの他の主要な機能の一つは、QRコードを使用してマルチプレイヤー機能を実現する点です。プレイヤーは自分でQRコードをスキャンできないため、次のレベルをスマートフォンに読み込むためにパートナーが必要です。

3Dシーン

ベースエンティティ：異なるレベルで利用される3Dアセットをインポートします。そのうちの一部は通常の.glbオブジェクトであり、他のものはGaussian Splat.spzモデルです。これには、Perspective AR カメラとAmbient/Directional Lightsも含まれます。
UI エンティティ：最初のレベル用のUIを作成し、ユーザーをスタート画面から初期チュートリアルまで案内する流れを実装しました。

アセット

使用されている3Dアセットと.spzモデルは、常にAssetsディレクトリ内に配置されています

スクリプト

スクリプトは、時間的制約のため通常はルートディレクトリに配置されています。時間があれば、各スクリプトを適切に定義されたディレクトリに整理して配置したいところですが、主な目的は完成度の高い体験を提供することでした。

`touchToAnimate.ts`

私たちが独自に作成した主要なコンポーネントの一つが、touchToAnimate コンポーネントです。コンポーネントのサンプルプロジェクト内のREADME.mdに 、スクリプトの非常に詳細な手順説明が記載されています。簡潔さを重視して、ここではウォークスルーを貼り付けません。詳細は添付のリンクからご確認ください。

これは、ゲームの触覚的な感覚に不可欠な主要なコンポーネントでした。プレイヤーに、直感的な方法で世界とインタラクションしている感覚を与えます。

         
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)

西洋の記憶

サンプルプロジェクトを参考に、自分好みにカスタマイズしてください。

Tap to Animate

Behind the Build: Western Memory

Introduction

Project Structure

3Dシーン

アセット

スクリプト

Implementation

`touchToAnimate.ts`

`boombox.ts`

UI

ポータル

シェーダーとビデオ

その他のスクリプト