Download the resource files: Launcher_Resource_Files.zip (Links to project files for Code::Blocks and Visual Studio are located at the end of this primer.)
Many demos produced in the Demo Scene have a graphical launcher that is displayed to the user prior to initializing the demo. These graphical launchers usually present a series of configuration options that affect how the demo is run. For example, many launchers will provide the option to run in fullscreen mode or windowed mode, to run the demo with sound, to enable v-syncing with the monitor, to loop the demo, to select the desired screen resolution, and to select an aspect ratio to constrain the demo effects to. Unsurprisingly, not all demo launchers look the same or present the same options. To experience a variety of launcher styles for yourself, head over to scene.org and download some of the demos that have been nominated for a variety of awards. The demo launcher that this primer describes was partly inspired by some of the examples below.
|
Launcher Examples:
|
This portion of the primer will focus on how to use ResEdit to build the Demo Launcher. If you do not yet have ResEdit installed, read Exploring Resource Editors for C++ for information on how to install and configure ResEdit.
Begin by launching ResEdit and create a new project (Figure 1). ResEdit will present you with a dialog box asking where you want to save your project. Navigate to the directory containing your demo project files (your .cpp and .h files) and give the project any name you like (Figure 2). Press Save when you are ready. Next, add a Dialog resource to your project. Do this by going up to File->Add a resource->Dialog (Figure 3). You should now see a default dialog resource sitting in the work area. To select this resource at any time during your workflow, either click directly on the dialog window or use the resource selection box to the right (Figure 4).
Next, rename the dialog resource by right-clicking on it in the resource tree (left panel) (Figure 5). Select Rename and enter IDD_DemoLauncher for the new name (Figure 6). Press Accept when done. Now the properties of the dialog box need to be configured. Scroll down the lower left properties panel until you find the Font subsection. Set Use System Font to TRUE. Then, select the font to use by clicking on the button with three dots (next line up). Select Tahoma from the list of fonts and then choose 9 for the size (Figure 7). Be aware that resource elements are measured relative to the font associated with them. Resource elements are not measured in absolute terms such as pixels. If you choose some other font then you will have to fine-tune the size of your elements to match the look of resource elements in this primer. Other properties that need to be configured include the type of border to use (set to Thin) and whether to include a title bar (set to False). The width and height of the dialog box can be fine tuned by adjusting their respective fields in the Position subcategory (Figure 8).
The next resources to be added to the project are a bitmap and an icon. These resources can be created within the editor or they can be linked to in an external file. Linking to these resources requires placing them in a predictable location. One possibility is to have the resources stored at an absolute path. The other possibility is to place the resources in the same directory as your demo project files (a relative path). This makes compiling the project on different computers much easier since the files are always in the same relative place. If you haven't done so already, download the resource files from the link above and save them in your project directory (Figure 9).
The bitmap resource will be used as the banner for the top of the launcher. The OK and Cancel buttons are currently in the way of where the banner will go so select the buttons (click drag a square around them to select both at once) and position the buttons at the lower right corner of the dialog box (Figure 10). Add the bitmap the same way that you added the dialog window (Figure 11). ResEdit will prompt you for the location of the bitmap so navigate to your project directory and select LauncherLogo.bmp (Figure 12). Select Relative path when asked (Figure 13). Your work area should now look like Figure 14.
The bitmap must be placed in a Picture Control in order to be viewable on the dialog window. Create one by clicking on the Picture Control tool in the Toolbox (far right panel) and drag out a square on the dialog box Figure 15. Before going any further, give the bitmap a meaningful identification name. Right-click on the bitmap resource and select rename. Call it IDB_LauncherLogo. Next, make sure the Picture Control you just created is selected and scroll down its properties list to the Misc subcategory. Set its type to bitmap and change the image field to the identifier you gave to the bitmap - IDB_LauncherLogo (Figure 16). If you are using a different font then you may need to adjust the size of your dialog box to fit the bitmap that is now showing on the dialog box.
Both the OK button and the Cancel button need to be configured. Select the OK button to begin configuring it. Find the caption field in the properties panel and change the caption to 'Launch!'. This is the text that will be shown on the button. The button will shrink down and wrap around the caption text so you will need to readjust the button width afterwards. The other thing that needs to be configured on the button is its ID. Change the ID to IDLAUNCH (Figure 17). Configure the Cancel button using the same steps, giving it the caption of Exit and an ID of IDEXIT (Figure 18).
Two listboxes are added to the dialog window to display the list of resolutions that the user's graphics hardware is capable of supporting and a list of aspect ratios used to configure the viewport. Select the listbox tool from the toolbox and draw out a square on the dialog box area. Use figure 19 as a guide for setting the width and height of this element as well as its position. Change its ID to IDC_RESOLUTION (Figure 19). Create the second listbox right beside the first one. Change its ID to IDC_ASPECT. Use figure 20 as a guide to configuring this element (Figure 20).
The next element to add to the dialog box is a group box. Select the group box tool from the toolbox and draw out a square in the available space below the resolution listbox. In the properties panel, delete the value from the caption field and fine-tune its position as necessary (Figure 21). Static text is added to the dialog box using the static text tool from the toolbox. Click in the lower right corner of the dialog window to place the text field. Go to the caption field in the properties panel and change the value to 'Demo Launcher' (Figure 22).
To give users the option of either running the demo in fullscreen mode or windowed mode, a check box is added to the dialog box. Select the checkbox tool from the toolbox and click somewhere in the middle of the group box area. Next, go to the properties panel and change the caption field to 'Fullscreen'. Set the field called Left Text to True and change the ID to IDC_FULLSCREEN (Figure 23).
Add an icon recource to the project the same way that the dialog box and bitmap resources were added (Figure 24). The icon should have been added to your project directory at the same time the bitmap was added so you will open it from that location (Figure 25). Your work area should now look something like figure 26. Rename the icon resource to IDI_SMICON.
It's time to save your project (if you haven't done so already). ResEdit will likely display a message indicating that it has detected "several include files" and that only one "resource header will contain all the resource symbols". This is OK so select Yes to continue (Figure 27).
