Difference between revisions of "Layout Editor:Layering & Transparency"

From Wah!ki
Jump to navigation Jump to search
m
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{WIP})
 
 
= Introduction =
 
= 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.
+
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.
  
−
[[File:LayoutEditorLayersIllustration.png]]
+
[[File:LayoutEditorLayersIllustration.png|thumb|Wah!Cade Layers]]
  
 
By default the layout system supports 3 major types of graphics. Each of these are used when building composited layouts in order of preference.
 
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 are found)''
+
# Empty Artwork 1-10 ''(Static artwork displayed when no artwork is found)''
 
# Artwork 1-10
 
# Artwork 1-10
 
# Background Images
 
# Background Images
−
 
−
''NB: This is not a GIMP tutorial.''
 
  
 
== Artwork Types ==
 
== Artwork Types ==
 
=== Empty Artwork ===
 
=== 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 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 [http://bazaar.launchpad.net/%7Eandy-balcombe/wahcade/main/annotate/head%3A/doc/LAYOUT_EDITOR LAYOUT_EDITOR] Documentation details the naming conventions available.
 
The [http://bazaar.launchpad.net/%7Eandy-balcombe/wahcade/main/annotate/head%3A/doc/LAYOUT_EDITOR LAYOUT_EDITOR] Documentation details the naming conventions available.
  
−
=== Artwork 1-10 ===
+
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.  
−
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
+
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.
  
−
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.
+
=== Artwork 1-10 ===
 +
Artwork items is the only method available for displaying dynamic artwork in a layout.
  
 
=== Background Images ===
 
=== Background Images ===
−
Background images are static images, these items do not support transparency.
+
Background images are static images, these items do not support transparency and are therefore limited in their application.
  
 
== N64 Layout Example ==
 
== N64 Layout Example ==
 
=== 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. 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.
−
* Artwork 1 is reserved for snaps
 
−
* Artwork 2 is reserved for titles
 
−
* Artwork 3 is reserved for 3D carts
 
−
* Artwork 7 is reserved for title artwork (Hyperspin wheel art)
 
  
−
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. 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)''
  
−
=== Preview ===
+
=== Breaking Down The Layers ===
−
[[File:Layout Editor-Layering & Transparency-N64-preview.png]]<br />
+
{|width=100%
−
''Preview of the Completed Layout''
+
|[[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).
 +
* 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, links to folder containing snaps
 +
|-
 +
|[[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).
 +
* 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, links to folder containing titles
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art3.png|thumb|''n64-art3.png'']]
 +
''' 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 configured in the emulator ini, links to an empty folder
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art4.png|thumb|''n64-art4.png'']]
 +
''' Artwork 4 '''<br />
 +
* Artwork 4 is a static empty image.
 +
* Artwork 4 is the main background (previously would be main.png in older layout methods)
 +
* In this example Artwork 4 overlays the previous 3 layers hiding inconsistent/oversized image edges beneath it.
 +
* artwork_4_image_path is configured in the emulator ini, links to an empty folder
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art5.png|thumb|''n64-art5.png'']]
 +
''' 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, links to folder containing boxart
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art6.png|thumb|''n64-art6.png'']]
 +
''' Artwork 6 '''<br />
 +
* Artwork 6 is a static empty image.
 +
* Artwork 6 is the console & controller overlay
 +
* artwork_6_image_path is configured in the emulator ini, links to an empty folder
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art7.png|thumb|''n64-art7.png'']]
 +
