Layout Editor:Layering & Transparency
The layout system in Wah!Cade constructs the screen using artwork as layers. These layers support transparency. Transparency must enabled in the item properties dialog when editing the item using the Layout Editor. We can take advantage of the way the screen is constructed to assist with generating complex composited layouts.
By default the layout system supports 3 major types of graphics. Each of these are used when building composited layouts in order of preference.
- Empty Artwork 1-10 (Static artwork displayed when no artwork is found)
- Artwork 1-10
- Background Images
The Empty Artwork feature in Wah!Cade displays a "Game Not Found" image. When using composited layouts you will take advantage of this feature to load graphics as layers throughout your layout. Empty Artwork graphics can be used in any of the Artwork 1-10 items. These items support transparency, as do PNG and GIF images. Combining these artwork widgets with graphic files is how we will construct layered layouts.
The LAYOUT_EDITOR Documentation details the naming conventions available.
Using Empty Artwork as part of your layout will limit the number of dynamic Artwork items available once the base layout is built. This will need to be a consideration when planning a layout.
When using Empty Artwork items in your layout you will to add all the required Artwork items in the Layout Editor.
You can customise the layout on the fly if you have used Empty Artwork by adding images using a game name in the artwork directory used by the layout.
Artwork items is the only method available for displaying dynamic artwork in a layout.
Background images are static images, these items do not support transparency and are therefore limited in their application.
N64 Layout Example
In this N64 Layout example there is no background image file used for the layout. The layout is built completely from artworks 1 through 10. The static layout is built from empty artwork files as mentioned previously. To make use of the empty artwork we intentionally break the artwork path for the artwork item. As a consideration, the intentional break is actually linked to an empty folder to allow for customisation in the future.
All 10 layers of this layout are customisable. For example you may choose to change (based on the item selected)
- The characters displayed on screen (Artwork 8)
- The colour of the main background (Artwork 4)
- The main background to a game background (Artwork 4)
- The console & controller images (Artwork 6)
- The console & controller images to a controller configuration information graphic (Artwork 6)
- The overlay used for the snap and title images (Artwork 3)
- The emulator logo (Artwork 9)
Breaking Down The Layers
INI File Configuration
### Artwork Locations ### artwork_1_image_path ~/emulators/n64/artwork1 artwork_2_image_path ~/emulators/n64/artwork2 artwork_3_image_path ~/emulators/n64/artwork3 artwork_4_image_path ~/emulators/n64/artwork4 artwork_5_image_path ~/emulators/n64/artwork5 artwork_6_image_path ~/emulators/n64/artwork6 artwork_7_image_path ~/emulators/n64/artwork7 artwork_8_image_path ~/emulators/n64/artwork8 artwork_9_image_path ~/emulators/n64/artwork9 artwork_10_image_path ~/emulators/n64/artwork10 movie_preview_path movie_artwork_no 1
The final layout, once it is put together on-screen by Wah!Cade