Creating a UI Line Renderer in Unity

[Music] graphs are a great way to visualize data in your game i play a lot of management games which means that i spend quite a lot of time looking at what is essentially a visualization of a spreadsheet and whether it's a bar chart line graph pie chart or this thing plotting data from your game into a more readable format from the player can be an extremely valuable way to communicate what's going on for instance a line graph is a pretty common occurrence in a management game as a way to communicate financial data to the player and whether you're developing a management game or not at some point in your career you're probably going to want to draw a graph in unity's ui system you'll probably try adding a new game object into your canvas and then add the line renderer component but discover that line renderers only work on 3d meshes you idiot why would you even think that this would also work with the ui system hi there i'm matt and welcome to gamedev guide in this video we're going to build a line renderer component that works with unity's ui system we're going to start by looking at how we can extend the graphics class to draw custom shapes in our ui and build a basic graphing component we're then going to use that knowledge to build a line renderer that dynamically plots points on our graph and of course we'll then look at how to add some nice animations into the tool as well so let's get started alright so in order to draw lines on a graph the first thing we're going to need is a graph itself in earlier versions of this tool i would just use a square outline sprite like this tiled with the image renderer however the only issue with this is that you're tied to both the size and thickness of the source image you use which can be problematic especially if you want the distances of the lines of your graph to mean something using a tiled image can be quite tricky to get pixel perfect scaling for your graph coordinates in developing this video i actually realized that we can use the line rendering techniques i'm going to talk about to also draw the graph itself and the process of drawing out the graph is a useful introduction of how to draw shapes in the ui system anyway so that's where we're going to start we're going to write a component that dynamically draws a square cell and then tiles that cell based on a grid size i have a canvas here let's add a new game object to it and create a new script called ui grid renderer then let's have this script extend from the graphics class this may seem obvious but it's worth mentioning that unity's ui system just consists of meshes so the same concepts apply when trying to draw a custom ui image as they would rendering a mesh in 3d we give the renderer some vertices and then we connect them with some triangles the on populate mesh method of the graphics class is where our mesh is drawn to the screen so let's override it and tell unity to draw out a square we'll start by clearing the vertex helper cache then let's define the dimensions of our area to draw into which for now is just the height and width of our rect transform and then let's plot four vertices for each corner of our square and then add them to the vertex helper then we'll connect them with the add triangle method a square is made up of two triangles so we need to call this method twice and connect up the corresponding vertex numbers now we should have a set of vertices connected by two triangles wireframe or shaded wireframe mode is a good way to visualize this in our viewport so that's the gist of rendering an image to the ui system ultimately it's underwhelming but with this knowledge there's a lot of flexibility in what we can now draw we want our mesh to be the outline of a square so we need to draw an inner set of vertices and connect them up to our original set creating an outline mesh we can find the interior vertex positions using a distance value which we'll call thickness and our good friend pythagoras then we'll create four more vertices at our internal positions using our calculated value now we're going to draw eight triangles to connect up each edge of our shape in unity we should now have a square outline that adapts based on our thickness to get this to turn into a grid though we're going to have to iterate over our mesh code and make it a bit more dynamic let's add a new vector2 int called grid size that will determine how many rows and columns our grid will have in our method let's define a cell width value and a cell height value based on our total space and grid size then we'll write a for loop that iterates over the y axis and nests another for loop inside that iterates over our x-axis we're going to step through each coordinate and draw a cell so let's add an integer to keep count of our index as we iterate over the grid and just to keep the code a bit more organized let's create a new method called draw cell and copy our vertex code into there this method will take the current x and y coordinate of our cell as well as its index we'll also need to pass in our vertex helper finally all we have to do is localize the position of our cell relative to the x and y coordinate and pass that into each of our vertices then we also create an offset for our vertex numbers when we're constructing our triangles because we know each cell has eight vertices it's as simple as multiplying the current index of our cell by eight now back in unity we should have a fully functional grid rendered dynamically we should be able to change the size of it adjust thickness and scale the rect transform and it should update accordingly at this point we've gone through pretty much everything we're going to need to know to make our line renderer tool it's very much a case of repeating similar steps here to our grid component but just with fixed points in our transform instead so let's get stuck in and build out a line renderer shall we i want this tool to draw lines for a chart so i'm going to make my render a draw relative to a grid size and scale everything accordingly that way each point in the line renderer will line up nicely with our grid renderer let's keep this easy and start by drawing out a single point first we'll use the grid size to calculate the unit width and unit height then we'll plot two vertices at each point we'll turn this into a method so it's easier to work with we'll place each vertex at the unit width and unit height positions offset by half of the thickness so that our line is centered along its point once all of the vertices are added we then just draw the triangles because we're only plotting two vertices at a time we can ignore the last vertex point here now we have a line that plots relative to our grid size [Music] one useful thing we could do is have this read directly from our grid component so let's create a reference to the grid renderer and tell our script to set our grid size if it doesn't match now our line renderer moves relative to our grid component so this is good but our line is looking a little rough in places for instance if we set our point to be flat it disappears completely this is because we're currently setting the line along the x-axis what we need to do is rotate the vertices each point relative to the next point on the list this handy function will return an angle between two points that we can use we can then pass that angle into our function and rotate our vertices at the origin and then offset that by our position now we should have a line that updates the angle of our vertices to best draw the points on our line and that's pretty much all there is to building a line renderer in unity's ui system we can now duplicate this a few times and plot out a different number of lines the great thing about this too is that we can resize our grid element and our lines will stay uniform to the grid for that final touch let's also add a bit of animation to our graphic here this script basically snapshots the line resets it and then adds a new point at the previous point during each time interval and then tweens to its location and now our graph draws itself lovely that's pretty much all there is for today's video there's still some quirks here with the line thickness that could be solved by doubling down on the vertices at each point that would ensure that the thickness is then uniform but that also would leave gaps and so would require some sort of end cap functionality if you're after uniform edges it's probably a much cleaner way of doing it but it's a bit too much for this video for now hopefully many of you now have an even better understanding of how to draw meshes in the ui system and can build out your own renderer tools like this if you haven't already be sure to hit that like button and subscribe to the channel also if you're interested in more ui videos like this i've put together an entire playlist for you to peruse at your leisure as well as another video youtube thinks you might find interesting those are both linked on screen now until next time thank you very much for watching and i'll see you again very soon

Channel: Game Dev Guide

Views: 58,149

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games

Id: --LB7URk60A

Length: 9min 4sec (544 seconds)

Published: Mon Aug 03 2020