用UMG蓝图方式实现3D血条
http://aigo.iteye.com/blog/2270026
参考自Epic官方项目StrategyGame
血条效果:
StrategyHUD.h
/** * Draws health bar for specific actor. * * @param ForActor Actor for which the health bar is for. * @param HealthPct Current Health percentage. * @param BarHeight Height of the health bar * @param OffsetY Y Offset of the health bar. */ void DrawHealthBar(AActor* ForActor, float HealthPct, int32 BarHeight, int OffsetY = 0) const;
StrategyHUD.cpp
void AStrategyHUD::DrawHealthBar(AActor* ForActor, float HealthPercentage, int32 BarHeight, int32 OffsetY) const { FBox BB = ForActor->GetComponentsBoundingBox(); FVector Center = BB.GetCenter(); FVector Extent = BB.GetExtent(); FVector2D Center2D = FVector2D(Canvas->Project(FVector(Center.X,Center.Y,Center.Z + Extent.Z))); float ActorExtent = 40; if (Cast<APawn>(ForActor) != NULL) { AStrategyChar* StrategyChar = Cast<AStrategyChar>(ForActor); if( ( StrategyChar != NULL ) && ( StrategyChar->GetCapsuleComponent() != NULL ) ) { ActorExtent = StrategyChar->GetCapsuleComponent()->GetScaledCapsuleRadius(); } } else if (Cast<AStrategyBuilding>(ForActor) != NULL) { Center2D = FVector2D(Canvas->Project(ForActor->GetActorLocation())); ActorExtent = 60; } FVector Pos1 = Canvas->Project(FVector(Center.X,Center.Y - ActorExtent*2, Center.Z + Extent.Z)); FVector Pos2 = Canvas->Project(FVector(Center.X,Center.Y + ActorExtent*2, Center.Z + Extent.Z)); float HealthBarLength = (Pos2-Pos1).Size2D(); AStrategyPlayerController* MyPC = GetPlayerController(); IStrategyTeamInterface* ActorTeam = Cast<IStrategyTeamInterface>(ForActor); UTexture2D* HealthBarTexture = EnemyTeamHPTexture; if (ActorTeam != NULL && MyPC != NULL && ActorTeam->GetTeamNum() == MyPC->GetTeamNum()) { HealthBarTexture = PlayerTeamHPTexture; } float X = Center2D.X - HealthBarLength/2; float Y = Center2D.Y + OffsetY; FCanvasTileItem TileItem( FVector2D( X, Y ), HealthBarTexture->Resource, FVector2D( HealthBarLength * HealthPercentage, BarHeight ), FLinearColor::White ); TileItem.BlendMode = SE_BLEND_Translucent; TileItem.UV1 = FVector2D(HealthPercentage, 1.0f); Canvas->DrawItem( TileItem ); //Fill the rest of health with gray gradient texture X = Center2D.X-HealthBarLength/2 + HealthBarLength * HealthPercentage; Y = Center2D.Y + OffsetY; TileItem.Position = FVector2D( X, Y ); TileItem.Texture = BarFillTexture->Resource; TileItem.UV1 = FVector2D(1.0f, 1.0f); TileItem.Size = FVector2D( HealthBarLength * (1.0f - HealthPercentage), BarHeight ); TileItem.SetColor(FLinearColor(0.5f, 0.5f, 0.5f, 0.5f)); Canvas->DrawItem( TileItem ); }
相关推荐
在UE4(Unreal Engine 4)中,CanvasUI是一种用于创建2D用户界面(UI)的方法,适用于游戏、模拟应用和其他2D图形项目。CanvasUI遮罩是这个系统的一个重要组成部分,它允许开发者实现不透明度控制和部分可见性效果,...
本篇文章将深入解析Canvas的原理与使用方法,并通过实例展示如何用代码绘制一个简单的安卓机器人。 首先,我们需要理解Canvas的基本概念。在Android中,Canvas是一个“画布”,你可以把它想象成一张白纸,开发者...
在UE4(Unreal Engine 4)中,Render Target(渲染目标)是一种强大的技术,它允许开发者将渲染的结果存储在纹理中,以便后续处理或显示。在这个文档中,我们将深入探讨如何利用Render Target在游戏场景中实现画板...
4. 使用save()和restore()管理Canvas状态,以进行复杂的绘制操作。 5. 应用颜色和渐变,增加视觉效果。 6. 考虑性能优化,避免过度绘制。 通过以上的步骤和技巧,我们可以创造出独特的Android机器人形象,展示出...
1. **canvas API的使用**:在canvas上绘制流程图,首先要获取canvas元素,然后通过`getContext('2d')`方法获取2D渲染上下文。所有的绘图操作,如画线、填充形状、设置线条样式等,都是通过对这个2D渲染上下文进行...
- `drawImage(image, dx, dy)`、`drawImage(image, dx, dy, dw, dh)`、`drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)`:将图像绘制到Canvas上,支持缩放和裁剪。 - `createPattern(image, repetition)`:...
HTML5是现代网页开发的重要标准,它引入了许多新...代码通常包括定义Canvas元素、绘制函数、布局逻辑以及可能的交互处理。学习和理解这个框架代码,将有助于提升你在HTML5 Canvas图形绘制和组织结构图设计上的技能。
在这个"html5 canvas自动绘制背景图片效果代码"示例中,我们将探讨如何利用Canvas API实现背景图片的动态加载和绘制。 首先,我们需要在HTML文件中创建一个`<canvas>`元素,并为其分配一个ID,以便通过JavaScript来...
基于canvas的鼠标绘制矩形框的demo,多个canvas对象下支持选中,平移,删除操作,代码用VUE实现的
本文将详细介绍如何使用JavaScript编写一个函数,实现在Canvas上绘制文本内容时自动换行。 首先,我们需要理解Canvas API中的`fillText()`方法,它是用来在Canvas上填充文本的。但这个方法不支持文本换行,所以我们...
在`Canvas.vue`内部,我们将定义`<canvas>`标签,并通过JavaScript来操作其上下文(`canvas.getContext('2d')`),实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”,这通常意味着...
Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js...
这个压缩包文件"Canvas饼状图、绘制文字、绘制图像.zip"显然包含了关于如何使用Canvas进行特定图形绘制的教程或示例,特别是饼状图、文字和图像的绘制方法。 首先,让我们详细了解一下饼状图的绘制。饼状图是一种...
基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+...
在本文中,我们将深入探讨如何使用HTML5的`canvas`元素来绘制风场效果,并将其部署到Web容器中,如Nginx、Apache或Tomcat。`canvas`是Web开发中的一个强大工具,允许开发者在网页上进行动态图形绘制。在风场可视化...
接下来,我们将使用JavaScript来获取Canvas的2D渲染上下文,并初始化绘图环境。在JavaScript中,我们通常这样操作: ```javascript var canvas = document.getElementById('lightningCanvas'); var ctx = canvas....
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-...##wx.createCanvasContext绘制海报,而不是canvas2d绘制海报,海报高度没限制
使用canvas 鼠标事件绘制多边形,鼠标按下事件,移动事件绘制,双击事件结束绘制。原生js,使用添加事件监听,移除事件监听方法来进行绘制开始和结束。简单小demo
在本文中,我们将深入探讨如何使用HTML5的Canvas API来绘制音频波形,这是一个纯JavaScript实现的方法。Canvas作为Web开发中的一个强大工具,允许我们进行动态图形绘制,非常适合用来展示音频文件的波形。让我们一起...
本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码,供大家参考,具体内容如下 1.代码 <template> ;"> <canvas id="myCanvas" ref="myCanvas" width="460" height="240" @mousedown="mousedown" ...