HUD - Layout #3

15 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

All right, welcome back everyone in this video we are going to continue laying out our HUD specifically we are going to be laying out the white magic skill portion of our HUD. Now there's a lot of work to do in this one and you have the benefit of pausing the video where you need. So I'm going to try to move a little bit faster in this one to ensure that we get everything done within the allotted time. So if you haven't already done so, find your W BP HUD widget in your content Metroidvania widgets folder. Double click on that guy to open it up. This is what we have so far.

And just like I did in the last video, I'm going to add the widgets first down here into our hierarchy and then I'm going to go back and set the details. I think I'm going to be able to work in a little bit quicker fashion by doing that. Okay, so the first one I'm going to add here is an image I'm going to drag and drop this on top of our Canvas panel. And I'm going to hit f2 here and I'm going to call this W, magic Starburst. Okay, next one I'm going to add is an overlay. I'm going to do some search for an overlay.

This one is also going to be attached to our canvas panel. I'm going to call this f2 w magic underscore overlay. Next one I'm going to be adding is going to be attached to my overlay it is also going to be an image. So select an image. Drag and drop this on top of the overlay like this. And you have to be certain with these widgets that you are laying them out here in your hierarchy just as I am doing so like your man overlay over here.

These widgets need be attached to the man overlaid not the canvas panel. So you want to ensure that you're doing it like I'm doing it here. So I'm going to click f2 on this and I'm going to call this one w a magic image. Then I'm going to bring in a progress bar, drag and drop this on top of our overlay is well hit f2. This is going to be w magic. underscore cool down.

It's going to be a cooldown timer. Okay, next one we are going to add is a border widget. I'm going to drag and drop this one on top of our canvas panel. This one is going to be renamed to W magic underscore border. Next one we are going to add is Doo doo. So this one's gonna be a little confusing because it's gonna be an image widget that I'm going to attach to the canvas panel however, I am going to rename it w magic underscore button and the reason I'm going to call it button even though it is an image widget and not a button widget is because this is going to be an image of what button to press.

Okay, couple more widgets to add we're going to add a text widget gonna also attach this one to the canvas panel. I'm going to rename this one hitting f2 on it w magic underscore, man a cost some text it's going to print out how much the given white magic costs then another text widget here going to attach this one to the canvas panel. This one is going to be called The w magic underscore. txt and now to set some details and I have some handy dandy notes to help keep me on track I'm going to select our w magic Starburst first and over to the right hand side I'm going to set the anchor for this to be our upper right square here. The position x for this is going to be negative 400. The position y we will set to be 55.

The size x is going to be 50 and the size y is also going to be 50. And the appearance image appearance brush image is going to be I'm going to left click hold down left click, really left click and this is going to be t underscore star Starburst That guy that we imported there, this is gonna be a little Starburst effect that's gonna be played behind our slotted white magic whenever we change what is currently slotted as our current active white magic. Okay, next like george w magic overlay, I'm flipping over my page of notes here. The anchor for this one will also be the upper right square. The position x for this one will be negative for 20 to 33 for the position y 94 the size x and the size y so a square about that size. I'm gonna set the Z order here to be five because I'm gonna have a few things kind of stacked on top of each other.

And as the order of five is going to put this one in the stack where I will want it to go. So that is gonna do all for that one. Next let's come under our w magic image select that guy. We are simply going to leave the padding and alignment settings alone. However, under appearance and brush, we're going to left click, hold down the left click release the left click, and this is going to be t underscore a magic underscore empty. That's what this slot is going to look like when we don't have any magic slotted in there.

We are eventually going to bind this to a variable so we can slot out that image but for now, it's gonna be black. Next, come under the magic cooldown, select that widget. And for our different details here, we're going to change our horizontal alignment in our vertical alignment to be fill so it's gonna fill up this entire space for these styles, settings, Make sure you change your tint here the a value the alpha value you're going to change that to be zero so it currently looks like it's completely invisible. The fill image right here we're going to change out our fill image here so left click, hold down left click, release left click in this we're going to look for t underscore cool down that texture that you imported we are going to set the a value for this so come under tense we're going to set the a value for this to be point five so it is going to be somewhat transparent.

And we are going to set the draw as not as a box but as an image. Um, let me see if there's something else we need to set for this. Yes sir, is we need to set some progress settings. We want this bar type to fill not from left to right but right Rather, bottom to top. And for the percentile, eventually we're going to bind this to variable but for now we're going to set this to a one. So that is going to give us a little bit of a fill there.