''' 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, links to folder containing wheel art images
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art8.png|thumb|''n64-art8.png'']]
 +
''' Artwork 8 '''<br />
 +
* Artwork 8 is a static empty image.
 +
* Artwork 8 is the characters overlay
 +
* artwork_8_image_path is configured in the emulator ini, links to an empty folder
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art9.png|thumb|''n64-art9.png'']]
 +
''' Artwork 9 '''<br />
 +
* Artwork 9 is a static empty image
 +
* Artwork 9 is the emulator logo
 +
* artwork_9_image_path is configured in the emulator ini, links to an empty folder
 +
|-
 +
|[[File:Layout_Editor-Layering_&_Transparency-N64-art10.png|thumb|''n64-art10.png'']]
 +
''' Artwork 10 '''<br />
 +
* Artwork 10 is a static empty image
 +
* Artwork 10 is the "PRESS START" overlay
 +
* artwork_10_image_path is configured in the emulator ini, links to an empty folder
 +
|}
  
−
=== Layers Breakdown ===
+
=== INI File Configuration ===
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art1.png]]<br />
+
<pre>
−
''n64-art1.png''
+
### 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
 +
</pre>
  
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art2.png]]<br />
+
=== Preview ===
−
''n64-art2.png''
+
[[File:Layout Editor-Layering & Transparency-N64-preview.png|thumb|''Completed Layout'']]
−
 
+
The final layout, once it is put together on-screen by Wah!Cade
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art3.png]]<br />
 
−
''n64-art3.png''
 
−
 
 
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art4.png]]<br />
 
−
''n64-art4.png''
 
−
 
 
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art5.png]]<br />
 
−
''n64-art5.png''
 
−
 
 
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art6.png]]<br />
 
−
''n64-art6.png''
 
−
 
 
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art7.png]]<br />
 
−
''n64-art7.png'' (This is small transparent PNG)
 
−
 
 
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art8.png]]<br />
 
−
''n64-art8.png''
 
  
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art9.png]]<br />
 
−
''n64-art9.png''
 
  
−
[[File:Layout_Editor-Layering_&_Transparency-N64-art10.png]]<br />
+
[[Category:Layout]]
−
''n64-art10.png''
 

Latest revision as of 02:00, 25 April 2011

Introduction

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.

Wah!Cade Layers

By default the layout system supports 3 major types of graphics. Each of these are used when building composited layouts in order of preference.

  1. Empty Artwork 1-10 (Static artwork displayed when no artwork is found)
  2. Artwork 1-10
  3. Background Images

Artwork Types

Empty Artwork

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 1-10

Artwork items is the only method available for displaying dynamic artwork in a layout.

Background Images

Background images are static images, these items do not support transparency and are therefore limited in their application.

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. 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

n64-art1.png

Artwork 1

  • 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, links to folder containing snaps
n64-art2.png

Artwork 2

  • 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, links to folder containing titles
n64-art3.png

Artwork 3

  • 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 configured in the emulator ini, links to an empty folder
n64-art4.png

Artwork 4

  • Artwork 4 is a static empty image.
  • Artwork 4 is the main background (previously would be main.png in older layout methods)
  • In this example Artwork 4 overlays the previous 3 layers hiding inconsistent/oversized image edges beneath it.
  • artwork_4_image_path is configured in the emulator ini, links to an empty folder
n64-art5.png

Artwork 5

  • 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, links to folder containing boxart
n64-art6.png

Artwork 6

  • Artwork 6 is a static empty image.
  • Artwork 6 is the console & controller overlay
  • artwork_6_image_path is configured in the emulator ini, links to an empty folder
n64-art7.png

Artwork 7

  • 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, links to folder containing wheel art images
n64-art8.png

Artwork 8

  • Artwork 8 is a static empty image.
  • Artwork 8 is the characters overlay
  • artwork_8_image_path is configured in the emulator ini, links to an empty folder
n64-art9.png

Artwork 9

  • Artwork 9 is a static empty image
  • Artwork 9 is the emulator logo
  • artwork_9_image_path is configured in the emulator ini, links to an empty folder
n64-art10.png

Artwork 10

  • Artwork 10 is a static empty image
  • Artwork 10 is the "PRESS START" overlay
  • artwork_10_image_path is configured in the emulator ini, links to an empty folder

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

Preview

Completed Layout

The final layout, once it is put together on-screen by Wah!Cade

Retrieved from "https://wahki.mameau.com/index.php?title=Layout_Editor:Layering_%26_Transparency&oldid=2073"