Wii Banner Editing/Creation Tutorial​

New easier navigable version: https://sites.google.com/site/wiibannerguide/


Introduction



If you have been in the Wii homebrew scene for a while, you may have seen some "custom channels" - channels on the Wii System Menu specifically for one piece of homebrew. Often these channels have very exciting and interesting banners. You may have wondered how to create these channels. This tutorial aims to tell you how.

It should be noted at this point that when installing custom channels you have made, it is absolutely VITAL you have brick protection (i.e. BootMii/boot2 or Priiloader) before installing any channels. This is a potentially dangerous process.

If you are an absolute beginner, I advise you read this guide from the start and then stop when you've done what it is you want to learn to do (it gets quite complicated later on, but I'm sure most of you could handle it). If you have already made a channel with CustomizeMii and want to take it further, I advise still reading the "Basic Concepts" section, just to make sure you know all that stuff, then jumping down to "BRLAN Edits".


Basic Concepts



OK, so here are a few basic concepts you need to get your head around first off. For starters, most channels are stored as "WAD" files. These are essentially archives (a bit like a ZIP or a RAR) that hold all the channel-y goodness. Inside a WAD, you will find, along with a few unimportant files for this tutorial, files called 00000000.app, 00000001.app and 00000002.app. The "banner" of the channel is in 00000000.app. This file is another type of archive, this time a "U8 archive". Inside, the structure is like this:


CODE
meta/

banner.bin
icon.bin
sound.bin


sound.bin is the sound that plays when the channel is selected. icon.bin is the version of the banner displayed on the System Menu. banner.bin is the version that is displayed once it is selected.

banner.bin and icon.bin have a very similar format, like this:


CODE
arc/

anim/
banner.brlan or icon.brlan
blyt/
banner.brlyt or icon.brlyt
timg/
(collection of .TPL files)


The .brlan files handle the animation of the banner, the .brlyt files list all the "textures" (images) used and the .TPL files are themselves the textures (images) used within the banner.

It follows that by simply replacing the .TPL files, you retain the animations of the banner, but change the images. And that is the first type of banner creation we will look at.


Simple Banner Creation



This part of the guide deals with a very simple process of replacing the images in a banner with new images, while retaining the animations from the original banner. This is the concept that popular channel creation tool "CustomizeMii" is based on, and that is the tool we will use for this part of the guide.

First off, you need to download and run CustomizeMii. Get it here: http://code.google.com/p/customizemii/downloads/list

Download and extract the RAR, and run CustomizeMii. You should be greeted by a window like this:

You'll see there is a list of "Base WADs". These are fully legal WADs created by various members of the Wii scene, which CustomizeMii modifies to create channels. (This means that usually the animation in final channels is the same as that in these channels, but with different images). You need to choose a channel with an animation you like. *Note: You will change the images, and the sounds if you want, but the actual animation of images will remain the same*

For this tutorial I will use WADder Base 1. (You can use the "Preview" button to view YouTube videos of the various base WADs). As you can see if you watch this video : http://www.youtube.com/watch?v=OuMoA9d_8FM...feature=related this channel has a non-moving background, and an image in the foreground which "grows" (i.e. is scaled larger).

Once you have chosen the base WAD you want, click it and press Load. This will download the WAD and allow you to start editing it. (Alternatively, you can choose Save, and then the next time you want to use this base WAD to make a channel, you will not have to download it again).

Now the fun starts

. It's time to start editing. First, go to the "Title" tab. This one is fairly straight forward, simply type in the Title you want to appear when you hover over the channel in the System Menu, like so:

Next, move over to the "Options" tab. There are a few things to note here. First off, you will want to change the title ID of the channel. The title ID is the unique 4-letter ASCII string which identifies your channel. Make sure it doesn't clash with another channel (all official channels start with H, so just avoid it and you'll be fine).

Next, you need to click the "Forwarder" button, and then choose "Simple Forwarder" (advanced forwarder is understandably more complicated), and type in the name of folder within "apps" that the boot.dol is found in (e.g. "homebrew_browser")