So our fill color and opacity here, let's set this to be straight white as well, shall we. So I'm just going to i, all I did there is I selected our color bar. And I set this to 111, etc. I'm going to click ok there. So that's gonna be our fill color and opacity. So if I change our percentage here, like so you can see how this is going to be a cooldown that decreases over time like so.

Pretty cool. Okay, next one, the W magic border. What kind of settings do we have for this one? Well, coming up to the upper right, we're going to set the anchor for this to be the upper right square. position x is going to be next Negative 462 position y is going to be negative five. size x and size y are both going to be 160.

Okay, the Z or so where do I want this on the stack, I'm going to set this to be a z order of 10. I think I set my z order for these in increments of five for all these. So instead of like 123, I set you like 05 10. And for the appearance for this, I'm going to skip over this content area for the parents brush. Brush image right down here. I'm going to left click hold down, left, click release, left click and I'm going to do a search for tea underscore white magic.

So that is going to sort of be our container for our white magic image. All right. So if I was to set our z order here to be something like zero, you can see it would be a little bit behind, I would still look kinda normal, but I want this to be on top of everything. So I'm going to set that to be 10. You can see my alignments are not perfect, but it's pretty good. I'm pretty happy with that.

Okay, next we're going to select a W magic button. We are going to set the anchor for this to be the upper right corner. position x is going to be a negative 510 relative to that right corner position y is going to be 45 positive relative to that right corner anchor. This size x is going to be 65 size y is going to be 60. We're going to set the Z or for this to be 15. We don't really need to set that for this but it's going to be most on top if you will and For the appearance, brush image, left click, release.

And down here we're gonna do a search for that T underscore, l trigger. Oh one. So there is our l trigger button. Looking pretty snazzy. We're going to have to press the L trigger button to activate our white magic skill whatever is slotted in there, so that's something to look forward to. Okay, next we're going to select our w Magic Man accost.

The anchor for this one is also going to be the upper right corner. The position x relative to that upper right corner anchor is going to be negative 400 position y 96 size x in size wise both going to be 50. And our text for this I am going to put in a dummy value a placeholder value of 99 eventually this is Going to be bound to a variable as well. And here too, you see we cannot see that 99 we're going to set our z order here to be 15 so that it comes out on top. Now for the appearance, I'm going to set this to be a yellow color. So I'm going to set our b value here to be zero.

I want a yellow color. The font family I'm going to change this to be Gothic numbers. I'm going to change the size to be 25. So just slightly bigger. And flippin my page and notes we're getting there guys. I am going to set an outline size for this to be too little black stroke around everything.

And I am going to have a little bit of a shadow offset as well. So shadow offset in the x I'm going to set to be to the y is going to be two and you're not going to see this Shadow offset at all until you set the a value that is the alpha value there to be one. So you can actually see how it shadows Now, let me see I'm gonna nudge this over a little bit. So my justification here, I'm gonna set this to be in the middle, so that's gonna bump it about to the middle of this white magic icon holder. That's looking pretty good. So one more to go.

Before we wrap this up, select your white magic text right here. Last widget. We're also going to set this to be anchor of the upper right. The position x is going to be negative for for 15. Position y is going to be 25. size x in size, y is not gonna matter because we are going to size to content so we're going to check this box right here. I'm going to set the Z order to be 15.

So brings it onto the top of the stack here 15 the text I am going to change to say ready. And for the appearance, I'm going to change this to be a yellow text. So if I set the B value here to be zero, that's going to give me yellow font family. I'm going to change this to be Gothic letters. I'm going to change the size here to be 15. The outline settings I'm gonna change this to be a size of two outline color, I'm gonna leave it straight black like it is the shadow offset I'm gonna set to be two in the X in the y and of course I'm not going to see this until I set the a value here to be one and this is centered up pretty good.

So That is going to do it for our white magic HUD, we've got a button telling us which button is going to activate our white magic. We've gotten a little icon slot here an icon holder, if you will. We've got a man of cost associated with activating our white magic right here. And this is going to be a text indicator to let ourselves know when we can use our white magic skill because some of these skills our white magic skills will have a cooldown timer Where is our black magic will not have that same sort of timer. So let's do one more thing guys lit here let's compile in save. Our HUD is shaping up we are almost done.

One more video to go with this. That is going to do it all for this one. We will see you in the next one.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.