How to easily make a high quality splash screen

Discussion in 'Tutorials Archive' started by Sonic master, Jul 28, 2014.

Thread Status:
Not open for further replies.
  1. Sonic master

    Sonic master Well-Known Member Member

    Joined:
    Mar 27, 2010
    Messages:
    303
    I few years ago I wrote a tutorial on how to make a splash screen. At the time I believe that my method was the "proper" way to do such. http://sonicresearch.org/forums/index.php?showtopic=2965
    Although at the time it was the best method I knew to make a high quality splash screen it is not anymore. I will not declare this method "proper" as there are many ways to accomplish this however I do believe it to be the best possible method in both simpleness and quality. What makes things different from the time that I wrote the tutorial and now is the existence of a program that I wrote called Retro Graphics Toolkit.
     
    This tutorial will follow my old methodology for displaying the splash screen. Like my old tutorial we will be removing the hidden Japanese credits and replacing that with our splash screen. I will note however that it is very trivial to add more code instead of replace the hidden Japanese credits. In fact I created some examples projects for Retro Graphics Toolkit here https://github.com/ComputerNerd/Retro-Graphics-Toolkit/tree/master/examples/genesis/asm where I isolated some code from the sonic 1 git dissasembly to display what we call a splash screen but is really nothing more than tiles, a tilemap and a palette. What is different is that it is much easier to convert the image. Previously (if you followed my old tutorial) you had to install a plugin and use an image editor that supports both photoshop plugins (to run Ximagic) and pcx images. Fortunately gimp can do that but never the less it was still leaning towards on the complex side. In this tutorial you may need an image editor just to resize your graphics.
     
    First of all before proceeding I think it is best to make sure that you have Retro Graphics Toolkit. If you are like me and run linux or you use mac you could either compile from source (the source code For Retro Graphics Toolkit can be found here https://github.com/ComputerNerd/Retro-Graphics-Toolkit ) or you could run the windows binary using wine. For windows/wine users who don't want to compile from source I keep up to date windows binaries here: https://github.com/ComputerNerd/Retro-Graphics-Toolkit/blob/master/RetroGraphicsToolkit.exe.7z you will need to press view raw to download. Also note that the link for the windows binary stays the same even when I release a new version.
     
    Now the first logical step would be to have an image that you want to convert. I will be using this nice sonic team logo that I found by doing an image search for sonic team logo http://www.sonic-cult.org/imagebin/sadxb/sonicteam.png for the people who know there sonic games well you will remember that this is the sonic team logo from the dreamcast version of sonic adventure. You have probably noticed that the image is 640x480 and are aware or will be made aware that the sega genesis has a resolution of 320x224 (or if you are in a country that uses PAL instead of NTSC 320x240). It should be obvious that we need to resize the image. Without distorting the image we have two options resize to 299x224 or resize to 320x240 and crop the top and bottom by 8 pixels. I will be going with the second option. I have attached a pre-resized sonic team logo. I also did a minor contrast enhancement on it, this is the image I will be using for the rest of the tutorial./monthly_07_2014/post-1103-0-05880400-1406497581_thumb.png
     
    Now that we are done with the image we need to load it into Retro Graphics Toolkit. To do this click on the menu: File->Tilemaps->Import image to tilemap. [​IMG]
     
    Next we must generate a palette for the image. To do this click on Palette options->generate optimal palette with x amount of colors. After answering how many colors we want which will be in this case be 64 (that is the default option). The sega genesis can display 64 colors but each tile can only use one row which is 16 colors so with that said a way to pick which row is used for all tiles is needed. The next question will decide how to handle this. For this image the best option is the "pick based on hue" option. Now you see the choice of color quantization options. Try and see which one works best for you. (Hint if you want to compare quantization algorithms quickly in order to press less buttons next time use the Don't change anything option this will option will not alter which row the tiles use). I will warn you that scolorq is very slow and is better for very few colors. After you select the color quantization option you will have a choice of what color space the quantization is done it. Again just try them and see what works best. Assuming you picked the hue option you will now be asked "What most defines the image?" and be presented with a dropdown menu containing several options. Answer what the question says and answer the next question. The default option is average but I like to start with the "Histogram section with most occurrences" option. The answer to stretch histogram is usually yes although usually little or no stretching is done as of now. If even one pixel is an outlier it affects the stretch. I may change this behavior in a later release.
     
    The next step is to dither the tilemap. As you can see there is no image or just garbage pixels. To see the image press TileMap Actions->Dither tilemap as image. There are two options. If you dither entire image at once it will do exactly what it does convert the tilemap to an image or you could dither each row separately which will create an image for each row that contains blank spots for tiles in the other rows. Usually just use dither entire image at once unless you are getting borders around tiles. If you want to change dithering algorithms you can do such in the palette editor tab just click on the drop down menu that says Floyd Steinberg and select an option.
     
    After you got an image if you see any tiles that look like they are using the wrong palette row you can right click on them and select the proper palette row then redither the tilemap. I have attached a project file that contains the sonic team logo so you can see what kind of results you may get.sonicteam.zip You can load the project by clicking on File->Project->load project.  Also one thing I will note that you can also use the VDP's shadow highlight feature to get even more colors to do this you can go to the palette editor windows and click on Shadow. Then click on TileMap actions->Auto determine if use shadow highlight. Then tiles will be assigned proper priority which makes the tiles normal or dark. You will need to enable shadow highlight mode before displaying the splash screen. The image I am using does not have any tiles that would benefit from this feature.
     
    The next step is to export the data so that this can be easily loaded by the sega genesis. Before exporting it is recommended that you check for duplicate tiles. However before removing duplicate tiles if you want to save as a project file I would recommend you do this before removing duplicate tiles because even though the tiles may look the same using one palette or dithering algorithm using another and they may look different. To remove duplicate tiles click on Tiles action->Remove duplicate tiles. The rest of the tutorial will assume we are using the git (formally know as svn) sonic 1 dissasembly. First lets export the palette. To do this go to File->Palette->save palette. It will ask you if you want it saved as binary C header asm or bex. Pick asm or binary I would recommend just using asm so you don't have a bunch of small files sitting around on your hard drive. If you picked asm,  when asked if you want to saved to clipboard or file choose clipboard. Now paste the text at the end of the rom just before the label EndOfRom. Now save the tiles. To do this go to File->Tiles->save tiles. This time select binary and then when asked about compression try both Nemesis and Kosinski and see which has the smaller filesize. Then save the tilemap File->Tilemap->Save tile map and if NES save attributes. Again pick binary and then pick Enigma compression. Now after where you added the palette add something like this changing filenames and labels if needed and making sure to keep the two evens.
     


    sonicTeamTiles:
        incbin artkossonicteam.kos
        even
    sonicTeamTileMap:
        incbin tilemapssonicteam.eni
        even

     
    After that we can now make needed modifcations to the sonic team logo. First of all we need to load the tiles. Find Tit_ClrObj1 in GM_Title If nemesis tiles got better compression ratio change 


            locVRAM    0
            lea    (Nem_JapNames).l,a0 ; load Japanese credits
            bsr.w    NemDec
            locVRAM    $14C0
            lea    (Nem_CreditText).l,a0 ;    load alphabet
            bsr.w    NemDec

    To


            locVRAM    32
            lea    (sonicTeamTiles).l,a0
            bsr.w    NemDec

    If Kosinsik got better compression replace the code I mentioned eariler with


        lea    (sonicTeamTiles).l,a0
        lea    ($FF0000).l,a1
        bsr.w    KosDec
        writeVRAM    $FF0000,1120*32,32

    Now replace


            lea    (Eni_JapNames).l,a0 ; load mappings for    Japanese credits
            move.w    #0,d0

    WIth


            lea    (sonicTeamTileMap).l,a0 ; load mappings for    Japanese credits
            move.w    #1,d0

    If you did not have a tilemap that is 40x28 tiles in size change edit the line that says


            copyTilemap    $FF0000,$C000,$27,$1B

    Note that width and height are actully minus one.
    Now replace


            lea    (v_pal_dry_dup).w,a1
            moveq    #cBlack,d0
            move.w    #$1F,d1

        Tit_ClrPal:
            move.l    d0,(a1)+
            dbf    d1,Tit_ClrPal    ; fill palette with 0 (black)

            moveq    #palid_Sonic,d0    ; load Sonic's palette
            bsr.w    PalLoad1
            move.b    #id_CreditsText,(v_objspace+$80).w ; load "SONIC TEAM PRESENTS" object
            jsr    ExecuteObjects
            jsr    BuildSprites
            bsr.w    PaletteFadeIn

    With


            writeCRAM    sonicTeamPalette,64*2,0
    waitStartSplashScreen:
            bsr.w    ReadJoypads
            andi.b    #$80,($FFFFF605).w ; is    Start button pressed?
            beq.s    waitStartSplashScreen        ; if not, branch
            jsr    ClearScreen

    And now you are done. If done correctly you should have a nice splash screen.
     

    Attached Files:

    Last edited by a moderator: Jul 28, 2014
  2. Pacca

    Pacca Having an online identity crisis since 2019 Member

    Joined:
    Jul 5, 2014
    Messages:
    1,175
    Location:
    Limbo
    Wow, this is not a user friendly tutorial. But it looks cool! I'd recommend checking it for grammar (it's confusing enough as is) and maybe adding a Hivebrain tutorial?
     
  3. Sonic master

    Sonic master Well-Known Member Member

    Joined:
    Mar 27, 2010
    Messages:
    303
    I did notice spelling errors that I fixed. For some reason spell check is not working for me with the fancy text editor. Anyways considering the purpose of this tutorial was to be easy to follow compared to my old tutorial could you please elaborate on why this not a user friendly tutorial? Did you get stuck on a certian step?
     
  4. TheStoneBanana

    TheStoneBanana banana Member

    Joined:
    Nov 27, 2013
    Messages:
    602
    Location:
    The Milky Way Galaxy
    Would you mind uploading an example of the final result?
     
  5. Sonic master

    Sonic master Well-Known Member Member

    Joined:
    Mar 27, 2010
    Messages:
    303
    Here is the output from Kega Fusion's save screen shot. Click to enlarge.

    /monthly_07_2014/post-1103-0-65173400-1406509290_thumb.png
     

    Attached Files:

    Last edited by a moderator: Jul 28, 2014
  6. Pacca

    Pacca Having an online identity crisis since 2019 Member

    Joined:
    Jul 5, 2014
    Messages:
    1,175
    Location:
    Limbo
    You have a tendency to go off topic, and several steps could benefit with pictures clarifying what one should do.
     
  7. Sonic master

    Sonic master Well-Known Member Member

    Joined:
    Mar 27, 2010
    Messages:
    303
    Re-reading what I wrote the only off topic setence I noticed was the brief mention that the sonic team logo was from sonic adventure. I guess images can improve this I will at more at some point.
     
Thread Status:
Not open for further replies.