■January 24, 2010 - Super Mario RPG blog

[Mood:Excited] So today I finished my shrine dedicated to Super Mario RPG. Here I'm going to talk about the process I went through to create it.

THE GAME
The first step is (obviously) to play the game! Throughout gameplay I capture screen shots for the screen shots section and game saves for the game saves section. When I beat the game is when I begin work on the shrine.

THE LOGO
If a logo isn't too complex, I like to trace it in Adobe Illustrator to make a high quality version of it. I did so with Super Mario RPG's logo. I do this so that the logo on the main page is nice and sharp. It's also nice to slap it on a few desktop wallpapers. And if I decided to put it in the Flash intro movie, as vector it would animate very nicely.

THE 3D PIPES
The first step in the "HTML phase" I did was create the sexy 3D pipes that would border around every page and the navigation. I did this in Blender 3D, the #1 free and open source 3D modeling software! I modeled the pipes (almost) exactly as the game has them in the screen where you load your in-game saves. But I made sure the upper part had a good opening so that I could place the page's title in it. Then I carefully prepared the images in Photoshop. I removed the aliasing surrounding the transparency areas so that I could have the freedom to put different background images. I modified the pipes so that via CSS they would repeat infinitely and fit any page length.

THE NAVIGATION
The navigation is the most important part of a shrine (or any web page for that matter). I can produce a nice Flash navigation with fancy smansy animations. However this time around I leaned on making an HTML-only navigation. It's good for compatibility reasons. I specially modified the 3D pipes around the navigation so that it gives the illusion that it's ending the page before it hits the bottom.

INTRO MOVIE
The intro movie is very important! It gives a brief and attractive introduction to the game. Hell because not everyone entering my Super Mario RPG shrine will play the game. I gotta sell it! I cheated and recycled the game's opening sequence for it. Using Adobe After Effects, I heavily cut it up in order to keep the intro movie at around 2 MB in size. At first I had the Forest Maze song as the background music (cuz that's my favorite!), but it just wasn't exciting enough. I decided on the game's original song for its introduction movie. Then it hit me - the fan made song "Rawest Forest" (which I have in the Music section) would be perfect for it! It has a catchy beat and made the intro movie exciting. Best of all, it introduces the game with lines like "there are so many secrets in this game". When I finalized the intro movie in Adobe Flash, I overlayed a pipe border to give it a nice video integration feel. When I embedded the intro movie on the main page, I used CSS to move the navigation slightly on top of the intro movie Flash.

THE SCREEN SHOTS
I captured like 500 screen shots, lol. I pruned through them to reduce them to a count of 200. I even captured animation frames for various scenes in the game to make some cool GIF animated screen shots. Anyway, I want to move away from my 'traditional' 10-shots-per-page style of showing screen shots. It's 2010 now and everyone has a large screen and high speed internet. ^^;; Because I've used the 10-shots-per-page style to accommodate for almost everyone being on a 1024x768 resolution and having slow internet. In my PSX RPG shrines I used Coppermine Photo Gallery to tackle my need to easily show hundreds of large screen shots. But I want to move away from those dynamic galleries as well, as they have their disadvantages. I thought it would be best to merge both my old method with the Coppermine method. And so I came up with this. The main page organizes the screen shots into categories, just like Coppermine. Each category displays the screen shots in two columns, just like in my old method. And if you click on a screen shot it blows up 200% larger with a nice Javascript based animation, thanks to an awesome free script called Highslide.

THE DESKTOP WALLPAPERS
I love making desktop wallpapers! Unfortunately, I didn't have a lot of good imagery to work with. I did what I could with pictures available on the internet and some scans I made of the players guide (yep! I own Nintendo Power's original guide). In the near future I plan to trace over some artwork in Adobe Illustrator to make some nice vector based wallpapers of main characters. I'm leaning on just Geno and Mallow wallpapers, considering Mario's giant franchise already has thousands of Mario/Bowser/Princess wallpapers around on the net.

CONCLUSION
And there you have it. Just like my other shrines, my Super Mario RPG shrine was months of work. I hope it further spreads the glory of the game.

.:.
.:. Ramblings Archives .:.

[ 2010 ].:.[ 2009 ].:.[ 2008 ]