【Unity】タッチ処理による画像Panning/Zoomおよびダウンロードした画像の表示テスト

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のサブクラスを作成してドラッグ処理をコントロールしてみることに。
とりあえず今回は現象が発生しなければ良いので、単純に複数のドラッグ処理が行われないようするだけの処理を書いてみた。

 

なんとなくぎこちない動きが残ってるけど、まあこんなものかなという動作になった。
ここからの改善は切りがなさそうなので一旦良しとする。

その他の調整

ダウンロードした画像の表示

ついでにUI-Imageの方は、ダウンロードした画像を表示するようにしてみた。
UI-Imageは自動でアスペクト比を保って表示できるので便利。
Spriteの方はサイズ調整を自分で書けばいいけど、時間ないのでひとまず保留。

Scene切り替え

SpriteとUI-Imageそれぞれの表示は別Sceneに分けて切り替えできるようにした。

サンプルプログラム

Unity ImageViewerTest 

ここ怪しいぞとか、ここはこうした方がもっと良くなるとか、いろいろご指摘いただけるとありがたいです。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です