Now for sound. If you want your channel to have a sound, it is best to click the "Browse" button beside the "New Sound" box, and then choose "Convert to BNS" (converting to BNS will mean a smaller file size for your channel). Then simply choose your sound file and click convert.

Finally, on to editing the banner. Move over to the "Banner" tab, and you'll see all the images ("TPLs") in your Base WAD. These are the images you can replace. You can use the "Preview" button to see what the images are, then use the "Extract" button to extract the images as PNG images. These can then be edited with any image editing program (e.g. PhotoShop, Paint.NET, GIMP). Once you're done, use the "Replace" button and choose the edited image. !!MAKE SURE THE IMAGE HAS THE SAME DIMENSIONS AS ORIGINAL!!.

Last thing that needs done if the icon. This process is identical to the "Banner" process, only under the "Icon" tab. Should be straight forward.

Then you're done. Click the "Create WAD" side of the big button at the bottom of the CustomizeMii window, choose where to save it and give it a minute to package it all up.

You now have a fully legal, custom, forwarder channel.


BRLAN edits



So you've made a custom channel. Fun, eh? But now you want to push the boundaries, play with it a little. I hear ya. So let's mess with the animation of the thing. For this, you need Benzin, an open source tool created for modifying Wii banners. There is a download link on the WiiBrew page here: http://wiibrew.org/wiki/Benzin (in the "download" section). You'll also still need CustomizeMii. For this part of the tutorial, we aren't going to edit the number/size of images, just the actual animations of the images, and, if you like, the images themselves. So load up a channel with the right number of images, with the right dimensions, in CustomizeMii, then head over to the "Animation" tab. You will find there is either one or two .brlan files in bother the "Banner" and "Icon" sections. If there is only one of each, it's simple. If there's two, it's a little more complicated, but not very. When there is one of each, they are named "banner.brlan" and "icon.brlan", and dictate the entire animation for the channel. Highlight them in turn and click the "Extract" button, and save it somewhere memorable (preferably the same directory as Benzin is in). Next open a command prompt, navigate to the directory with Benzin.exe and "banner.brlan" and "icon.brlan" and type the following command:


CODE
benzin r banner.brlan banner.xmlan


This should result in a file a little like this, which can be opened with any text editor (I advise Notepad++ personally):

Spoiler: Example XMLAN file

CODE
<?xml version="1.0"?>

<xmlan version="2.1.11BETA" brlan_version="0008">
<pai1 framesize="120" flags="01">
<pane name="Picture_01" type="0">
<tag type="RLPA">
<entry type1="0" type2="X Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
<entry type1="0" type2="Y Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
</tag>
</pane>
</pai1>
</xmlan>

It looks confusing, but it really isn't. This animation has two types; X Scale and Y Scale. i.e. it changes horizontal size and vertical size.


CODE
<pai1 framesize="120" flags="01">


This line means the animation has 120 frames


CODE
<pane name="Picture_01" type="0">


This line dictates which image (or "pane") the animation is performed to; the name is defined in the .brlyt file. Looking at the animation and a video of the channel should make it clear enough without having to check manually which image is being animated.


CODE
<tag type="RLPA">


There are different "tags" for different animations, and each tag contains a number of animations. This channel uses the common RLPA tag. (Multiple tags can be used with multiple <tag type="XXXX"> and corresponding </tag> lines)


CODE
<entry type1="0" type2="X Scale">


This defines the start of an "entry" i.e. an actual animation. The code between this and the first </entry> tag correspond to this animation. type1 is always 0, and type2 defines the actual animation type. There are plenty of types, which you can see more about in the file "animtypes.txt", included in the download with Benzin.


CODE
<triplet>

<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>


Each triplet deals with one frame. The frames between will automatically be filled in. In this case, the image is scaled from 1x its normal size at frame 0 to 1.5x its normal size at frame 60 and then back to 1x at frame 120, at which point it restarts.

The same thing happens in Y scale.

