Critical Practice Unit

Trigger Image to First Person Shooter

Ten Suns Chinese Myth

Story

In ancient Chinese mythology, the sky had not one, but 10 suns. Every day, the solar goddess Shiho would pick up one of these suns and her son, Yi, and wheel them across the sky in her chariot. In the meantime, the other nine would play among the leaves of the mythical Fusang tree, believed to be more than 10,000 feet tall.

Concept

Story

This animation is intended to be watched before my AR FPS Ten Suns game.
The YouTube video is by Tzseng CS.
This is the game capture of my AR application.

Storyboard

VR Ten Suns

Team

My class divided into groups and the group I joined already began with their story and VR experience so I decided that I could make an AR experience to make this project multiplatform. In my AR experience, the user would play as Yi, the notorious archer.

Cross Platform

Our cross-platform experience contains a VR and AR version. The player begins participating in the AR experience where they watch an animation on the ancient Chinese Myth. The user plays as Yi in the AR experience and shoots down 9 suns to save the world. Later we extend the story by telling a different view where the character will play as the mother and feed the baby birds which results in them evolving into phoenixes and rising as playful and flaming suns.

Concept

Our cross-platform experience contains a VR and AR version. The player begins participating in the AR experience where they watch an animation on the ancient Chinese Myth. The user plays as Yi in the AR experience and shoots down 9 suns to save the world. Later we extend the story by telling a different view where the character will play as the mother and feed the baby birds which results in them evolving into phoenixes and rising as playful and flaming suns.

AR Pictures then VR pictures

Goal

Tell the original story and teach my players about this ancient Chinese Myth, once achieved: they are put into Yi’s Shoes and play a fun game where they see the world go from…

Here is the storyboard for my AR experience. I would be working on this projects functionality and mechanics by themselves and using the same environment Kunrong is using to create his scene.
This is what the scene looks like at the beginning.
This is what the scene looks like after the user has shot down all ten suns.

Unity Process

I followed this tutorial to get the functional of the shooter working by using ray tracing

This was the error I got and could not find much documentation for it.

I got this error when I was trying to use the ARCore XR Toolkit. I changed and just used Apple at first. Later, I realized that this would be complicated as I needed a developed license and I switched to using Vuforia because I was familiar with the package.

The way it works:
Function is called and an invisible ray cast  as shown in this diagram.

Shooting Mechanic

I used an if statement to see if the sun is hit or not and store it in the variable “hit”

If hit.transform.name = “SunX()” which is any of the sun game objects 

 IF this is true, then the game object will be destroyed and I will instantiate smoke.

If the raycast hits an object, then it is stored in the hit variable which we defined as “RaycastHit hit”

If the name of the game object hit is sun1, sun2, sun3, etc. then the if statement will run which makes it destroy  whatever sun it has hit. Additionally, we instantiate smoke where the suns position is and add an explosion sound.

Shooting Script

public class ShootScript : MonoBehaviour
{
    public GameObject arCamera;
    public GameObject smoke;

    public GameObject birdfly;

    public ScoreKeeping Scorescript;

    public SetShaderUnifrom Lava;

    public AudioClip boom;

    public void Shoot()
    {
        RaycastHit hit;

        if (Physics.Raycast(arCamera.transform.position, arCamera.transform.forward, out hit))
        {
            if (hit.transform.name == "Sun" || hit.transform.name == "Sun1" || hit.transform.name == "Sun2" || hit.transform.name == "Sun3" || hit.transform.name == "Sun4" || hit.transform.name == "Sun5" || hit.transform.name == "Sun6" || hit.transform.name == "Sun7" || hit.transform.name == "Sun8" || hit.transform.name == "Sun9" || hit.transform.name == "Sun10")
            {

                AudioSource audio = GetComponent<AudioSource>();

                Scorescript.score += 1;
                Lava.currentValue += 0.25f;

                Destroy(hit.transform.gameObject);


                Instantiate(smoke, hit.point, Quaternion.LookRotation(hit.normal));
                GetComponent<AudioSource>().Play();

            }
        }
    }
}

I began by setting up balloons and choosing all my assets. Instead of balloons I used these suns.

The particle FX surrounding the sun was done by Kunrong.

Pheonix

Phoenix Asset

Transition from VR to AR world

I turned the Chinese world and Fusang Tree environment to a lava world that was in destructive flames.

I typed using this scene which i got from Kunrong but since i was using Vuforia AR.. I need to optimize and simplify the scene… I went from this to this!!!

VR Scene
AR Scene

Different stages of score and fire levels

Score = 0
Score = 2
Score = 6
Score = 7
Score = 0
Score = 0
Beginning of the game
This is how I grouped and controlled the sets of fire that I wanted to turn off as the players score got higher.

Win Animation

This is shown once the player shoots all 9/9 suns in the sky.

Sound

I also chose a sound for when the sun is shot and images for the cross hairs and shooting button.

This made the balloons pop up 3 at a time from 3 different spawn points which I made from an Array and took the points and sun game objects and placed them on the script. Later I added correct number of suns, 10.

I created an empty game object to put my shoot script inside and these are the settings I filled in to set all of the scripts up with the right objects..

On the shoot UI button I created this..

AR Bug.. first issue

Balloon Shooter Tutorial

Objectives:

  1. New spheres produced every 4 seconds
  2. New spheres start flying
  3. When balloon is shot, there’s an explosion and smoke

In the hierarchy added ARSesion (which contains an AR camera)  and an AR session origin  

