ハルシオンシステムの気ままBlog

こんにちは。坂内っす。

最近使ったUnityのアセットの紹介。

こういうのよく見ません？特にソシャゲとかであるやつなんすけど。



バナーが自動でスナップするやつ。

これが簡単に作れるので紹介です。

まずはこの無料のアセットを入れます。

[Simple Scroll Snap]


①SSSを追加
UI -> Simple Scroll-Snap -> Scroll-Snapを追加します。

こんな感じのものが作られます。



このまま実行してみましょう。



こんな感じものが簡単に作られます。

②無限に左右移動できるようにしよう

上記で作成したScroll-Snapのオブジェクトに「SimpleScrollSnap」のコンポーネントがついているので、その中の「InfiniteScrolling」にチェックを入れます。



これだけで無限スクロールができるようになります。



ただ、１－５の間に空白がないので、それを追加してあげましょう。



End Spacingに上部Spacingと同じ値を入れてあげましょう。
今回は0.25がSpacingに入っているので、それをEndSpacingに入れます。



はい、こんな感じ。

これで、簡単にスナップするスクロールが完成です。


デフォルトはこんな感じの構成になっています。

初めから表示する内容が決まっているならばこのままでいいのですが、画面起動時に表示する内容を変える場合は、以下の感じでできますね。

---

①まずは、デフォルトについている１～５のオブジェクトをScroll-Snapのオブジェクトから消す。

②中身用のクラスを作成
処理としては、InitImageに渡すファイル名の絵を用意するだけのもの

[ScrollItem.cs]

using UnityEngine;
using UnityEngine.UI;

public class ScrollItem : MonoBehaviour
{
    public Image img;

    public void InitImage(string fileName) {
        img.sprite = Resources.Load(fileName);
    }
}

③本処理で、②のScrollItemを作成する
[Blog20200727.cs]

using UnityEngine;

public class Blog20200727 : MonoBehaviour
{
    public Transform itemBase;
    public ScrollItem itemPrefab;

    void Start()
    {
        for (int i = 0; i < 3; i++) {
            ScrollItem item = Instantiate(itemPrefab, itemBase, false);
            item.InitImage("img" + (i + 1));
        }
    }
}

上記の処理だけで、こんな感じのができます。



また、自動送り機能は以下の感じでできました。

[Blog20200727.cs]

using UnityEngine;
using DanielLochner.Assets.SimpleScrollSnap;

public class Blog20200727 : MonoBehaviour
{
    public Transform itemBase;
    public ScrollItem itemPrefab;
    public SimpleScrollSnap scrollSnap;

    const float AUTO_FEEDING_TIME = 3.0f;
    float feedtimer = 0;

    void Start()
    {
        for (int i = 0; i < 3; i++) {
            ScrollItem item = Instantiate(itemPrefab, itemBase, false);
            item.InitImage("img" + (i + 1));
        }
    }

    private void Update() {
        feedtimer += Time.deltaTime;
        if (feedtimer >= AUTO_FEEDING_TIME) {
            feedtimer = 0;
            scrollSnap.GoToNextPanel();
        }
    }
}

とても素敵なアセットなので、是非お使いください！！



あでゅ～ノシ

Category: 開発日記（Unity）