{"id":3235,"date":"2014-09-10T22:39:27","date_gmt":"2014-09-10T19:39:27","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=3235"},"modified":"2014-09-11T09:05:55","modified_gmt":"2014-09-11T06:05:55","slug":"new-ui-full-view-image-panner","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2014\/09\/10\/new-ui-full-view-image-panner\/","title":{"rendered":"New UI: Full View Image Panner"},"content":{"rendered":"

\"adjust_scrollrect_anchors\"<\/a><\/p>\n

New UI:\u00a0 Image Panner Tutorial (where scrolling area scales to full camera view size) with ZERO lines of code \ud83d\ude42
\nRequires 4.6.0 Beta (17 or 18) : http:\/\/unity3d.com\/unity\/beta\/4.6<\/a><\/p>\n

Tutorial steps<\/strong>
\n\u2022\u00a0\u00a0 \u00a0Add new canvas from menu: GameObject \/ UI \/ Canvas
\n\u2022\u00a0\u00a0 \u00a0While Canvas gameobject is selected: Right click over it, select> Create Empty
\n\u2022\u00a0\u00a0 \u00a0Rename the new empty \u201cGameObject\u201d as \u201cScrollRect\u201d (optional)
\n\u2022\u00a0\u00a0 \u00a0While ScrollRect gameobject is selected: Add ScrollRect component to it
\n\u2022\u00a0\u00a0 \u00a0While ScrollRect gameobject is selected: Right click over it, select> UI \/ Image
\n\u2022\u00a0\u00a0 \u00a0Get some test image, I used this one:
\n“Nusfjord road, 2010 09” by Ximonic, Simo R\u00e4s\u00e4nen – Own work\u201d Licensed under GNU Free Documentation License via Wikimedia Commons
\nhttp:\/\/commons.wikimedia.org\/wiki\/File:Nusfjord_road,_2010_09.jpg#mediaviewer\/File:Nusfjord_road,_2010_09.jpg<\/a>
\n\u2022\u00a0\u00a0 \u00a0Select your image from the project window, then on the inspector set it as sprite and adjust max size:
\nSet Texture Type as \u201cSprite (2D and UI)\u201d
\nSet Max Size as 4096 (or other size which is suitable for your image)
\n\u2022\u00a0\u00a0 \u00a0Then assign the sample image into \u201cImage\u201d gameobject as Source Image (in Image component)
\n\u2022\u00a0\u00a0 \u00a0Enable [x] Preserve Aspect
\n\u2022\u00a0\u00a0 \u00a0Click \u201cSet Native Size\u201d (your image rect transform Width & Height become the same as the original imaze, 4096×1673 in my test image)
\n\u2022\u00a0\u00a0 \u00a0Select ScrollRect gameobject: Then Drag \u201cImage\u201d gameobject as Content for the Scroll Rect component
\n\u2022\u00a0\u00a0 \u00a0While ScrollRect is selected: Press T (or click the 2D transform tool(?) from toolbar)
\n\u2022\u00a0\u00a0 \u00a0Resize ScrollRect to match the Canvas by dragging those blue dots, they will snap to canvas borders
\n\u2022\u00a0\u00a0 \u00a0Then also drag the anchors into Canvas borders (to make the ScrollRect scale with canvas size)
\n\u2022\u00a0\u00a0 \u00a0Hit play!
\nWebplayer:<\/strong>
\nhttp:\/\/unitycoder.com\/upload\/demos\/UI_ImagePanner\/<\/a>
\n(12mb due to large image – published with beta17 webplayer, had to manually re-install webplayer from http:\/\/unity3d.com\/webplayer<\/a> on another pc)<\/p>\n

—<\/p>\n

References:<\/strong>
\nHere you’ll learn how easy it is to add scrollbars to that scrollrect:
\nhttp:\/\/unity3d.com\/learn\/tutorials\/modules\/beginner\/live-training-archive\/the-new-ui<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

New UI:\u00a0 Image Panner Tutorial (where scrolling area scales to full camera view size) with ZERO lines of code \ud83d\ude42 Requires 4.6.0 Beta (17 or 18) : http:\/\/unity3d.com\/unity\/beta\/4.6 Tutorial steps \u2022\u00a0\u00a0 \u00a0Add new canvas from menu: GameObject \/ UI \/ Canvas \u2022\u00a0\u00a0 \u00a0While Canvas gameobject […]<\/p>\n","protected":false},"author":1,"featured_media":3236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[420,3],"tags":[658,657,383,650],"class_list":["post-3235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-unity3d","tag-gallery","tag-panner","tag-tutorial","tag-ui"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2014\/09\/adjust_scrollrect_anchors.jpg?fit=680%2C543&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-Qb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=3235"}],"version-history":[{"count":5,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3235\/revisions"}],"predecessor-version":[{"id":3241,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3235\/revisions\/3241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/3236"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=3235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=3235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=3235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}