12
10

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 5 years have passed since last update.

gumi Inc.Advent Calendar 2018

Day 23

Unityの無限スクロールUI実装の一案

Posted at

なぜ実装したか

UnityAssetStoreなどにもGitHubなどにも調べるといくつかありますが(普通の実装)、今回私がやりたいことの実現が難しいものだったため実装(私の実装)を行いました。

普通の実装

一般的に公開されているものは以下のように設計で行わていることが多いです。

下記は、GameObjectがF,A,B,C,D,E,F,Aと8つあります。赤文字のものは2つ同じアルファベットのGameObjectがあることを表しています。つまり、別のGameObjectです。
after.PNG

少しスクロールするとこんな感じ。
before.PNG

このように画面外の見えていない部分に次のアルファベットがくるように書き換えて実装しているものが多いです。
基本的にこれで問題ないのですが、1つのGameObjectの構成が複雑な場合問題が発生します。
例えば書き換えコストが問題だったり、エフェクトなどの見え方の同期が複雑になりがちです。

私の実装

実装したものの都合上、横に置き換えています。
before.PNG

少しスクロールするとこんな感じ。
0(ゼロ)が画面半分にかかって、右半分が画面左、左半分が画面右に表示されているような感じです。
よくファミコンであった、スーパーマリオブラ〇ーズ、コンボイの謎、アイスクライマー、パルテナの鏡など、ファミコン時代によくキャラクターがこのような表示になりましたね。
after.PNG

違うところはは、赤文字の同じ数字の表示は、同じGameObjectです。
GameObjectも0,1,2,3,4と5個しかありません。
同じものを表示しているので、書き換えたりしないし、エフェクトも見え方も同期をとる必要がないということです。

仕組みは単純でカメラを2つ用意して、表示を合わせて描画するだけです。
1.PNG
2.PNG
↓ 表示を合わせる
3.PNG

実装プロジェクトです。
https://github.com/o-kuhiiro/MyScrollView
一応、uGUIのCanvasを使っていますが、考え方的には別の実装にも使えるかなと感じています。
3D的な扱いでないと2つのカメラで描画できないのでWorld Spaceを使っています。

12
10
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
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?