Difference between revisions of "Layout Editor:Layering & Transparency"
Line 31: | Line 31: | ||
=== Information === | === Information === | ||
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. | 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. | ||
− | |||
− | |||
All 10 layers of this layout are customisable per selection due to the nature of using the Artwork items to build the layout. | All 10 layers of this layout are customisable per selection due to the nature of using the Artwork items to build the layout. | ||
Line 40: | Line 38: | ||
{| | {| | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art1.png|thumb|''n64-art1.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art1.png|thumb|''n64-art1.png'']] | ||
− | ''' Artwork 1 '''<br /> Artwork 1 is reserved for dynamic artwork (snaps, titles etc) | + | ''' Artwork 1 '''<br /> |
+ | * Artwork 1 is reserved for dynamic artwork (snaps, titles etc). | ||
+ | * An image is used as an empty image for the layout to be displayed when a selection image is not available. | ||
+ | * This is the standard behaviour of the empty image. | ||
+ | * In this example Artwork 1 is displaying snapshots. | ||
+ | * artwork_1_image_path is configured in the emulator ini | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art2.png|thumb|''n64-art2.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art2.png|thumb|''n64-art2.png'']] | ||
− | ''' Artwork 2 '''<br /> Artwork 2 is reserved for dynamic artwork (snaps, titles etc) | + | ''' Artwork 2 '''<br /> |
+ | * Artwork 2 is reserved for dynamic artwork (snaps, titles etc). | ||
+ | * An image is used as an empty image for the layout to be displayed when a selection image is not available | ||
+ | * This is the standard behaviour of the empty image. | ||
+ | * In this example Artwork 2 is displaying titles. | ||
+ | * artwork_2_image_path is configured in the emulator ini | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art3.png|thumb|''n64-art3.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art3.png|thumb|''n64-art3.png'']] | ||
− | ''' Artwork 3 '''<br /> Artwork 3 is | + | ''' Artwork 3 '''<br /> |
+ | * Artwork 3 is a static empty image. | ||
+ | * In this example Artwork 3 is used as an overlay for Artwork 1 & Artwork 2 adding a scanlines effect to the dynamic images. | ||
+ | * artwork_3_image_path is intentionally broken in the emulator ini | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art4.png|thumb|''n64-art4.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art4.png|thumb|''n64-art4.png'']] | ||
− | ''' Artwork 4 '''<br /> | + | ''' Artwork 4 '''<br /> Artwork 4 is the main po |
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art5.png|thumb|''n64-art5.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art5.png|thumb|''n64-art5.png'']] | ||
''' Artwork 5 '''<br /> | ''' Artwork 5 '''<br /> | ||
+ | * Artwork 5 is reserved for dynamic artwork (snaps, titles etc). | ||
+ | * An image is used as an empty image for the layout to be displayed when a selection image is not available | ||
+ | * This is the standard behaviour of the empty image. | ||
+ | * In this example Artwork 5 is displaying 3D box images. | ||
+ | * artwork_5_image_path is configured in the emulator ini | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art6.png|thumb|''n64-art6.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art6.png|thumb|''n64-art6.png'']] | ||
Line 58: | Line 74: | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art7.png|thumb|''n64-art7.png'' (This is small transparent PNG)]] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art7.png|thumb|''n64-art7.png'' (This is small transparent PNG)]] | ||
− | ''' Artwork 7 '''<br /> Artwork 7 is reserved for dynamic artwork (snaps, titles etc) | + | ''' Artwork 7 '''<br /> |
+ | * Artwork 7 is reserved for dynamic artwork (snaps, titles etc). | ||
+ | * A small transparent image is used to make the artwork widget appear blank to the user. | ||
+ | * An image is used as an empty image for the layout to be displayed when a selection image is not available | ||
+ | * This is the standard behaviour of the empty image. In this example Artwork 7 is displaying Hyperspin wheel art images. | ||
+ | * artwork_7_image_path is configured in the emulator ini | ||
|- | |- | ||
|[[File:Layout_Editor-Layering_&_Transparency-N64-art8.png|thumb|''n64-art8.png'']] | |[[File:Layout_Editor-Layering_&_Transparency-N64-art8.png|thumb|''n64-art8.png'']] | ||
Line 70: | Line 91: | ||
|} | |} | ||
+ | === INI File Configuration === | ||
+ | <pre> | ||
+ | ### Artwork Locations ### | ||
+ | artwork_1_image_path ~/emulators/n64/artwork1 | ||
+ | artwork_2_image_path ~/emulators/n64/artwork2 | ||
+ | artwork_3_image_path | ||
+ | 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 | ||
+ | </pre> | ||
=== Preview === | === Preview === |
Revision as of 01:09, 25 April 2011
Introduction
The layout system in Wah!Cade builds the screen in layers. These layers support transparency. which can be enabled in the item properties dialog when editing the item in the Layout Editor. When creating a layout we can take advantage of the way the screen is being built 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 (Artwork displayed when no artwork is found)
- Artwork 1-10
- Background Images
NB: This is not a GIMP tutorial.
Artwork Types
Empty Artwork
Using the Empty Artwork feature in Wah!Cade we can display more than a "Game Not Found" image. When using composited layouts you take advantage of this feature to load graphics as layers in 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 items with graphic files is how we begin to build layered layouts.
The LAYOUT_EDITOR Documentation details the naming conventions available.
Artwork 1-10
Artwork items has been the standard method of displaying snaps, marquee, titles, etc in the past. While this is still the case you may also hijack them to become a dynamic part of your layout. If using Empty Artwork as part of your layout you will only have a select number of Artwork items left once the base layout is built. You will need to keep this in mind as you build your layout.
For the Empty Artwork items to work you will need to map all the required Artwork items in the Layout Editor
You can customise the layout on the fly if you have used Empty Artwork but building game images in the particular artwork directory used by the layout.
Background Images
Background images are static images, these items do not support transparency.
N64 Layout Example
Information
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.
All 10 layers of this layout are customisable per selection due to the nature of using the Artwork items to build the layout.
Layers Breakdown
Artwork 1
|
Artwork 2
|
Artwork 3
|
Artwork 4 |
Artwork 5
|
Artwork 6 |
Artwork 7
|
Artwork 8 |
Artwork 9 |
Artwork 10 |
INI File Configuration
### Artwork Locations ### artwork_1_image_path ~/emulators/n64/artwork1 artwork_2_image_path ~/emulators/n64/artwork2 artwork_3_image_path 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
Preview
The final layout, once it is put together on-screen by Wah!Cade