Depending on your base channel, there may be different animation types, and by looking at several, and also at animtypes.txt, you can add extra animations, change animations, tweak animations etc.

For example, let's say you wanted to make the image quickly grow to 1.5x size, then shrink to 0.5x size, then go back to 1x size, you might end up with a XMLAN something like this:

Spoiler: Quickly grow to 1.5x, then shrink to 0.5x, then back to 1x

CODE
<?xml version="1.0"?>

<xmlan version="2.1.11BETA" brlan_version="0008">
<pai1 framesize="120" flags="01">
<pane name="Picture_01" type="0">
<tag type="RLPA">
<entry type1="0" type2="X Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>30.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>90.000000000000000</frame>
<value>0.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
<entry type1="0" type2="Y Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>30.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>90.000000000000000</frame>
<value>0.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
</tag>
</pane>
</pai1>
</xmlan>

Or if you wanted if to grow in the X axis, while shrinking in the Y axis, maybe something like this:

Spoiler: Grow in X, Shrink in Y

CODE
<?xml version="1.0"?>

<xmlan version="2.1.11BETA" brlan_version="0008">
<pai1 framesize="120" flags="01">
<pane name="Picture_01" type="0">
<tag type="RLPA">
<entry type1="0" type2="X Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
<entry type1="0" type2="Y Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
</tag>
</pane>
</pai1>
</xmlan>

(Here, in the X axis, it starts at 1x size, grows to 1.5x, then shrinks to 1x, while in the Y axis, it starts at 1.5x size, shrinks to 1x size and then grows to 1.5x size again)

Now these animations may be fairly ugly, but this is just to show you the sort of changes you can make. Then of course there are the other animation types. Here's an example where the image is hidden until the 15th frame, then visible until the 100th, then hidden again, using the RVLI tag:

Spoiler: Hiding image

CODE
<?xml version="1.0"?>

<xmlan version="2.1.11BETA" brlan_version="0008">
<pai1 framesize="120" flags="01">
<pane name="Picture_01" type="0">
<tag type="RLPA">
<entry type1="0" type2="X Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
<entry type1="0" type2="Y Scale">
<triplet>
<frame>0.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>60.000000000000000</frame>
<value>1.500000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>120.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
</tag>
<tag type="RLVI">
<entry type1="0" type2="0">
<triplet>
<frame>0.000000000000000</frame>
<value>0.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>15.000000000000000</frame>
<value>1.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
<triplet>
<frame>100.000000000000000</frame>
<value>0.000000000000000</value>
<blend>0.000000000000000</blend>
</triplet>
</entry>
</tag>
</pane>
</pai1>
</xmlan>

(In this example, the animation is the same as the original, it is just hidden for some frames)

Once you have finished editing the .xmlan, you can use the following command to make it back into a .brlan:


CODE
benzin m banner.xmlan banner.brlan


Then you can stick it back into the channel with CustomizeMii, replace images, sounds etc. and pack as a .WAD.

Now if there were two .brlan files in the "Banner" box in CustomizeMii, one will be called "Banner_Start.brlan" and one will be called "Banner_Loop.brlan". In this case, "Banner_Start.brlan" will be played ONCE when the channel is selected, and then "Banner_Loop.brlan" will loop afterwards, the way "banner.brlan" will loop continuously normally.


BRLYT Edits



So you may have noticed that when editing BRLANs, you can just change the animations of existing images (or "panes"), and not add or remove them. You may also have noticed there are multiple panes in your banner, and you don't know which one you're editing the animation FOR. This is where the BRLYT comes in.

As with the BRLANs, we extract with CustomizeMii and convert to an XML format with Benzin. This time you will find it in the "Layout" tab of CustomizeMii. The command, similar to before, is:


CODE
benzin r banner.brlyt banner.xmlyt


This will give you something like this:

Spoiler: Sample XMYLT

CODE
<?xml version="1.0"?>

