Wii Banner Creation/Editing Guide

Discussion in 'Wii - Tutorials & FAQs' started by SifJar, May 2, 2011.

May 2, 2011
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    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:

    [IMG]

    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 [IMG]. 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:

    [IMG]

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

    [IMG]

    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")

    [IMG]

    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.

    [IMG]

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

    [IMG]

    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):

    WARNING! Spoilers inside!


    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:

    WARNING! Spoilers inside!


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

    WARNING! Spoilers inside!


    (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:

    WARNING! Spoilers inside!


    (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:

    WARNING! Spoilers inside!



    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:

    WARNING! Spoilers inside!



    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
    Haloman800 and NeoRame like this.
    • Member

    NahuelDS Madre de Dios! Es El POLLO DIABLO!!!

    Member Since:
    Feb 9, 2010
    Message Count:
    3,381
    Location:
    DS-Scene
    Country:
    Argentina
    thanks! this is very usefull!
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    Glad you think so [IMG]

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

    Slimmmmmm GBAtemp MoNkEeE

    Member Since:
    Nov 1, 2007
    Message Count:
    1,686
    Location:
    the land of lol
    Country:
    United Kingdom
    Great guide, it has a good layout and balance between explaining without confusing people.
    • Member

    fatherjack New Member

    Member Since:
    Jul 3, 2007
    Message Count:
    220
    Location:
    Still Here
    Country:
    United Kingdom
    ^ +1 guide is great.

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

    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?
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    Well what did you do? What's the contents of the XMLAN?
    • Member

    fatherjack New Member

    Member Since:
    Jul 3, 2007
    Message Count:
    220
    Location:
    Still Here
    Country:
    United Kingdom
    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?
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    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?)?
    • Member

    fatherjack New Member

    Member Since:
    Jul 3, 2007
    Message Count:
    220
    Location:
    Still Here
    Country:
    United Kingdom
    vid here:
    http://www.youtube.com/watch?v=m8XTVQYvRBY

    animation hasnt 'changed' - its just not happening [IMG]

    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 [IMG]
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    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 [IMG]
    • Member

    fatherjack New Member

    Member Since:
    Jul 3, 2007
    Message Count:
    220
    Location:
    Still Here
    Country:
    United Kingdom
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    If that's the SpiderMan WAD, its illegal to redistribute that, and against the rules here. Also, the link isn't working.
    • Member

    fatherjack New Member

    Member Since:
    Jul 3, 2007
    Message Count:
    220
    Location:
    Still Here
    Country:
    United Kingdom
    @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 [IMG] )
    • Member

    LinkFan16 I link them all

    Member Since:
    Mar 15, 2009
    Message Count:
    222
    Country:
    Germany
    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^^
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    Thanks, hope you find it helpful.
    • Member

    SifJar Not a pirate

    Member Since:
    Apr 4, 2009
    Message Count:
    6,017
    Country:
    United Kingdom
    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.
    • Newcomer

    ganon45 New Member

    Member Since:
    Jun 14, 2011
    Message Count:
    39
    Country:
    United States

Share This Page