Adding video data to the InstructionStep model

Videos will be referenced by name in the CSV data. The app will look in the Resources folder for the files. As with images, we could use the video URL instead.

The video name is the fifth column in your database (index 3). We can capture it when the file is loaded.

To InstructionStep.cs, add the following:

    public string VideoName; 
And, 
    private const int VideoColumn = 4; 
And then add to the InstructionStep constructor function, 
            if (values.IndexOf(item) == VideoColumn) { 
                VideoName = item; 
            } 

Now we create a UI element component. In your Scripts/UIElements/ folder, create a C# script named VideoGraphic and write it as follows:

File: VideoGraphic.cs 
using UnityEngine; 
using UnityEngine.UI; 
using UnityEngine.Video; 
 
[RequireComponent(typeof(RawImage))] 
public class VideoGraphic : InstructionElement { 
    public VideoPlayer videoPlayer; 
 
    protected override void InstructionUpdate(InstructionStep step) { 
        if (!string.IsNullOrEmpty(step.VideoName)) { 
            GetComponent<LayoutElement>().enabled = true; 
            videoPlayer.clip = Resources.Load(step.VideoName) as VideoClip; 
 
            GetComponent<RawImage>().SetNativeSize(); 
            videoPlayer.Play(); 
 
        } else { 
            videoPlayer.Stop(); 
            GetComponent<LayoutElement>().enabled = false; 
 
        } 
    } 
} 

This time we specify we're using the UnityEngine.Video components. We also declare a public variable for the video player.

In InstructionUpdate, if the current step includes a video, we load it as a VideoClip and start to play it. If not, we stop any video that may presently be playing and disable the LayoutElement component to hide the layout. The SetNativeSize adjusts the image size to make it pixel perfect.

Save the file and add the VideoGraphic script to the Video Graphic UI object in Hierarchy.

  1. In Hierarchy, select the Video Graphic (Main Canvas/ Content/ Video Graphic) and drag the VideoGraphic script into Inspector.
  2. Drag the Video Player from Hierarchy onto the Video Graphic's Video Player slot.

Woo hoot! Press Play and, as you step through the instructions, steps that include videos will be played on that screen.

There it is! We have an instruction manual app with text, images, and video, built with Unity.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.31.209