Unable to load an image up in NiftyGUI

Hi there :), I just started working out with Nifty-gui yesterday and been encountering weird problems with coding on the xml part. At first, it was loading up of color panels which, by right, should show something on jME design but it doesn’t… till I slowly created a new file, re-coded in the panels one-by-one again and then it slowly reveals something. So far, I’ve been following the tutorials and I pretty much understood some basics.



So, today I tried looking through this tutorial page on doing the progress bar ('cause I thought of tapping on the same idea and create a healthbar which gets updated with the filled-image’s increasing in length horizontally) but I encounter a couple of problems and some curious questions.



Here is my current XML code:

[xml]

<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty.xsd http://nifty-gui.sourceforge.net/nifty.xsd”>

<useStyles filename=“nifty-default-styles.xml” />

<useControls id=“helloControls” filename=“nifty-default-controls.xml” />

<controlDefinition name=“progressbar” controller=“testingapps.TestNiftyGui”>

<image id=“borderImg” filename=“Interface/BarFilling.png” />

</controlDefinition>

<screen id=“start” controller=“testingapps.TestNiftyGui”>

<layer id=“layerOne” childLayout=“center”>

<panel id=“layerOnePanelOne” height=“25%” width=“100%” align=“center” valign=“top” childLayout=“horizontal” backgroundColor="#ffcc0033">

<panel id=“layerOne.PanelOne.PanelOne” height=“80%” width=“10%” valign=“center” childLayout=“center” backgroundColor="#ccff3366"/>

<panel id=“layerOne.PanelOne.PanelTwo” height=“80%” width=“10%” valign=“center” childLayout=“center” backgroundColor="#ff339966"/>

<panel id=“layerOne.PanelOne.PanelThree” height=“80%” width=“10%” valign=“center” childLayout=“center” backgroundColor="#33ffcc66"/>

</panel>

</layer>

<layer id=“layerTwo” childLayout=“center”>

<panel id=“layerTwo.PanelTwo” height=“95%” width=“70%” align=“center” valign=“top” childLayout=“center” backgroundColor="#ffffff66"></panel>

</layer>

<layer id=“imageLayer” childLayout=“center”>

<panel id="imagepanel"align=“center” valign=“top” childLayout=“center”>

<image id=“image” filename=“Interface/BarFilling.png” align=“center” valign=“center” height=“50px” width=“50px”/>

</panel>

</layer>

<layer id=“myControlLayer” childLayout=“center”>

<control id=“progressbar” name=“progressbar” align=“center” valign=“center” width=“400px” height=“32px”/>

</layer>

</screen>

</nifty>

[/xml]

A few colored panels that I wrote in there loaded up pretty fine… 'cept the image (or I think they are loaded but I don’t know if they are). I thought it could have been loaded outside of the screen but I have already centralized it. There’s also no error in specific that shows that my images are not loaded and the images are really in jME’s Interface folders while the XML files :stuck_out_tongue: I kinda saved it under the Texture folder.



Here’s a few question I’m kinda unsure though:

  1. By the way, the file is transparent on the back. Is loading up such graphic, ok? Should be alright, right?


  2. I was wondering if it could be because I didn’t write any render codes to load up the image asset inside my java class? Because I noticed (when searching around the forum) that some wrote guiRender to load image asset up first… so, I got kinda confused if there’s a need to or not.


  3. Or could it be I wrote something wrong in the XML code? Or am I missing any preset code lines before doing all of these? Please advice.


  4. Actually, which elements seriously need the childLayout attribute? Sometimes when I missed out writing this in the Panel or Layout, the application screwed up but this is really minor, I just want to take note.


  5. Does the control-tag needs a panel-tag wrapping around it? Since there’s a layer-tag wrapping it.


  6. How does control-tag works with controlDefinition-tag again? It was a little confusing on that page with the link I anchored above this message.


  7. Is putting whatever images you want to use in the jME’s asset/someFolderWithin will do fine if we just call it via, say, “Interface/myImage.png” in the XML file?



    Pardon me with these silly questions.





    Thanks. :slight_smile: Really appreciate your response:)

Post Update:

Strange enough, very strange indeed. I went back to the tutorial on jME again and downloaded the NiftyGUIDemo zipped file. The curiosity got stronger… I wanted to see what’s wrong so badly. Is it my code? Or is it… not? So, I ran the demo and check this out! :open_mouth: I can’t load a single font files and some images LOL… how strange. Here’s the link to the image.



And when I do look through Interface folder, I think it doesn’t loads up those with transparent area… but I really don’t know. Hoping to hear some advice from you guys.





Earlier Post:


Erm.. just bumping the post and adding on a little information to the problem.