<xmlyt version="2.1.11BETA" brlyt_version="0008">
<tag type="lyt1">
<drawnFromMiddle>01</drawnFromMiddle>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
</tag>
<tag type="txl1">
<entries>
<name>banner.tpl</name>
</entries>
</tag>
<tag type="mat1">
<entries name="Picture_00">
<colors>
<forecolor r="0" g="0" b="0" a="0" />
<backcolor r="255" g="255" b="255" a="255" />
<colorReg3 r="255" g="255" b="255" a="255" />
<tev_k1 r="ff" g="ff" b="ff" a="ff" />
<tev_k2 r="ff" g="ff" b="ff" a="ff" />
<tev_k3 r="ff" g="ff" b="ff" a="ff" />
<tev_k4 r="ff" g="ff" b="ff" a="ff" />
</colors>
<texture name="banner.tpl">
<wrap_s>GX_CLAMP</wrap_s>
<wrap_t>GX_CLAMP</wrap_t>
</texture>
<TextureSRT>
<XTrans>0.0000000000</XTrans>
<YTrans>0.0000000000</YTrans>
<Rotate>0.0000000000</Rotate>
<XScale>1.0000000000</XScale>
<YScale>1.0000000000</YScale>
</TextureSRT>
<CoordGen>
<tgen_type>GX_TG_MTX2x4</tgen_type>
<tgen_src>GX_TG_TEX0</tgen_src>
<MatrixSource>GX_TEXMTX0</MatrixSource>
<padding>00</padding>
</CoordGen>
<AlphaCompare>
<comp0>GX_ALWAYS</comp0>
<comp1>GX_ALWAYS</comp1>
<aop>GX_AOP_AND</aop>
<ref0>00</ref0>
<ref1>00</ref1>
</AlphaCompare>
</entries>
</tag>
<tag type="pan1" name="RootPane" userdata="">
<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
</tag>
<tag type="pas1" />
<tag type="pic1" name="Picture_00" userdata="">
<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
<material name="Picture_00" />
<colors>
<vtxColorTL r="ff" g="ff" b="ff" a="ff" />
<vtxColorTR r="ff" g="ff" b="ff" a="ff" />
<vtxColorBL r="ff" g="ff" b="ff" a="ff" />
<vtxColorBR r="ff" g="ff" b="ff" a="ff" />
</colors>
<coordinates>
<set>
<coordTL s="0.000000" t="0.000000" />
<coordTR s="1.000000" t="0.000000" />
<coordBL s="0.000000" t="1.000000" />
<coordBR s="1.000000" t="1.000000" />
</set>
</coordinates>
</tag>
<tag type="pae1" />
<tag type="grp1" name="RootGroup" />
</xmlyt>

Complicated as this looks, it is actually a very simple BRLYT, with only ONE image. (This is from a completely static base WAD, no animation).

You'll notice a bunch of various <tag type="XXX1"> style tags. The first of these is this:


CODE
<tag type="txl1">

<entries>
<name>banner.tpl</name>
</entries>
</tag>


This lists the TPLs used in the banner. To add more, simply add another <name> tag, the TPL name, and then a </name> between the opening and closing <entries> tags.

The next one is this:


CODE
<tag type="mat1">

<entries name="Picture_00">
<colors>
<forecolor r="0" g="0" b="0" a="0" />
<backcolor r="255" g="255" b="255" a="255" />
<colorReg3 r="255" g="255" b="255" a="255" />
<tev_k1 r="ff" g="ff" b="ff" a="ff" />
<tev_k2 r="ff" g="ff" b="ff" a="ff" />
<tev_k3 r="ff" g="ff" b="ff" a="ff" />
<tev_k4 r="ff" g="ff" b="ff" a="ff" />
</colors>
<texture name="banner.tpl">
<wrap_s>GX_CLAMP</wrap_s>
<wrap_t>GX_CLAMP</wrap_t>
</texture>
<TextureSRT>
<XTrans>0.0000000000</XTrans>
<YTrans>0.0000000000</YTrans>
<Rotate>0.0000000000</Rotate>
<XScale>1.0000000000</XScale>
<YScale>1.0000000000</YScale>
</TextureSRT>
<CoordGen>
<tgen_type>GX_TG_MTX2x4</tgen_type>
<tgen_src>GX_TG_TEX0</tgen_src>
<MatrixSource>GX_TEXMTX0</MatrixSource>
<padding>00</padding>
</CoordGen>
<AlphaCompare>
<comp0>GX_ALWAYS</comp0>
<comp1>GX_ALWAYS</comp1>
<aop>GX_AOP_AND</aop>
<ref0>00</ref0>
<ref1>00</ref1>
</AlphaCompare>
</entries>
</tag>


