フローズン・コイン・ハント』アドベンチャーガイド

この体験は、2024年10月、Niantic Studio Betaを使用して作成されたWebARゲームです。

The Tiny Mushroom
- あなたを追いかけてくる小さなキノコを避けながら、20枚のゴールドコインを集めよう。
The Angry Mushroom
- あなたを捕まえようとする怒ったキノコを避けながら、20枚のゴールドコインを集めよう。
The Angry Mushroom
- あなたを捕まえようとする怒ったキノコを避けながら、20枚のゴールドコインを集めよう。
キングキノコ
- t彼の最後の挑戦では、勝つためにキングキノコと雪合戦を開始します。グラウンドから雪玉を集め、王様に投げつけて倒そう。

3D Scene

ベースエンティティ：パースペクティブARカメラとアンビエント/ディレクショナルライトを含む。各チャレンジの間にチュートリアルが表示されます。

アセット

ゲーム中に使用されるすべての3Dモデル、オーディオファイル、画像が含まれています。

Scripts

Scriptsフォルダは3つのネストしたフォルダに分かれています：
- コンポーネント：

メインゲームロジックが含まれます。

アセット

ゲーム中に使用されるすべての3Dモデル、オーディオファイル、画像が含まれています。

         
   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')
       }
     }
   })

         
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

このフォルダ内の各UIコンポーネントは、ゲームセッション中に表示される画面、またはアイコンや1つのボタンなどのUI要素を表します。 <これらはすべてsetupCss関数を持っており、 <headの> styleタグ内に特定のCSSを追加する>.

game-over-screen.ts

ゲームオーバーのロゴを表示する
ゲームのすべてのオーディオを一時停止する
最後にゲームオーバーのオーディオを再生する

landing-screen.ts

これはゲームを実行するときに最初に表示される画面である
ユーザーが実験したい難易度を選択できる場所である。ドロップダウンエレメントは、1つのオプションを選択すると難易度が変化するリスナーで作成されます：

         
// 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

画面左下にドッティの3つの人生を表す3つのハートアイコンUIを作成

help.ts

「?「
チュートリアルが表示されている間、ゲームは一時停止しているので、ユーザーは安全にもう一度説明を読むことができます

score.ts

このコンポーネントはスコアUIのために特別に設計されており、スコアを隠したり表示したりするのに役立ちます

snowball-button.ts

これは、ユーザーが最後のゲームパート中に雪玉を投げるイベントをトリガーできるようにするボタンです：

「
チュートリアルが表示されている間、ゲームは一時停止しているので、ユーザーは安全にもう一度説明を読むことができます

score.ts

このコンポーネントはスコアUIのために特別に設計されており、スコアを隠したり表示したりするのに役立ちます

snowball-button.ts

これは、ユーザーが最後のゲームパート中に雪玉を投げるイベントをトリガーできるようにするボタンです：

         
   /**
    * 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

きのこコンポーネントは、ゲームの敵のエンティティです。前述したように、3種類のキノコがあります：小さいキノコ、怒っているキノコ、王様キノコ

このコンポーネントの主なロジックは次のとおりです：
- growMushroom関数：プレイヤーがキノコの原点から移動し、ゲームが開始されると、キノコを拡大します

- followPlayer関数：プレイヤーの動きに追従するために、キノコの次の位置と回転を設定します。

         
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)
 }
}

dispatchLosingHeart関数にはスロットリング・ロジックがあり、これは関数がトリガー間隔よりも頻繁に実行されないようにするものです。例えば1フレームで3つのハートをすべて失わないようにするため

snow-particles.ts

各ステージに降り注ぐ雪の粒を作成するコンポーネント
scripts/classes/SnowParticlesにあるSnowParticlesマテリアルを使用

snowflake.ts

Dotyの周りを浮遊している3Dエンティティで、第2章に登場します
このコンポーネントは、ゲームセッション中は必要ないため、コンポーネントの表示/非表示を担当します

Helpers

これらのヘルパーは、コードのさまざまな場所で呼び出されるロジックの内訳を提供するファイルのセットですここでは、主なものを紹介します:

data.ts

このファイルには、スピード値、キノコのデータ（再生するクリップ、サイズ、URL）など、コード全体で使用される設定やコンフィギュレーションがたくさんあります。

store.ts

このファイルにはstoreTimer関数とgetAllTimers関数があります。ゲーム終了時のタイムと難易度モードを記憶する。