It really feels like a nifty curse had just cast upon me because how strange(!), coding the GUI layout on XML isn't working at all. Actually, I should say it's more of like.. tags like image, text, label etc was placed in the [panel]-wrap, they all don't get shown at all! Hahah..

After posting this question and fiddling around the codes and searching around here and there for people with similar problems, I kept on wondering if it could be the java code that didn't call the images asset to be rendered and display? But I dont think so.. since some people were able to actually run the file with an image normal...

Is my question too abstract? Or am I giving too little information to what problem am I facing? Here's a couple of screenshots to my problem though I dont think it's of much help.. but just a little add on.

[Here: IMG 1]
I'm trying to load Barborder.png in... and I kinda place it about in the assets sub-directories, in hope that they wil detect it somewhere.

[Here: IMG 2]
No fonts.. no image showed. But the effects work! :D hahah..

and the code:
[xml]
<screen id="start" controller="testingapps.TestNiftyGui">
<layer id="layer" backgroundColor="#0033" childLayout="center">
<panel id="panel" height="25%" width="35%" align="center" valign="center" backgroundColor="#f60f" childLayout="vertical" visibleToMouse="true">
<interact onClick="quit()"/>
<effect>
<onStartScreen name="move" mode="in" direction="top" length="300" startDelay="0" inherit="true"/>
<onEndScreen name="move" mode="out" direction="bottom" length="300" startDelay="0" inherit="true"/>
<onHover name="pulsate" scaleFactor="0.008" startColor="#f600" endColor="#ffff" post="true"/>
</effect>
</panel>
</layer>
<layer id="layer3" childLayout="vertical">
<panel id="panel3" height="25%" width="35%" align="center" valign="top" childLayout="horizontal" visibleToMouse="true">
<image id="imageId" filename="Textures/Barborder.png" />
</panel>
</layer>
</screen>
[/xml]

I can't find anymore similar problems already, it seems.. not much people are encountering it like I do.. :/ maybe it's just me, right? :/

Sorry for posting so many times… :confused: Just bumping the post, in hope to see some replies on this issue. normen and wlfbck gave some suggestions but… nothing’s working yet. The provided demo files on this site or over at void’s page showed the same problems as well…



p.s. sorry for the really lengthy double post!

Ok, while fiddling around more with Nifty, I realized that my suspicion was right. Image with transparent area will not be displayed at all. Or it is, but nothing gets shown. With regards to unable to load the font onto the screen, that----I still haven’t find out why… but it sure is bugging me out.

I’m confused. Do you mean that the whole image won’t display if it has transparency? Or if it has some transparency in it? Or both?



I do use images with transparency and I have no problem. The transparent area (a circle) is transparent and the rest is the normal colors.

madjack said:
Do you mean that the whole image won't display if it has transparency? Or if it has some transparency in it? Or both?

I do use images with transparency and I have no problem. The transparent area (a circle) is transparent and the rest is the normal colors.

That's right. Yes. I am referring to images with transparency, it won't get displayed on my screen. Images with transparency means... you have solid colors of a 2D cartoon character in the center, and you don't want the background/background color behind this character.. so you kinda export the image out as GIF with alpha or as PNG.. (I think you already know what I mean).

Likewise with the fonts, because it comes along with a PNG file too where the background of this file is transparent with the font graphics, colored, it doesn't get displayed as well. But the IDE didnt trace out any error at all. It loads up successfully! :O

All my fonts and all my GUI images are .PNG and I have no problems with them.



If you use Paint.net to make those images with transparency, this is your problem. Paint.net has a bug (or at least it had it some months ago) with transparency with that format. You can open those images with The GIMP for example and redo/resave with the transparency.



As for the fonts, my guess is you forgot to tick a checkbox or something. I remember having a similar issue, but I can’t remember if it was because it was an old version of the software or something I had forgotten to tick on.

madjack said:
All my fonts and all my GUI images are .PNG and I have no problems with them.

If you use Paint.net to make those images with transparency, this is your problem. Paint.net has a bug (or at least it had it some months ago) with transparency with that format. You can open those images with The GIMP for example and redo/resave with the transparency.

As for the fonts, my guess is you forgot to tick a checkbox or something. I remember having a similar issue, but I can't remember if it was because it was an old version of the software or something I had forgotten to tick on.


Thanks for your reply! :)