A bit bigger this one. Here we define the "materials" (essentially images), and their attributes. Each image gets an <entries> tag dedicated to it. However, you can ignore almost all of it except for:


CODE
<texture name="banner.tpl">

<wrap_s>GX_CLAMP</wrap_s>
<wrap_t>GX_CLAMP</wrap_t>
</texture>


This is of course the name of the TPL used in this "material". To add another material, copy this same thing again, but change the name in the first <entries> tag to something unique (e.g. "Picture_01"), and then change the name of the TPL. (i.e. if you want to add another image, you must first add the TPL name to the txl1 list, and then create a new entry in the mat1 list)

The final important one is this:


CODE
<tag type="pic1" name="Picture_00" userdata="">

<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
<material name="Picture_00" />
<colors>
<vtxColorTL r="ff" g="ff" b="ff" a="ff" />
<vtxColorTR r="ff" g="ff" b="ff" a="ff" />
<vtxColorBL r="ff" g="ff" b="ff" a="ff" />
<vtxColorBR r="ff" g="ff" b="ff" a="ff" />
</colors>
<coordinates>
<set>
<coordTL s="0.000000" t="0.000000" />
<coordTR s="1.000000" t="0.000000" />
<coordBL s="0.000000" t="1.000000" />
<coordBR s="1.000000" t="1.000000" />
</set>
</coordinates>
</tag>


This defines the pane. This is what is actually displayed and what gets animated. As you can see, the <material name="Picture_00" /> tag connects the pane to a material, which is in turn connected to the TPL. There can alternatively be in this section a tag like this: <tpl name="banner.tpl" />, but most banners I have looked at refer to materials rather than TPLs. I am not sure if you refer directly to a TPL if you need to have added it to a material or not.

To add another pane, simply add another <tag type="pic1" ... > tag (followed by all the rest), replacing the "name" with a different one and the material name. You also need to adjust this section:


CODE
<size>

<width>608.000000</width>
<height>456.000000</height>
</size>


to suit your TPL.

So to summarise:

To add an image, you need to add it to the txl1 list, then add a material for it to the mat1 list, linking it to the TPL and then finally create a pic1 tag for it, linking this tag to the material, and adjust the size of the pic1 tag to match the TPL.

So for example taking the above XMLYT and adding an image with a resolution of 100x100 called "move.tpl" as a pane with the name "Picture_01", might look something like this:

Spoiler: Added image

CODE
<?xml version="1.0"?>