Idea: THE USER WILL OPEN UP THE APP, WATCH THE VIDEO OF THE MYTH, READ INSTRUCTIONS AND THEN CLICK PLAY.. TO START THE GAME THEY WILL NE TO ACTIVE IT BY SCANNING THIS TARGET IMAGE.

Enivornment pop up & AR enable.

The main issue that I was using is that I wanted the user to scan the target image and when they scanned it, I wanted the user to look around the environment and find all ten suns by moving the device. However, when my image target was scanned, the environment would appear and stay in the same position when the tablet was moved around.. to change this, i adjusted some of the script that came with Vuforia’s AR package. This is the code that i added to this screen.

public class SpawnScene : MonoBehaviour
{
    public static bool ARState = false;
    public GameObject Environment;

    //public DefaultTrackableEventHandler ARscanscript; //call this script and check the booleonfor scanned image
    //public bool MyARState = false; 

    // Update is called once per frame
    void Update()
    {
        //MyARState = ARscanscript.ARState;
        if (ARState == true)    //enable this later
        {
            Environment.SetActive(true);

            // public bool ARstate;  line 29 after or #region UNITY_MONOBEHAVIOUR_METHODS
            //  ARstate = true;       line 63 after Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found");

        }

    }
}

Lava Shader

This is a demonstation of the dissolve shader using a texture swap.

As the score goes up, the ground turns from running lava to ash.

Score = 2
Score =7

Shaders

I wanted to practice my shaders.

Specifically, I wanted to learn the dissolve shader.

Shader graph for the material I am using to turn flowing lava into ash.
Ash
This is how the ground looks after half the suns have been shot.

Shader Code

public class SetShaderUnifrom : MonoBehaviour
{

   public  Material myMat;
   public float currentValue = -1;
    public float shaderValue;
    // Start is called before the first frame update
    void Start()
    {
       
    }

    // Update is called once per frame
    void Update()
    {

        shaderValue -= (shaderValue - currentValue) / 10;

        myMat.SetFloat("texture_value", shaderValue);
    }
}

Score Keeping

This code controls a current value and a shader value to change each time a sun is shot by the player.

Add one to the score which is represented by text in the top left corner of the game.

Optimizations

Reposition AR Camera

Before
After

UI Interface

I created a canvas and then imported the pictures i wanted to use for the button and the cross hair. I made materials and then but the images on those by going into the settings of the material and choosing: Legacy shaders/diffuse (chose the material I wanted), then again I went into the settings of the mat and chose UI/Default.

One of my personal goals for this project was to practice clean and simple UI.

I used the 2D graphics given to me from my partner Tsz Kwan.

Yi and Mother of Suns
I started with a very basic button UI interface.

Our UI guest lecturer actually taught how to do a quick UI decision maker through slide.

UI-research-10suns-2Download

UI Screens

Start Menu
Instructions
Credits
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour {

    public void PlayGame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
    

}

I used this script to control the Main Menu along with buttons that would change the scene using this..

using UnityEngine.SceneManagement;


public class ChangeScenewithButton : MonoBehaviour
{
    public void LoadScene(string sceneName)
    {
        SceneManager.LoadScene(sceneName);
    }

}

User Testing

1st iteration VR

The first iteration my group did was in VR. The results showed that the users were having a hard time with story compression.

When I did my testing I wanted to make sure the myth was clear and that my game was a fun interactive recreation of the story.

  • In the VR questions we realized that the player was confused who they were, and what the story was. 

In AR I solved that by adding the YouTube animation.. 

See the video here.

User Persona

User person well fit with the people that I was testing.

2nd Iteration AR

I had three objectives that I wanted to get out of user testing.

  1. Understand who I am testing and how firmiliar with AR they are.
  2. Comprehension of the story
  3. Game design and environment creation

1st Objective: Identity

This shows all of the people that completed my testing.

My results may be a bit biased because all of the testers either work at or attend LCC; However, I feel like most of the people playing this game will be tech savvy.

Questions:

Results

https://forms.gle/Ev59ub4pxdj3TxYw5

See Google Form 2nd Iteration Testing

Why AR?

To allow the player to learn about ancient Chinese mythology while playing as the character in an environment that is accessible to anyone with a tablet or phone.

  • I wanted to use ray tracing, as I feel that gaze interaction can be useful since we are tracking device movement in the overlaying real world 
    • Felt like it could be useful to know for the future VR projects.

Solutions

I realized this button would happen during scene changes when I would make a lot of changes to a scene.. To fix this, I made sure that if I was finding bugs in a scene, i would make a separate build of the scene by its self so i could debug it, and then i would add it back to the build.

I found that working in AR was not very easy to test. I would have to build my project every time that I wanted to test it. I had 80 builds all together.

If I had more time…

If I had more time I would take the cross platform and allow the user to choose what charcter they want to play as… the archer or the mom. I would recreate the VR scene and end my AR by rewarding Yi With a Bow and Arrow at the end of the phoenix animation.

Group Communication Issues.

  • VR team changed scenes and render pipeline 2 months in.
  • VR project was merged onto my AR project without my consent.
  • Group member failed to help me debug and clear up my scene.

Miro

Solutions

we added this bit into our transition

Our cross-platform experience contains a VR and AR version. The player begins participating in the AR experience where they watch an animation on the ancient Chinese Myth. The user plays as Yi, the famous archer, in the AR experience and shoots down 9 suns to save the world. Later we extend the story by telling a different view where the character will play as the mother and feed the baby birds which results in them evolving into phoenixes and rising as playful and flaming suns.

Watch Myth
See Miro board here
Phoenix animation when user shoots all of the suns down.