Creating a good looking Confirm Dialog with CEGUI         The Confirm Dialog has a title(like Save, Load), a textarea ("Are you sure you want to overwrite your saved game?") and two buttons("Yes", "No")
Page actions
Print

How To creating a good looking Confirm Dialog with CEGUI

If you ever wanted a confirm dialog in your game, than it is.
The Confirm Dialog has a title(like Save, Load), a textarea ("Are you sure you want to overwrite your saved game?") and two buttons("Yes", "No").

The Problem

If the dialog small, and looks cool, you can interact with other windows. If the dialog fill out the whole screen, than its not so cool.

And the solution

We need a root window, its fill out the screen(with AlwaysOnTop=true), and we need a static image on it. Then we add the confirm dialog(with AlwaysOnTop=true too).
The static image needed to darken the screen.

ConfirmDialogBackground.imageset

<?xml version="1.0" ?>
  <Imageset Name="ConfirmBackground" Imagefile="ribbonband.png" AutoScaled="false" >
  <Image Name="Background" XPos="0" YPos="0" Width="128" Height="1" />
</Imageset>


And add the following line to your .scheme file(like TaharezLook.scheme): 

<Imageset Name="ConfirmBackground" Filename="ConfirmDialogBackground.imageset" />

ConfirmDialog.overlay


<?xml version="1.0" encoding="UTF-8"?>
 <GUILayout>
 <Window Type="DefaultWindow" Name="GameSaveConfirmDialog" >
 <Property Name="AlwaysOnTop" Value="True" />
 <Property Name="UnifiedAreaRect" Value="{{0.000000,0.000000},{0.000000,0.000000},{1.000000,0.000000},{1.000000,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 <Window Type="TaharezLook/StaticImage" Name="GameSaveConfirmDialog/Background" >
 <Property Name="Alpha" Value="0.250000" />
 <Property Name="BackgroundImage" Value="set:TaharezLook image:StaticBackdrop" />
 <Property Name="BottomFrameImage" Value="set:TaharezLook image:StaticBottom" />
 <Property Name="BottomLeftFrameImage" Value="set:TaharezLook image:StaticBottomLeft" />
 <Property Name="BottomRightFrameImage" Value="set:TaharezLook image:StaticBottomRight" />
 <Property Name="Font" Value="Vera-8" />
 <Property Name="FrameEnabled" Value="False" />
 <Property Name="LeftFrameImage" Value="set:TaharezLook image:StaticLeft" />
 <Property Name="RightFrameImage" Value="set:TaharezLook image:StaticRight" />
 <Property Name="TopFrameImage" Value="set:TaharezLook image:StaticTop" />
 <Property Name="TopLeftFrameImage" Value="set:TaharezLook image:StaticTopLeft" />
 <Property Name="TopRightFrameImage" Value="set:TaharezLook image:StaticTopRight" />
 <Property Name="UnifiedAreaRect" Value="{{0.000000,0.000000},{0.000000,0.000000},{1.000000,0.000000},{1.000000,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 <Property Name="Image" Value="set:ConfirmBackground image:Background" />
