Runes Demo Walkthrough
Going over the Runes demo.
In this walkthrough, we'll be going over the steps used to create the Runes demo.
1. Create a New Scene
Simply create a new scene and add the Initializer, Web View, and Hovercard (see Menu Options). Remove the existing prefab references from the Web View UGUI component.
2. Create Sprites
Create sprites for the background, all skills, and 2 new skill node UI prefabs. Additionally, create a sprite for the "core," a visual graphic used for the center of the web.
3. Apply Sprites
Apply the background to the Web View's child game object named "Content."
Add sprites to all necessary skills from the Skill Bank.
Create 2 new skill node UI prefabs and base the design off the sprites created for them. Check out UI Customizations. Provide the prefabs to the Web View UGUI component.
Create a new image object in the Web View UGUI's child game object named "GraphContent" and set the sprite to the core sprite.
4. Add Player Input
Copy the "PlayerInputExample" game object from the Sword Mastery ("Demo") scene and paste it into the new scene. Creating your own input script is recommended.
5. Create Stylized Connection UI
Create a new connection line prefab. Copy the shader found in Assets/StylishEsper/SkillWeb/DefaultStyle/ConnectionLine
, customize it, create a material, apply the shader to the material, and then apply the material to the new connection line. Check out UI Customizations. Add this prefab to the Web View UGUI component.
6. Curved Connections
Make two other copies of the new connection line prefab, replace the "Connection Line" component with "Curved Connection Line," and add them to the Web View UGUI component.
7. Create Web
Create a new web graph that will be used for this scene from the Web Creator.
8. Create Setup Script
Create a new component script that loads the new web graph through code with some custom lines that connect to the core. The script used for the Runes demo is below.
Last updated