Overview
Add background videos to your visual novel.
Intro
To display videos as backgrounds for your visual novels, we’ll create an html layer using the tag
[link] and then we’ll inject the video using the html5 <video> element.
In this guide I’ll not delve much into the <video> tag, so if you want to read more about this topic look at here [html5rocks.com].
Uploading the videos
Before you start, you have to upload the videos you want to use as backgrounds with the correct format. You can add them directly to your default folder “Backgrounds”, or if you do not want to mix videos with images, you can create a new folder. Upload them wherever you like, but have a clear paths for your videos, because we’ll pass the url to our custom macro later.
For this example, I uploaded the videos in this folder:
“data/fgimage/default/Clouds-Time_lapse_22.mp4”
“data/fgimage/default/Waterscape_11.mp4”
Creating the macros
To control the videos we create two simple macros, customized with some parameters to make it easier later when have to display new videos and also to play with the depth of the html layer.
We create a new TyranoScript
Let’s break the code of this macro.
Start macro definition with:
[macro name=”play_video”]
This [eval] generates two parameters for the macro that you can call later. One for the url of the video and the other for the depth of the layer. For example if we want to see the video on front or behind the characters.
[eval exp=”tf.storage=mp.storage”]
[eval exp=”tf.depth=mp.depth”]
Crate the html layer with the video injected.
[html name=”video_layer”]
<video autoplay loop>
<source type=’video/mp4′ ></source>
</video>
[endhtml]
Create the iScript to modify the html layer style and add parameters to our macro.
[iscript]
if(mp.depth==null){mp.depth=1}
$(“video”).attr(“src”, mp.storage);
$(“.layer_free”).css({
“z-index”:mp.depth,
“opacity”:0
})
[endscript]
Create an animation to smooth the transition.
[anim name=’layer_free’ opacity=255 time=3000]
This ends the macro
[endmacro]
Call the macro with:
[play_video storage=”your_video_url” depth=1]
We’ll call this to destroy the video layer with a transition as well.
To remove the layer call the macro like so:
[remove_video]
Then once is removed you can call again the [play_video] macro to show another video.
[play_video storage=”your_second_video_url” depth=1]
