Difference between pages "Tutorials" and "Dynamic Lighting (h2)"

From The Official Visionaire Studio: Adventure Game Engine Wiki
(Difference between pages)
 
m
 
Line 1: Line 1:
Here you can find a list of tutorials & how to guides for Visionaire Studio by various members of the Visionaire Studio Team & its users.
+
{| class="ts" style="width:100%"
== Text / Image ==
 
 
 
=== Basic ===
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left" | Tutorial Name
 
! style="text-align:left;width:10%" | By
 
|-
 
| [[How_To_Disable_Interaction_Without_Hiding_the_Cursor_(h2) | How to disable interaction without hiding the cursor]] || AFRLme
 
|-
 
| [[Dynamic_Character_Blinking_(h2) | How to create dynamic character blinking for your characters]] || AFRLme
 
 
|-
 
|-
| [[Dynamic_Footstep_Sounds_(h2) | How to add dynamic footstep sounds to your characters]] || Lebostein
+
! style="text-align:left" | Name !! style="text-align:left;width:10%" | By
 
|-
 
|-
| [[Hotspots_(h2) | How to create '''hotspots''' using images or animations]] || AFRLme
+
| Dynamic Lighting (image based) || AFRLme
|-
 
| [[Menu_101_(h2) | Menu 101 - A guide to creating menus in Visionaire Studio]] || AFRLme
 
|-
 
| [[Pendulum_Animation_(h2) | How to turn your regular animation into a pendulum animation with only 2 lines of Lua script]] || AFRLme
 
|-
 
| [[Runtime_Log_Monitoring_(h2) | How to sort out real-time log monitoring]] || AFRLme
 
|-
 
| [[Prevent_Video_and_Cutscene_Skipping_(h2) | <strike>How to prevent skipping of '''cutscenes''' & '''videos'''</strike> (videos still skip)]] || AFRLme
 
 
|}
 
|}
  
=== Intermediate ===
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left" | Tutorial Name
 
! style="text-align:left;width:10%" | By
 
|-
 
| [[Dynamic_Lighting_(h2)|How to create '''dynamic lighting''' effects using images]] || AFRLme
 
|-
 
| [[Playtime_Counter_(h2)|How to create a simple '''playtime counter''' using a value, display text & a few lines of Lua script]] || AFRLme
 
|}
 
  
=== Advanced ===
+
This tutorial shows you how to create a dynamic light using static images. Dynamic light using images works by creating an image containing the lighting/glow with a transparent background. We then use random values to control the opacity & transition time between current opacity value & the target opacity value. Overall this creates a pretty neat effect.
{| class="ts sortable" style="width:100%"
+
 
|-
+
 
! style="text-align:left" | Tutorial Name
+
== Tutorial ==
! style="text-align:left;width:10%" | By
+
=== Constant ===
|-
+
This is the simpler method of the 2 available. It constantly updates the opacity value of the image(s).
| [[Dynamic_Clouds_(h2)|How to create dynamic clouds (random scale, image & speed)]] || AFRLme
 
|}
 
  
 +
1. You should create some lighting in your preferred graphic/3D program of choice. Don't forget to use feather/anti-aliasing to create smooth edges for your lighting. Blur is ok too. Background should be transparent.<br/>
 +
2. First off you are going to want to create an object in your scene that you will be assigning the lighting image to.<br/>
 +
3. Go to '''scene > value''' & create a new value. This value will be used to control the transition delay.<br/>
 +
4. Go to: '''scene > actions''' & create an '''at begin of scene''' action & a '''called by other action''' action. Make sure you give the '''called by other action''' an appropriate name.<br/>
 +
5. Inside of the '''at begin of scene''' action: add a '''call action "called_by_other_action_name"''' action.<br/>
 +
6. Inside of the '''called by other action''' action you should include these action parts...
 +
<syntaxhighlight>
 +
set random value in 'value_name' between x and y -- sets random delay between x & y ms.
 +
execute script > (see code block below)
 +
pause for 'value_name' millisecond(s) -- linked to value.
 +
jump to action part #1 -- forces loop from beginning.
 +
</syntaxhighlight>
  
== Video ==
+
<syntaxhighlight>
 +
Objects["object_name"]:to(Values["value_name"].Int, {ObjectVisibility = math.random(75,100)}, easeQuintOut) -- fade to random opacity value between 75-100% with smooth ending
 +
</syntaxhighlight>
 +
