Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Unityでベクターファイル(SVG)を扱う4(画面遷移を作ってみる)

Last updated at Posted at 2020-09-25

はじめに

前回uGUIのマスクに使用できることがわかったので、今回はベクター画像をマスクとして使用した画面遷移を作ってみます

準備

ヒエラルキーはこんな構造にしておきます
image.png

  • BGTexture:マスクし、非表示部分となった個所に表示する画像
  • SVGMask:マスク本体
  • BeforeScreen:遷移前の画面
  • AfterScreen:遷移後の画面
  • Fade:マスク時に同時にかける白フェード

SVG MaskにSVG画像マスクを入れて置き、BeforeScreen画面のアクティブを切って、AfterScreen画面をアクティブにすることで遷移するものとします。
SVG Maskには、SVGImage、Maskコンポーネントを張っておきます
image.png

次に、スクリプト側からアニメーションを設定します。
_maskにSVG MaskのRectTransformを代入しておき、
DoTweenを使用して、少しずつ小さくします
_mask.DOSizeDelta(_loadingMaskSize, 0.8f).SetEase(Ease.OutBack, 0.5f)
ロードが終わったら、少しずつ大きくします
_mask.DOSizeDelta(_nonLoadingSize, 0.8f).SetEase(Ease.InBack, 0.5f)
それに合わせて、フェードやロード中のアニメーションをかけるとこんな感じになります

TogiMemo.gif
↑↑
製作中は、面白いもの作っちゃったなぁ...と思って作ってました。
作り終わってからしょうもないことに気づきました

SVGImageおよびSVG Mask周りの説明は以上ですが、この遷移について
細かいところ説明すると長くなるので、一応GitHubのリンク張っておきます。
https://github.com/Taka108/unity-svg-test

おわりに

まだ工夫次第で色々できそうですが、まだベータ版なので、触るのはこれくらいにしておきます。早くリリース版が出るといいなぁ。。

参考

校門
https://www.pixiv.net/artworks/12341534

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address