Unity学习笔记(09)：UGUI的Image节点和Sprite精灵图、实现进度条加载动画

最新推荐文章于 2024-05-03 03:07:03 发布
最新推荐文章于 2024-05-03 03:07:03 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： Unity 文章标签： unity unity3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Piconjo/article/details/106894751
版权
这篇Unity学习笔记介绍了UGUI的Image节点和Sprite精灵图，探讨了Packing tag、Filter Mode以及不同的Image Type。详细讲解了如何通过Slice模式创建九宫格效果，并在Sprite Editor中指定拉伸区域。通过设置Filled、Fill Method、Fill Origin和Fill Amount属性，实现了进度条加载动画的顺时针或逆时针效果。
摘要由CSDN通过智能技术生成

2D模式：
在这里插入图片描述
选择Single模式：
在这里插入图片描述
Packing tag是指定打包标签 相同的标签在打包时会被打包在同一个文件中 以节省显存

Filter Mode是缩放模式
Point(no filter)无缩放 比如放大两倍 则将像素复制两倍
在这里插入图片描述

Image Type是缩放模式：
在这里插入图片描述
当图片尺寸放大时

  • Simple模式是简单的拉伸 伸长
  • Tiled模式是平铺 将图片分成多个同样的图
  • slice模式是图片按照九宫格缩放
    类似于聊天气泡 只拉伸图片的一部分
    且九宫格较为省资源
    在这里插入图片描述
    在Sprite Editor里指定拉伸区域：
    在这里插入图片描述
    拖动点以修改边框：
    在这里插入图片描述
    Ctrl+S保存即可生效：
    在这里插入图片描述
  • Filled是指定区域显示
    Fill Method是填充方式
    Horizontal是竖着切
    Vertical是横着切
    Fill Origin是
    Fill Amount是比例参数
    在这里插入图片描述
