FC2ブログ
    09 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 11

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

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【ハルシオンブログ】Unityであのスナップするスクロールが簡単に作れるアセットがあったよ!アセットの紹介 

    こんにちは。坂内っす。

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

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



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

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

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

    [Simple Scroll Snap]


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

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



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



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

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

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



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



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



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



    はい、こんな感じ。

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


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

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



    ①まずは、デフォルトについている1~5のオブジェクトを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)

    tb 0 : cm 0   

    コメント

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/720-0b92a2a7
    この記事にトラックバックする(FC2ブログユーザー)