GameDev from scratch: Unity3D and vector graphics
OVIVO continue to talk about their experience in game development. The article will be primarily interesting to newcomers to game devs and to those who have already mastered the basics of working with Unity. Word of the author. :)
1. From the hackathon to our own game development studio: part 1 , part 2 .
2. Unity3D and vector graphics .
3. How to communicate with the player without words .
4. How to get out of chaos and start working .
Hi, Habr! I’m doing the software part of the OVIVO game and I want to share with the community my experience in implementing vector graphics in Unity. Below I will briefly describe the structure of SVG files, talk about my own tests and errors, and also show the result.
')
We have empty space filled with white color. Add there black blots. Since these blots are an interactive element of a 2D game, we will call them platforms. There is also a round character that can move around the platforms and jump from one color to another. When a player is in the white world, he is affected by downward gravity. If he found himself inside a black platform, then he pulls up. Moving between two worlds, the player maintains momentum, so that he can overcome obstacles that require a certain jumping ability. So sounds a brief description of the basic mechanics of our game.
But today, let's talk not about the mechanics, but about these black blots. Since the platforms have a relatively simple form and are painted in just one color, any vector graphics editor will be an ideal tool for creating them. Before my joining the team, the guys rasterized and operated on bulky sprites in the Unity environment. And they were cumbersome because they required high clarity of the picture, therefore, it was impossible to save on the resolution of sprites. For two months we were tormented by the question of using a raster. All methods have been tried, but either the size of the build was over one gigabyte, or the mobile systems could not withstand such resource consumption. And once I wondered what vector graphics are and what they eat with. In our case, everything turned out to be extremely simple: only Bezier curves and some geometric primitives are used. And the most remarkable discovery for me was the SVG format, into which you could easily export all of our graphics. I was very happy to find out that this is just an XML document.
Before parsing SVG, it was necessary to clearly define how we will display all this in Unity. The most obvious solution is to use a mesh (Mesh) . Since our platforms are closed figures, their contour can be represented as points sequentially interconnected, and thanks to triangulation, create a suitable set of polygons that will serve as a fill for this figure.
We also wrap each platform with an Edge Collider (EdgeCollider2D is one of the collider types in Unity3D, which is a broken line). It is necessary to determine the intersection of the character of the platform contour in order to change the gravity vector at the right moment. Thus, we must kill two birds with one stone: draw graphics and, based on the same data, supplement the platform with physical characteristics.
I will not talk in detail about the structure and all the possibilities of SVG, but I’ll dwell on one of its elements - path . After all, almost all the data we are interested in is stored here. You need to pay attention to the attribute d , in which information is recorded about all series-connected lines that form a single figure.
As you can see from the example, the set of numbers can be turned into a smooth figure.
Looking ahead, I can say that only in one d attribute of a single path you can draw an unlimited number of shapes, be they closed contours or arbitrary lines, but more on that later. Data from d can be conventionally divided into blocks with control points for each curve.
In working with each platform, we can ask it the accuracy of the contour construction. For example, if the number 8 is set, then each curve will be split into 8 segments. As a result, knowing the type of curve and owning all its control points, we can easily build a broken line, which at high accuracy will look like a smooth curve.
The path supports several types of Bezier curves and straight lines, so it was necessary to adjust the tool to parse each type. The most unpleasant moments arose with the format of the data record in the attribute d . Throughout the development of the game, the guys were constantly faced with the fact that certain vector sprites were simply not built, and my tool gave errors. As it turned out, different graphic editors (including different versions of the same brand) generated the SVG code often in different ways. For example, the same path can be written in various ways: using in some places upper case or lower case, space or a new line. I had to manually pick each such sprite and build my parser for the needs of artists. With that, the editors sometimes generated readable code, and sometimes they sculpted everything into one line. The matter with time was complicated by the fact that it was necessary to build a multitude of platforms recorded in one SVG file. Then it turned out that all the figures can be thrust into one element of the path . In fact, there were many other surprises that are no longer remembered. Then, of course, everything was written in haste, but for the future I learned a lesson for myself: first a detailed study of the specification, then a code .
In most cases, our accuracy was fixed, but the final picture did not always correspond to expectations. The higher the degree of curvature of the line, the greater the number of segments it needs to be broken to create a smooth effect. As a test feature, I added the ability to automatically determine the accuracy depending on the curvature of the line, but later we switched to manual adjustment of the contour accuracy.
Sometimes it was necessary to correct a very small piece of the grid, but I did not want to increase the accuracy of the whole figure. Since the objects in the scene are not tied to any assets in the project, in each platform I just in case kept the XML text on which it was possible to parse the graphics. Thus, having the ability to pull up any piece of the platform in the form of a curve, we could theoretically correct the grid and the collider only at specific intervals. Although we had to slightly break the automatism in the calculation of points, but in the end we got a small utility that allows us to set the accuracy of individual curves from the platform.
The practical application of such a tool comes down to two tasks:
Alternative solutions from third-party developers
About six months ago, the question arose of drawing even more highly detailed and complex sprites. I needed stability that my tool could not guarantee yet. As a result, they began to look towards buying a third-party plug-in from the Asset Store. The choice was between Simply SVG and SVG Importer . As a result, having studied the video materials, documentation and reviews of the two products, we stopped at the second version.
However, we didn’t refuse to use my tool. Its important features are the ability to construct an Edge Collider and edit the accuracy of individual curves. Of course, all this could be written on top of the purchased plug-in, but when you are actively preparing for release, you want to focus on more pressing things and not touch what has already been tested and works great.
At the beginning of development, we did not pay attention to the study of ready-made solutions and immediately began to write our own bicycle. One can regret for a long time about the time spent and guess on the topic “what would happen if ...”, but, nevertheless, I am very glad to receive such experience. It was the very same not routine, which I was programming with a spark in my eyes .
Personally, I believe that the Unity team will soon add support for vector graphics out of the box. Thanks to the method described in the article, you can forget about the problems of resource consumption on at least mobile platforms and concentrate on more important things. Of course, not everyone now draws graphics for 2D games in a vector, but I am sure that the transition to it will be fully justified if the size of the distribution kit inflated with cumbersome resources comes first.
Thank you for attention. All personal questions and comments, please send squakoon_jr .
The series of articles "GameDev from scratch"
1. From the hackathon to our own game development studio: part 1 , part 2 .
2. Unity3D and vector graphics .
3. How to communicate with the player without words .
4. How to get out of chaos and start working .
Hi, Habr! I’m doing the software part of the OVIVO game and I want to share with the community my experience in implementing vector graphics in Unity. Below I will briefly describe the structure of SVG files, talk about my own tests and errors, and also show the result.
')
Formulation of the problem
We have empty space filled with white color. Add there black blots. Since these blots are an interactive element of a 2D game, we will call them platforms. There is also a round character that can move around the platforms and jump from one color to another. When a player is in the white world, he is affected by downward gravity. If he found himself inside a black platform, then he pulls up. Moving between two worlds, the player maintains momentum, so that he can overcome obstacles that require a certain jumping ability. So sounds a brief description of the basic mechanics of our game.
But today, let's talk not about the mechanics, but about these black blots. Since the platforms have a relatively simple form and are painted in just one color, any vector graphics editor will be an ideal tool for creating them. Before my joining the team, the guys rasterized and operated on bulky sprites in the Unity environment. And they were cumbersome because they required high clarity of the picture, therefore, it was impossible to save on the resolution of sprites. For two months we were tormented by the question of using a raster. All methods have been tried, but either the size of the build was over one gigabyte, or the mobile systems could not withstand such resource consumption. And once I wondered what vector graphics are and what they eat with. In our case, everything turned out to be extremely simple: only Bezier curves and some geometric primitives are used. And the most remarkable discovery for me was the SVG format, into which you could easily export all of our graphics. I was very happy to find out that this is just an XML document.
Before parsing SVG, it was necessary to clearly define how we will display all this in Unity. The most obvious solution is to use a mesh (Mesh) . Since our platforms are closed figures, their contour can be represented as points sequentially interconnected, and thanks to triangulation, create a suitable set of polygons that will serve as a fill for this figure.
We also wrap each platform with an Edge Collider (EdgeCollider2D is one of the collider types in Unity3D, which is a broken line). It is necessary to determine the intersection of the character of the platform contour in order to change the gravity vector at the right moment. Thus, we must kill two birds with one stone: draw graphics and, based on the same data, supplement the platform with physical characteristics.
Description of the solution method
I will not talk in detail about the structure and all the possibilities of SVG, but I’ll dwell on one of its elements - path . After all, almost all the data we are interested in is stored here. You need to pay attention to the attribute d , in which information is recorded about all series-connected lines that form a single figure.
As you can see from the example, the set of numbers can be turned into a smooth figure.
<path d="M250.74,263.55C110.9,271.94,26.38,53.78,37.84,44.19,47.66,36,129.46,179.64,255.58,179.68
c92.05,0,152.25-76.47,161.29-66.13C427.82,126.07,356.16,257.22,250.74,263.55Z"/>Looking ahead, I can say that only in one d attribute of a single path you can draw an unlimited number of shapes, be they closed contours or arbitrary lines, but more on that later. Data from d can be conventionally divided into blocks with control points for each curve.
In working with each platform, we can ask it the accuracy of the contour construction. For example, if the number 8 is set, then each curve will be split into 8 segments. As a result, knowing the type of curve and owning all its control points, we can easily build a broken line, which at high accuracy will look like a smooth curve.
The path supports several types of Bezier curves and straight lines, so it was necessary to adjust the tool to parse each type. The most unpleasant moments arose with the format of the data record in the attribute d . Throughout the development of the game, the guys were constantly faced with the fact that certain vector sprites were simply not built, and my tool gave errors. As it turned out, different graphic editors (including different versions of the same brand) generated the SVG code often in different ways. For example, the same path can be written in various ways: using in some places upper case or lower case, space or a new line. I had to manually pick each such sprite and build my parser for the needs of artists. With that, the editors sometimes generated readable code, and sometimes they sculpted everything into one line. The matter with time was complicated by the fact that it was necessary to build a multitude of platforms recorded in one SVG file. Then it turned out that all the figures can be thrust into one element of the path . In fact, there were many other surprises that are no longer remembered. Then, of course, everything was written in haste, but for the future I learned a lesson for myself: first a detailed study of the specification, then a code .
In most cases, our accuracy was fixed, but the final picture did not always correspond to expectations. The higher the degree of curvature of the line, the greater the number of segments it needs to be broken to create a smooth effect. As a test feature, I added the ability to automatically determine the accuracy depending on the curvature of the line, but later we switched to manual adjustment of the contour accuracy.
Sometimes it was necessary to correct a very small piece of the grid, but I did not want to increase the accuracy of the whole figure. Since the objects in the scene are not tied to any assets in the project, in each platform I just in case kept the XML text on which it was possible to parse the graphics. Thus, having the ability to pull up any piece of the platform in the form of a curve, we could theoretically correct the grid and the collider only at specific intervals. Although we had to slightly break the automatism in the calculation of points, but in the end we got a small utility that allows us to set the accuracy of individual curves from the platform.
The practical application of such a tool comes down to two tasks:
- Increase the accuracy of graphics in particularly intricate places.
- Reduce the accuracy of colliders on areas of the platform where the player will not get.
Alternative solutions from third-party developers
About six months ago, the question arose of drawing even more highly detailed and complex sprites. I needed stability that my tool could not guarantee yet. As a result, they began to look towards buying a third-party plug-in from the Asset Store. The choice was between Simply SVG and SVG Importer . As a result, having studied the video materials, documentation and reviews of the two products, we stopped at the second version.
However, we didn’t refuse to use my tool. Its important features are the ability to construct an Edge Collider and edit the accuracy of individual curves. Of course, all this could be written on top of the purchased plug-in, but when you are actively preparing for release, you want to focus on more pressing things and not touch what has already been tested and works great.
Epilogue
At the beginning of development, we did not pay attention to the study of ready-made solutions and immediately began to write our own bicycle. One can regret for a long time about the time spent and guess on the topic “what would happen if ...”, but, nevertheless, I am very glad to receive such experience. It was the very same not routine, which I was programming with a spark in my eyes .
Personally, I believe that the Unity team will soon add support for vector graphics out of the box. Thanks to the method described in the article, you can forget about the problems of resource consumption on at least mobile platforms and concentrate on more important things. Of course, not everyone now draws graphics for 2D games in a vector, but I am sure that the transition to it will be fully justified if the size of the distribution kit inflated with cumbersome resources comes first.
Thank you for attention. All personal questions and comments, please send squakoon_jr .
Source: https://habr.com/ru/post/326262/
All Articles