UnityUI超简单实现敌方血条近大远小的效果

最新推荐文章于 2022-04-17 16:50:17 发布
最新推荐文章于 2022-04-17 16:50:17 发布
阅读量1.3k 收藏 5
点赞数 2
分类专栏： Unity 文章标签： unity 游戏引擎 3d c# ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghexuan/article/details/122080016
版权
本文介绍了如何利用UnityC#的Camera.WorldToScreenPoint方法，结合z轴距离来调整血条大小，从而实现敌方血条在游戏中的近大远小视觉效果。首先创建World Space渲染模式的画布，并设置血条UI元素，接着通过调整血条填充方法和图片类型来模拟血槽。最后，通过代码实现血条随敌方距离的变化而缩放。
摘要由CSDN通过智能技术生成

具体思路就是使用UnityC#里的Camera.WorldToScreenPoint方法,其z轴近似敌方到玩家摄像机的距离,通过这个z轴数值乘以血条的长宽来实现近大远小

首先附上我的血条制作博客:

Unity创建能跟随玩家移动血条HP的方法,so easy_wanghexuan的博客-CSDN博客1.首先创建画布,渲染模式Render Mode改成Word Space,并调整参数至玩家头顶2. 再创建两个Texture,一个作为背景,一个作为血量,HPBarBG背景颜色最好设置成暗色调作为血量的texture(HPBar)需要设置一张自己的2D图片(不然下面的工作无法进行)再改变image Type为Filled,Fill Method为水平Horizontal改变Fill

