<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UGUI 归档 - 初晴神社</title>
	<atom:link href="https://vki.cc/tag/ugui/feed/" rel="self" type="application/rss+xml" />
	<link>https://vki.cc/tag/ugui/</link>
	<description>白露的博客</description>
	<lastBuildDate>Tue, 19 Feb 2019 02:17:16 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>

<image>
	<url>https://cdn.vki.cc/wp-content/uploads/2018/03/cropped-icemaplen-1-32x32.png</url>
	<title>UGUI 归档 - 初晴神社</title>
	<link>https://vki.cc/tag/ugui/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>在Unity中制作小地图</title>
		<link>https://vki.cc/greattruth/engine/342/</link>
					<comments>https://vki.cc/greattruth/engine/342/#comments</comments>
		
		<dc:creator><![CDATA[白露]]></dc:creator>
		<pubDate>Sat, 03 Feb 2018 14:36:54 +0000</pubDate>
				<category><![CDATA[咸鱼心得]]></category>
		<category><![CDATA[引擎相关]]></category>
		<category><![CDATA[UGUI]]></category>
		<category><![CDATA[Unity]]></category>
		<category><![CDATA[Unity 3D]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[心得]]></category>
		<category><![CDATA[教程]]></category>
		<guid isPermaLink="false">http://www.icemaplen.com/?p=342</guid>

					<description><![CDATA[<p>在很多游戏里，小地图都是不可或缺的存在，今天我们就来学习下如何在Unity中制作小地图 _(:з」∠)_ 据我目前所知（知识有限），小地图有两种制作方式： 一是新建一个小摄像机，放在场景上空朝下进行拍摄； 二&#8230;</p>
<p><a href="https://vki.cc/greattruth/engine/342/">在Unity中制作小地图</a>最先出现在<a href="https://vki.cc">初晴神社</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>在很多游戏里，小地图都是不可或缺的存在，今天我们就来学习下如何在Unity中制作小地图</p>
<p>_(:з」∠)_</p>
<p>据我目前所知（知识有限），小地图有两种制作方式：</p>
<p>一是新建一个小摄像机，放在场景上空朝下进行拍摄；</p>
<p>二是计算场景中物体的相对位置，通过UI显示出来；</p>
<p>在本例中，我使用的是第一张方式，这种方式实现相对简单一点，所以很方便。</p>
<h2 id="%e9%a6%96%e5%85%88%e5%9c%a8project%e4%b8%ad%e6%96%b0%e5%bb%ba%e4%b8%80%e4%b8%aarender-texture%ef%bc%8c%e5%91%bd%e5%90%8d%e4%b8%baminimap">首先在Project中新建一个Render Texture，命名为“Minimap”</h2>
<p><img  fetchpriority="high"  decoding="async"  class="alignnone size-full wp-image-351"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224324.jpg"  alt=""  width="505"  height="446"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224324.jpg 505w, https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224324-300x265.jpg 300w"  sizes="(max-width: 505px) 100vw, 505px" ></p>
<p>然后在场景中新建一个Camera，将其设为Player（将会在小地图中处于中心位置的玩家）的子物体，并调整其位置和方向，令其处于Player上方且朝向正下方，再将其Target Texture指定为刚才创建的Render Texture，如图：</p>
<p><img  decoding="async"  class="alignnone size-full wp-image-352"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224607.jpg"  alt=""  width="389"  height="406"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224607.jpg 389w, https://cdn.vki.cc/wp-content/uploads/2018/02/20180203224607-287x300.jpg 287w"  sizes="(max-width: 389px) 100vw, 389px" ></p>
<p>然后在场景中创建UI-Raw Image，并设置Texture为刚才创建的Render Texture，你会发现image显示的是小地图Camera拍的内容 _(:з」∠)_</p>
<p>这样大体上就做出来了，不过还要调节下。</p>
<h2 id="%e8%ae%be%e7%bd%ae%e9%9c%80%e8%a6%81%e6%98%be%e7%a4%ba%e5%9c%a8%e5%b0%8f%e5%9c%b0%e5%9b%be%e4%b8%8a%e7%9a%84%e5%ad%90%e7%89%a9%e4%bd%93">设置需要显示在小地图上的子物体</h2>
<p>在需要显示在小地图上的的物体上添加一个Sphere子物体，改成绿色，同样改变高度使其位于上方（注意不要超过小地图Camera的高度）</p>
<p>新建一个Layer层，命名为Minimap，将Sphere置为Minimap层，</p>
<p>将地面模型也置为Minimap层，</p>
<p>更改小地图Camera的Culling Mask，只勾选刚才创建的Minimap层，注意勾选Occlusion Culling，这样小地图就只显示Minimap层的东西了。</p>
<p><img  decoding="async"  class="alignnone size-full wp-image-354"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203230422.jpg"  alt=""  width="285"  height="350"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203230422.jpg 285w, https://cdn.vki.cc/wp-content/uploads/2018/02/20180203230422-244x300.jpg 244w"  sizes="(max-width: 285px) 100vw, 285px" ></p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-355"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203230741.jpg"  alt=""  width="244"  height="234" ></p>
<h2 id="%e7%be%8e%e5%8c%96%e5%b0%8f%e5%9c%b0%e5%9b%be">美化小地图</h2>
<p>现在的小地图还是方形的，如何改成圆形呢？</p>
<p>打开ps，制作一个白色的圆，背景为透明，保存为png格式，导入到unity中，再设置属性为Sprite(2D and UI)，</p>
[infobox title=&#8221;白色圆&#8221;]<a href="https://cdn.vki.cc/wp-content/uploads/2018/02/mask-1.png" target="_blank" rel="noopener noreferrer"><img  loading="lazy"  decoding="async"  class="alignnone wp-image-356 size-medium"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/mask-1-300x300.png"  alt=""  width="300"  height="300"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/mask-1-300x300.png 300w, https://cdn.vki.cc/wp-content/uploads/2018/02/mask-1-150x150.png 150w, https://cdn.vki.cc/wp-content/uploads/2018/02/mask-1.png 512w"  sizes="auto, (max-width: 300px) 100vw, 300px" ></a> [/infobox]
<p>在场景中新建UI-Image，image指定为白色的圆，添加上Mask组件，设置为Raw Image的父物体。这样小地图就变成圆形了：</p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-358"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203231256.jpg"  alt=""  width="216"  height="214"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203231256.jpg 216w, https://cdn.vki.cc/wp-content/uploads/2018/02/20180203231256-150x150.jpg 150w"  sizes="auto, (max-width: 216px) 100vw, 216px" ></p>
<p>或者可以再加上一个圈：</p>
<p><a href="https://cdn.vki.cc/wp-content/uploads/2018/02/mask3.png" target="_blank" rel="noopener noreferrer">[infobox title=&#8221;圆圈&#8221;]<img  loading="lazy"  decoding="async"  class="alignnone wp-image-357 size-medium"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/mask3-300x300.png"  alt=""  width="300"  height="300"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/02/mask3-300x300.png 300w, https://cdn.vki.cc/wp-content/uploads/2018/02/mask3-150x150.png 150w, https://cdn.vki.cc/wp-content/uploads/2018/02/mask3.png 512w"  sizes="auto, (max-width: 300px) 100vw, 300px" >[/infobox]</a></p>
<p>最终效果：</p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-359"  src="https://cdn.vki.cc/wp-content/uploads/2018/02/20180203231458.jpg"  alt=""  width="208"  height="213" ></p>
<hr />
<p>写完了，睡觉 _(:з」∠)_</p>
<p><a href="https://vki.cc/greattruth/engine/342/">在Unity中制作小地图</a>最先出现在<a href="https://vki.cc">初晴神社</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://vki.cc/greattruth/engine/342/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>UGUI 字体背景尺寸自适应</title>
		<link>https://vki.cc/greattruth/engine/321/</link>
					<comments>https://vki.cc/greattruth/engine/321/#respond</comments>
		
		<dc:creator><![CDATA[白露]]></dc:creator>
		<pubDate>Wed, 31 Jan 2018 09:06:22 +0000</pubDate>
				<category><![CDATA[咸鱼心得]]></category>
		<category><![CDATA[引擎相关]]></category>
		<category><![CDATA[UGUI]]></category>
		<category><![CDATA[Unity]]></category>
		<category><![CDATA[Unity 3D]]></category>
		<guid isPermaLink="false">http://www.icemaplen.com/?p=321</guid>

					<description><![CDATA[<p>最近再做一个模仿QQ聊天界面的聊天功能，在开发过程中遇到了一个问题，就是需要将字体的背景气泡自动随着字体长度变化。 经过一番尝试，最终功能如下： 怎么实现的呢？一起来看看吧。 &#160; 首先将背景图片&#8230;</p>
<p><a href="https://vki.cc/greattruth/engine/321/">UGUI 字体背景尺寸自适应</a>最先出现在<a href="https://vki.cc">初晴神社</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>最近再做一个模仿QQ聊天界面的聊天功能，在开发过程中遇到了一个问题，就是需要将字体的背景气泡自动随着字体长度变化。</p>
<p>经过一番尝试，最终功能如下：</p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-324"  src="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165407.jpg"  alt=""  width="610"  height="246"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165407.jpg 610w, https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165407-300x121.jpg 300w"  sizes="auto, (max-width: 610px) 100vw, 610px" ></p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-325"  src="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165408.jpg"  alt=""  width="591"  height="257"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165408.jpg 591w, https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165408-300x130.jpg 300w"  sizes="auto, (max-width: 591px) 100vw, 591px" ></p>
<p>怎么实现的呢？一起来看看吧。</p>
<p>&nbsp;</p>
<p>首先将背景图片设为父物体，字体text为子物体；</p>
<p>给父物体添加[kbd]Horizontal Layout Group[/kbd]和[kbd]Content Size Fitter[/kbd]组件，</p>
<p>在[kbd]Horizontal Layout Group[/kbd]中设置Child Alignment为Middle Center，</p>
<p>勾选Child Controls Size里的Width和Height，该选项是令子物体控制其尺寸。</p>
<p>&nbsp;</p>
<p>在[kbd]Content Size Fitter[/kbd]中将两个选项都选为 PreferredSize；<br />
<span style="color: #808080;">Unconstrained：不执行任何调整 </span><br />
<span style="color: #808080;">MinSize：调整内容的最小大小 </span><br />
<span style="color: #808080;">PreferredSize：调整内容的首选大小，也就是会自动根据内容来调整大小</span></p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-326"  src="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165826.jpg"  alt=""  width="766"  height="353"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165826.jpg 766w, https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165826-300x138.jpg 300w, https://cdn.vki.cc/wp-content/uploads/2018/01/20180131165826-750x346.jpg 750w"  sizes="auto, (max-width: 766px) 100vw, 766px" ></p>
<p>这样就可以了！做个测试吧</p>
<p>&nbsp;</p>
<p>为了美观，可以设置下背景的padding，这样文字和背景边框之间就会用一定的间隔啦</p>
<p><img  loading="lazy"  decoding="async"  class="alignnone size-full wp-image-328"  src="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131170736.jpg"  alt=""  width="402"  height="190"  srcset="https://cdn.vki.cc/wp-content/uploads/2018/01/20180131170736.jpg 402w, https://cdn.vki.cc/wp-content/uploads/2018/01/20180131170736-300x142.jpg 300w"  sizes="auto, (max-width: 402px) 100vw, 402px" ></p>
<p>&nbsp;</p>
<p><a href="https://vki.cc/greattruth/engine/321/">UGUI 字体背景尺寸自适应</a>最先出现在<a href="https://vki.cc">初晴神社</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://vki.cc/greattruth/engine/321/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
