Vector Graphics in Unity
-
Upload
jaroslav-stehlik -
Category
Technology
-
view
484 -
download
3
Transcript of Vector Graphics in Unity
![Page 1: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/1.jpg)
Vector Graphicsfor Unity
SVG importer
![Page 2: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/2.jpg)
SVG importer
Jaroslav Stehlíkhead developer at Silicon Jelly
founder of SVG Importer
@jaroslavstehlik [email protected]
![Page 3: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/3.jpg)
Vector Graphics vs Textures
SVG importer
![Page 4: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/4.jpg)
SVG importer
Vector Graphics vs Textures
"Why does my art look blurry and jagged?"
"My gradients are not smooth enough!"
"Why is my game so huge?"
Textures sometimes sucks...
![Page 5: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/5.jpg)
Textures
Fixed resolution
Huge file sizes
SVG importer
Vector Graphics vs Textures
Vector Graphics
1 MBRGBA Texture
20 MB
Property of Silicon Jelly
![Page 6: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/6.jpg)
Textures
Fixed resolution
Huge file sizes
Compression artefacts
NPOT mostly Uncompressed
SVG importer
Vector Graphics vs Textures
Vector Graphics
1 MB
POT stretched PVRTC Compressed 4K texture
8 MB
Property of Silicon Jelly
![Page 7: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/7.jpg)
Textures
Fixed resolution
Huge file sizes
Compression artefacts
NPOT mostly Uncompressed
Never ending compressions
SVG importer
Vector Graphics vs Textures
Import time 0.06s
Import and compression time 32s
Property of Silicon Jelly
![Page 8: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/8.jpg)
Vector Graphics
Clean and sharp
Smooth gradients
Resolution Independent
Tiny file size
Complex to render
SVG importer
Vector Graphics vs Textures
Property of Silicon Jelly
![Page 9: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/9.jpg)
Textures forPhotoreal, paintings, animations
SVG importer
Vector Graphics vs Textures
Property of Silicon JellyProperty of Silicon Jelly
Vector Graphics forComics, cartoon, UI, Motion design
![Page 10: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/10.jpg)
Realtime demosupports HTML 5
SVG importer
![Page 11: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/11.jpg)
Effective Workflow
SVG importer
![Page 12: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/12.jpg)
SVG importer
Effective Workflow
"Sprites are easy to use"
Because Unity done it right!
"Let's make Vector Graphics easy as well"
Done!
![Page 13: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/13.jpg)
SVG importer
Effective Workflow
DEMO
![Page 14: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/14.jpg)
Resolution independent UI
SVG importer
![Page 15: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/15.jpg)
SVG importer
Resolution independent UI
"Unity UI is awesome!"
But why bother with screen resolution?
"Most UI are just shapes"
why not use Vector Graphics?
![Page 16: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/16.jpg)
SVG importer
Fast mockups
DEMO
![Page 17: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/17.jpg)
SVG importer
Mobile performance
![Page 18: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/18.jpg)
SVG importer
Mobile performance
Vector Graphics is baked into meshes
Optimised tessellation
No CPU overhead
Fast simple shaders
Better memory footprint and smaller build sizes.
Possible LOD groups in future
![Page 19: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/19.jpg)
SVG importer
Tested in the wild
![Page 20: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/20.jpg)
SVG importer
Mimpi Dreams
First world premiere
Puzzle Platformer
Completely done with SVG Importer
Mainly designed for mobile and tablets
![Page 21: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/21.jpg)
SVG importer
Mimpi Dreams
DEMO
![Page 22: Vector Graphics in Unity](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c13be6bb61eba3028b4625/html5/thumbnails/22.jpg)
SVG importer
Thank You!
Any questions ?
Jaroslav Stehliksvgimporter.com