anchor.diff:  :keywords: gui, documentation, nifty, hud
   :relfileprefix: ../../
   :imagesdir: ../..
  +:experimental:
   ifdef::env-github,env-browser[:outfilesuffix: .adoc]
   
   
  
positive.code: == 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)
  
  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).
  
  
negative.code: == Plan Your GUI Layout
  
  
  image::jme3/advanced/gui-layout-draft.png[gui-layout-draft.png,width="",height="",align="left"]
  
  
  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.
  