Making a GUI Picture Semi-Transparent

[Jaiden]

This is a big one, and I'm going to admit that I'm looking for more of a tutorial/direct answer than simply a "go here change that" since I know this involves direct draw.

How can I make the little GUI pictures (inventory, character, etc) semi-transparent (about 75% opacity) so I can see the screen behind them? Like so:

>! 

Also, they're not floating and they don't have to be if that helps at all.

Thanks.

[Joyce]

You'll need to convert the rendering engine to D3D8 to get a decent result out of this. ;)

There's no tutorial for this, and only a half assed mockup exists of the start of such a system from Robin quite some time ago.. Your best option is to look into D3D8 rendering yourself, or beg Robin to point you into the right direction.

[Zafi]

I have tried this several times, and haven't successed. All I know about making Alpha-Blending is that you need to make your function for it.

[Joyce]

@Zafi:

> I have tried this several times, and haven't successed. All I know about making Alpha-Blending is that you need to make your function for it.

Doing it what way will lag like crazy, eat more resources then most Eclipsians can handle on their PCs.. And tends to flash like crazy. It's a terrible work around, and should be avoided.

[Zafi]

Yeah, forgot to say that it makes it flash like crazy. Better hear Yami… ignore what I said.

[Jaiden]

@Yami:

> You'll need to convert the rendering engine to D3D8 to get a decent result out of this. ;)
>
> There's no tutorial for this, and only a half assed mockup exists of the start of such a system from Robin quite some time ago.. Your best option is to look into D3D8 rendering yourself, or beg Robin to point you into the right direction.

Bummer. Not sure what I'll do about this then. I mean, the windows are closeable right now, but they're still sort of bulky and in the way. This was the optimum solution for my GUI, and I don't think I want to go about redesigning it again.
I'd like to ask Robin's help, but I don't think it will do me any good because I barely know what I'm doing when it comes to editing the source and asking directly would just be…bad.

There is no efficient way just to render the pics themselves semi-transparent? I mean, I found some code on it somewhere once before but it was so unorganized and nothing was explained that I couldn't do anything with it. Would making separate forms work or be just plain stupid?

[Joyce]

Well, another hacky way is to make your windows completely Blt'd, no more clunky windows form elements, and just completely rendered.. this way you can fake transparancy the same way you can do it with tiles, make the top left pixel black, and make what you want 'translucent' in the following pattern:

oxoxox
xoxoxo
oxoxox
xoxoxo

X being blank, O being the color to appear as a fake transparent screen.

It's not a perfect solution, but will save you from rewriting the entire rendering engine.

EDIT: And no, DirectX7 does not support Alpha channels, making it impossible to add translucent parts to your graphics, which is why most shadows on tilesets from RMXP look so dark and awkward, their Alpha channel isn't recognized.

[Jaiden]

@Yami:

> Well, another hacky way is to make your windows completely Blt'd, no more clunky windows form elements, and just completely rendered.. this way you can fake transparancy the same way you can do it with tiles, make the top left pixel black, and make what you want 'translucent' in the following pattern:
>
> oxoxox
> xoxoxo
> oxoxox
> xoxoxo
>
> X being blank, O being the color to appear as a fake transparent screen.
>
> It's not a perfect solution, but will save you from rewriting the entire rendering engine.
>
> EDIT: And no, DirectX7 does not support Alpha channels, making it impossible to add translucent parts to your graphics, which is why most shadows on tilesets from RMXP look so dark and awkward, their Alpha channel isn't recognized.

Yeah I do that same crossing method with my tile's shadows. I'm not sure if I want to do that with the windows then.
I must have found a DX8 tutorial somewhere then because it actually rendered a picture with a variable opacity so you could actually change the value yourself. But working with that is way over my head.

Well, thanks anyway Yami.

[Helladen]

@Yami:

> You'll need to convert the rendering engine to D3D8 to get a decent result out of this. ;)
>
> There's no tutorial for this, and only a half assed mockup exists of the start of such a system from Robin quite some time ago.. Your best option is to look into D3D8 rendering yourself, or beg Robin to point you into the right direction.

Not true. You can use GDI to load PNG images onto the screen, rendering actual files like sprites will require DX8 though.

[Joyce]

I think I tried that once, with various odd results.. But if you say so.

[Helladen]

I've done it, and I'm the biggest noob on here. So it's possible and a lot easier than converting to DX8 for just GUI.