<xmlyt version="2.1.11BETA" brlyt_version="0008">
<tag type="lyt1">
<drawnFromMiddle>01</drawnFromMiddle>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
</tag>
<tag type="txl1">
<entries>
<name>banner.tpl</name>
<name>move.tpl</name> <!-- Added TPL !-->
</entries>
</tag>
<tag type="mat1">
<entries name="Picture_00">
<colors>
<forecolor r="0" g="0" b="0" a="0" />
<backcolor r="255" g="255" b="255" a="255" />
<colorReg3 r="255" g="255" b="255" a="255" />
<tev_k1 r="ff" g="ff" b="ff" a="ff" />
<tev_k2 r="ff" g="ff" b="ff" a="ff" />
<tev_k3 r="ff" g="ff" b="ff" a="ff" />
<tev_k4 r="ff" g="ff" b="ff" a="ff" />
</colors>
<texture name="banner.tpl">
<wrap_s>GX_CLAMP</wrap_s>
<wrap_t>GX_CLAMP</wrap_t>
</texture>
<TextureSRT>
<XTrans>0.0000000000</XTrans>
<YTrans>0.0000000000</YTrans>
<Rotate>0.0000000000</Rotate>
<XScale>1.0000000000</XScale>
<YScale>1.0000000000</YScale>
</TextureSRT>
<CoordGen>
<tgen_type>GX_TG_MTX2x4</tgen_type>
<tgen_src>GX_TG_TEX0</tgen_src>
<MatrixSource>GX_TEXMTX0</MatrixSource>
<padding>00</padding>
</CoordGen>
<AlphaCompare>
<comp0>GX_ALWAYS</comp0>
<comp1>GX_ALWAYS</comp1>
<aop>GX_AOP_AND</aop>
<ref0>00</ref0>
<ref1>00</ref1>
</AlphaCompare>
</entries>
<entries name="Picture_01"> <!-- Start of new material !-->
<colors>
<forecolor r="0" g="0" b="0" a="0" />
<backcolor r="255" g="255" b="255" a="255" />
<colorReg3 r="255" g="255" b="255" a="255" />
<tev_k1 r="ff" g="ff" b="ff" a="ff" />
<tev_k2 r="ff" g="ff" b="ff" a="ff" />
<tev_k3 r="ff" g="ff" b="ff" a="ff" />
<tev_k4 r="ff" g="ff" b="ff" a="ff" />
</colors>
<texture name="move.tpl"> <!-- Linked to new TPL !-->
<wrap_s>GX_CLAMP</wrap_s>
<wrap_t>GX_CLAMP</wrap_t>
</texture>
<TextureSRT>
<XTrans>0.0000000000</XTrans>
<YTrans>0.0000000000</YTrans>
<Rotate>0.0000000000</Rotate>
<XScale>1.0000000000</XScale>
<YScale>1.0000000000</YScale>
</TextureSRT>
<CoordGen>
<tgen_type>GX_TG_MTX2x4</tgen_type>
<tgen_src>GX_TG_TEX0</tgen_src>
<MatrixSource>GX_TEXMTX0</MatrixSource>
<padding>00</padding>
</CoordGen>
<AlphaCompare>
<comp0>GX_ALWAYS</comp0>
<comp1>GX_ALWAYS</comp1>
<aop>GX_AOP_AND</aop>
<ref0>00</ref0>
<ref1>00</ref1>
</AlphaCompare>
</entries> <!-- End of added material !-->
</tag>
<tag type="pan1" name="RootPane" userdata="">
<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
</tag>
<tag type="pas1" />
<tag type="pic1" name="Picture_00" userdata="">
<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>608.000000</width>
<height>456.000000</height>
</size>
<material name="Picture_00" />
<colors>
<vtxColorTL r="ff" g="ff" b="ff" a="ff" />
<vtxColorTR r="ff" g="ff" b="ff" a="ff" />
<vtxColorBL r="ff" g="ff" b="ff" a="ff" />
<vtxColorBR r="ff" g="ff" b="ff" a="ff" />
</colors>
<coordinates>
<set>
<coordTL s="0.000000" t="0.000000" />
<coordTR s="1.000000" t="0.000000" />
<coordBL s="0.000000" t="1.000000" />
<coordBR s="1.000000" t="1.000000" />
</set>
</coordinates>
</tag>
<tag type="pic1" name="Picture_01" userdata=""> <!-- Start of new pane !-->
<visible>01</visible>
<WidescreenAffected>00</WidescreenAffected>
<flag>00</flag>
<origin x="Center" y="Center" />
<alpha>ff</alpha>
<padding>00</padding>
<translate>
<x>0.0000000000000000000000000</x>
<y>0.0000000000000000000000000</y>
<z>0.0000000000000000000000000</z>
</translate>
<rotate>
<x>0.00000000000000000000</x>
<y>0.00000000000000000000</y>
<z>0.00000000000000000000</z>
</rotate>
<scale>
<x>1.0000000000</x>
<y>1.0000000000</y>
</scale>
<size>
<width>100.000000</width> <!-- Modified width !-->
<height>100.000000</height> <!-- Modified height !-->
</size>
<material name="Picture_01" /> <!-- Linked to new material !-->
<colors>
<vtxColorTL r="ff" g="ff" b="ff" a="ff" />
<vtxColorTR r="ff" g="ff" b="ff" a="ff" />
<vtxColorBL r="ff" g="ff" b="ff" a="ff" />
<vtxColorBR r="ff" g="ff" b="ff" a="ff" />
</colors>
<coordinates>
<set>
<coordTL s="0.000000" t="0.000000" />
<coordTR s="1.000000" t="0.000000" />
<coordBL s="0.000000" t="1.000000" />
<coordBR s="1.000000" t="1.000000" />
</set>
</coordinates>
</tag>
<tag type="pae1" />
<tag type="grp1" name="RootGroup" />
</xmlyt>

