Table of contents
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
Copy to clipboard
<?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):
Copy to clipboard
<Imageset Name="ConfirmBackground" Filename="ConfirmDialogBackground.imageset" />
ConfirmDialog.overlay
Copy to clipboard
<?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:
- GameSaveConfirmDialog
- GameSaveConfirmDialog/Background
- GameSaveConfirmDialogWin
- GameSaveConfrimDialog/Text
- GameSaveConfrimDialog/OkButton
- GameSaveConfrimDialog/CancelButton
Author/Contact
Xirnohn - benedicht at freemail.hu