0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[UIToolKit] 複数のVisualTreeAssetをスライドさせたい!

Posted at

概要

ゲームのチュートリアル等を作成する際に、説明を記した複数のVisualTreeAssetをスライドして表示したく、作成しました。

特徴

  • 左右の矢印ボタンをクリックで左右にスライド
  • 右上の閉じるボタンをクリックでスライドを非表示
  • スライドの上で左クリック押下→マウスを動かすことでもスライド可
  • スマホのようなタッチ対応
  • Swipe()関数で任意のスライド位置に移動
  • 任意の時間でスライドアニメーション
  • スライド表示・非表示・スワイプ時にEventで任意の関数を実行

Qiita - GameScene - Web - Unity 6 (6000.0.31f1) DX11 2025-03-03 06-54-00 (1).gif

バージョン

Unity 6 (6000.0.31f1)

ソースコード

使い方

このカスタムUIElementはDOTWeenを使用しているため、インポートをお願いします。

  1. githubより、Swiper.cs,SwiperData.csをプロジェクト内にインポート
  2. プロジェクト内で右クリック→作成→CustomUIElements→SwiperDataを選択
  3. 作成されたSwiperDataのSlideListにスライドさせたいVisualTreeAssetを代入

image.png

4. 新規UIDocumentを作成し、LibraryのProjectにあるSwiperを選択
5. 作成したSwiperを選択し、インスペクター上のAttributes欄で必要なデータを代入

  • SlideData - 先ほど作成したSwiperData
  • TransitionTime - スライドにかかる時間
  • Rightarrowtexture - 右へスライドさせるボタンのテクスチャ
  • Leftarrowtexture - 左へスライドさせるボタンのテクスチャ
  • Closetexture - Swiperを非表示にするボタンのテクスチャ

image.png

※UIBuilder上では、Previewを押してもスライドされません。ゲームビューで確認してください。

左右の矢印をクリックすることで、隣のスライドへ移動します。
また、スライドをクリックしながら、マウスを移動させる事でもスライドすることができます。
コード上でスライドさせたい場合は、Swipe関数で任意の位置にスライドできます。
Show関数、Hide関数でスライドを表示、非表示にできます。

// 任意の位置へスライド
Swipe(1)

// 要素を表示
Show()

//  要素を非表示
Hide()

SwiperData.csの存在意義

SwiperData.cはスライドしたいVisualTreeAssetのリストを保存するScriptableObjectです。
なぜこれを作成するかというと、Swiper.csで直接Listとすると、保存や、Unityの再起動を行ったタイミングで参照が外れてしまうことが頻繁に発生したため、ScriptableObjectとして参照し、参照外れを防いでいます。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?