読者です 読者をやめる 読者になる 読者になる

デジタルフロッグ

Unityのアプリの開発をしながらいろいろと忘れないための備忘録でございます。

Unity スクロール画面を実装する

今日もせこせこアプリを作成しております。

使えるようになると結構いろいろと使いまわせて便利なスクロール画面の実装を今日は書いていこうと思います。

まずはCanvasをHierarchyのCreateボタンを押して作りましょう。

 

Imageを準備して名前をわかりやすいように「ScrollView」としました。

f:id:karaagedigital:20150514092627p:plain

 

コンポーネントにScroll RectとMaskを追加してください。

 

f:id:karaagedigital:20150514092628p:plain

 

そしてScrollViewの子オブジェクトに空のゲームオブジェクトを生成して下さい。

名前はContentとします。

ContentのコンポーネントにVertical Layout GroupとContent Size Filterの二つを追加し、Content Size FilterのVertical FitはPreferred Sizeに変更しておいてください。

 

f:id:karaagedigital:20150514092630p:plain

 

Contentの子オブジェクトにさらにImageを追加します。

 

f:id:karaagedigital:20150514092633p:plain

 

SpriteにはUIのトリミングの際に使用したフレームを使用しています。

そしてLayout Elementをコンポーネントに追加し、Min Heightを50に設定します。 

 

f:id:karaagedigital:20150514092638p:plain

 

これを大量にCtrl+Dで増やしていくと…

 

f:id:karaagedigital:20150514092643p:plain

 

こんな感じになります。どんな感じになってるかというと赤枠のように画面外にどんどん新しくコピペして出来たものが追加されていくのがわかると思います。

 

f:id:karaagedigital:20150514092645p:plain

 

最後にScrollViewのScroll Rectにスクロールさせたいオブジェクトを突っ込んで終了。

実際に再生ボタンを押して動かしてみて下さい。きっと出来ているはずです。