7. Rinse & repeat the process for other images you want to control with this method. If you don't mind all images being adjusted at the same time, then you could even add them to the '''execute a script''' code mentioned above.
  
=== Andiliddell's Video Tutorials ===
+
{| class="ts"
''These tutorials are intended for Visionaire Studio 4.x. Actually these videos document the creation & development process of Andi's submission for the Visionaire Studio 4.x Demo Game Competition.''
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | Fantasy Quest Development Videos
 
|-
 
| 01 || [https://www.youtube.com/watch?v=TUVE8BmsC7I Introduction, setup & interface]
 
|-
 
| 02 || [https://www.youtube.com/watch?v=G8JPUGDLPxc Scenes, room artwork, layers]
 
|-
 
| 03 || [https://www.youtube.com/watch?v=rnjdbsTmNsM Character animations & setup]
 
 
|-
 
|-
| 04 || [https://www.youtube.com/watch?v=QR279dgwDhw Interfaces, verb coins, cursors, fonts, walk-able areas]
+
|<gallery>
|-
+
File:dyn_light_001.png
| 05 || [https://www.youtube.com/watch?v=Ug11uFbRsc8 Objects, visible condition, changing rooms]
+
File:dyn_light_002.png
 +
File:dyn_light_003.png
 +
File:dyn_light_004.png
 +
</gallery>
 
|}
 
|}
  
 +
=== Flicker ===
 +
This is the more complicated of the 2 methods as it requires additional values, actions & if queries to create the flicker effect. This style of lighting is good for neon lights or in scenarios that require the lighting to flicker on/off.
 +
 +
1. You should create some lighting in your preferred graphic/3D program of choice. Don't forget to use feather/anti-aliasing to create smooth edges for your lighting. Blur is ok too. Background should be transparent.<br/>
 +
2. First off you are going to want to create an object in your scene that you will be assigning the lighting image to.<br/>
 +
3. Go to '''scene > value''' & create 2 new values. These values will be used to control the transition delay & the amount of times the image should flicker.<br/>
 +
4. Go to: '''scene > actions''' & create an '''at begin of scene''' action & a '''called by other action''' action. Make sure you give the '''called by other action''' an appropriate name.<br/>
 +
5. Inside of the '''at begin of scene''' action: add a '''call action "called_by_other_action_name"''' action (step is optional depending on how light is triggered)<br/>
 +
6. Inside of the '''called by other action''' action you should include these action parts...
 +
<syntaxhighlight>
 +
if value 'flicker_value_name' > 0
 +
value 'flicker_value_name' - 1 -- remove 1 from value.
 +
set random value in 'value_name' between x and y -- sets random delay between x & y ms.
 +
execute script > (see first code block below)
 +
pause for 'delay_value_name' millisecond(s) -- linked to delay value.
 +
jump to action part #1 -- forces loop from beginning.
 +
else -- if flicker value = 0 then...
 +
execute a script > (see second code block below)
 +
set random value in 'flicker_value_name' between x & y -- set next random flicker value.
 +
set random value in 'delay_value_name' between x & y -- set random delay value between next set of light flickers.
 +
pause for 'delay_value_name' millisecond(s) -- linked to delay value.
 +
jump to action part #1 -- forces loop from beginning.
 +
</syntaxhighlight>
  
=== Redspark's Video Tutorials ===
+
<syntaxhighlight>
''These tutorials are intended for Visionaire Studio 4.x.''
+
Objects["object_name"]:to(Values["delay_value_name"].Int, {ObjectVisibility = math.random(25,100)}, easeQuintOut) -- fade to random opacity value between 25-100% with smooth ending
{| class="ts sortable" style="width:100%"
+
</syntaxhighlight>
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | Miscellaneous
 
|-
 
| 01 || [https://www.youtube.com/watch?v=2wtMCgcyA0M Setting up a Visionaire project]
 
|}
 
----
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | New Game Essentials
 
|-
 
| 01 || [https://www.youtube.com/watch?v=ZmS--K7nwfU Starting a new adventure]
 
|-
 
| 02 || [https://www.youtube.com/watch?v=HgBGYgbImqo Making a scene]
 
|-
 
| 03 || [https://www.youtube.com/watch?v=WEaGAp9KM2M Character building]
 
|-
 
| 04 || [https://www.youtube.com/watch?v=TE_ug0Z__sc Of mice and interfaces]
 
|-
 
| 05 || [https://www.youtube.com/watch?v=R6ljgJkKlks Fee, fi, fo font]
 
|}
 
----
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | The Scenic Route
 
|-
 
| 01 || [https://www.youtube.com/watch?v=3XzlfonP-pQ The way of the waypoint]
 
|-
 
| 02 || [https://www.youtube.com/watch?v=UdLvlnPS_Xo A behind the scene objects view]
 
|-
 
| 03 || [https://www.youtube.com/watch?v=oLV7ZikWi6c Reading the signs]
 
|-
 
| 04 || [https://www.youtube.com/watch?v=F6t9MwkBKQU Snooping around]
 
|-
 
| 05 || [https://www.youtube.com/watch?v=USj6U3zqGGc Bride of waypoint]
 
|}
 
----
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | Game Assets
 
|-
 
| 01 || [https://www.youtube.com/watch?v=R9bxuitOPZk Creating bitmap fonts]
 
|}
 
  
 +
<syntaxhighlight>
 +
Objects["object_name"]:to(300, {ObjectVisibility = 0}, easeQuintOut) -- fade to 0% opacity over 300ms with smooth ending
 +
</syntaxhighlight>
  
=== Sebastian's Video Tutorials ===
+
{| class="ts"
''These tutorials are intended for Visionaire Studio 5.x. Playlist: [https://www.youtube.com/playlist?list=PLa6srWP2Al8_dKXaqkmZgfrloQzlTHNWD here].''
 
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | The Hitchhiker's Guide to Visionaire Studio 5 [DE] (English subs coming later)
 
|-
 
| 00 || [https://www.youtube.com/watch?v=cyMbp_FE0nc Vorstellung (introduction)]
 
|-
 
| 01 || [https://www.youtube.com/watch?v=wkxxPAMyBzE Projektplanung & Übersicht (project planning & overview)]
 
|-
 
| 02 || [https://www.youtube.com/watch?v=hp2K1HynK8U Mauszeiger, Schriftarten & Charaktere (mouse cursors, fonts & characters)]
 
|-
 
| 03 || [https://www.youtube.com/watch?v=c8AkL4o93xk Erste Szene & Wegsysteme (first scene & way system)]
 
|-
 
| 04 || [https://www.youtube.com/watch?v=bRy_hjJFfLw Charakterskalierung & Lightmaps (character scaling & lightmaps)]
 
|-
 
| 05 || [https://www.youtube.com/watch?v=2XCiFgKlYLI Deponia / Baphomets Fluch 1-Click Interface (single command interface aka broken sword interface)]
 
|-
 
| 06 || [https://www.youtube.com/watch?v=NrxN9txfVLw Sam & Max Hit the Road Interface (cycle command interface aka sam & max interface)]
 
|-
 
| 07 || [https://www.youtube.com/watch?v=xZxErCsbZLs SCUMM Interface]
 
|-
 
| 08 || [https://www.youtube.com/watch?v=rjejktxXQTw Verb Coin Interface]
 
|-
 
| 09 || [https://www.youtube.com/watch?v=ZWFwS3m4gdw Items]
 
|-
 
| 10 || [https://www.youtube.com/watch?v=0wUAjjXaejw Das klassische Inventar (classic point & click inventory)]
 
|-
 
| 11 || [https://www.youtube.com/watch?v=n6q0jNcLjFA Das moderne Inventar (drag & drop inventory system)]
 
 
|-
 
|-
| 12 || [https://www.youtube.com/watch?v=YGv4MJ67_Kk Kommentargruppen (comment sets)]
+
|<gallery>
 +
File:dyn_light_001.png
 +
File:dyn_light_005.png
 +
File:dyn_light_006.png
 +
File:dyn_light_007.png
 +
</gallery>
 
|}
 
|}
 +
7. Rinse & repeat the process for other images you want to control with this method. If you don't mind all images being adjusted at the same time, then you could even add them to the '''execute a script''' code mentioned above.
  
  
=== Suro's Video Tutorials ===
+
== Resources ==
''These tutorials are intended for Visionaire Studio 3.x.''
+
{| class="ts"
{| class="ts sortable" style="width:100%"
 
|-
 
! style="text-align:left; width:30px;" | #
 
! style="text-align:left" | Visionaire Tutorials
 
 
|-
 
|-
| 01 || [https://www.youtube.com/watch?v=iBDEGc4-K5U Basic character setup]
+
! style="text-align:left" | Name !! style="text-align:left" | Description
 
|-
 
|-
| 02 || [https://www.youtube.com/watch?v=_YML2b52Kuo Setting up the game]
+
| [[media:dynamic_lighting.zip|dynamic_lighting.zip]] || A working .ved file, complete with resources. Check out the readme.txt file for instructions.
|-
+
|}
| 03 || [https://www.youtube.com/watch?v=ZetQOMDfnlw Aaaand action!]
+
{{i18n|Dynamic_Lighting_(h2)}}{{toc}}
|}{{toc}}
 

Revision as of 21:26, 1 November 2014

Name By
Dynamic Lighting (image based) AFRLme


This tutorial shows you how to create a dynamic light using static images. Dynamic light using images works by creating an image containing the lighting/glow with a transparent background. We then use random values to control the opacity & transition time between current opacity value & the target opacity value. Overall this creates a pretty neat effect.


Tutorial

Constant

This is the simpler method of the 2 available. It constantly updates the opacity value of the image(s).

1. You should create some lighting in your preferred graphic/3D program of choice. Don't forget to use feather/anti-aliasing to create smooth edges for your lighting. Blur is ok too. Background should be transparent.
2. First off you are going to want to create an object in your scene that you will be assigning the lighting image to.
3. Go to scene > value & create a new value. This value will be used to control the transition delay.
4. Go to: scene > actions & create an at begin of scene action & a called by other action action. Make sure you give the called by other action an appropriate name.
5. Inside of the at begin of scene action: add a call action "called_by_other_action_name" action.
6. Inside of the called by other action action you should include these action parts...

set random value in 'value_name' between x and y -- sets random delay between x & y ms.
execute script > (see code block below)
pause for 'value_name' millisecond(s) -- linked to value.
jump to action part #1 -- forces loop from beginning.
Objects["object_name"]:to(Values["value_name"].Int, {ObjectVisibility = math.random(75,100)}, easeQuintOut) -- fade to random opacity value between 75-100% with smooth ending

7. Rinse & repeat the process for other images you want to control with this method. If you don't mind all images being adjusted at the same time, then you could even add them to the execute a script code mentioned above.

Flicker

This is the more complicated of the 2 methods as it requires additional values, actions & if queries to create the flicker effect. This style of lighting is good for neon lights or in scenarios that require the lighting to flicker on/off.

1. You should create some lighting in your preferred graphic/3D program of choice. Don't forget to use feather/anti-aliasing to create smooth edges for your lighting. Blur is ok too. Background should be transparent.
2. First off you are going to want to create an object in your scene that you will be assigning the lighting image to.
3. Go to scene > value & create 2 new values. These values will be used to control the transition delay & the amount of times the image should flicker.
4. Go to: scene > actions & create an at begin of scene action & a called by other action action. Make sure you give the called by other action an appropriate name.
5. Inside of the at begin of scene action: add a call action "called_by_other_action_name" action (step is optional depending on how light is triggered)
6. Inside of the called by other action action you should include these action parts...

if value 'flicker_value_name' > 0
 value 'flicker_value_name' - 1 -- remove 1 from value.
 set random value in 'value_name' between x and y -- sets random delay between x & y ms.
 execute script > (see first code block below)
 pause for 'delay_value_name' millisecond(s) -- linked to delay value.
 jump to action part #1 -- forces loop from beginning.
else -- if flicker value = 0 then...
 execute a script > (see second code block below)
 set random value in 'flicker_value_name' between x & y -- set next random flicker value.
 set random value in 'delay_value_name' between x & y -- set random delay value between next set of light flickers.
 pause for 'delay_value_name' millisecond(s) -- linked to delay value.
 jump to action part #1 -- forces loop from beginning.
Objects["object_name"]:to(Values["delay_value_name"].Int, {ObjectVisibility = math.random(25,100)}, easeQuintOut) -- fade to random opacity value between 25-100% with smooth ending
Objects["object_name"]:to(300, {ObjectVisibility = 0}, easeQuintOut) -- fade to 0% opacity over 300ms with smooth ending

7. Rinse & repeat the process for other images you want to control with this method. If you don't mind all images being adjusted at the same time, then you could even add them to the execute a script code mentioned above.


Resources

Name Description
dynamic_lighting.zip A working .ved file, complete with resources. Check out the readme.txt file for instructions.