{"id":190,"date":"2016-03-25T18:03:56","date_gmt":"2016-03-25T10:03:56","guid":{"rendered":"http:\/\/arkaistudio.com\/blog\/?p=190"},"modified":"2017-07-18T21:01:10","modified_gmt":"2017-07-18T13:01:10","slug":"unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87-%e4%b8%80%ef%bc%9acanvas","status":"publish","type":"post","link":"https:\/\/www.arkaistudio.com\/blog\/2016\/03\/25\/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87-%e4%b8%80%ef%bc%9acanvas\/","title":{"rendered":"Unity UGUI \u539f\u7406\u7bc7(\u4e00)\uff1aCanvas \u6e32\u67d3\u6a21\u5f0f"},"content":{"rendered":"<h3>\u76ee\u6a19<\/h3>\n<ul>\n<li>\u4e86\u89e3\u5404\u7a2e\u4e0d\u540c UI Render Mode<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>&nbsp;<\/p>\n<h3>\u672c\u7cfb\u5217\u5176\u4ed6\u6587\u7ae0<\/h3>\n<ul>\n<li><a href=\"http:\/\/arkaistudio.com\/blog\/190\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87-%E4%B8%80%EF%BC%9Acanvas\" target=\"_blank\">Unity UGUI \u539f\u7406\u7bc7(\u4e00)\uff1aCanvas \u6e32\u67d3\u6a21\u5f0f<\/a><\/li>\n<li><a href=\"http:\/\/arkaistudio.com\/blog\/24\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%8C%EF%BC%9Acanvas-scaler-%E7%B8%AE%E6%94%BE%E6%A0%B8%E5%BF%83\" target=\"_blank\">Unity UGUI \u539f\u7406\u7bc7(\u4e8c)\uff1aCanvas Scaler \u7e2e\u653e\u6838\u5fc3<\/a><\/li>\n<li><a href=\"http:\/\/arkaistudio.com\/blog\/334\/unity\/unity-ugui-\u539f\u7406\u7bc7\u4e09\uff1arecttransform\" target=\"_blank\">Unity UGUI \u539f\u7406\u7bc7(\u4e09)\uff1aRect Transform<\/a><\/li>\n<li><a href=\"http:\/\/arkaistudio.com\/blog\/440\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E5%9B%9B%EF%BC%9Aevent-system-manager-%E4%BA%8B%E4%BB%B6%E8%88%87%E8%A7%B8%E7%99%BC\" target=\"_blank\">Unity UGUI \u539f\u7406\u7bc7(\u56db)\uff1aEvent System Manager \u4e8b\u4ef6\u8207\u89f8\u767c<\/a><\/li>\n<li><a href=\"http:\/\/arkaistudio.com\/blog\/542\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%94%EF%BC%9Aauto-layout-%E8%87%AA%E5%8B%95%E4%BD%88%E5%B1%80\" target=\"_blank\">Unity UGUI \u539f\u7406\u7bc7(\u4e94)\uff1aAuto Layout \u81ea\u52d5\u4f48\u5c40<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>\u4f7f\u7528\u74b0\u5883 \u8207 \u7248\u672c<\/h3>\n<ul>\n<li>Window 7<\/li>\n<li>Unity 5.2.4<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Canvas<\/h3>\n<p>Canvas Component \u662fUI\u5e03\u5c40\u548c\u6e32\u67d3\u7684\u62bd\u8c61\u7a7a\u9593\uff0c\u6240\u6709\u7684UI\u90fd\u5fc5\u9808\u5728\u6b64\u5143\u7d20\u4e4b\u4e0b(\u5b50\u7269\u4ef6)\uff0c\u7c21\u55ae\u4f86\u8aaa\u00a0Canvas\u00a0\u5c31\u662f\u6e32\u67d3 UI \u7684\u7d44\u4ef6<\/p>\n<p>&nbsp;<\/p>\n<h3>Render Mode<\/h3>\n<p>UI\u6e32\u67d3\u7684\u65b9\u5f0f\uff0c\u6709\u4ee5\u4e0b\u4e09\u7a2e<\/p>\n<ul style=\"list-style-type: disc;\">\n<li>Screen Space &#8211; Overlay\uff1a\u87a2\u5e55\u7a7a\u9593 &#8211; \u8986\u84cb<\/li>\n<li>Screen Space &#8211; Camera\uff1a\u87a2\u5e55\u7a7a\u9593 &#8211; \u651d\u5f71\u6a5f<\/li>\n<li>World Space\uff1a\u4e16\u754c\u5ea7\u6a19\u7a7a\u9593<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>Screen Space &#8211; Overlay<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-202\" src=\"http:\/\/arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Overlay.png\" alt=\"Screen Space - Overlay\" width=\"428\" height=\"77\" srcset=\"https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Overlay.png 428w, https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Overlay-300x54.png 300w\" sizes=\"(max-width: 428px) 100vw, 428px\" \/><\/p>\n<p>\u5728\u6b64\u6a21\u5f0f\u4e0b\u4e0d\u6703\u53c3\u7167\u5230Camera\uff0cUI\u76f4\u63a5\u986f\u793a\u5728\u4efb\u4f55\u5716\u5f62\u4e4b\u4e0a<\/p>\n<ul>\n<li>Pixel Perfect\uff1a\u53ef\u4ee5\u4f7f\u5716\u50cf\u66f4\u6e05\u6670\uff0c\u4f46\u662f\u6709\u984d\u5916\u7684\u6027\u80fd\u958b\u92b7\uff0c\u5982\u679c\u5728\u6709\u5927\u91cfUI\u52d5\u756b\u6642\uff0c\u52d5\u756b\u53ef\u80fd\u6703\u4e0d\u5e73\u9806<\/li>\n<li>Sort Order\uff1a\u6df1\u5ea6\u503c\uff0c\u8a72\u503c\u8d8a\u9ad8\u986f\u793a\u8d8a\u524d\u9762<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>Screen Space &#8211; Camera<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-201\" src=\"http:\/\/arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Camera.png\" alt=\"Screen Space - Camera\" width=\"426\" height=\"140\" srcset=\"https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Camera.png 426w, https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/Screen-Space-Camera-300x99.png 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/p>\n<p>\u4f7f\u7528\u4e00\u500bCamera\u4f5c\u70ba\u53c3\u7167\uff0c\u5c07UI\u5e73\u9762\u653e\u7f6e\u5728Camera\u524d\u7684\u4e00\u5b9a\u8ddd\u96e2\uff0c\u56e0\u70ba\u662f\u53c3\u7167Camera\uff0c\u5982\u679c\u87a2\u5e55\u5927\u5c0f\u3001\u5206\u8fa8\u7387\u3001Camera\u8996\u9310\u6539\u8b8a\u6642UI\u5e73\u9762\u6703\u81ea\u52d5\u8abf\u6574\u5927\u5c0f\u3002\u5982\u679cScene\u4e2d\u7684\u7269\u4ef6(GameObject)\u6bd4UI\u5e73\u9762\u66f4\u9760\u8fd1\u651d\u5f71\u6a5f\uff0c\u5c31\u6703\u906e\u64cb\u5230UI\u5e73\u9762\u3002<\/p>\n<ul>\n<li>Render Camera\uff1a\u7528\u65bc\u6e32\u67d3\u7684\u651d\u5f71\u6a5f<\/li>\n<li>Plane Distance\uff1a\u8207Camera\u7684\u8ddd\u96e2<\/li>\n<li>Sorting Layer\uff1aCanvas\u5c6c\u65bc\u7684\u6392\u5e8f\u5c64\uff0c\u5728\u00a0Edit-&gt;Project Setting-&gt;Tags and Layers-&gt;Sorting Layers \u9032\u884c\u65b0\u589e\uff0c\u8d8a\u4e0b\u65b9\u7684\u5c64\u986f\u793a\u8d8a\u524d\u9762<\/li>\n<li>Order in Layer\uff1aCanvas\u5c6c\u65bc\u7684\u6392\u5e8f\u5c64\u4e0b\u7684\u9806\u5e8f\uff0c\u8a72\u503c\u8d8a\u9ad8\u986f\u793a\u8d8a\u524d\u9762<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>World Space<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-203\" src=\"http:\/\/arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/World-Space.png\" alt=\"World Space\" width=\"430\" height=\"104\" srcset=\"https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/World-Space.png 430w, https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/World-Space-300x73.png 300w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/p>\n<p>\u628a\u7269\u9ad4\u7576\u4f5c\u4e16\u754c\u5ea7\u6a19\u4e2d\u7684\u5e73\u9762(GameObject)\uff0c\u4e5f\u5c31\u662f\u7576\u4f5c3D\u7269\u4ef6\uff0c\u986f\u793a3D UI<\/p>\n<ul>\n<li>Event Camera\uff1a\u8655\u7406UI\u4e8b\u4ef6(Click\u3001Drag)\u7684Camera\uff0c\u6240\u8a2d\u5b9a\u7684Camera\u624d\u80fd\u89f8\u767c\u4e8b\u4ef6<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>\u53c3\u8003\u8cc7\u6599<\/h3>\n<ul>\n<li><a href=\"http:\/\/docs.unity3d.com\/Manual\/class-Canvas.html\" target=\"_blank\">Unity &#8211; Manual: Canvas<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><strong>\u6b61\u8fce\u8f49\u8f09\uff0c\u4e26\u8a3b\u660e\u51fa\u8655 !<\/strong><\/h2>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u76ee\u6a19 \u4e86\u89e3\u5404\u7a2e\u4e0d\u540c UI Render Mode<\/p>\n","protected":false},"author":1,"featured_media":235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false},"categories":[3,2],"tags":[11,15,12,10,9],"jetpack_featured_media_url":"https:\/\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-1.png","jetpack_shortlink":"https:\/\/wp.me\/p7hYyg-34","jetpack-related-posts":[{"id":753,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/07\/13\/unity-ugui-%e5%af%a6%e4%bd%9c%e7%af%87-%e4%b8%80%ef%bc%9a%e4%bb%8b%e9%9d%a2%e7%b3%bb%e7%b5%b1-ui-manager-%e5%8b%95%e6%85%8b%e9%96%8b%e5%95%9f%e3%80%81%e9%97%9c%e9%96%89%e3%80%81%e9%a1%af%e7%a4%ba\/","url_meta":{"origin":190,"position":0},"title":"Unity UGUI \u5be6\u4f5c\u7bc7 (\u4e00)\uff1a\u4ecb\u9762\u7cfb\u7d71 UI Manager  \u52d5\u614b\u958b\u555f\u3001\u95dc\u9589\u3001\u986f\u793a\u3001\u96b1\u85cf UI \u4ecb\u9762","date":"2016-07-13","format":false,"excerpt":"\u672c\u7cfb\u5217\u5176\u4ed6\u6587\u7ae0 Unity UGUI \u5be6\u4f5c\u7bc7 (\u4e00)\uff1a\u4ecb\u9762\u7cfb\u7d71 UI Manager \u52d5\u614b\u958b\u555f\u3001\u95dc\u9589\u2026","rel":"","context":"\u5728\u300cUGUI\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/07\/Unity-UGUI-\u5be6\u4f5c\u7bc7.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":334,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/05\/02\/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%b8%89%ef%bc%9arecttransform\/","url_meta":{"origin":190,"position":1},"title":"Unity UGUI \u539f\u7406\u7bc7(\u4e09)\uff1aRectTransform","date":"2016-05-02","format":false,"excerpt":"\u76ee\u6a19 \u7406\u89e3\u00a0RectTransform Component Anchor (\u9328\u9ede) Pivot (\u652f\u2026","rel":"","context":"\u5728\u300cUGUI\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":24,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/03\/28\/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%ba%8c%ef%bc%9acanvas-scaler-%e7%b8%ae%e6%94%be%e6%a0%b8%e5%bf%83\/","url_meta":{"origin":190,"position":2},"title":"Unity UGUI \u539f\u7406\u7bc7(\u4e8c)\uff1aCanvas Scaler \u7e2e\u653e\u6838\u5fc3","date":"2016-03-28","format":false,"excerpt":"\u76ee\u6a19 \u4e86\u89e3\u5404\u7a2e\u4e0d\u540c UI Scale Mode Pixels Per Unit \u6bcf\u55ae\u4f4d\u50cf\u7d20 Canv\u2026","rel":"","context":"\u5728\u300cUGUI\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":542,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/06\/19\/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%ba%94%ef%bc%9aauto-layout-%e8%87%aa%e5%8b%95%e4%bd%88%e5%b1%80\/","url_meta":{"origin":190,"position":3},"title":"Unity UGUI \u539f\u7406\u7bc7(\u4e94)\uff1aAuto Layout \u81ea\u52d5\u4f48\u5c40","date":"2016-06-19","format":false,"excerpt":"\u76ee\u6a19 Auto Layout System \u67b6\u69cb Layout Element \u5143\u7d20\u5927\u5c0f Horiz\u2026","rel":"","context":"\u5728\u300cUGUI\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":440,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/05\/19\/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e5%9b%9b%ef%bc%9aevent-system-manager-%e4%ba%8b%e4%bb%b6%e8%88%87%e8%a7%b8%e7%99%bc\/","url_meta":{"origin":190,"position":4},"title":"Unity UGUI \u539f\u7406\u7bc7(\u56db)\uff1aEvent System Manager \u4e8b\u4ef6\u8207\u89f8\u767c","date":"2016-05-19","format":false,"excerpt":"\u76ee\u6a19 Event System \u4e8b\u4ef6\u7cfb\u7d71 Input Module \u8f38\u5165\u63a7\u5236 Graphic Ray\u2026","rel":"","context":"\u5728\u300cUGUI\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":247,"url":"https:\/\/www.arkaistudio.com\/blog\/2016\/04\/26\/%e5%b1%ac%e6%96%bc%e5%b7%a5%e7%a8%8b%e5%b8%ab%e7%9a%84%e5%b0%88%e7%94%a8%e5%b7%a5%e5%85%b7%e7%ae%b1%e4%b8%89%ef%bc%9a%e7%b7%a8%e8%bc%af%e5%b7%a5%e5%85%b7editor-tools\/","url_meta":{"origin":190,"position":5},"title":"\u5c6c\u65bc\u5de5\u7a0b\u5e2b\u7684\u5c08\u7528\u5de5\u5177\u7bb1(\u4e09)\uff1a\u7de8\u8f2f\u5de5\u5177(Editor Tools)","date":"2016-04-26","format":false,"excerpt":"\u6b64\u6b21\u8981\u4ecb\u7d39\u7684\u662f\u7de8\u8f2f\u5668\u5de5\u5177\uff0c\u80fd\u63d0\u5347\u7de8\u8f2f\u6548\u7387\u3001\u89e3\u7701\u6642\u9593\uff0c\u9032\u800c\u66f4\u5c08\u6ce8\u5728\u958b\u767c\u4e0a \u00a0 \u672c\u7cfb\u5217\u5176\u4ed6\u6587\u7ae0\u2026","rel":"","context":"\u5728\u300cTool\u300d\u4e2d","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.arkaistudio.com\/blog\/wp-content\/uploads\/2016\/03\/special-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/posts\/190"}],"collection":[{"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":26,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":1288,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions\/1288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/media\/235"}],"wp:attachment":[{"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.arkaistudio.com\/blog\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}