anchor.diff:  ----
   
   <?xml version="1.0" encoding="UTF-8"?>
  -<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
  -  <useStyles filename="nifty-default-styles.xml" />
  -  <useControls filename="nifty-default-controls.xml" />
  -  <screen id="start">
  -    <layer id="background" childLayout="center">
  -      <image filename="Interface/start-background.png"></image>
  -    </layer>
  -    <layer id="foreground" childLayout="vertical">
  -      <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
  -        <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
  -      </panel>
  -      <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
  -        <text text="Here goes some text describing the game and the rules and stuff. Incidentally, the text is quite long and needs to wrap at the end of lines. ..." font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" />
  -      </panel>
  -      <panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal" >
  -        <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
  -          <control name="button" label="Start" id="StartButton" align="center" valign="center"></control>
  -        </panel>
  -        <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
  -          <control name="button" label="Quit" id="QuitButton" align="center" valign="center"></control>
  -        </panel>
  -      </panel>
  -    </layer>
  -  </screen>
  -  <screen id="hud">
  -    <layer id="background" childLayout="center">
  -      <image filename="Interface/hud-frame.png"></image>
  -    </layer>
  -    <layer id="foreground" childLayout="horizontal">
  -      <panel id="panel_left" width="80%" height="100%" childLayout="vertical" ></panel>
  -      <panel id="panel_right" width="20%" height="100%" childLayout="vertical">
  -        <panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
  -          <control name="label" color="#000" text="123" width="100%" height="100%" />
  -        </panel>
  -        <panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
  -          <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" ></image>
  -        </panel>
  -        <panel id="panel_bot_right" width="100%" height="70%" valign="center" ></panel>
  -      </panel>
  -    </layer>
  -  </screen>
  +<nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
  +    <useStyles filename="nifty-default-styles.xml" />
  +    <useControls filename="nifty-default-controls.xml" />
  +    <screen id="start">
  +        <layer id="background" childLayout="center">
  +            <image filename="Interface/start-background.png"></image>
  +        </layer>
  +        <layer id="foreground" childLayout="vertical">
  +            <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
  +                <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
  +            </panel>
  +            <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
  +                <text text="Here goes some text describing the game and the rules and stuff. Incidentally, the text is quite long and needs to wrap at the end of lines. ..."
  +                      font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" />
  +            </panel>
  +            <panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal">
  +                <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
  +                    <control name="button" label="Start" id="StartButton" align="center" valign="center">
  +                    </control>
  +                </panel>
  +                <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
  +                    <control name="button" label="Quit" id="QuitButton" align="center" valign="center">
  +                    </control>
  +                </panel>
  +            </panel>
  +        </layer>
  +    </screen>
  +    <screen id="hud">
  +        <layer id="background" childLayout="center">
  +            <image filename="Interface/hud-frame.png" imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%">
  +            </image>
  +        </layer>
  +        <layer id="foreground" childLayout="horizontal">
  +            <panel id="panel_left" width="80%" height="100%" childLayout="vertical">
  +            </panel>
  +            <panel id="panel_right" width="20%" height="100%" childLayout="vertical">
  +                <panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
  +                    <control name="label" color="#000" text="123" width="100%" height="100%" />
  +                </panel>
  +                <panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
  +                    <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" >
  +                    </image>
  +                </panel>
  +                <panel id="panel_bot_right" width="100%" height="70%" valign="center">
  +                </panel>
  +            </panel>
  +        </layer>
  +    </screen>
   </nifty>
   
   ----
  
positive.code: [source,xml]
  ----
  
      <layer id="background" childLayout="center">
          <image filename="Interface/hud-frame.png"></image>
      </layer>
  
  ----
  
  In order to make the hud-frame.png independent of the screen resolution you are using, you could use the `imageMode` attribute on the image element https://versaweb.dl.sourceforge.net/project/nifty-gui/nifty-gui/1.3.2/nifty-gui-the-manual-1.3.2.pdf[Nifty GUI - the Manual: Images (ImageMode=resize)].
  
  [source,xml]
  ----
  
      <layer id="background" childLayout="center">
          <image filename="Interface/hud-frame.png" imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%"/>
      </layer>
  
  ----
  
  
negative.code: [source,xml]
  ----
  
  <panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
      <control name="label" color="#000" text="123" width="100%" height="100%" />
  </panel>
  
  ----
  
  