Unity学習ついでに画像ビューア的なものを作ってみた
2DObject-Sprite
最初は下記サイトを参考に2DObjectのSpriteを使用してみた。
Unity – How to do Pinch Zoom And Panning In Unity 2D And Unity 3D : The App Guruz
悪くないけどシンプルな実装なので慣性スクロールがなくてちょっと物足りない。
UI-ScrollRect
やっぱり慣性スクロール入れたいけど自前で処理書くのも面倒なので、UI-ScrollRectを使用してみることに。画像表示はUI-Imageで。
結果、慣性スクロール付きPanning処理はScrollRectがお任せでやってくれるので楽だった。
ただし一点問題が。
マルチタッチでPanningすると、画像があちこちに飛ぶ現象が発生。
おそらく、すべての指それぞれでドラッグ処理が始まってるのが原因と予想。
ScrollRectのサブクラスを作成してドラッグ処理をコントロールしてみることに。
とりあえず今回は現象が発生しなければ良いので、単純に複数のドラッグ処理が行われないようするだけの処理を書いてみた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public class HMCScrollRect : ScrollRect { private List<int> pointerIdList = new List<int>(); public override void OnBeginDrag(PointerEventData eventData) { pointerIdList.Add(eventData.pointerId); base.OnBeginDrag(eventData); } public override void OnDrag(PointerEventData eventData) { // 複数のタッチそれぞれで同時にドラッグ処理が行われないようにする。 if (pointerIdList[0] == eventData.pointerId) { base.OnDrag(eventData); } } public override void OnEndDrag(PointerEventData eventData) { pointerIdList.Remove(eventData.pointerId); base.OnEndDrag(eventData); } } |
なんとなくぎこちない動きが残ってるけど、まあこんなものかなという動作になった。
ここからの改善は切りがなさそうなので一旦良しとする。
その他の調整
ダウンロードした画像の表示
ついでにUI-Imageの方は、ダウンロードした画像を表示するようにしてみた。
UI-Imageは自動でアスペクト比を保って表示できるので便利。
Spriteの方はサイズ調整を自分で書けばいいけど、時間ないのでひとまず保留。
Scene切り替え
SpriteとUI-Imageそれぞれの表示は別Sceneに分けて切り替えできるようにした。
サンプルプログラム
ここ怪しいぞとか、ここはこうした方がもっと良くなるとか、いろいろご指摘いただけるとありがたいです。