Sep
10
2014

New UI: Full View Image Panner

An article by mgear

New UI: Image Panner Tutorial (where scrolling area scales to full camera view size) with ZERO lines of code 🙂
Requires 4.6.0 Beta (17 or 18) : http://unity3d.com/unity/beta/4.6

Tutorial steps
•   Add new canvas from menu: GameObject / UI / Canvas
•   While Canvas gameobject is selected: Right click over it, select> Create Empty
•   Rename the new empty “GameObject” as “ScrollRect” (optional)
•   While ScrollRect gameobject is selected: Add ScrollRect component to it
•   While ScrollRect gameobject is selected: Right click over it, select> UI / Image
•   Get some test image, I used this one:
“Nusfjord road, 2010 09” by Ximonic, Simo Räsänen – Own work” Licensed under GNU Free Documentation License via Wikimedia Commons
http://commons.wikimedia.org/wiki/File:Nusfjord_road,_2010_09.jpg#mediaviewer/File:Nusfjord_road,_2010_09.jpg
•   Select your image from the project window, then on the inspector set it as sprite and adjust max size:
Set Texture Type as “Sprite (2D and UI)”
Set Max Size as 4096 (or other size which is suitable for your image)
•   Then assign the sample image into “Image” gameobject as Source Image (in Image component)
•   Enable [x] Preserve Aspect
•   Click “Set Native Size” (your image rect transform Width & Height become the same as the original imaze, 4096×1673 in my test image)
•   Select ScrollRect gameobject: Then Drag “Image” gameobject as Content for the Scroll Rect component
•   While ScrollRect is selected: Press T (or click the 2D transform tool(?) from toolbar)
•   Resize ScrollRect to match the Canvas by dragging those blue dots, they will snap to canvas borders
•   Then also drag the anchors into Canvas borders (to make the ScrollRect scale with canvas size)
•   Hit play!
Webplayer:
http://unitycoder.com/upload/demos/UI_ImagePanner/
(12mb due to large image – published with beta17 webplayer, had to manually re-install webplayer from http://unity3d.com/webplayer on another pc)