</Window>
 <Window Type="TaharezLook/FrameWindow" Name="GameSaveConfirmDialogWin" >
 <Property Name="AlwaysOnTop" Value="True" />
 <Property Name="CaptionColour" Value="00FFFFFF" />
 <Property Name="CloseButtonEnabled" Value="False" />
 <Property Name="EWSizingCursorImage" Value="set:TaharezLook image:MouseEsWeCursor" />
 <Property Name="Font" Value="Vera-8" />
 <Property Name="MouseCursorImage" Value="set:TaharezLook image:MouseTarget" />
 <Property Name="NESWSizingCursorImage" Value="set:TaharezLook image:MouseNeSwCursor" />
 <Property Name="NSSizingCursorImage" Value="set:TaharezLook image:MouseNoSoCursor" />
 <Property Name="NWSESizingCursorImage" Value="set:TaharezLook image:MouseNwSeCursor" />
 <Property Name="SizingEnabled" Value="False" />
 <Property Name="Text" Value="Save" />
  <Property Name="TitlebarEnabled" Value="True" />
 <Property Name="TitlebarFont" Value="Vera-8" />
 <Property Name="UnifiedAreaRect" Value="{{0.278750,0.000000},{0.248333,0.000000},{0.661251,0.000000},{0.460000,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 <Window Type="TaharezLook/StaticText" Name="GameSaveConfrimDialog/Text" >
 <Property Name="BackgroundImage" Value="set:TaharezLook image:StaticBackdrop" />
 <Property Name="BottomFrameImage" Value="set:TaharezLook image:StaticBottom" />
 <Property Name="BottomLeftFrameImage" Value="set:TaharezLook image:StaticBottomLeft" />
 <Property Name="BottomRightFrameImage" Value="set:TaharezLook image:StaticBottomRight" />
 <Property Name="Font" Value="Vera-8" />
 <Property Name="LeftFrameImage" Value="set:TaharezLook image:StaticLeft" />
 <Property Name="RightFrameImage" Value="set:TaharezLook image:StaticRight" />
 <Property Name="Text" Value="Are you sure you want to overwrite your Saved Game?" />
 <Property Name="TopFrameImage" Value="set:TaharezLook image:StaticTop" />
 <Property Name="TopLeftFrameImage" Value="set:TaharezLook image:StaticTopLeft" />
 <Property Name="TopRightFrameImage" Value="set:TaharezLook image:StaticTopRight" />
 <Property Name="UnifiedAreaRect" Value="{{0.058171,0.000000},{0.244882,0.000000},{0.925816,0.000000},{0.502756,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 </Window>
 <Window Type="TaharezLook/Button" Name="GameSaveConfrimDialog/YesButton" >
 <Property Name="Font" Value="Vera-8" />
 <Property Name="MouseCursorImage" Value="set:TaharezLook image:MouseArrow" />
 <Property Name="Text" Value="Yes" />
 <Property Name="UnifiedAreaRect" Value="{{0.117647,0.000000},{0.637794,0.000000},{0.429738,0.000000},{0.887795,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 </Window>
 <Window Type="TaharezLook/Button" Name="GameSaveConfrimDialog/NoButton" >
 <Property Name="Font" Value="Vera-8" />
 <Property Name="MouseCursorImage" Value="set:TaharezLook image:MouseArrow" />
 <Property Name="Text" Value="No" />
 <Property Name="UnifiedAreaRect" Value="{{0.518300,0.000000},{0.627558,0.000000},{0.853267,0.000000},{0.877559,0.000000}}" />
 <Property Name="UnifiedMaxSize" Value="{{1.000000,0.000000},{1.000000,0.000000}}" />
 </Window>
 </Window>
 </Window>
 </GUILayout>

Notes

  • With the ConfirmDialogBackground.imageset you dont need to create imageset in the program.
  • When you pop up the GameSaveConfirmDialog, the underlieing screen turns darken, and the user can interact just with the confrim dialog(with the two buttons).
  • In the overlay tweaking the image's alpha, you can customize how its darken the screen.
  • With some modifications you can create some MessageBox, like Warning, Error, etc.
  • If you render the screen to an RTT you can create more effects while the dialog is visible. But for this you need code in the program.(If somebody want it, maybe it will be the code snippet)
  • If you edit edit the ConfrimDialog.overlay in the CELayoutEditor, then the "<Property Name="Image" Value="set:ConfirmBackground image:Background" />" line (in the "GameSaveConfirmDialog/Background") will be deleted after you save it
  • The overlay structure is the following:
  1. GameSaveConfirmDialog
    1. GameSaveConfirmDialog/Background
    2. GameSaveConfirmDialogWin
      1. GameSaveConfrimDialog/Text
      2. GameSaveConfrimDialog/OkButton
      3. GameSaveConfrimDialog/CancelButton

Author/Contact

Xirnohn - benedicht at freemail.hu

History Source