Difference between revisions of "How to use the object mask plugin (h2)"

From The Official Visionaire Studio: Adventure Game Engine Wiki
(Created page with "{| class="ts" style="width:100%" |- ! style="text-align:left" | Name !! style="text-align:left;width:10%" | By |- | Pendulum Animation Playback (animation, lua) || AFRLme |}...")
 
m
 
(24 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
! style="text-align:left" | Name !! style="text-align:left;width:10%" | By
 
! style="text-align:left" | Name !! style="text-align:left;width:10%" | By
 
|-
 
|-
−
| Pendulum Animation Playback (animation, lua) || AFRLme
+
| How to use the object mask plugin (image, action parts) || AFRLme
 
|}
 
|}
  
−
This tutorial shows you how to apply a pendulum effect to your animations, so that you can make them play forwards then backwards or vice versa. The idea in itself is quite simple & it only requires 2 tiny lines of Lua script, however I do believe that a pendulum animation option should be included as a standard feature in Visionaire Studio be default, so here's hoping that it gets added at some point in the future.
+
This tutorial will show you how you can use the mask plugin for Visionaire Studio.  
  
 +
Masking is a process that involves using one image to mask another image, but what exactly is a mask? A mask determines which parts of the masked image/animation will be drawn in or hidden. Here is a quick example of an image, a mask & the end result.
 +
 +
''Currently only scenes, characters, & images/animations linked to scene objects can be masked.''
 +
 +
[[File:Mask_plugin_mask_explanation.png|800px]]
  
 
== Tutorial  ==
 
== Tutorial  ==
−
Start off by creating an animation & then you need to add all the frames that are required for playing the forward animation.
+
First things first, you will need to add the plugin to your game project. To do this, you will need to click on the plugin [[File:plugin25.png|25px|link=]] button.<br />Next click on the install button & wait for it to install. Once it's done, you should have access to 2 new action parts, but we will talk more about those later on.
 +
 
 +
[[File:Mask_plugin_(01).png|800px]]
 +
 
 +
Next you should create & import an image or animation that you want to mask.
 +
{| class="ts" style="width:100%"
 +
|-
 +
| ''Quick note: alpha transparency needs to be present in both the image/animation that you want to mask & the image that you will be using as the mask. If you are using a simple shape for the image, such as a square or rectangle, make sure you extend the canvas on all sides by a couple of pixels or so & that the canvas background is transparent. This seems to prevent any strange drawing behaviors when the engine calculates which parts of the masked image to draw in.''
 +
|}
  
−
<html><img src="https://wiki.visionaire-tracker.net/images/a/a8/Pendulum_tutorial_(step_1).gif" width="100%"/></html>
+
[[File:Mask plugin (02v2).png|frameless|800x800px]]
  
−
Next you need to select the first frame & then click on the edit button to open up the properties tab & then you need to click on the edit icon ( [[File:anim_editframe.png|16px|link=]] ), then you need to click on the create actions icon ( [[File:choose_action.png|16px|link=]] ) & then you need to create an '''execute a script''' action, which should contain something along the lines of this...
+
Now that you have an image you want to mask, you will need to create an image to use as a mask. Your mask image should comprise of white & alpha transparency. Only the parts of the masked image that overlap the white parts of the mask image will be drawn in.
−
<syntaxhighlight lang="lua">
 
−
ActiveAnimations["animation_name"].PlayOppositeDirection = false -- play animation forwards
 
−
</syntaxhighlight>
 
  
−
<html><img src="https://wiki.visionaire-tracker.net/images/a/a8/Pendulum_tutorial_(step_2).gif" width="100%"/></html>
+
Now create a new scene condition & name it something along the lines of '''mask''' - it doesn't actually matter what you call it - then link the condition to the properties section of the mask object. The condition will be used to hide the mask object, as we do not actually need to see the mask image in-game to be able to mask another image.
  
−
& now you need to do the same again for the last frame of the animation except the code you add should look something along the lines of...
+
[[File:Mask_plugin_(03v2).png|800px]]
−
<syntaxhighlight lang="lua">
 
−
ActiveAnimations["animation_name"].PlayOppositeDirection = true -- play animation in reverse
 
−
</syntaxhighlight>
 
  
−
{| class="ts"
+
The final step is to use the start mask on object action part that will allow you to specify the target (object, scene, or character) & the scene object that contains the mask. To make things simple, let's just apply the mask as soon as the scene loads.
−
|-
+
 
−
| ''Quick note: "animation_name" should be replaced with the actual name of the animation & remember the animation name is case sensitive.''
+
Click on the scene actions tab then click on the [[File:add_25.png|25px|link=]] button to create a new action. Set the action type as '''at beginning of scene''' & then click on the [[File:add_25.png|25px|link=]] button. Type "mask" into the search bar at the bottom of the action part selection modal. Select the '''mask object with object''' action part. Now link '''object''' to the scene object containing the image/animation you want to mask, then link '''mask''' to the scene object containing the image you want to use as the mask. Voila.
−
|}
 
  
−
[[File:pendulum_tutorial_(step_3).png|800px]]
+
[[File:Start_mask_plugin_(v2).gif|800px]]
  
 
== Reference Video ==
 
== Reference Video ==
−
<html><iframe width="800" height="450" src="https://www.youtube.com/embed/1f4urBiIB78" frameborder="0" allowfullscreen></iframe></html>
+
<html><iframe width="800" height="450" src="https://www.youtube.com/embed/EVsndUQ0VY0" frameborder="0" allowfullscreen></iframe></html>
  
 
== Resources ==
 
== Resources ==
Line 41: Line 47:
 
! style="text-align:left" | Name !! style="text-align:left" | Description
 
! style="text-align:left" | Name !! style="text-align:left" | Description
 
|-
 
|-
−
| [[media:pendulum_animation.zip|pendulum_animation.zip]] || A working .ved file, complete with resources. Check out the readme.txt file for instructions.
+
| [[media:Mask_example.zip|mask_example.zip]] || A working .ved file, complete with resources. Check out the readme.txt file for instructions.
 
|}{{toc}}
 
|}{{toc}}

Latest revision as of 20:28, 4 October 2018

Name By
How to use the object mask plugin (image, action parts) AFRLme

This tutorial will show you how you can use the mask plugin for Visionaire Studio.

Masking is a process that involves using one image to mask another image, but what exactly is a mask? A mask determines which parts of the masked image/animation will be drawn in or hidden. Here is a quick example of an image, a mask & the end result.

Currently only scenes, characters, & images/animations linked to scene objects can be masked.

Mask plugin mask explanation.png

Tutorial

First things first, you will need to add the plugin to your game project. To do this, you will need to click on the plugin Plugin25.png button.
Next click on the install button & wait for it to install. Once it's done, you should have access to 2 new action parts, but we will talk more about those later on.

Mask plugin (01).png

Next you should create & import an image or animation that you want to mask.

Quick note: alpha transparency needs to be present in both the image/animation that you want to mask & the image that you will be using as the mask. If you are using a simple shape for the image, such as a square or rectangle, make sure you extend the canvas on all sides by a couple of pixels or so & that the canvas background is transparent. This seems to prevent any strange drawing behaviors when the engine calculates which parts of the masked image to draw in.

Mask plugin (02v2).png

Now that you have an image you want to mask, you will need to create an image to use as a mask. Your mask image should comprise of white & alpha transparency. Only the parts of the masked image that overlap the white parts of the mask image will be drawn in.

Now create a new scene condition & name it something along the lines of mask - it doesn't actually matter what you call it - then link the condition to the properties section of the mask object. The condition will be used to hide the mask object, as we do not actually need to see the mask image in-game to be able to mask another image.

Mask plugin (03v2).png

The final step is to use the start mask on object action part that will allow you to specify the target (object, scene, or character) & the scene object that contains the mask. To make things simple, let's just apply the mask as soon as the scene loads.

Click on the scene actions tab then click on the Add 25.png button to create a new action. Set the action type as at beginning of scene & then click on the Add 25.png button. Type "mask" into the search bar at the bottom of the action part selection modal. Select the mask object with object action part. Now link object to the scene object containing the image/animation you want to mask, then link mask to the scene object containing the image you want to use as the mask. Voila.

Start mask plugin (v2).gif

Reference Video

Resources

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

Retrieved from "https://wiki.visionaire-tracker.net/index.php?title=How_to_use_the_object_mask_plugin_(h2)&oldid=9813"
  • Powered by MediaWiki