Animated Tiles

Animated tiles play a little animation, unlike normal (static) tiles. This animation can be modified or created entirely from scratch, and various parameters can be set. There is no limit how many animated tiles can be present in a tileset. It's perfectly feasible to have a tileset, where every tile is animated, totaling 256 animated tiles (16 rows x 16 columns).

Several animated tiles are utilized by Nintendo, most famous the Brick Block, Question Block and Coin Outline in Pa0_jyotyu.arc. Please note that the ordinary Coin and the Donut Lift pull their animation from sprites instead of tiles and cannot be edited with the methods described here.

Of course there are many other tilesets with animated tiles, and the Newer team added even more.

The file AnimTiles.bin acts as a huge "index" for various properties related to the animated tiles and the animation itself. New entries need to be added to this file, so that custom animated tiles work.

Dimensions
A single image has the dimensions of 32 x 32px. Such an entity is also referred to as a Frame. A frame needs to be setup in a very specific way, please see Frames The entire image, also called Framesheet, consists of all the frames. The frame images are stacked on-top of each other. The resulting framesheet is therefore always 32px wide, and [(frame count) x 32px] tall. Example: A framesheet consisting of 8 frames is 32px wide and 8 x 32px = 256px tall.

Other Specifications

 * 256 frames or more can be used (individual frame images).
 * A "Framedelay" can be set. This determines, how long each frame is visible. Frame delays for well-known block types can be found here: Step 1: Extracting related Files (optional).
 * The animation can be played in reverse.
 * The framesheet needs to be encoded to the format RGB5A3 and needs to be put inside a Wii Image Container (.tpl), with the header stripped. Please see Step 4: Adding the Image to a Wii Image Container (.TPL).
 * Animated Tiles can be built utilizing tiles from all four available tileset slots.

AnimTiles.bin
The AnimTiles.bin file is as a huge index. Every animated tile that exists creates an entry inside that file.

Please note: If you just want to modify existing animated tiles, for example the Coin Outline or Question Block, and don't want to change any of the parameters (frame count, frame delay, direction the animation is played), then it's not needed to alter this file at all.

The file needs to be converted to readable text, and thanks to Grop this can be done easily with a Python script. The file also needs to be converted back to binary format at the end of the process.

= Tutorial: Adding new Animated Tiles = The first two steps are only needed if you want to edit the animation of existing tiles.

Skip the first two steps if you want to add new tiles instead.

Step 1: Extracting related Files (optional)
The following steps are only needed, if you want to edit existing animated tiles. They are not needed if you want to add new ones.


 * 1) Open BrawlBox or SZS Modifier.
 * 2) Open the tileset you want to edit.
 * 3) Go to the BG_tex folder.
 * 4) Right-click and "Extract..." the .bin files you want to edit.

The folder most interesting to us regarding animated tiles is BG_tex. Here we can find the binary files used for the animations. Those .bin files are actually .tpl files, but without the header, so no Preview image is shown in BrawlBox. The entire framesheet is inside such a .bin file.

The files inside the folder BG_Chk are related to the attributes and properties of tiles, see Tiles and Objects (Puzzle).

Folder BG_Unt is similar to BG_Chk, but for objects instead of tiles, see Tiles and Objects (Puzzle).

Let's look at Pa0_jyotyu.arc as an example. It contains some well-known animated tiles, they are:

Step 2: Adding the Header (optional)
The header needs to be added to the binary files in order to make them editable. In our scenario, the header is 0x40 bytes long. For a more detailed description of TPL file headers, see here (TPL [File Format] on Tockdom.com).

Please note: It is not needed to do this step for newly created animations. They can be created from scratch, see here: Creating Frames and Framesheets. Also, you can skip this step if you decide to use the images that we provide, see here: List of Framesheets.

If you want to make already existing animations editable, add the following file header to the beginning of your extracted .bin files. To do this, use a HEX editor like HxD HEX Editor.

Brick Block header ( 4 images, 32x128) [block_anime.bin]

Question Block header ( 16 images, 32x512) [hatena_anime.bin]

Coin Outline header ( 8 images, 32x256) [tuka_coin_anime.bin]

The values marked in red (byte 0x15 and 0x16, first nybble) determine the number of frames the exported image will have (x2). Now, save the edited file. Adding the file extension .tpl is optional. BrawlBox or CTools SZS Modifier can handle .bin files just fine and will still recognize the texture inside.

