Does node-webkit not support transparent backgrounds?

I was happy when I finished my mini-map and got it working in Chrome only to find out that it has an ugly border around it in node-webkit.

So, that makes two strikes for node-webkit in one day. I just posted a bug thread about my mouse cursor not being set from the sprite anymore if I mouse out of the node-webkit window, and now I have to put up with my mini-map not looking right....

Here is a picture:

The top image is node-webket, the bottom is Chrome. Notice the square black border around the mini-map in the node-webkit version.

I mean, I set every layer to transparent, unnecessary layers are set to invisible during the screen grab process for the mini-map creation, clear background is set to yes. What is left? What doesn't it like?

I don't know why node-webkit has so many problems. This is what I'll be using if I want my game on Steam. It makes me lose my faith in this program...

Unless there is a work around for this, I am going to have to modify my HUD yet again and just cover up the black border so no one can see it.

Are you using some blend mode for that. I had problems with those before on Webkit. Like this for example https://www.scirra.com/forum/two-node-webkit-problems-still-on-v-168-temp-freeze-fix_t95506

Is it Canvas plugin? That seems to work at least on preview with transparency and could make a good minimap I think.

All the layers are set to normal blend mode.

I've never used the canvas plugin. I've looked at it, but I wouldn't know what to do with it.

It took me a REALLY long time to get my mini-map functional. I had to set it to track hero/enemy icons, and you can click it to move the camera to that area. That was not easy by any means. So, if there is an easy fix to this, it would save me a lot of headaches.

Also, I noticed that if I turn off webgl, it works and does not show the black. Of course, then I lose my multiply effects that I was using for certain things (not related to the map).

[quote:xe8ts20e]I've never used the canvas plugin. I've looked at it, but I wouldn't know what to do with it.

Well I don't know how you do it now but I've thought how I would make isometric minimap is to draw the minimap similarly I draw the isomap but just using kind of a brush object to draw to it and probably using another on top of that to draw units or if there is no hundreds of them maybe using similar system I assume you are using.

As far as I remember I have only encountered this with blend modes but, just from the picture I cannot say what that could be.

Thanks for the help.

I guess this is the problem I run into when doing things that haven't been done with C2 yet...

I'll look at it some more tomorrow. Hopefully, I'll get some official confirmation on what's causing this problem so I can avoid my usual random testing for hours on end...

DrewMelton

i dont know whats happening with your problem but my project has transparent layers and sets the cursor from a sprite, both of which work fine both in preview and exported to node.

Check your graphics drivers are up-to-date. By default the Windows node-webkit exporter now ignores the GPU blacklist, so driver bugs are going to show up.

Ashley I updated my graphics drivers for my Nvidia 680, but the same problems still exist. If I move the mouse out of the window on node-webkit I never get my custom cursor from sprite back, and my mini-map still has the black border.

I could almost live with the black border around the map because I can cover it up if I had to. Annoying to be sure, but it can be done. I'd rather just fix it though since it would look nicer and save me from redoing the bottom of the HUD again.

The mouse issue on the other hand is very bad. I even get the sideways resize cursor half the time. You can't play with that.

I don't know what else to do.

I really need to know if I can fix this or not because I don't want to redesign my entire lower HUD if I don't have to.

I know that the transparent layers are working properly, so the issue must be with something else. Maybe the background is showing black? Like I said before, if I disable webgl, I get my transparent map. But then I lose my effects, and that kinda sucks, so I want to keep webgl enabled.

If it helps, here is how I am creating the picture of the map. Why everything has to be such a long, convoluted process is beyond me. I think I am trying to do things that C2 was never designed for. Anyway, here is a picture of the code. Maybe this will reveal the problem, who knows.

Hi i'm working in a application that requires that the user save images to the the disk, and i found that node webkit can't render the main window background transparency(the last layer set to transparent)...It's difficult to say without seeing your capx, but it could be this problem.

This is a huge drawback, if we need to make applications that requires to edit and save images with alpha channel.

Hi i'm working in a application that requires that the user save images to the the disk, and i found that node webkit can't render the main window background transparency(the last layer set to transparent)...It's difficult to say without seeing your capx, but it could be this problem.

This is a huge drawback, if we need to make applications that requires to edit and save images with alpha channel.

Hmm, this would explain why I can't get rid of the black. There shouldn't even be anything there. When the screenshot is taken, the majority of layers are hidden, and even if they weren't, what I'm seeing is not what the color of the layer is.

There are no sprites in the black area either. That area is just blank. So, nothing should be showing up during the screencapture process just like it does in Chrome.

I can't post the capx because it's nearing 2,000 events, but if you'd like to investigate this further, I would be willing to share more.

I'm going to redesign my HUD for now until because I just don't see any other option at the moment. I have no more choices for my export other than node-webkit, so I'll make something that works for that. I'll keep my old HUD in a separate file in case this gets sorted.

Here, I revised the HUD to cover the black area using the wooden texture that I made for my icon backgrounds. I think it looks fine, and it gave me a bit more room to work with so I was able to enlarge my backpack icon as well.

I'd still like to hear if anyone has a fix or not just in case I ever need it, but I'm satisfied with this solution for now.

Krinikajason Can you be more specific? There's lots going on with this mini-map, so it's hard to explain.

I'm using several different layers and stacked sprites. The screenshot of the event sheet on the last page shows how I get the actual image.

Now, the code to get the icons and camera position by clicking on the map are separate events entirely, and I have not posted them.

Creating this mini-map was a very complex process, but if you can be specific with your questions, I can try to help.