`
aigo
  • 浏览: 2568931 次
  • 性别: Icon_minigender_1
  • 来自: 宜昌
社区版块
存档分类
最新评论

[UE4][Canvas]用C++代码绘制血条(HealthBar)

UE4 
阅读更多

用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 );      
}  

 

  • 大小: 357.7 KB
分享到:
评论

相关推荐

    UE4 CanvasUI遮罩

    在UE4(Unreal Engine 4)中,CanvasUI是一种用于创建2D用户界面(UI)的方法,适用于游戏、模拟应用和其他2D图形项目。CanvasUI遮罩是这个系统的一个重要组成部分,它允许开发者实现不透明度控制和部分可见性效果,...

    Canvas详解及代码绘制安卓机器人

    本篇文章将深入解析Canvas的原理与使用方法,并通过实例展示如何用代码绘制一个简单的安卓机器人。 首先,我们需要理解Canvas的基本概念。在Android中,Canvas是一个“画布”,你可以把它想象成一张白纸,开发者...

    UE4 画板RenderTarget实现方法.doc

    在UE4(Unreal Engine 4)中,Render Target(渲染目标)是一种强大的技术,它允许开发者将渲染的结果存储在纹理中,以便后续处理或显示。在这个文档中,我们将深入探讨如何利用Render Target在游戏场景中实现画板...

    使用Canvas类绘制android机器人

    4. 使用save()和restore()管理Canvas状态,以进行复杂的绘制操作。 5. 应用颜色和渐变,增加视觉效果。 6. 考虑性能优化,避免过度绘制。 通过以上的步骤和技巧,我们可以创造出独特的Android机器人形象,展示出...

    基于canvas的流程图绘制程序

    1. **canvas API的使用**:在canvas上绘制流程图,首先要获取canvas元素,然后通过`getContext('2d')`方法获取2D渲染上下文。所有的绘图操作,如画线、填充形状、设置线条样式等,都是通过对这个2D渲染上下文进行...

    HTML5 Canvas核心技术代码

    - `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图形绘制和组织结构图设计上的技能。

    html5 canvas自动绘制背景图片效果代码

    在这个"html5 canvas自动绘制背景图片效果代码"示例中,我们将探讨如何利用Canvas API实现背景图片的动态加载和绘制。 首先,我们需要在HTML文件中创建一个`&lt;canvas&gt;`元素,并为其分配一个ID,以便通过JavaScript来...

    CANVAS实现鼠标绘制矩形框

    基于canvas的鼠标绘制矩形框的demo,多个canvas对象下支持选中,平移,删除操作,代码用VUE实现的

    vue+canvas绘制图形

    在`Canvas.vue`内部,我们将定义`&lt;canvas&gt;`标签,并通过JavaScript来操作其上下文(`canvas.getContext('2d')`),实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”,这通常意味着...

    canvas绘制文本内容自动换行的实现代码

    本文将详细介绍如何使用JavaScript编写一个函数,实现在Canvas上绘制文本内容时自动换行。 首先,我们需要理解Canvas API中的`fillText()`方法,它是用来在Canvas上填充文本的。但这个方法不支持文本换行,所以我们...

    Canvas绘制心电图

    使用Canvas绘制心电图,我们可以创建自定义的可视化,用于教育、模拟或数据展示目的。 Canvas是HTML5的一个核心特性,它提供了一个二维绘图环境,允许开发者通过JavaScript代码动态地绘制图形。要绘制心电图,我们...

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀!

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js...

    Canvas饼状图、绘制文字、绘制图像.zip

    这个压缩包文件"Canvas饼状图、绘制文字、绘制图像.zip"显然包含了关于如何使用Canvas进行特定图形绘制的教程或示例,特别是饼状图、文字和图像的绘制方法。 首先,让我们详细了解一下饼状图的绘制。饼状图是一种...

    基于canvas绘制大坝浸润线源码+项目说明.zip

    基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+...

    wxml2canvas微信根据wxml绘制海报

    ##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-...##wx.createCanvasContext绘制海报,而不是canvas2d绘制海报,海报高度没限制

    canvas绘制音频波形-纯js自写

    在本文中,我们将深入探讨如何使用HTML5的Canvas API来绘制音频波形,这是一个纯JavaScript实现的方法。Canvas作为Web开发中的一个强大工具,允许我们进行动态图形绘制,非常适合用来展示音频文件的波形。让我们一起...

    canvas绘制动态心电图

    最后,提到的"CanvasXjt"可能是示例代码的文件名,可能包含一个完整的示例,展示了如何使用Canvas绘制动态心电图的步骤。如果需要深入学习,可以研究这个文件,理解其背后的逻辑和实现细节。 总的来说,使用Canvas...

    如何用Canvas绘制精美的手表

    绘制时钟Canvas需要的知识点,案例 绘制时钟Canvas,源代码。精美手表、时钟案例。

    详解微信小程序canvas圆角矩形的绘制的方法

    border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 ...

Global site tag (gtag.js) - Google Analytics