Both programs can now be used to extract the texture from the modified file.


 * 1) Open SZS Modifier or BrawlBox and open the .bin/.tpl file with the header we just added.
 * 2) The .tpl file header should automatically be recognized. Export the image with the name "Texture0.png".

Step 3: Creating Framesheets and Frames
Framesheets can be created from scratch. It's not required to edit exported images.

Framesheets
Let's look at the original Brick Block framesheet to better understand the specifications of them.


 * Framesheets are always 32px wide.
 * They are a multiple of 32px tall, depending on the frame count.


 * They should be saved as .PNG and converted later into RGB5A3 format.
 * Frames are stacked on-top of each other.
 * The first frame in the framesheet is usually similar to the tile in the tileset (without an animation overlay).

Frames
Now we'll look at an individual frame, this time from the original Question Block (hatena_anime).


 * Frames are 32 x 32px (green).


 * The actual frame that is later visible in the game is 24 x 24px (red). The image below shows the repeating pixels hidden with a black overlay.




 * The last pixel from the 24 x 24px area needs to be repeated towards the outside in all four directions. This process is also called texture clamping. It can easily be done with most image editing programs, such as Photoshop. A much easier way to clamp images is to use the below method Auto-Clamp with Imagemagick
 * The area used for animations is 22 x 22px for blocks (black). There is a 1px non-animated border. For other animated tiles, the entire 24 x 24px area is used. (for example animated water tiles from Newer, or any animated tile without a border). The last pixel still needs to be repeated as explained above.



Auto-Clamp with Imagemagick
Imagemagick is a program to create, edit, compose, or convert bitmap images. Download from here (all OS): Imagemagick Website imagemagick.exe W=32; H=32; convert frameIN.png -define distort:viewport=${W}x${H} -filter point -distort SRT "%[fx:w/2],%[fx:h/2] 1 0 %[fx:${W}/2],%[fx:${H}/2]" +repage frameOUT.png On Unix, remove  from the command. Remember to adjust  and   accordingly. The resulting image can now be used in your framesheet. The next task is to create multiple frames for your framesheet. Please check out framesheets from the original game or Newer for tips. Photoshop template to edit framesheets
 * Install Imagemagick
 * Make sure your frames are individual PNG images with the size 24x24px.
 * Use this command to automatically clamp your images and resize them to 32x32px:

General Tips to create Framesheets (for Blocks)

 * Create a layer with an empty block, without any animation. For existing blocks it's easy to create them by using the framesheet and cutting out the empty left side from a frame and the empty right side from another frame.
 * Now, create a new layer. This layer only holds the animated object, plus shadows etc.
 * Place the animated object, for example an Exclamation mark, in the middle of your empty block, and export the image to your framesheet as first frame.
 * Move the animated object into the direction you want. Move it by 1 or 2 pixels as a general rule. You could also enlarge/shrink the animated object, changes its alpha or color etc. Now save again and export the image as second frame to your framesheet.
 * Do this again for as many times needed, until you have a full animation circle.
 * The animated object should be cut when reaching the border of the 22px area. It should reappear on the other side, but not immediately. Please check original framesheets on how this is done correctly.

Step 4: Adding the Image to a Wii Image Container (.TPL)
The framesheet now needs to be added to a .TPL container. This can be done with BrawlBox or CTools, but the best quality can be achieved by using the command line tool wimgt.exe from the SZS Modifier library.


 * 1) Download SZS Modifier library, find wimgt.exe and navigate to that folder.
 * 2) Copy your modified framesheet, let's assume it's called block_anime.png, to the same folder as  wimgt.exe.
 * 3) While holding the SHIFT key, right-click on an empty spot in the folder where wimgt.exe is located and select "Open command window here" from the context menu that appears.
 * 4) A command window should open, now type in the following command, and press Enter: , for example
 * 5) You should now see a new .tpl file in that folder, copy it back to your working directory and proceed to the next step: Removing the header.

Step 5: Removing the Header
The header, which is 0x40 bytes long in most cases, is still present in the .tpl file and needs to be removed, so that the game can properly recognize the animation inside the binary file. This can be done manually by simply deleting the first 0x40 bytes with HxD HEX Editor.

