VectorGraphicsを触ってみる
【はじめに】
UnityはSVGファイル(スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics)を使用できる(プレビュー機能)。
◆環境
Unity:Unity 2019.3.2f1
テンプレート:Universal Project Template
【詳細】
www.slideshare.net
【導入】
スライドの8ページ目の通り
- Vector Graphicsを導入しないと、SVGファイルをD&DしてもUnityで使用できるアセットにならない
- 2020/05/16 執筆時UnityのVectorGraphicsはPreview機能
【スライドのサンプルコードおためし(34ページあたり)】
◆準備
- Sprite用意:Hierarchy 右クリック > 2D > Sprite
- マテリアルを新規作成してアッタチ:(Sprite Renderer の Colorで色を変えるため。ShaderはUnlit/Vectorを選択)
マテリアルのEnable GPU Instancingにチェックを入れると、SpriteRendererのColorの指定がSpriteに反映されます。
◆スクリプト
適当なGameObjectにアタッチ
using System.Collections; using System.Collections.Generic; using UnityEngine; using Unity.VectorGraphics; public class BuildSpriteScript : MonoBehaviour { [SerializeField] SpriteRenderer spriteRenderer; void Update() { if (Input.GetKeyDown(KeyCode.B)) { BuildSprite(); } } public void BuildSprite() { // ベジェ曲線の情報を詰めるシェイプ定義 var shape = new Shape(); // シェイプに円作成に必要な情報を詰める var position = Vector2.zero; float radius = 100f; VectorUtils.MakeCircleShape(shape, position, radius); // 円の色を指定する shape.Fill = new SolidFill() { Color = Color.white }; // 円のテッセレーションオプションを決める var options = new VectorUtils.TessellationOptions() { StepDistance = 10f, MaxCordDeviation = float.MaxValue, MaxTanAngleDeviation = Mathf.PI / 2.0f, SamplingStepSize = 0.01f }; // ジオメトリの作成 var node = new SceneNode() { Shapes = new List<Shape> { shape } }; var scene = new Scene() { Root = node }; var geoms = VectorUtils.TessellateScene(scene, options); // Sprite の作成と設定 var sprite = VectorUtils.BuildSprite( geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128); spriteRenderer.sprite = sprite; } }
実行してBキーを押すとスプライトが生成されます。
【そのほか】
自分でSVGを用意してインポートしたなら...
Hierarchy > UI > SVGImageで画面に表示したり、
Canvasを使わないなら Assets > Create > Shader > 2D Renderer > Sprite Lit Graph (Experimental) でシェーダー作って表示させてみたり
など。