最低0.47元/天 解锁文章
DOUM123
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
unity头顶状态制作_unity3d 角色头顶信息3D&2D遮挡解决方案（二）
weixin_39744240的博客
12-21 499
本来一篇文章就可以说完了，但是上次只是实现了已知的一些功能后来在实际运用中遇到了一个问题，请看图3D场景嘛！近大远小！当我把视角移动得很远时，头顶信息就变得很小了，小得我看不见它显示的是什么而且如果有多个玩家的话，每个玩家都有头顶信息当我离另外一个玩家很远时，那个玩家的头顶信息就看不见了那么要头顶信息有何意义？本文就解决这个问题，其实很简单的下面是解决后的截图：聪明的小伙伴们是不是一眼就看出来什么...
unity之血条和distance
Candy_Gt的专栏
01-08 2574
欢迎来到我们的狗刨网，我们今天主要讲了如何增加血量，以及在游戏中如何设置敌人和我方的距离，让他能一直跟随着并保持一定的距离。 知识总结：1、首先我今天学习了新的知识点内容，我们今天在我们自己创建的地形上设置了敌方和我方保持一定的距离，我们运用的是vector3.distance，distance这个方法代表了a，b之间的距离，调用这个可以让敌方在一定距离之内追踪我方。然后因为要跟踪我方的
3d 角色血条制作方案：解决近大远小的策略
u011644138的博客
04-29 1005
血条制作方案 1. 2D在一个canvas上做血条位置映射。 1 血条可以设置于3d 空间转换成2d 空间 2 设置 到 canvas上的 血条 position 缺点：不可以跟随角色距离而近大远小。 2. 3D 设置Canvas 在角色下。 1. 设置在角色的对象下边 2. 朝向问题：会出现有点想血条...
unity UI血条效果
热门推荐
DDghost的博客
06-05 1万+
gihub传送门 https://github.com/ddghost/unity3d_n/tree/%E8%A1%80%E6%9D%A1 这次作业五选一，我选了血条这个来做（感觉比较实在简单）。 先来看下成果，这个是IMGUI做的，黑色是因为没找到什么办法设置颜色。 这个是用UGUI，感觉比较好看点。 这次用的这个人物资源和上次巡逻兵的一样，是在unity的商店找的，资源如下 ...
Unity 实现近小远大
龙胖胖的博客
03-03 4021
using System.Collections; using System.Collections.Generic; using UnityEngine; public class MainGame : MonoBehaviour { public GameObject TargetObj; public GameObject MoveObj; private float StartDis; void Start() { StartDis =.
Unity-血条控制
AD_GOD的博客
04-17 3274
血条控制创建血条二级目录三级目录 创建血条 血条的创建有两种方式： 1.使用Slider来控制血条的变化，将Fill改变颜色，将Slider中的Handle禁用，会发现Value最大时Fill没有填满这时可以通过改变Fill的大小和位置将backgrand填满或将backgrand禁用。 二级目录 三级目录 ...
RPG+MMO人物血条效果，ugui根据距离缩放
weixin_40137140的博客
05-19 347
//世界坐标转摄像机坐标 var pos = Camera.WorldToViewportPoint(target_world_pos); if (pos.z <= Camera.nearClipPlane) { //太近直接忽略，以防阻挡镜头 ugui_transform.localScale = Vector3.zero; }
Unity制作的血条跟随效果
09-02
Unity制作的血条跟随效果，通过坐标转换，把场景内的3D坐标转换为屏幕上的UI坐标，实现UI跟随3D物体的功能
纯CSS实现的大小渐变、渐远效果
12-13
效果图： 效果差不多也就是上图的这个样子，基本原理如图所示： 将所有的盒子都绝对定位，然后将宽高各50%的递缩小，并且在top、right、bottom和left针对性的偏移即可，代码如下： 复制代码代码如下:<!DOCTYPE ...
android背景滚动+Matrix实现图片拉伸（实现近大远小效果）
08-06
本教程将探讨如何实现“android背景滚动”以及利用“Matrix”类来实现图片的拉伸，从而达到“近大远小”的视觉效果。这种效果在飞行射击类游戏（如雷电）中十分常见，能够增加游戏的沉浸感。 首先，我们来看...
unity血条及文字显示代码
07-06
包含SetTextByText，SliderAddValue等五个代码，可使用于游戏的血条显示等
近大远小学习教案.pptx
11-28
透视是一种表现三维空间效果的视觉艺术技巧，它基于人类视觉感知的自然法则，即“近大远小”的原则。这个原则指出，当我们观察一个场景时，距离我们较近的物体看起来比远处的物体更大、更清晰、色彩更鲜明，而远处的...
Flutter 实现酷炫的3D效果示例代码
08-18
在 Flutter 中，使用 Transform 组件可以添加近大远小的效果。示例代码中，使用了 Transform 组件来添加近大远小的效果。 本文详细介绍了使用 Flutter 实现酷炫的 3D 效果，并提供了详细的实例代码，对大家的学习或...
近大远小的透视现象_教学设计.doc
09-27
近大远小的透视现象_教学设计.doc
unity3d中同一个物体远小近大的原因 1.相似三角形解释 2.要看投影
focus-unchanged-thing
08-11 933
在摄像机的拍摄下，A B2个相同的物体，A物体在远处，B物体在近处。 当他们在一个透视摄像机的拍摄下。投影到视口上时，根据相似三角形的原理，得到投射的4个黑点，很容易看出来，A物体投射到屏幕上物体较小，B大一点。 ...
Unity中人物描边的“近大远小”优化
u011617146的博客
01-09 1752
由于“近大远小”效应，如果描边大小是统一的。那样就会导致人物走到近处时边缘就太大了（这个时候应该动态缩减）下面提供一个算法： v2f vert (appdata v) { float4 projPos = UnityObjectToClipPos(v.pos); float4 viewSpacePos = mul(UNITY_MATRIX_MV, v.pos); ...
Unity游戏引擎挖坑记之3d游戏2d显示管理(血条、飘血)（一）
lvfy的博客世界
11-25 2864
需求： 实现角色的血条和大地图中显示掉血文本显示(飘血的位置不跟随产生对象运动)。 解决方案： 1、2d血条作为属性放置到3d对象身上。(2d血条的父节点是3d对象)。飘血文字的父节点是3d地图载体。 2、另外制作一个不需摄像机就能展示的Canvas，将血条和飘字的放置到该Canvas中。 方案实现分析： 方案1实现分析： 如果实现2d血条作为3d对象的属性，则该血条需要使用Canv
Unity技术详解之血条的实现
qq_23348443的专栏
01-11 2054
欢迎来到unity学习、unity培训 这里有很多U3D资源、U3D培训视频、U3D教程、U3D常见问题、U3D项目源码，我们致力于打造业内unity3d培训、学习第一品牌     Unity技术详解之血条的实现     在很多游戏中都需要用到血条的，血条系统如今已经成为游戏中的主要系统，今天就来讲解一下血条的实现吧     //首先是要先进行声明需要用
Unity角色血条等信息制作
SwenV5的专栏
03-20 778
第一种方法可以使用NGUI控件，但是要注意近大远小 using UnityEngine; using System.Collections; public class DriverInfoNGUI : MonoBehaviour { private Transform mFollowingObject = null; public float mOffsetY = 2f;
如何在cesium项目中达到html结构近大远小的效果
最新发布
08-28
### 回答1： 要在Cesium中实现HTML结构近大远小的效果，可以使用Cesium的3D Tiles功能。3D Tiles是一种用于将大量3D数据分层的格式，可以用来管理和渲染具有不同分辨率的3D模型。通过使用3D Tiles，可以在不牺牲质量的情况下，根据距离动态加载和卸载3D模型。 在使用3D Tiles时，可以设置不同层级的3D模型的显示距离和细节级别。这些设置可以控制3D模型随着距离的增加而变得更加简单，从而实现HTML结构近大远小的效果。 例如，可以将较远的3D模型设置为低细节级别，使其在远处显示为简单的形状。而在靠近时，可以将细节级别提高，使其显示更多的细节和结构。 下面是一个使用3D Tiles实现HTML结构近大远小效果的示例代码： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var tileset = new Cesium.Cesium3DTileset({ url : 'path/to/3d/tiles' }); // 设置3D Tiles的细节级别和显示距离 tileset.maximumScreenSpaceError = 16; tileset.maximumLevel = 5; tileset.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0.0, 5000.0); viewer.scene.primitives.add(tileset); ``` 在这个示例中，`maximumScreenSpaceError`和`maximumLevel`属性控制了3D模型的细节级别，`distanceDisplayCondition`属性控制了3D模型的显示距离。通过调整这些属性的值，可以实现不同程度的HTML结构近大远小效果。 ### 回答2： 在Cesium项目中实现HTML结构近大远小的效果，可以通过以下几个步骤实现： 1. 创建HTML结构：首先，你需要在Cesium场景中添加一个HTML元素用来承载你想要展示的内容。你可以使用Cesium的Entity API创建一个自定义的HTML元素，并通过设置其position属性来指定其在场景中的位置。 2. 调整HTML元素的样式：通过CSS样式来控制HTML元素的外观，例如大小、颜色和字体等。你可以在HTML元素上添加class或id，然后在CSS文件中定义这些样式，从而实现HTML元素的近大远小效果。 3. 按照视角调整HTML元素的大小：Cesium提供了视角变化的事件，可以根据用户的视角变化来调整HTML元素的大小。通过监听场景的"camera.moveEnd"事件，可以获取到相机的位置和朝向，并根据这些信息来计算HTML元素应该显示的大小。 4. 实时更新HTML元素的位置和大小：在Cesium中，可以使用Viewer的renderEvent事件来实现每一帧渲染之前调用的函数。在这个函数中，你可以更新HTML元素的位置和大小，从而实现实时的近大远小效果。 5. 优化性能：为了避免频繁更新HTML元素的位置和大小，可以设置一个阈值，当相机的距离超过这个阈值时才进行更新。可以调整这个阈值来平衡性能和效果的表现。 综上所述，通过创建HTML结构并调整其样式，根据视角变化实时更新其位置和大小，就可以在Cesium项目中实现近大远小的效果。 ### 回答3： 在Cesium项目中实现HTML结构近大远小的效果可以通过以下步骤实现： 1. 创建HTML标记：首先，你需要创建一个HTML标记，它将被用作你想要实现效果的模板。可以使用div、span或其他HTML元素来创建结构。 2. 将HTML标记添加到Cesium实体：将HTML标记添加到Cesium实体中，可以使用Cesium实体上的属性，如属性和属性表达式。例如，你可以使用Entity的description属性来添加HTML标记。 3. 定义HTML标记的样式：通过CSS样式表或内联样式，定义HTML标记的样式。你可以使用CSS属性如大小（width、height）、位置（position）、文本对齐（text-align）等属性来控制HTML标记的样式。 4. 进行相机远近的计算：通过Cesium的相机属性，如相机位置（camera.position）和相机距离（camera.distance）来进行相机的远近计算。根据相机距离的变化，可以动态改变HTML标记的大小。 5. 实现HTML标记的近大远小效果：根据相机距离的变化，使用JavaScript或其他编程语言，在合适的时机修改HTML标记的样式或属性，从而使其近大远小。 6. 监听相机事件：通过监听相机的事件，如相机移动事件（camera.moveEnd）或场景更新事件（scene.postRender），可以在适当的时候更新HTML标记的样式或位置。 通过以上步骤，你可以在Cesium项目中实现HTML结构近大远小的效果。这样，当用户在场景中移动相机时，HTML标记将根据相机的距离动态调整大小，达到近大远小的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值