[TUTORIAL] Create your own app logo (logo.bin)

Discussion in '3DS - Tutorials' started by PabloMK7, Jul 2, 2016.

  1. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    The logo.bin file is the splash screen shown by home menu after launching an app, in this tutorial I'll show you how to customize it. Sorry if it isn't elaborated, I don't have much time.

    Requirements.
    - Linux (pls don't complain about this, the tools are made for linux, and it's not that difficult to create a Linux boot DVD)
    - EveryFileExplorer
    - Homemenu secret 20 byte HMAC key (found at 0x206465 decompressed code.bin of EUR homemenu) SHA256: 001ECEFBF56F3614A21532391A7E303CC62A054F5C7BBBF92A97F9C62443AD15
    - This tools (Credits to Yellows8, Stevice10)

    1. Extracting the logo.
    The logo.bin file is a lz11 compressed darc, so you can use EveryFileExplorer to extract its contents, save them to a folder. Inside that folder you must see "anim", "blyt", "timg" folders.

    2. Creating your own images.
    The image files are bclim files, I recommend using files not bigger than 256x256 pixels, because the final compressed logo can't be greater than 8KB. You can use again EveryFileExplorer to create them. Go to "File -> New from file -> Nintendo 3ds plugin -> CTR Layout Images". Tip: There is no need to use transparency on your image, you can set a black background, that will save space.

    3. Building the custom logo.
    Once you have your bottom and top screen bclim, go to the extracted logo folder, delete everything there and place your files. Name them hblogo_bottom.bclim and hblogo_top.bclim. Download the tools made by Yellows8 and Stevice10 (ctr-logobuilder) and place the extracted logo folder there. Now open a terminal, and type the following:
    Code:
    ./buildlogo.sh [output name] [logo extracted folder] [bottom screen width,height,X,Y,Z] [top screen width,height,X,Y,Z] [HMAC key]
    
    width: width of your image
    height: height of your image

    X: X coordinate (left right)->
    Y: Y coordinate (up, down)-> Coordinate 0,0,0 is the center of the screen
    Z: Z coordinate (3D effect)->

    Example: (Both images of 128x32 pixels at the center of the screen.)
    Code:
    ./buildlogo.sh customlogo extracted_logo "128,32,0,0,0" "128,32,0,0,0" XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    
    The file you want in this case is: customlogo-padded.lz11, use it with 3dstool/ctrtool to build your cia.

    Example of logo made with this: Homebrew launcher loader.

    Optional: Building an existing logo.
    You can use:
    Code:
    ./buildexisting.sh [output name] [layout folder] [HMAC key]
    
    to build an existing logo made with private tools. Make sure to use the same settings of the original logo (same panes, groups, etc. Guide yourself with EveryFileExplorer), and make 3 animations, one for Fade In, another for main animation, and other for Fade Out. (Please don't request for the private tools, I cannot share them).

    Example:
    Warning: Spoilers inside!
     
    Last edited by PabloMK7, Jan 17, 2017
  2. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    I'm doing this but the logo comes out as white rectangles
     
  3. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    Make sure you are not exporting any alpha channels.
     
  4. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    The images don't have any alpha channels
     
  5. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    Does it display correctly in EFE?
     
  6. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    Yes
     
  7. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    Try using other bclim converters.
     
  8. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    Got it to work, with these limitations:
    - The images have to be very small
    - The objects have to be grayscale on a transparent background
     
  9. iAqua

    iAqua

    Member
    10
    GBAtemp Patron
    iAqua is a Patron of GBAtemp and is helping us stay independent!

    Our Patreon
    Dec 7, 2015
    Antarctica
    Why not just recommend using Cygwin or MinGW for Windows?
     
    Robz8 likes this.
  10. Robz8

    Robz8 Coolest of TWL

    Member
    16
    Oct 1, 2010
    United States
    Tried Cygwin, and I'm getting:
    Looks like it only runs on linux.
     
    Last edited by Robz8, Jan 1, 2017
  11. Robz8

    Robz8 Coolest of TWL

    Member
    16
    Oct 1, 2010
    United States
    OK, this is weird. Whenever I try out my custom-made logo file, I get:
    Even if I just inject a bclim file in a decompressed (Homebrew) logo file, I still get this message. Any ideas?
     
    Last edited by Robz8, Jan 1, 2017
  12. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    You have to keep trying until it works. It took me many crashes until it worked.

    About the greyscale thing, it's probably because the way the tools are made. It may be possible to change that.
     
  13. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    You specifically said to not use a transparent background. Thanks for the guide though, I at least got a custom logo working :yay3ds:
     
  14. Seriel

    Seriel In a permanent state of confusion

    Member
    11
    GBAtemp Patron
    Seriel is a Patron of GBAtemp and is helping us stay independent!

    Our Patreon
    Aug 18, 2015
    United Kingdom
    Wales, UK
  15. erman1337

    erman1337 GBAtemp Maniac

    Member
    6
    Sep 27, 2015
    Belgium
    Brussels
    Cygwin is only a bash shell, it can't run Linux binaries
     
    PabloMK7 likes this.
  16. Seriel

    Seriel In a permanent state of confusion

    Member
    11
    GBAtemp Patron
    Seriel is a Patron of GBAtemp and is helping us stay independent!

    Our Patreon
    Aug 18, 2015
    United Kingdom
    Wales, UK
    Bash on Windows can though :^)
     
    Februarysn0w likes this.
  17. Ordim3n

    Ordim3n GBAtemp Fan

    Member
    2
    Dec 14, 2015
    Canada
    Planet earth
    can the image be a gif?
     
  18. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    Nope
     
  19. TurdPooCharger

    TurdPooCharger Meh

    Member
    8
    Jan 1, 2018
    United States
    I am bumping this thread due to frustration of trying to find the secret HMAC key. Don't bother trying to get it out of a USA region HOME Menu because it isn't there (See added note edit below). For those who don't have a European 3DS or 2DS, don't fret as you don't need one.

    Use 3DNUS by @ground -or- 3DNUS fork by @Dr.Hacknik to download the firmware package. There's a way to download single cia files, but I haven't a clue how to. I used the one by Dr.Hacknik and downloaded the entire 11.7.0-40E for the Old 3DS, consisting of 195 MB worth of stuff. The file you need is the 0004003000009802.cia. In order to use Dr.Hacknik's 3DNUS, you will need to download Window's .NET Framework v4.6.1 .

    I found the easiest way to get to the decompressed code.bin is through @ihaveamac's fuse-3ds + tutorial. Install is a cinch once you have your boot9.bin and seeddb.bin in place. You can do it through command line using ctrtool but ugh, what a pain.

    Edit 1 - I would like to add that I found the location of the secret HMAC key on my New 3DS XL USA region Home Menu for 0004003000008F02 (CTR-N-HMME).cia .

    Mine was found at offset 0x205465 and ends at offset 0x205484. When you highlight select those 0x20 bytes, it has the same calculated SHA-256 hash found on the EUR one, or 001ECEFBF56F3614A21532391A7E303CC62A054F5C7BBBF92A97F9C62443AD15.

    Remember, the 0x20 bytes HMAC secret key is NOT the same as this 0x20 bytes SHA-256 hash. That key cannot be explicitly stated here in the forums. Here's a hint in finding what you're looking for; it begins with a letter and ends with a number.

    Here's another clue in knowing if you found that HMAC key.
    • X = letter
    • # = number
    HMAC key letter & number sequence:
    XXX#######X####X####X#X###X##X###XXX##XX####X##X#########X##XX##

    Edit 2 :
    • For JPN region (at least on New 3DS), the HMAC key is found in 0004003000008202.cia for decompressed code.bin at offsets 0x206465 to 0x206484 (like the EUR region).
    • For KOR region (at least on New 3DS), the HMAC key is found in 000400300000A902.cia for decompressed code.bin at offsets 0x205465 to 0x205484 (like the USA region).
    • I did not bother to check for TWN and CHN regions because I'm assuming at this point they're in either of those two locations.

    Edit 3:
    [ADDENDUM] Fix the logo scripts to make them work on 2018 Linux Mint
    If you try to run the buildlogo.sh and buildexisting.sh scripts in the Linux Terminal, you may be prompted with Access Denied error messages. To fix this on Linux Mint, you will need to elevate privileges to those files by typing in:

    Code:
    chmod +x buildexisting.sh
    chmod +x buildlogo.sh
    chmod +x ctr-logobuilder
    chmod +x darctool
    chmod +x bannertool
    You may need to also chmod +x your logo folders. I don't how this is done on other Linux variants not within the Debian family, so figure out what your equivalent is to "chmod +x".

    Also, the two scripts need to be slightly rewritten in text editor because two lines are outdated when used with the current OpenSSL crypto library.

    You need to change the lines:
    Code:
    openssl sha -sha256 -mac HMAC -macopt ...
    to this correction.
    Code:
    openssl sha1 -sha256 -mac HMAC -macopt ...
    If that single word in the command isn't update, your logo will compile incorrectly with faulty encryption. A bad logo when added into a recompiled CIA will cause ARM11 crashes.

    Edit 4:
    [MORE ADDENDUM] Several more things to watch out for when making a new logo.
    Your png image size cannot exceed 256 pixels for either the width or the height. If you build a logo with a length longer than that limit, your homebrew app will experience ARM11 crashes. See a case study of this from Anemone's Github issue #146:
    Make sure your PNG images are in a resolution of 96 pixels per inch. If you try converting it into .bclim in something like the typical 72 ppi, the sprites will be overblown.

    To convert to bclim, you'll need to use png2bclim converter.

    The correct conversion settings to use are:
    • BCLIM Output Format: 8 - RGBA4444
    • Square / Rectangle: 1 - Square (Override)
    If rectangle is chosen, your logo will turn out white. You might not be able use the higher quality "9 - RGBA8888" option because the uncompressed logo size needs to stay well below 600 KB. If you try with format 9, your logo will either compress beyond the allowed 8.00 KB (8,192 bytes) size limit or experience ARM11 crashes.

    Whenever using the buildlogo.sh script, your main logo folder has to contain the anim , blyt , and timg folders.

    The hblogo_top.bclim and hblogo_bottom.blcim must be in the timg folder.

    In the anim and blyt folders, these files should be removed whenever building a new logo from scratch, changing the coordinates, or swapping out the .bclim files.
    • The six .bclan files for the D and U's three A, B, and C SceneOut.
    • The two .bclyt files for D and U.
    Files to remove before using buildlogo.sh

    In my experience, the top image wouldn't vertically center when using the parameters "<width>,<height>,0,0,0" . When Y = 0, the image is placed 5 pixels below the top screen's upper edge.

    [SPOILER = Formula may be wrong.]
    The formula to correct this is, 5 - [0.5 x H] = true vertical center Y

    For example, suppose I have a 256W x 170H image. In order to center it, I'll have 5px - ( 0.5 * 170px ) = -80px ; I'll then punch in "256,170,0,-80,0" for my input. For the bottom image, I believe the input "<width>,<height>,0,0,0" will work for it.

    Before you get your smarty pants in a bunch, the physically analysis of shifting Y = 5 + [0.5 x H] - 120 does not work. While it's true that the image needs to move 30 pixels downwards for that example, there's something wrong with the ctr-logobuilder subroutine causing the correct zero be worked out like that.

    * Edit 5 - If the above first formula doesn't work, you may need to instead use 10 - [0.5 x H] = Y .
    [/SPOILER]

    In order to verify your logo is truly dead center, you may need to cross compare your Luma3DS screenshots to Photoshop pre-mock-ups.

    Lastly, color images also turn out white due to another bug in the ctr-logobuilder. To correct for this after using buildlogo.sh, you need to hex edit the NintendoLogo_U_00.bclyt and NintendoLogo_D_00.bclyt files at offsets between 0x70 and 0x72 . To manually enable color, change FF FF FF to 00 00 00 and rebuild your existing logo files (don't delete any files) with the buildexisting.sh script.

    Tips and tricks: There's a way to reduce typing out that HMAC key in Linux Terminal. Edit the buildexisting.sh and buildlogo.sh scripts at the lines:
    Code:
    openssl sha -sha256 -mac HMAC -macopt hexkey:$5
    to
    Code:
    openssl sha1 -sha256 -mac HMAC -macopt hexkey:XXX#######X####X####X#X###X##X###XXX##XX####X##X#########X##XX##
    Once that HMAC key is added to the scripts, your inputs are simplified to:
    Code:
    ./buildlogo.sh [output name] [logo extracted folder] [bottom screen width,height,X,Y,Z] [top screen width,height,X,Y,Z] 
    Code:
    ./buildexisting.sh [output name] [layout folder] 
     
    Last edited by TurdPooCharger, Jul 11, 2018
    I pwned U! likes this.
  20. PabloMK7
    OP

    PabloMK7 Red Yoshi! ^ω^

    Member
    9
    Feb 21, 2014
    Spain
    Yoshi's Island
    You only had to search it in Google tho.
     
Loading...