【小ネタ】LitMotionを使ってUI画像をスクロールさせる - 原カバンは鞄のお店ではありません。

WindowsUpdate

「更新してシャットダウン」を選ぶのに必ず再起動してしまう不憫属性な皆さんこんにちは。PCを閉じて会社を早く出たいのにUpdate後の再起動に時間を取られて帰れないのはきっとMicrosoftの罠だと思う。

CGWord.jp

先月、開発中のゲーム「Under A Groove」を東京ゲームダンジョン9の方へ出展したのですが、その際にCGWord.jp様にインタビューして頂き、その内容と共にCGWord.jpのサイトで「Under A Groove」を紹介して頂きました。ありがとうございます。

cgworld.jp

これまでメディアの方から取材をされるという事はなかったので非常に貴重な経験をさせて頂きました。ゲームの方も好意的に紹介して頂き有難い限りです。
同記事でピックアップされている他のゲームは非常にレベルが高く、それに並んで掲載されている事に肩身が狭い思いですが、この経験を糧に開発の方を引き続き頑張りたいと思います。

youtu.be

背景画像

最近のゲームではメニュー画面やオプション画面などの静的なUIが前面に来る画面では、背景画像にスクロールするパターン画像を使ってユーザの飽きが来ないように工夫されています。

背景のUIにパターン画像を表示されるのは非常に簡単で、最初にパターン表示される画像に対してTexture Type を Sprite（2D and UI）にWrap Mode を Repeat に設定します。

次にパターン画像を表示するPanelに対してImageコンポーネントのSource Image に、先ほど準備したSpriteを指定し、Image Type を Tiled に設定すれば

画面全体にパターン画像が繰り返し表示されるようになります。

ちなみに、この際、Pixels Per Unit Multiplier で繰り返しの表示サイズを調整することが出来ます。

Pixels Per Unit Multiplierを小さくした場合は・・・

繰り返しパターンが大きく表示され、逆に大きくした場合は

小さく表示されます。

画像のスクロール

画像スクロールを行うためにはImageコンポーネントからmaterialを取得し、そのプロパティ「mainTextureOffset」を変更することになります
mainTextureOffsetでは画像の表示開始位置をVector2で定義しているので、水平方向に動かす場合はX成分を、垂直方向に動かす場合はY成分を変更します。

docs.unity3d.com上のリンクでは画像のスクロール処理例としてmainTextureOffsetをUpdate関数内で変更していますが、それでは芸がないのでLitMotionを使った例を紹介します。

public float ScrollSpeed_Y = 1.0f;
private Image Panel_image;
private Material Panel_material;

private readonly CompositeMotionHandle Handles = new CompositeMotionHandle();

/// <summary>
/// 初期処理
/// </summary>
void Start()
{
  Panel_image = PanelObj.GetComponent<Image>();

  // 他に影響を与えないためにマテリアルを複製
  Panel_material = new Material(Panel_image.material);
  Panel_image.material = Panel_material;
}

void Update()
{
  // Sキー押下でスクロール開始
  if (Input.GetKeyUp(KeyCode.S))
  {
    Req_UIPanel_Scroll();
  }
  
  // Dキー押下でスクロール停止
  if (Input.GetKeyUp(KeyCode.D))
  {
    Handles.Cancel();
  }
}

public void Req_UIPanel_Scroll()
{
  LMotion.Create(0.0f, 1.0f, 1.0f)
    .WithLoops(-1, LoopType.Incremental)
    .WithEase(Ease.Linear)
    .Bind(value =>
    {
        Vector2 offset = new Vector2(value * ScrollSpeed_X, value * ScrollSpeed_Y);

        // 更新したオフセットをマテリアルに適用
        Panel_image.material.mainTextureOffset = offset;
    })
    .AddTo(Handles);    // Handleに紐づける
}