ウェスタン・メモリー

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

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

プレイする場所は、周囲に広く広がっている必要があります。
音は重要です。あるいは、見知らぬ人かもしれません。

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

3Dシーン

ベースエンティティ：異なるレベルで利用される3Dアセットをインポートします。そのうちの一部は通常の.glbオブジェクトであり、他のものはGaussian Splat.spzモデルです。これには、Perspective AR カメラとAmbient/Directional Lightsも含まれます。

アセット

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

スクリプト

スクリプトは、時間的制約のため通常はルートディレクトリに配置されています。

         
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)

西洋の記憶

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

タップしてアニメーション

Behind the Build: Western Memory

Introduction

Project Structure

3Dシーン

アセット

スクリプト

Implementation

`touchToAnimate.ts`

`boombox.ts`

UI

ポータル

シェーダーとビデオ

その他のスクリプト