Thanks to Grop, removing the header is even easier by using the Python script made for just that purpose. Please note that a working Python environment is needed for the script to run. Python 3.x is required in this case. Also, .py files need to be associated to run with Python. Please see Python Installation Guide for more information.


 * 1) Download the | AnimTiles Package and extract it.
 * 2) Move the .tpl file from which you want to remove the header to the folder with tplrem.py.
 * 3) Drag-and-drop your .tpl file onto tplrem.py.
 * 4) Check the folder for a newly created file with the filename "%FILENAME%.%EXT%.noheader", for example "block_anime.tpl.noheader".
 * 5) Rename that file to "%FILENAME%.bin", for example "block_anime.bin".

Step 6: Replacing or Adding a new Animated Tile
It is recommended to use SZS Modifier for this step.


 * 1) Open SZS Explorer.
 * 2) Open your tileset.
 * 3) Navigate to the BG_tex folder.
 * 4) To replace a tile, right-click on the corresponding file, for example block_anime.bin, and select "Replace". Select the .bin file with the modified framesheet and the header stripped.
 * 5) To add a new tile to the tileset, right-click on the BG_tex folder and select "Import" -> "File". Your new animated tile will be added to the BG_tex folder, but an entry needs to be added to AnimTiles.txt as well, please go there for further steps.

Step 7: Converting AnimTiles.bin to Text
Now that we're done creating the framesheet, we need to focus on the properties of our animation and adding our tile to the index. For this we'll need to edit the file AnimTiles.bin.


 * 1) Download the | AnimTiles Package and extract it to a folder of your choice.
 * 2) Go to your NewerRes folder (\NewerSMBW\NewerRes or C:\NewerDolphin\NewerRes) and backup the original file "AnimTiles.bin" ("AnimTiles_orig.bin").
 * 3) Copy the file "AnimTiles.bin" to the folder where you extracted the AnimTiles package.
 * 4) Drag-and-drop the .bin file on "animtiles.py" and you should get a new file "AnimTiles.txt".

Step 8: Adding an Entry to AnimTiles
Every animated tile creates an entry in AnimTiles.txt. Those entries are always structured in the same way.

It's important to know that new entries should be added to the end of the file.

Here are two examples: texname = m_1B0.bin framedelays = 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6 tilenum = 432 tileset = 1

end tile Another example: texname = ww_300.bin framedelays = 4, 4, 4, 4 tilenum = 768 tileset = 3

end tile


 * texname: For animated tiles from the original game, those names are predefined and can not be changed. For self-made animated tiles, the name can be chosen freely (don't use spaces in the filename). It's recommended though, to write the tileset slot, tileset row and tileset column into the filename (in HEX). Examples: myTileset_011.bin, zb_global_30A.bin...
 * framedelays: This is a comma-separated list. Each value presents the frame delay for a single frame. See #Structure of a Tileset for frame delays from well-known animated tiles.
 * tilenum: The three digits represent (1) the tileset slot/number, (2) tileset row and (3) tileset column. 1) Tileset slot/number: This value ranges from 0 (Pa0) to 3 (Pa3)    2) Tileset Row: This value ranges from 0-F in HEX (Rows 0-15)    3) Tileset Column: This value ranges from 0-F in HEX (Columns 0-15)    This three-digit number needs to be converted into decimal (DEC) and then it can be used for tilenum. It is recommended to write the three HEX digits into the texname.  Let's look at the first example from above:  432 (DEC) / 1B0 (HEX)  If we convert the decimal value "432" from tilenum, then we get "1B0", which translates to Pa1, row B (row 11), column 0. For your custom tileset you would do the reverse and convert the hexadecimal value (slot + row + column) to decimal.
 * tileset: Determines the tileset slot of the animation.
 * reverse: Determines the playback direction.

Step 9: Converting AnimTiles.txt back to Binary

 * 1) Download the | AnimTiles Package and extract it to a folder of your choice.
 * 2) Copy the file "AnimTiles.txt" to the folder where you extracted the AnimTiles package.
 * 3) Drag-and-drop the .txt file on "animtiles.py" and you should get a new file "AnimTiles.bin".
 * 4) Move that file back to your NewerRes folder, replacing the old file. Also make sure that you've replaced/added your new tileset.

= List of Framesheets = Photoshop template to edit framesheets