最低0.47元/天 解锁文章
【Unity3D-UGUI应用篇】（二）使用Image实现进度条动画
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
09-06 2943
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 前段时间分享了UGUI的每个组件的属性和使用方法，比如Text、Button、Image、Toggle、InputField、ScrollView等等。 接着分享了UGUI的一些原理，比如说UGUI的渲染模式、UGUI的缩放计算、UGUI的描点定位、UGUI的自动布局等等。.
unity 设置图片九宫格_unity学习5_UGUI_Image_Sprite(2D_and_UI)
weixin_39950552的博客
12-21 1355
unity学习5_UGUI_Image_Sprite(2D_and_UI)(1)Source Image:资源文件Unity的image组件需要的Source Image类型为Sprite类型,首先我们需要设置图片资源类型为Sprite.在rescouces目录里找到我们需要设置的图片,然后单机图片资源,修改TextureType类型为Sprite类型.然后Apply生效.这样我们就可以拖动到i...
UGUI的Image
鳄鱼泪的博客
10-13 1457
Image组件 参数： Source Image：资源图片(需要是Sprite导入格式) Color：颜色 Material：材质 RaycastTarget：是否需要接受点击(不需要时候取消勾选) Preserve Aspect：保持原始纵横比 Set Native Size：将图像框的尺寸设置为纹理的原始像素大小。 Image Type： Simple：直接使...
UnityUGUI系统之Sprite
无_空
10-15 1万+
一、Unity中的2D图片的导入在Unity中我们将2D图片导入进来的时候，会选择图片的保存格式，根据不同的格式在Unity中具有不同的用途。所以在我们导入图片之后都需要进行一些设置。Texture Type : 设置导入图片的使用途径通常我们在使用图片进行GUI或者2D精灵的使用时则选择 Sprite选项。Sptrite Mode ：设置图片的形式,Single：在这种模式下将 sprite图
unity将图片转换为Sprite赋值到image上
weixin_51481499的博客
11-12 2482
//命名空间 using System.IO; using UnityEngine.UI; //声明变量 private Texture2D m_Tex; //调用方法并转换赋值 LoadFromFile(“文件位置”, “文件名”); Sprite tempSprite = Sprite.Create(m_Tex, new Rect(0, 0, m_Tex.width, m_Tex.height), new Vector2(10, 10)); image.sprite = tempSpr
Unity中将一张Sprite分割成多个图片SeprateImage.cs
08-24
功能：Unity中将一张Sprite分割成多个图片，前提是Sprite包含多个子图片。
Unity+UGUI 圆形进度条
07-12
通过Unity和UGUI，我们可以轻松地创建出具有动态效果的圆形进度条，并扩展其功能，比如实现拖拽验证码。这不仅提高了游戏的用户体验，也增强了交互性。掌握这些技能对于Unity开发者来说非常重要，能够帮助他们构建更...
unity UGUI图片任意截取和裁剪
04-07
使用ugui对图片进行任意角度，大小，缩放，以及任意位置进行截取和裁剪，还可以设置圆角或者矩形方式操作
AtlasImage：AtlasImage是一个图形组件，将SpriteAtlas用于uGUI。 另外，将有用的精灵选择器和边框编辑器添加到检查器
02-06
您是否仍然对SpriteAtlas和Image SpriteAtlas疲劳？ 没有SpriteAtlas的界面 仅支持Sprite 。 我们打包了精灵以进行绘图调用优化，但是没有接口。 令人困惑的精灵选择器 您可以使用对象选择器选择精灵。 Opject ...
Unity2D：Sprite和UI Image的区别
宁静致远
01-05 2万+
http://blog.u3dgames.cn/unity/2016-07/Unity-Sprite-VS-Image.html Unity3D最初是一个3D游戏引擎，而从4.3开始，系统加入了Sprite组件，Unity也终于有了2D游戏开发的官方解决方案。4.6更是增加了新的UI系统uGUI，使得使用Unity开发2D游戏效率非常高。 那么对于从事2D游戏开发的同学来说，想必都
Unity 加载图片到Image或SpriteRender组件
海月的博客
07-21 4298
public Texture2D background; private void Awake() { GameObject.Find("Background").GetComponent<Image>().sprite = Sprite.Create(background, new Rect(0, 0, background.width, background.height), new Vector2(0.5f, 0.5f)); }
Unity为Image组件动态添加sprite
u010698150的专栏
11-24 2万+
Image组件的Source Image属性是Sprite类型的，然而图片的type设置为Sprite之后，它包含两个部分（如图）： 以1001为例，其第一部分类型为Texture2D，第二部分为Sprite的。 一种动态获取方式(Resources.Load)： Sprite sprite = new Sprite; sprite = (Resources.Load("S
Unity图集、Image和SpriteRenderer
weixin_42186870的博客
10-26 2990
Unity图集、Image和SpriteRenderer 前言 最近好久没有写技术笔记了，今天继续回归日常学习的状态。 图集Tight Packing Unity提供的SpriteAtlas有一个Tight Packing选项。这个选项勾选之后，图片就会按照它的Sprite Mesh来进行图集排布。可以大大提升图集的使用率，尤其是对于那些斜视角游戏。 但是使用Tight Packing会面临一个问题，就是默认情况下，Image使用的Mesh是Rect Mesh，也就是说在裁剪图集的时候，回把一些我们不想
学习在于折腾之Unity的sprite和image
leanerU的博客
10-09 2357
  今天在测试某一些功能的时候，明白了一些sprite和image的区别，以及苦恼了一阵子的关于图片替换的问题。 在Unity中，将图片直接拖入Scene界面中，Unity会自动给予图片一个Sprite组件，将它默认为精灵（我的理解是用作2D的图片，不过似乎3D中也可用，暂时不明。） 当有了sprite组件，位置就以transform而不是Rect transfrom，这时候是以游戏界面而不...
UGUI（五）动画系统
Tonny_007的IT家园
08-25 1306
Unity暂时没有单独给UGUI提供动画系统，用官方的动画系统也能做只是比较麻烦，所以我们有很多选择了。 1.修改NGUI的UITweener在用UGUI上，轻量级动画系统。 2.使用第三方插件入iTween,DoTween,HOTween等。   发现DoTween不错，就试试了。 先来看效果图： 这里用到了位置，旋转，缩放，颜色四个最主要的动画效果，暂时
Unity UGUI 之 Image 组件
最新发布
vtheshow的博客
05-03 1248
Unity Image控件知识整理
unity 动态加载图片成为精灵 显示在场景中
仰望星空
07-24 3363
需求：将图片显示在场景中 做法：将图片转换成Sprite，然后显示在场景中 1、在Asserts文件下创建文件夹命名为Resources，听说Resources.Load（）只能加载该文件夹下的图片； 2、首先判断图片是否存在； 2、创建GameObject，添加SpriteRender组件，完成。 public class create: MonoBehaviour { void Start() { findPNG("depth.png"); ...
Unity2D:Sprite和Image的区别
热门推荐
a435931517的专栏
11-27 3万+
Sprite和Image区别 面试的时候被问到Sprite和Image的区别，我当时就感觉这有什么区别呢？ 后来查了下资料，还是自己无知啊！ 下面就具体的区别做个笔记 Image 和Sprite 区别 下图是一个Sprite 在Unity中可以在Hirerarchy层右键-&gt;2D Object里找到Sprite，那么他们的属性面板有什么区别呢？如下图所示： 渲染上： Image 通过U...
Unity编辑器拓展之二十六：基于UGUI的Sprite引用查询
静风霁
03-19 1239
基于UGUI的Sprite引用查询 使用TexturePacker打的图集，sprite引用查询工具示意图如下。 菜单栏： 1、选择图集，输入sprite name，一键搜索按钮，导出搜索数据成CSV格式，一键断开所有引用 2、界面下方是搜索结果的Tree视图。 下面是操作示意图。 适用场景 图片从一个图集更改到别的图集，如果是用Unity的打图集方式（PackingTag），这种场景就方便多...
Unity动画效果插件：118款高质量Sprite动画包
Unity的动画系统可以与动画效果插件集成，允许开发者通过插件引入更多的动画控制选项和预设动画效果。 5. 118 sprite effects bundle 5.0介绍： "118 sprite effects bundle 5.0"是一款面向Unity引擎的动画效果插件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值