Canvas mask texture

Hi,

I’m wondering whether it’s possible to mask a texture with canvas. By that I don’t mean just using the alpha-channel, but for example cutting a texture in half at runtime. It doesn’t look too great for a healthbar, when I just scale it up and down. That’s how I currently draw my textures:

FCanvasTileItem TileItem(Position, Texture, Size, FColor::White);
TileItem.BlendMode = SE_BLEND_Translucent;
Canvas->DrawItem(TileItem);

Now if, for example, I wanted to cut off parts of my texture, how would I do this? Somehow by changing the BlendMode to something? Apparently there is SE_BLEND_Masked. Not sure how I would specify what to mask though (Apart from the color I specify when creating the FCanvasTileItem).

Thank you in advance. :slight_smile:

This may help you. It’s a tutorial for masked shapes in UMG for oddly shaped health bars. I’m sure it could be modified to look how you want it.

http://www.-.com/?p=233

Thank you for your respond first of all, I am searching for a way to do this in canvas though :slight_smile:

Not that I know of, Canvas is limited in that sense. You can only draw but not clear anything. Though some clever uv tricks can be used to achieve certain things, can you post a sketch or reference to what your final goal is?

It is surely possible somehow. But I guess you need engine know how to do it. After all it was possible in UE3 with the “PushMaskRegion”-Function. I don’t know why Epic deleted that function in UE4… makes no sense to me.

I need this function of rectangular masking for over one year now, but no one shared anything as far as I know. If you find something, please let me know!

Sure:

This is not the texture I will be using, I just found this one via google image-search. I currently use placeholders while figuring out how I am going to approach this. The white box represents the actual bounds of the red healthbar-texture.

The first one is just the full healthbar. The second one is how it would currently look, the texture would just be scaled down on the x-axis. In this specific example it’s not horrible since there is not alot of details where you would notice a lot of the scaling, but it’s definitly visible. The third bar is how I would like it to be. I would like to essentially make a part of the texture invisible.

Now I’m really interested about those UV-tricks you are talking about :slight_smile:

In my case it’s not a huge deal: I could either live with the scaling and just create a texture where it’s not extremely distracting, or I could draw another texture above the healthbar which just has the color of the background. Unfortunately this would mean, that the background would have to just be one color or else it would propably look really weird.

If there is a way to do it though and it’s not well above my skilllevel, that would be ideal. I’m pretty sure knowing some way of doing this would also be useful to know when designing new UI-things later.

thats simple, you want to scale your draw size and your uvlength on the x axis based off your health %

Yeah, in this case it would be really simple. Just draw a portion of the texture:

float xPercentage = 0.5f; //50 percent of health
Canvas->DrawTexture(Texture, PosX, PosY, [HealthbarTexture width in px] * xPercentage, [HealthbarTexture height in px], 0, 0, xPercentage, 1);

Unfortunately this doesn’t work if you want to mask out big parts of the hud with multiple textures.

You’re right, this is really easy with a simple texture like this! Thank you very much :slight_smile: This will do in my case. I didn’t know about those UV-parameters. Immediately looks a lot nicer this way.

You’re welcome. :slight_smile:

note that the draw texture function has a few overloads and that the uvlength values may or not be scalar, so if you wanted to make one sheet with both the background and the bar you can, just remember to multiply the % on the uv length when not using scalar values :smiley:

oh on another note, you can animate uvs too :smiley: depening on how the texture has its clamping behavior, you could so say an animated heartbeat that gets smaller and smaller while scrolling the uvs ro the right or left, as in UV.X += deltatime or something like that, when it goes over the image size, the texture will tile, mirror, or clamp depending on the behavior of the texture asset ;D

ha found an old video, all the ui is with canvas:

https://www.youtube.com/watch?v=jwlTnRZP0lE