I posted this thread in the triggers forums and the general idea I got was that I needed to make a PNG file in photoshop with a transparent background.
Basically I want to be able to display a player's health in an RPG map as a circle that darkens clockwise. For example, it starts off as a green circle, at 75% health it would be black from the 12 o'clock to 3 o'clock position, and so on. The idea is that I can make a fraction of the circle (1/100th, to be exact, which has an angle measure of 3.6 degrees) as a white image, then have the rest of the square be transparent, since the files have to be rectangular shaped. After saving it as a PNG file I can convert it to DDS using Aorta, import it into the game, and place 100 images in the dialog, all at increasing rotations with intervals of 3.6 degrees, giving me a full circle that I can darken 1% at a time.
I downloaded the photoshop trial, but I have no idea what I'm doing. I was told to use alpha channels to make part of it transparent, and I have no idea what that means. I was also able to measure out 3.6 degrees on a white circle with a transparent background using the measure tool, but every time I try to cut the piece out, the measure tool disappears, so I have no idea where I need to cut at. I have pretty much no art-related experience, so if anyone could lend a hand, I would be very grateful!
That's actually almost perfect! The editor only accepts rotations of integer degrees, so it takes me 121 slices instead of 100, and there's some weird dots of black in the inner part of the circle, but this is close enough.
No worries. If you take a look at the PSD files and check under channels, you will see an alpha channel there. That is the layer that actually defines which areas of the image are transparent. Black means fully transparent, white means fully opaque. A mix of both means semi-transparent.
The black dots may be due to the pixel differences when I tried to cut the slice, was quite hard to get it perfect since the precision was on a very small scale.
Actually it turns out the dots are just places not filled in with the rotational pattern, so whatever is behind shows through. It actually makes a kinda cool pattern in the center when I put a black circle inside a colored circle to make a colored ring.
Thanks for explaining the alpha channels more as well.
I'll post an update on how it works out.
EDIT: It works great! Using a loop trigger to check the fraction of the player's health, I can set each piece to either green if it meets the health requirement, or black if it doesn't. This makes it into a fully functional life bar (or in this case, circle), and it is a lot easier to judge how much health is left than if it was just a long life bar. Thanks again!
EDIT 2: If anyone in the future wants to use a system like this, shoot me a PM and I'll help you out.
Sorry for the delay, been busy. Here's a screenshot with the circles in a dialog. I used 121 100x100 images using the small piece you posted above, all rotated on an increasing interval of 3 degrees (Thank God for loop functions), because the editor only allows integer degree rotations. I then centered a 75x75 black circle on the middle, and due to the holes in the circles, there are a bunch of dots in a pattern in the middle. I tried using multiple black circles of decreasing size to cover all the dots, but it just didn't work. Not a big deal right now, but I'd like to have that issue resolved when the map is done (But this is literally the first thing I've worked on, so I'm not in a hurry).
I blame my poor quality image lol. I'm a lousy artist. Try set the render priority of the black circles to a number above 512. I suspect they might be rendering below your circles, thus they aren't exactly covering up the dots.
I have no clue what the render priority is, but I can tell you that it also happened with the original green circle, there were dots that weren't covered by the green circle, which is why I decided to make it a ring instead of a circle, so that it wouldn't look like a circle with holes in it, but some of the green sticks through the holes in the black circle. So basically the black background is showing through some of the green, and some of the green is showing through the black.
Render priority determines the order in which dialog items overlap one another. The higher it is set to, the higher the layer. There should be a trigger function somewhere that allows you to set dialog item render priority. Can't remember the exact function call though, I normally do it through script, so I don't know how through GUI. DialogItemSetRenderPriority I think. If you create all dialog items with the same priority, they will overlap one another depending on the order you created them. Later items will always cover up the earlier ones.
I can't quite imagine how your dialog items are currently being created. But I may be able to help if you could paste the creation trigger loop here.
Well, I did have the loop set up to where it would create 1 green slice, then 1 black slice on top of that, so I thought it might have been that part of the 2nd green slice overlaps part of the 1st black slice, so I put them in separate loops, making sure to create all the green pieces, THEN all the black pieces, and it still didn't help. I then tried setting the render priority for the black slices to like 550 or something, and even that had no effect.
Without pasting the whole trigger, here's roughly the flow of the loop:
(looper) = 121
while (looper) > 0
{
Create Image with dimensions 100x100 using image 1-100-Circle.dds with tint color green
Set PlayerHealthCircleImage<looper> to last created dialog item
Set PlayerHealthCircleImage<looper> rotation to (3 * (121 - looper))
looper = (looper - 1)
}
That's the how I make a circle with a green tint. I then repeated it twice for the other 2 circles shown in the picture (teal is Charge and purple is Mana), then I did the same with dimensions 75x75 on the inside of the circle with the tint color set to black to make the darkened inside. Then, when I need to charge a slice of the circle, I can reference it with the variable "PlayerHealthCircleImage<array#>, and set its tint color to black.
Hm.. here's an idea. Rather than using black slices, would it be an acceptable solution to make a single black circle .dds image and have it created on top of the 121 tinted slices? It could be that the black slices do not perfectly cover the tinted ones, thus is the reason for the black dots.
I'm guessing here that you are actually using the 1-100-Circle.dds and tinting it black to make black slices?
Wow, not sure why I didn't think of that lol. Yes, I was using the same slices and just tinting them black, but using just a full circle would be so much easier.
http://www.sc2mapster.com/forums/development/triggers/32906-non-square-image-in-a-dialog/#p12
I posted this thread in the triggers forums and the general idea I got was that I needed to make a PNG file in photoshop with a transparent background.
Basically I want to be able to display a player's health in an RPG map as a circle that darkens clockwise. For example, it starts off as a green circle, at 75% health it would be black from the 12 o'clock to 3 o'clock position, and so on. The idea is that I can make a fraction of the circle (1/100th, to be exact, which has an angle measure of 3.6 degrees) as a white image, then have the rest of the square be transparent, since the files have to be rectangular shaped. After saving it as a PNG file I can convert it to DDS using Aorta, import it into the game, and place 100 images in the dialog, all at increasing rotations with intervals of 3.6 degrees, giving me a full circle that I can darken 1% at a time.
I downloaded the photoshop trial, but I have no idea what I'm doing. I was told to use alpha channels to make part of it transparent, and I have no idea what that means. I was also able to measure out 3.6 degrees on a white circle with a transparent background using the measure tool, but every time I try to cut the piece out, the measure tool disappears, so I have no idea where I need to cut at. I have pretty much no art-related experience, so if anyone could lend a hand, I would be very grateful!
Thanks!
@Edicitsep: Go
What dimensions do you need it to be?
Edit: Might not be perfect, I used a 400x400 circle. Its solid white so you can use the editor to easily manipulate colors/opacity.
@FuzzYD: Go
That's actually almost perfect! The editor only accepts rotations of integer degrees, so it takes me 121 slices instead of 100, and there's some weird dots of black in the inner part of the circle, but this is close enough.
Thanks so much for your help!
@Edicitsep: Go
No worries. If you take a look at the PSD files and check under channels, you will see an alpha channel there. That is the layer that actually defines which areas of the image are transparent. Black means fully transparent, white means fully opaque. A mix of both means semi-transparent.
The black dots may be due to the pixel differences when I tried to cut the slice, was quite hard to get it perfect since the precision was on a very small scale.
@FuzzYD: Go
Actually it turns out the dots are just places not filled in with the rotational pattern, so whatever is behind shows through. It actually makes a kinda cool pattern in the center when I put a black circle inside a colored circle to make a colored ring.
Thanks for explaining the alpha channels more as well.
I'll post an update on how it works out.
EDIT: It works great! Using a loop trigger to check the fraction of the player's health, I can set each piece to either green if it meets the health requirement, or black if it doesn't. This makes it into a fully functional life bar (or in this case, circle), and it is a lot easier to judge how much health is left than if it was just a long life bar. Thanks again!
EDIT 2: If anyone in the future wants to use a system like this, shoot me a PM and I'll help you out.
@Edicitsep: Go
Nice. Do post a screenshot of it working, I'd like to take a look :)
yeah, show it to us
I'm at college atm, I'll take a few screenshots when I get home and post them. I'm guessing I use the add attachment option at the bottom?
@Edicitsep: Go
Yeap, or you can add it with the add attach button next to the edit link on your posts.
Sorry for the delay, been busy. Here's a screenshot with the circles in a dialog. I used 121 100x100 images using the small piece you posted above, all rotated on an increasing interval of 3 degrees (Thank God for loop functions), because the editor only allows integer degree rotations. I then centered a 75x75 black circle on the middle, and due to the holes in the circles, there are a bunch of dots in a pattern in the middle. I tried using multiple black circles of decreasing size to cover all the dots, but it just didn't work. Not a big deal right now, but I'd like to have that issue resolved when the map is done (But this is literally the first thing I've worked on, so I'm not in a hurry).
@Edicitsep: Go
I blame my poor quality image lol. I'm a lousy artist. Try set the render priority of the black circles to a number above 512. I suspect they might be rendering below your circles, thus they aren't exactly covering up the dots.
@FuzzYD: Go
I have no clue what the render priority is, but I can tell you that it also happened with the original green circle, there were dots that weren't covered by the green circle, which is why I decided to make it a ring instead of a circle, so that it wouldn't look like a circle with holes in it, but some of the green sticks through the holes in the black circle. So basically the black background is showing through some of the green, and some of the green is showing through the black.
@Edicitsep: Go
Render priority determines the order in which dialog items overlap one another. The higher it is set to, the higher the layer. There should be a trigger function somewhere that allows you to set dialog item render priority. Can't remember the exact function call though, I normally do it through script, so I don't know how through GUI. DialogItemSetRenderPriority I think. If you create all dialog items with the same priority, they will overlap one another depending on the order you created them. Later items will always cover up the earlier ones.
I can't quite imagine how your dialog items are currently being created. But I may be able to help if you could paste the creation trigger loop here.
@FuzzYD: Go
Well, I did have the loop set up to where it would create 1 green slice, then 1 black slice on top of that, so I thought it might have been that part of the 2nd green slice overlaps part of the 1st black slice, so I put them in separate loops, making sure to create all the green pieces, THEN all the black pieces, and it still didn't help. I then tried setting the render priority for the black slices to like 550 or something, and even that had no effect.
Without pasting the whole trigger, here's roughly the flow of the loop:
(looper) = 121
while (looper) > 0
{
Create Image with dimensions 100x100 using image 1-100-Circle.dds with tint color green
Set PlayerHealthCircleImage<looper> to last created dialog item
Set PlayerHealthCircleImage<looper> rotation to (3 * (121 - looper))
looper = (looper - 1)
}
That's the how I make a circle with a green tint. I then repeated it twice for the other 2 circles shown in the picture (teal is Charge and purple is Mana), then I did the same with dimensions 75x75 on the inside of the circle with the tint color set to black to make the darkened inside. Then, when I need to charge a slice of the circle, I can reference it with the variable "PlayerHealthCircleImage<array#>, and set its tint color to black.
Hm.. here's an idea. Rather than using black slices, would it be an acceptable solution to make a single black circle .dds image and have it created on top of the 121 tinted slices? It could be that the black slices do not perfectly cover the tinted ones, thus is the reason for the black dots.
I'm guessing here that you are actually using the 1-100-Circle.dds and tinting it black to make black slices?
@FuzzYD: Go
Wow, not sure why I didn't think of that lol. Yes, I was using the same slices and just tinting them black, but using just a full circle would be so much easier.
@Edicitsep: Go
hope that solved your problem :D