[Joyce]

Interesting, so it doesn't clash with the PicScreen rendering either? Last I tried in EE it caused a mess on that, and either went flashing or showed a blank backdrop.

[Helladen]

Didn't think of that, crude. My bad for the bad advise, but I'm sure there's a way to work around it though.

[Jaiden]

Don't sweat it. And yeah I certainly hope there is a workaround. Or someone knowledgeable enough that is willing to help.

[Robin]

Stop discussing how to mix GDI and DD7.

Transparency and translucency in the _controls_ doesn't translate over to the DD7 rendering. They're just completely different systems.

There's been years worth of discussion on this matter and **no one has ever created a working system.** If you want to prove that it can be done then go do it. Don't sit here smugly claiming it can be done.

Jaiden, it looks clunky because it's just using the default Origins look. There is a ton of wasted space.

I created that window to fit in an off-screen spot which was of a fixed size. Having opaque windows on-screen works just fine. Hell, most mainstream games do it.

It's down to the design being bad rather than making the entire thing translucent.

Here's an example of on-screen working;


[Jaiden]

@Robin:

> Jaiden, it looks clunky because it's just using the default Origins look. There is a ton of wasted space.
>
> I created that window to fit in an off-screen spot which was of a fixed size. Having opaque windows on-screen works just fine. Hell, most mainstream games do it.
>
> It's down to the design being bad rather than making the entire thing translucent.

Good point. I should probably put a bit more time into the GUI design. I'm happy to an extent with it, but it's still too much like Origins, you're right about that. I think it's more the shape of things than the layout. I admit it needs to be cleaned up a bit more, but either way the problem presented here is the semi-transparent thing, which I realize now is out of my hands.
I will fix up the GUI, it's going to take a hundred modifications to get it right. It's easy to rearrange things for the most part, so I'm not worried about that.

[saadhamza]

  Ehh, really lost here(I honestly don't know anything about game programming), but still curious. So, is it possible for us to make opaque windows on EO? I'm assuming so, since Robin posted a screenshot of it, but then why would anyone be talking about how to make it work, or how it's impossible? Nya, it's way to early in the morning for me to be thinking D:

[Robin]

@Zonova:

> Ehh, really lost here(I honestly don't know anything about game programming), but still curious. So, is it possible for us to make opaque windows on EO? I'm assuming so, since Robin posted a screenshot of it, but then why would anyone be talking about how to make it work, or how it's impossible? Nya, it's way to early in the morning for me to be thinking D:

It's in the thread title, Einstein.

[saadhamza]

I realize what the thread is about -_-;. My question is whether you can do it or not. And if you can, then i'm wondering why people are talking about how it's so difficult. I also pointed out that you had made your windows opaque.

(Ehh, Opaque and Semi-transparent are the same thing right? That could be what's screwing with me xD)

[Yxxe]

@Zonova:

> I realize what the thread is about -_-;. My question is whether you can do it or not. And if you can, then i'm wondering why people are talking about how it's so difficult. I also pointed out that you had made your windows opaque.
>
> (Ehh, Opaque and Semi-transparent are the same thing right? That could be what's screwing with me xD)

Opaque != Semi-Transparent.
Semi-Transparent = Translucent.

[Robin]

@Zonova:

> (Ehh, Opaque and Semi-transparent are the same thing right? That could be what's screwing with me xD)

The wonders of Google. Helping cure ignorance since 1998.

[saadhamza]

*facedesk*

Ugh… son of a bitch >.>'

Lol, ok, now that i've got that figured out :3\. So, my question really is, is it possible to make GUIs or windows translucent? Like it shows in Robins screeny.

Warning - while you were typing a new reply has been posted. You may wish to review your post.

@Robin:

> The wonders of Google. Helping cure ignorance since 1998.

Honestly, it seemed so obvious to me that i didn't think about googling it. I really thought they were the same thing -_-;

[Robin]

@Zonova:

> Lol, ok, now that i've got that figured out :3\. So, my question really is, is it possible to make GUIs or windows translucent? Like it shows in Robins screeny.

Read the post rather than just admiring the pretty pictures. -_-

@Robin:

> Transparency and translucency in the _controls_ doesn't translate over to the DD7 rendering. They're just completely different systems.
>
> There's been years worth of discussion on this matter and **no one has ever created a working system.** If you want to prove that it can be done then go do it. Don't sit here smugly claiming it can be done.