anchor.diff:  == Implement Your GUI Layout
   
   
  -image::jme3/advanced/nifty-screen-layer-panel.png[nifty-screen-layer-panel.png,width="366",height="136",align="right"]
  -
  -
  -Create an empty *screen*.xml file in the `assets/Interface/` directory of your project. ( Rightclick on Interface → New → Other… → +++<abbr title="Graphical User Interface">GUI</abbr>+++ → Empty NiftyGui file)
  -Afterwards create the directory `assets/Interface/Fonts` and add a new font e.g. Arial. ( *Rightclick on Interface → New → Other… →* Other → Folder and +++<abbr title="Graphical User Interface">GUI</abbr>+++ → Font)
  +image::jme3/advanced/nifty-screen-layer-panel.png[nifty-screen-layer-panel.png,width="366",height="136",align="left"]
  +
  +
  +Create an empty *screen*.xml file in the `assets/Interface/` directory of your project.
  +
  +.  btn:[RMB] click on `menu:Interface[New>Other>GUI>Empty Gui]` followed by the btn:[Next >] button.
  +.  Name the file "`screen`" and when ready select btn:[Finish].
  +
  +Afterwards create the directory `assets/Interface/Fonts` and add a new font e.g. Arial.
  +
  +.  btn:[RMB] click on `menu:Interface[New>Other>Other>Folder]` followed by the btn:[Next >] button.
  +.  Name the folder "`Fonts`" and when ready select btn:[Finish].
  +
  +With the "`Fonts`" folder still selected.
  +
  +.  btn:[RMB] click `menu:New[Other>GUI>Font]`.
  +.  In the `New Font` dialog, select font "`Arial`".
  +.  Click the btn:[Next >] button when ready.
  +.  Accept the defaults by selecting btn:[Finish].  
   
   One XML file can contain several, or even all screens. As a reminder: Nifty displays one screen at a time; a screen contains several layers on top of one another; each layer contains panels that are embedded into another; the panels contain the actual content (text, images, or controls).
   
  
positive.code: == Plan Your GUI Layout
  
  
  image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="right"]
  
  
  In this tutorial, you want to create two game screens: An out-of-game StartScreen that the players see before the game starts; and an in-game link:http://en.wikipedia.org/wiki/HUD_%28video_gaming%29[HUD] that displays info during the game. Before writing code, you plan the +++<abbr title="Graphical User Interface">GUI</abbr>+++ layout, either on paper or in a graphic application.
  
negative.code: :keywords: gui, documentation, nifty, hud
  :relfileprefix: ../../
  :imagesdir: ../..
  :experimental:
  ifdef::env-github,env-browser[:outfilesuffix: .adoc]
  
  
  