I added comments to show where I added or changed things. I can now add animation to this pane by editing the BRLAN and adding a tag like:


CODE
<pane name="Picture_01" type="0">

...
</pane>


between these tags:


CODE
<pai1 framesize="120" flags="01">

...
</pai1>


e.g. you could have:


CODE
<pai1 framesize="120" flags="01">

<pane name="Picture_00" type="0">
...
</pane>
<pane name="Picture_01" type="0">
...
</pane>
</pai>


for multiple animated panes.

You should also be able to apply this method "in reverse" to remove images you don't want (e.g. if you're using a base WAD with more images than you need). This should also allow you to figure out the name of the pane for animation purposes (if you wish to change the animation of a specific pane, but you're not sure which it is).

As with the XMLAN, you need to convert it back to BRLAN with this benzin command:


CODE
benzin m banner.xmlyt banner.brlyt


and then insert it back into the channel with CustomizeMii, under the "layout" tab again.



Afterword



There is more that is not in this guide, such as editing the <blend> tag values to get smooth animations(you can usually leave them as 0 though) . But I don't know about it, so I won't cover it. I hope this has been useful to someone.

Obviously there need's to be some thanks here, so thanks to:

Leathl - For CustomizeMii
SquidMan, comex, megazig, and Yossi - For Benzin

And a few links for you to enjoy:

http://wadder2-0.wikispaces.com/
http://wadder2-0.wikispaces.com/Brlan+Documentation
http://wadder2-0.wikispaces.com/Brlyt+Documentation
http://wadder2-0.wikispaces.com/Brlan+blend
http://wadder2-0.wikispaces.com/Editing+Banners+with+Benzin
http://git.daifukkat.su/?p=benzin.git;a=bl...pes.txt;hb=HEAD


Changelog



May 2nd 2011 : Initial version
June 17th 2011 : Added BRLYT edits, some information about multiple animations, some additional advice in Introduction

 

[PolloDiablo]

thanks! this is very usefull!

 

[SifJar]

Glad you think so

BTW, this is not an entry into the tutorial competition, it's not eligible due to the fact that the majority of the "Simple Banner Creation" section was already posted by me at the WiiBrew forums.

Also, I plan to add more to this tutorial this evening or soon, e.g. some examples of actually changing the animation.

EDIT: I added a few example XMLAN edits. Hope this helps clarify any confusion that could have been caused.

 

[Slimmmmmm]

Great guide, it has a good layout and balance between explaining without confusing people.

 

[fatherjack]

^ +1 guide is great.

so good in fact, it inspired me to have a go - but I fell at the first fence

I grabbed Spiderman 3 as base wad from wadder depository and used customizemii 3.11.
very simple animated icon, fading between two static images and a static banner.
cobbled a quick SNEEK image together, inverted colours for alternate image (headache inducing)
swapped dol for bootios and re-labelled channel and ID.
Didnt even bother to swap banner image as I wanted to see the effect of the animation - but it doesnt work.

Images swapped were previewed and seemed resized and reformatted correctly in customizemii.
The downloaded base wad works as expected - just not animated with my images.

Could you give me any pointers as to where I have gone astray?

 

[SifJar]

Well what did you do? What's the contents of the XMLAN?

 

[fatherjack]

what I did;
just swapped icon images, renamed wad, title ID, and new .dol file.
All ok except icon does not animate between images.

XMLAN:







0.000000000000000
255.000000000000000
-0.001602292293683


120.000000000000000
0.000000000000000
0.028653711080551


150.000000000000000
0.000000000000000
-0.032880887389183


270.000000000000000
254.000000000000000
0.023906823247671


300.000000000000000
254.000000000000000
0.000000000000000







Base wad really is simple - only banner and icon brlyt and brlan's.
The icon animation code above seems identical to that in the base wad which animates fine.......so assume the problem must be with images?

 

[SifJar]

I don't really understand your problem...You say you just replaced the images, but the animation has changed? What did the original banner look like (is there a YouTube video of it?)?

 

[fatherjack]

vid here:
http://www.youtube.com/watch?v=m8XTVQYvRBY

animation hasnt 'changed' - its just not happening

the original channel icon alternately fades between the spidey logo and a greyscale spidey logo(see vid)
however I have only replaced the two (2) icon tpl's and mine doesn't animate.

thx for any help

 

[SifJar]

And there are two icons in the original channel? Hmm. By the looks of things, according to this: http://git.daifukkat.su/?p=benzin.git;a=bl...pes.txt;hb=HEAD the animation here is affecting the "Alpha" of the image. (i.e. how transparent it is) [note that 16 = 0x10]. With the high Alpha (255, max possible value), the image is completely visible. With low Alpha (0, min value), it is completely invisible. But for some reason, the alpha in your images isn't being affected. I'm going to guess you're using the wrong TPL format. I think what you need is RGBA8 TPLs, instead of anything else, which may not support Alpha properly. Try changing to RGBA8, and let me know if that works

 

[fatherjack]

no icon animation with RGBA8

I have uploaded the channel if u fancy a poke around with customizemii and let me know where I balls'd up.

https://rapidshare.com/files/1149689947/SNEEK____-_SNEE.rar

Link changed
no, spiderman wad is not incl in download

 

[SifJar]

no icon animation with RGBA8

I have uploaded the channel if u fancy a poke around with customizemii and let me know where I balls'd up.

http://www.megaupload.com/?d=CU7YAB92

If that's the SpiderMan WAD, its illegal to redistribute that, and against the rules here. Also, the link isn't working.

 

[fatherjack]

@sifjar
no worries - managed to get same animation working using PoP Rival Swords as base wad.
used same images tho'- so problem prolly wasn't my pics (+ I didnt learn anything

)

 

[LinkFan16]

I recently tried my hand at channel making and thanks to this it will be a lot easier for me now, this is a well written, good indepth tutorial^^

 

[SifJar]

I recently tried my hand at channel making and thanks to this it will be a lot easier for me now, this is a well written, good indepth tutorial^^

Thanks, hope you find it helpful.

 

[SifJar]

Updated the guide with BRLYT editing guide, showing you how to add (and with a little thought remove) images from a channel and how to identify which image you are animating when editing the BRLAN.

 

[ganon45]

?

 

[DooMJunkie]

I tried loading my Spear of Destiny channel with WAD Manager v1.7 by Waninkoko, I used IOS35, but it keeps giving me "Installing ticket... ERROR! (ret = -2011)". What do I do?!

 

[ulao]

Can any of these tools assist in creating banners? I'm trying to find a way to streamline the creation of banners for wii game in dolphin. Something shorter then going in to each game and saving.

 

[XyberDAWG]

Sorry for Necroposting. But I found two GameCube games that are missing banners.

GLJJMS - RADIRGY GENERIC
GR9E6L - Ring Of Fire