But no, I dont use Paint.net but Fireworks/Photoshop.. but the issue doesn't exist within just my project. It occurs throughout within Nifty 1.3's demo codes (the one with Controldemo..) as well (I thought it won't.. I thought it could be my codes but apparently, no) where the image file with transparency don't get shown. I realized this after setting background color to the layer that holds the particular image with transparency. The colored layer shows the size but no image.

I had tested it out too whether the formats may be the cause, but came with a conclusion that no, formats are fine. Any allowable formats of image file works fine as long as there's no alpha-transparency exist on it but solid colors. :|

Well then I’d love to have an explanation why my images work then.



Here you can see an image of what I’m talking about. The sun is in a viewport (before I completely changed that, but that’s beside the point) that can be seen through the transparent part of the image. Everything outside the circle where the sun is is opaque. That viewport was placed behind the GUI panel and was showing through the hole…



madjack said:
Well then I'd love to have an explanation why my images work then.

Here you can see an image of what I'm talking about. The sun is in a viewport (before I completely changed that, but that's beside the point) that can be seen through the transparent part of the image. Everything outside the circle where the sun is is opaque. That viewport was placed behind the GUI panel and was showing through the hole...




Sorry.. I can't explain why yours work and mine doesn't.. but with a screenshot of what I'm seeing right now after running the nifty1.3control demo that I downloaded from the site. I think this kinda best explains/simulates something that should be shown but isn't right now..
http://imgur.com/2UWZA.jpg

No, I didn't remove the fonts and all that, they are all in the assets still, and I can't possible do any edits that cause this effect either.. there's too much to change anyway :o

@madjack is it alright if i test out with your image file that you showed above? Though I know it may sound pointless… The one with transparency.

Here, even better. Here’s the original image.

madjack said:
Here, even better. Here's the original image.


Thanks for the file :) But this is what I get after I set your image in:
http://imgur.com/5sl90.jpg
Your image file, according to the code, should be displayed on the far left and then followed by the solid colors images, horizontally. I placed 3 images beside (found the original image online and it's in .png format - far most left) where your image supposed to be showing, to show the difference.
Some things I noticed:
1. Your image doesn't show still (current problem)
2. Original image (most left) has a alpha channel but it displayed a white background behind when it shouldn't have :o
(ignore the last 2 image, they are in solid colors but different format ---to show that as long as the image are filled with solid colors, it works).

As a test try the image I lent you and those others you use and put them in a backgroundImage instead and see how that works.



I don’t use the image tag myself except for the new viewport image that is generated each frame by the rendering system, but that image has a transparent background, so I’m at a loss here.



Do you have the latest Nifty?

madjack said:
As a test try the image I lent you and those others you use and put them in a backgroundImage instead and see how that works.

I don't use the image tag myself except for the new viewport image that is generated each frame by the rendering system, but that image has a transparent background, so I'm at a loss here.

Do you have the latest Nifty?


Yeap, the latest Nifty. A few days back before I play around with Nifty, I enabled the nightly updates, which I believe, it should already be updated with the latest Nifty. By the way, backgroundImage too, doesn't work. It appears the same as the screenshot I showed you in the previous post.

Anyway, the last resort that I have to find the bugger, I went to run my project on on another system with the jmonkeyplatform. No recent updates, and got the installer off from the site a couple of months back. Ran the same project, and it freakingly works! :o I see your image file, and the rest perfectly--just, haven't check if the effects work yet. And I'll do that in just a moment after I reinstall to the old jME3 without new updates on this working system.

Are you sure you’ve got the right Nifty libraries linked in your project? That could be the problem. Make sure the libs are pointing at the latest version.

madjack said:
Are you sure you've got the right Nifty libraries linked in your project? That could be the problem. Make sure the libs are pointing at the latest version.


Yeap. Just in case, I got it off from this link [Over Here] that @void256 provided on the Nifty blog for the relevant jar files. But then, it should also be updated along with the nightly ones (if there are any), no? What I meant is that, since nifty's already implemented in with the others.

Anyway, I reinstalled the platform again and didn't enable any plug-ins or extra stuffs yet.

Thanks for your replies though! :D

The link provided seems to have the libs we already have. I can’t say for sure since I’m not the one who put those in jME, but the date seems right.



How’s the new installation? Got expected result, whatever that may be?

Yeap! Finally got nifty running smoothly just like everyone else. :slight_smile: It finely reads the font files, the images file etc etc. Geez! Why haven’t I thought of re-installing?! smacks head



But I’m curious about the NiftyGuiDemo.zip that I found on this page when I was going through the walkthrough though. It seems, when I initialize nightly updates and run NiftyGuiDemo, there were only 2 files in this zipfolder that had errors. But now that I re-installed and tries to run NiftyGuiDemo again, with no updates on the platform, there’s more than 2 files with error! O_O How did people run this project anyway without hitting errors? Seems like some packages weren’t implemented… or something.



The dates on these files were years back tho.

1 Like

Excellent! Glad it now works. :slight_smile: