1 Welcome to using Vavi! V avi is a n easy - to - use tool that displays numbers as a visual icon for players . Vavi does not generate any art, instead it manipulates pre - existing art with fine - detail control and game - ready polish. Before you get started, it may be helpful to view the “Vavi Examples” scene. (Assets \ Vavi \ Scenes \ Vavi Examples) 2 Getting Started Creating your first Vavi 1. C reate a new game object attached to the canvas. Name it “ My First Vavi”. 2. A dd a Vavi component to the object . Under “Image Display”, select Auto Setup 3 3. This will create two child objects named Empty and Full As sign the same sprite to their ‘Source Image’ property in their Image components. Then, r eturn to “ My First Vavi” Designing your Vavi You don’t need to do any coding to design your Vavi! 1. Hit the first + button to add a transition, then choose your Display Mode 2. For each Display Mode, new Display Mode O ptions will a ppear underneath. They give control over more detailed parts of the Vavi’s appearance. You can hover over their property names to see their descriptions. 3. To add Text, choose “generate text object” Or, create a text or TextMeshPro object and drag it into the corresponding property. Then move and scale it to your preference, and set the Vavi’s text options. 4. To make it animated , set it’s animation values and read ahead to discover how to code your Vavi 5. Give your Vavi a unique “Vavi ID” that can be used to reference it in code. 4 Display Modes Fill The “full” image expands, cover ing the “empty” image behind it. Fill with B orders The “full” image expands while preserving any defined edges. Repeat The full image repeats in a line , covering the repeated empty image behind it. Position The full image positions between two transforms, approaching the second transform as the value declines. Scale The full image transitions between a defined minimum and maximum scale , replacing the empty image behind it. Rotation The full image rotates from a defined angle to another defined angle. Sprite Sequence The full image changes sprites, prog r essing through a list of sprites. Color Any image you choose transitions between a defined gradient of colors. Note: Vavi takes control of certain variables of the empty and full images in their ‘ RectTransform’ and ‘Image’ components. Attempting to modify them will have no result. This includes ‘Width’, ‘Height’, ‘Pivot’, ‘Fill Method’, ‘Image Type’, and ‘Pixels per Unit Multiplier’. These properties can be successfully modified from the Vavi compo nent. 5 Display Mode Options Fill Orientation – The axis that the image will fill along (horizontal, vertical, radial90, radial180, radial360) Fill Origin – if using a radial orientation , the quadrant to begin filling from Fill Clockwise – if using a radial orientation, whether it should fill clockwise or not Fill with Borders Orientation – The axis that the image will expand along (horizontal, vertical) Shrink Edges – Counts the edges as part of the depleting shape, depleting them after the middle. Repeat Orientation – The axis that the image will fill along (horizontal, vertical) Overflow Size Preservation – Which size to preserve when the value exceeds the max value , the shape or the bar. Position Max Point – The transform that the full i mage will move towards as the value increases Min Point – The transform that the full image will move towards as the value decreases MoveEmpty – Whether to move the empty image or not Size Max Scale – The full image's scale at max value Min Scale – The full image's scale at min value Pivot – The point of the image t hat the image will be scaled from Rotation Max Angle – The full image's rotation at max value Min Angle – The full image's rotation at min value Pivot – The point of the image that the image will be rotated around Sprite Sequence Sprite sequence – A list o f sprites that the Vavi will transition through List Index Mode – How to select a sprite as the value increases. Either by exact value, or fitting the minimum and maximum number to the beginning and end of the list. 6 Updating your Vavi in code 1. Access the Vavi classes by typi ng “ using Vavis ; ” above the class declaration. 2. Get a reference to your Vavi with the function GetVavi() . The Vavi must have a u nique “Vavi ID”, which can be set in the editor 3. Call the method ValueSet() to instantly set the Vavi’s Value. To animate the Vavi’s value over time, use ValueAnimate() 7 Methods Vavi.GetVavi Declaration public static Vavi GetVavi ( string ID ) Parameters ID The Vavi ID of the Vavi to return. Description Get s a reference to any Vavi in the scene using its Vavi ID. Example 8 Vavi.ValueSet Declaration public void ValueSet(float f) Parameters f T he number to set the value to. Description This method sets the value of the Vavi as well as updating its display. E xample 9 Vavi.ValueAnimate Declaration public void ValueAnimate(float newValue) public void ValueAnimate(float newValue , float duration ) public void ValueAnimate(float newValue , float duration, int fps ) Parameters newValue The value to animate to. d uration (optional) The time it takes to complete the animation fp s (optional) The frames per second the animation will render at. Description This method animates the value of the Vavi overtime. At the end of the animation, the value will be set to exactly newValue. Using ValueAnimate() again before the animation has finished will cancel the previous animation, beginning the an imation at the bar’s current progress level. You can see this method in action using the + and - b utton in the inspector. Example 10 Troubleshooting In editor mode, My Vavi won’t update even though “test mode” is enabled! Make sure that “Gizmos” are enabled. In Play Mode, some Vavis work, but others don’t! Make sure that each Vavi has a unique Vavi ID.