vrapeutic / ellietale-webxr

VRapeutic's Ellie Tale - WebXR Version

Ellie Tale - WebXR Version.. Try it out! 🚀

Description 📝

A gamified Virtual Reality theapeutic application, addresses attention skills on various levels. The gameplay consists of a visual target tracking exercise that is designed to address and measure the various variables of attention.

Story 🎙

Uncle Noah is a nice old man, living by himself in the neighborhood. Since he’s living alone, he usually needs help in his everyday activites. He does fishing, farming, growing fruits, and writes books to earn a living.

Ellie is a fairy living in the neighborhood. One evening, she saw Uncle Noah while he was working on his garden and she talked to him. When she got to know that he was living and working all by himself, she decided that she’d pass by every day to help him. Ellie has invited the you to join her in helping Uncle Noah by unpacking his tools or collecting his objects.

The gameplay occurs in three unique environments. Each is composed of a round track on which the player shall reveal hidden items with the help of Ellie that are then collected. Uncle Noah is always present in the environments on the side doing an idle animation, and the items that the player and Ellie find are collected in a container that lies beside Uncle Noah. The three environments are:

• Garden; and the objective is to collect fruits and vegetables
• Beach; and the objective is to collect fish and fishing tools
• Library; and the objective is to collect letters

Technologies Used 💻

• A-Frame
  • Animation Mixer
  • AABB Colider
  • SPE Particles
• HTML, CSS, JavaScript

Installation Guide 🖥

Install and run the project locally using NPMv6

Art

• https://drive.google.com/drive/folders/1Ans338bbWz77XcD9fvwclpxW0s_o6SHC?usp=share_link

---

node v14.17.2

npm v6.14.13

• Clone the repository

git clone https://github.com/vrapeutic/EllieTale-WebXR.git
cd EllieTale-WebXR

• Install dependencies

npm install

• Run the project

npm run dev

• Go to the localhost URL specified in the terminal
• Congrats! You're now running the project locally! 🚀

Install and run the project locally using Dockerv20

---

docker v20.10.1

• Clone the repository git clone https://github.com/vrapeutic/Ellie-Tale.git
• Go to the repo's directory cd Ellie-Tale
• Run docker pull yahyaalaa/Ellie-tale-webxr:tag to pull the latet Docker image from our DockerHub public repository, where you will find our available tags
• Run docker run -d -p YOUR_PREFERRED_PORT:3000 --name Ellie-tale --mount type=bind,source="$(pwd)",target=/webxr-code yahyaalaa/Ellie-tale-webxr:tag command to run the Docker image on your local machine, and at the same time mount the working directory, to apply changes to the image on the fly
• Choose your preferred port in order to run the app on local host
• Go to the localhost:YOUR_PREFERRED_PORT to check your new code modifications
• Hooray! You've got your Docker image-based local development environment ready!

Run the project on Glitch platform

---

• Go to Glitch platform
• Create an account if you don't already have one
• On your dashboard, then click New project, then choose the Import from GitHub option
• Paste the repo's full url, then click Ok
• You're ready to go!

Preferred platform

---

If you are going to be using a VR Headset, then we recommend trying the app (either the hosted version or on Glitch) on the Oculus Browser.

For local development and testing, modern browsers could be used, where mouse and keyboard interactions will be the main source of interaction with the VR environment.

Contributions 💌

First off, thanks for taking the time to contribute! You can check out our contribution guidelines from this link. Please note that this project is released with a Contributor Code of Conduct, which can be found here. By participating in this project you agree to abide by its terms.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Yahya Alaa 🐛 🤔 🚇 🧑‍🏫 📆

hadeergamal1 🐛 💻 🖋 🎨 🤔 🚧

Ahmad Al-Kabbany 💼 🖋 🧑‍🏫 📆

This project follows the all-contributors specification. Contributions of any kind welcome!

ellietale-webxr's Issues

Display player's statistics

Is your feature request related to a problem? Please describe.
At the end of the game I could download statistics, but I can't see it on the current screen after finishing it.

Describe the solution you'd like
I think we can add a screen with CSS, which contains the statistic dictionary

Describe alternatives you've considered

we could use a-frame to display statistics in 3d world

Control sound level within game

Is your feature request related to a problem? Please describe.

The player needs to control sound volume from the screen not only from the device

Describe the solution you'd like

Control A-frame 's sound-component of html element by JavaScript

Using animation with A-frame

Is your feature request related to a problem? Please describe.

I'm always frustrated when Ellie and Noah are moving as robots with A-frame animation component

Describe the solution you'd like

We have to replace current Ellie and Noah models with 3d models which contains animation clips for Ellie and Noah

Arabic button didn't change language from English

Describe the bug

When a player selects Arabic button on first menu he will hear Ellie's voice in the English language not Arabic

To Reproduce
press on the Arabic button on first menu instead of English button, you will notice nothing will be changed

Expected behavior

Hear the instructions in Arabic languages

Add button to skip the introduction

Is your feature request related to a problem? Please describe.

Every Time I play the game I have to hear a same introduction and wait for it even if it's the same session

Describe the solution you'd like

Adding a button that can start game directly and skip the
introduction's functionality

The player can click on the same target more than once

Describe the bug

If the player, click on target more than once at the same time, he will be able to collect more than one item

To Reproduce

Try to click on the target which have a light more than one time quickly

Expected behavior

One item will be collected and the target will be animated for one time and will be unclickable again

Level Three distractor issue

**Noah Stuck In Level Three **

After voice over ,unexpected behavior when noah hit any target fps get too low in level three and eilly can move before i click on noah

Expected behavior

when noah hit any target some particles pop up and when player click on it noah go to next target and Eilly can move .

• Browser chrome
• Version. 0.0.1
• Platform desktop

Add NavMesh and obstacles for environments' elements

Our characters noah and Ellie are walking around through three environments with different elements we wanna make their movements real but when they hit a tree or other character they pass through them

To Reproduce

So, We could use Navigation Mesh A-Frame Inspector Plugin

A plugin for the A-Frame Inspector, allowing creation of a navigation mesh while from an existing A-Frame scene. This plugin should not be used at runtime in the live scene, but only during scene creation.

Create your scene
Use this plugin to create and test a navigation mesh
Export the navigation mesh as a glTF or JSON file
Load the final navigation mesh into your scene as a normal model

A navigation mesh which helps AI agents navigate, and is one way of constraining first-person controls and VR teleportation within a playable area. For information about using a navigation mesh in A-Frame, see Pathfinding documentation in A-Frame Extras.

Expected behavior

When Ellie or noah hit any element in the environment they can't pass through them and find anther path to reach their target

Magic particles For the fairy

Is your feature request related to a problem? Please describe.

As the main character is a fairy I think she needs some magic dust or particles while she is moving around

Describe the solution you'd like

A-Frame has some particle components like

it will be helpful to use it

Simulate counting down with the UI elements

Is your feature request related to a problem? Please describe.

When the player choose Closed Time option there's no timer simulate the counting down the game just will end after specific period without warning him

Describe the solution you'd like

Add an animated alarm that counts down for the remaining time before ending the game will be prefect