amchine
09-01-2008, 11:13 PM
Theme Building 102: Intermediate Level
So, you’ve been through the intro to theme building crash course and you’re ready to start up HyperTheme eh? Here are a few tips to help you get through this as painlessly as possible.
1. Read the HyperTheme.pdf file!
This thing is a powerhouse and while it does posses a rather intuitive interface, you may find yourself missing something along the way. Reading the documentation is a good way to familiarize yourself with the program.
2. Have all of your artwork ready in either .png or .swf format.
As stated in my previous tutorial, in order to be compatible with HyperSpin all artwork must be in either .png or .swf format. It’s also not a bad idea to name these files appropriately for easy reference. For example if you know that you want your title in the Artwork3 folder, then go ahead and name it “artwork3.png,” or if you’re not sure where you want it, then maybe just name it “title.png.”
3. Make sure you have the video preview in .flv format.
Again, for purposes of compatibility all video files must be in .flv format. You will want to make sure that you have the correct video for the game you are creating a theme for, or at least a video that uses the same aspect ratio. The aspect ratio can be a problem if, for example, you design your theme with a 3:4 vertical aspect ratio video and the game actually uses 4:3 horizontal aspect ratio. Basically, just keep in mind that even if you don’t plan to use the video preview, other’s might, and they will be disappointed if it doesn’t look good.
4. Confirm that you know the correct rom name. (Parent)
This is pretty important. It is up to you as the theme creator to get the rom name right. If you’re working on a MAME game you can always look up your rom name at http://www.mameworld.net/maws/ or http://www.mamedb.com/. I would suggest using the parent rom name if the game you plan to build a theme for is a clone. This happened to me when I was working on the themes for the Gradius series, I personally know the game by the name Gradius, but since that title is actually a clone of the Nemesis rom I chose to name the theme after that. That is why you see this in the download section:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate01.jpg
I know there was once talk of HyperSpin checking for parent rom names when a clone was present in the game list and then displaying the theme associated with the parent rom name, but I don’t know if it ever went into effect. The last time I checked using the parent name was the standard. All in all getting the correct name for your theme the first time around can save you a lot of work and will likely yield a faster approval from the powers that be.
Putting it all together
Well, having given you fair warning of the hazards of creating a theme, let’s get down to business. If you’ll remember from my previous tutorial we were working with an Aero Fighters theme. I’ve played around a bit with the images in my free time and here’s what I’ve come up with:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate02.jpg
As you can see I’ve already gone ahead and named the files according to either what they are or what folder I want them in. I wanted to make sure that I put them all in the right locations, which is something that can be a bit frustrating if you aren’t familiar with the structure of the HyperSpin artwork folders. Let me break it down so that you can start thinking ahead about where you want things.
The artwork folders, video, and wheel all exists on their own independent layers. You can think of the artwork as stickers each placed on their own piece of glass then stacked on top of one another. The layers are from bottom to top:
Background
Wheel
Artwork1
Video
Artwork2
Artwork3
Artwork4
These layers cannot be changed or added to, with the exception of the video layer which can be placed under the wheel, so you have to make do and get creative if you’re having trouble working within these limitations. If you’ve been thinking ahead you may have created mock theme, (as I did in my previous tutorial) you can get a good idea of where you want these separate artwork pieces to go by setting up the theme inside Photoshop. Let’s load up all of these pieces into HyperTheme, I’ll go ahead and place them in more or less the areas I want them:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate03.jpg
Whoa, that part sure was easy, now let’s get to the hard part, making this thing come to life! As it stands, if I were to press that little play button I would get a preview of how my theme would look once spun to on the wheel… and it doesn’t really do much. What we need to do is add some of the built in animations and really start looking at the overall composition of this theme.
Let’s consider for a moment what this theme has and what lacks. In its current state it fills the space well, the video is a decent size, the logo is nice and large across the bottom, however, the whole thing is static and the video looks a bit off without a border around it. Let’s adjust a few things and see if we can remedy the problems:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate04.jpg
I added a video overlay border that consists of two colors by setting border 1 to “5” and border 2 to “10.” I then directly sampled the colors from the background using the eyedropper tool. I also gave the video a little clockwise rotation. That solves the video problem, but it’s still pretty boring. This is when the real fun begins.
Picking and Choosing Animations
All of the artwork folders and the video can utilize animations. Given the number of build in animation options there are literally countless ways to animate your theme, all it takes is a little imagination. The basic breakdown for animations is as follows. All of your artwork and video layers can express an animation type, but only the artwork folders can express a animation rest. Animation types are what move your artwork and videos around the screen. You can adjust the speed and starting times of these animations to create quite elaborate looking themes with relative ease. Animation rests are what your artwork will do once it reaches its destination. Keep in mind that some animation types will not work on the video layer. For more information regarding HyperTheme please refer to the .pdf that came with the program. For now, let’s continue with the Aero Fighters theme and complete the animations.
I had already planned to use the “chase” animation for the planes, I’ll just go ahead and set the properties for Artwork1 to something like this:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate05.jpg
I’ll do something similar for Artwork2, but I want to keep the “time” property the same so that they fly around together. I’ll also make some changes to Artwork3, I’ll have them “ease” in from the left and I’ll set a higher delay so that the characters will begin to emerge just as the planes fly over. I’ll have the title properties set for the “grow x” animation type and the video can "fade" in from the bottom. I’m happy with the way it looks when I press the play button; it seems to be much more lively than that old boring thing. If you want to check it out, the final product can be downloaded here: http://www.hyperspin-fe.com/forum/downloads.php?do=file&id=244
Now, you can play with these animations and settings all day, I generally fiddle with the animation types until I find the right one for the job, sometimes it can be hard, other times it’s obvious. Since I’m pretty well satisfied with this theme I’m going to see what other people think about it! Clicking on the little camera button will save a screenshot of my theme, something I will need for my announcement on the forums.
When I’ve got my screenshot saved I’m going to click on the “Export” tab. This is where I’ll need that confirmed rom name:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate06.jpg
After filling in the required fields I can hit “Create New Theme” and as long as I have an output option checked HyperTheme will do all the hard work of naming my files, putting them in the correct folders, and/or giving me a .zip file. Cool eh? All that’s left to do is for me to make my announcement and get some feedback.
Announcing Your Theme
Back in the Theme Announcements section of the forums be sure that you have read both:
Posting a theme? Please read first!
http://www.hyperspin-fe.com/forum/showthread.php?t=7
and
Uploading Rules and Recommendations
http://www.hyperspin-fe.com/forum/showthread.php?t=5
These threads present all of the information regarding theme submission and set some standards as far as thread conduct, naming, etc. Follow their instructions and make your announcement.
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate07.jpg
Once you make your post it is a good idea to wait for some feedback before you head off to upload it. You can usually expect a reply from someone on the same day that you post it, they may offer a critique, (we certainly want people to offer their advice and support to help create a strong theme building community), or simply express their opinions regarding your work. Don’t take a critique to heart, we are all here to see HyperSpin do some amazing things, and occasionally a theme falls into the mediocre category. It could be because of low quality artwork, poor video placement, or an idea that didn’t quite work out the way you had planned, but remember, a harsh critique is not a reason to stop, but rather, a reason to keep going, to improve, and to learn a thing or two along the way.
Once your theme has been met with a warm welcome and the general consensus is that it looks complete, then you most likely have the go-ahead to submit it to the downloads section of the HyperSpin website. Once there, it is not uncommon for a theme to sit for a few days while the moderators have a chance to view it, test it, and finally approve it. And with that I welcome you all to the HyperSpin theme building community!
In my next tutorial we'll be talking more about theme composition, getting that polished look, and creating themes that match the official HyperSpin "look and feel," as well as some of the more advanced options.
Updates:
This tutorial written by amchine. HyperSpin and HyperTheme written by BadBoyBill.
So, you’ve been through the intro to theme building crash course and you’re ready to start up HyperTheme eh? Here are a few tips to help you get through this as painlessly as possible.
1. Read the HyperTheme.pdf file!
This thing is a powerhouse and while it does posses a rather intuitive interface, you may find yourself missing something along the way. Reading the documentation is a good way to familiarize yourself with the program.
2. Have all of your artwork ready in either .png or .swf format.
As stated in my previous tutorial, in order to be compatible with HyperSpin all artwork must be in either .png or .swf format. It’s also not a bad idea to name these files appropriately for easy reference. For example if you know that you want your title in the Artwork3 folder, then go ahead and name it “artwork3.png,” or if you’re not sure where you want it, then maybe just name it “title.png.”
3. Make sure you have the video preview in .flv format.
Again, for purposes of compatibility all video files must be in .flv format. You will want to make sure that you have the correct video for the game you are creating a theme for, or at least a video that uses the same aspect ratio. The aspect ratio can be a problem if, for example, you design your theme with a 3:4 vertical aspect ratio video and the game actually uses 4:3 horizontal aspect ratio. Basically, just keep in mind that even if you don’t plan to use the video preview, other’s might, and they will be disappointed if it doesn’t look good.
4. Confirm that you know the correct rom name. (Parent)
This is pretty important. It is up to you as the theme creator to get the rom name right. If you’re working on a MAME game you can always look up your rom name at http://www.mameworld.net/maws/ or http://www.mamedb.com/. I would suggest using the parent rom name if the game you plan to build a theme for is a clone. This happened to me when I was working on the themes for the Gradius series, I personally know the game by the name Gradius, but since that title is actually a clone of the Nemesis rom I chose to name the theme after that. That is why you see this in the download section:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate01.jpg
I know there was once talk of HyperSpin checking for parent rom names when a clone was present in the game list and then displaying the theme associated with the parent rom name, but I don’t know if it ever went into effect. The last time I checked using the parent name was the standard. All in all getting the correct name for your theme the first time around can save you a lot of work and will likely yield a faster approval from the powers that be.
Putting it all together
Well, having given you fair warning of the hazards of creating a theme, let’s get down to business. If you’ll remember from my previous tutorial we were working with an Aero Fighters theme. I’ve played around a bit with the images in my free time and here’s what I’ve come up with:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate02.jpg
As you can see I’ve already gone ahead and named the files according to either what they are or what folder I want them in. I wanted to make sure that I put them all in the right locations, which is something that can be a bit frustrating if you aren’t familiar with the structure of the HyperSpin artwork folders. Let me break it down so that you can start thinking ahead about where you want things.
The artwork folders, video, and wheel all exists on their own independent layers. You can think of the artwork as stickers each placed on their own piece of glass then stacked on top of one another. The layers are from bottom to top:
Background
Wheel
Artwork1
Video
Artwork2
Artwork3
Artwork4
These layers cannot be changed or added to, with the exception of the video layer which can be placed under the wheel, so you have to make do and get creative if you’re having trouble working within these limitations. If you’ve been thinking ahead you may have created mock theme, (as I did in my previous tutorial) you can get a good idea of where you want these separate artwork pieces to go by setting up the theme inside Photoshop. Let’s load up all of these pieces into HyperTheme, I’ll go ahead and place them in more or less the areas I want them:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate03.jpg
Whoa, that part sure was easy, now let’s get to the hard part, making this thing come to life! As it stands, if I were to press that little play button I would get a preview of how my theme would look once spun to on the wheel… and it doesn’t really do much. What we need to do is add some of the built in animations and really start looking at the overall composition of this theme.
Let’s consider for a moment what this theme has and what lacks. In its current state it fills the space well, the video is a decent size, the logo is nice and large across the bottom, however, the whole thing is static and the video looks a bit off without a border around it. Let’s adjust a few things and see if we can remedy the problems:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate04.jpg
I added a video overlay border that consists of two colors by setting border 1 to “5” and border 2 to “10.” I then directly sampled the colors from the background using the eyedropper tool. I also gave the video a little clockwise rotation. That solves the video problem, but it’s still pretty boring. This is when the real fun begins.
Picking and Choosing Animations
All of the artwork folders and the video can utilize animations. Given the number of build in animation options there are literally countless ways to animate your theme, all it takes is a little imagination. The basic breakdown for animations is as follows. All of your artwork and video layers can express an animation type, but only the artwork folders can express a animation rest. Animation types are what move your artwork and videos around the screen. You can adjust the speed and starting times of these animations to create quite elaborate looking themes with relative ease. Animation rests are what your artwork will do once it reaches its destination. Keep in mind that some animation types will not work on the video layer. For more information regarding HyperTheme please refer to the .pdf that came with the program. For now, let’s continue with the Aero Fighters theme and complete the animations.
I had already planned to use the “chase” animation for the planes, I’ll just go ahead and set the properties for Artwork1 to something like this:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate05.jpg
I’ll do something similar for Artwork2, but I want to keep the “time” property the same so that they fly around together. I’ll also make some changes to Artwork3, I’ll have them “ease” in from the left and I’ll set a higher delay so that the characters will begin to emerge just as the planes fly over. I’ll have the title properties set for the “grow x” animation type and the video can "fade" in from the bottom. I’m happy with the way it looks when I press the play button; it seems to be much more lively than that old boring thing. If you want to check it out, the final product can be downloaded here: http://www.hyperspin-fe.com/forum/downloads.php?do=file&id=244
Now, you can play with these animations and settings all day, I generally fiddle with the animation types until I find the right one for the job, sometimes it can be hard, other times it’s obvious. Since I’m pretty well satisfied with this theme I’m going to see what other people think about it! Clicking on the little camera button will save a screenshot of my theme, something I will need for my announcement on the forums.
When I’ve got my screenshot saved I’m going to click on the “Export” tab. This is where I’ll need that confirmed rom name:
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate06.jpg
After filling in the required fields I can hit “Create New Theme” and as long as I have an output option checked HyperTheme will do all the hard work of naming my files, putting them in the correct folders, and/or giving me a .zip file. Cool eh? All that’s left to do is for me to make my announcement and get some feedback.
Announcing Your Theme
Back in the Theme Announcements section of the forums be sure that you have read both:
Posting a theme? Please read first!
http://www.hyperspin-fe.com/forum/showthread.php?t=7
and
Uploading Rules and Recommendations
http://www.hyperspin-fe.com/forum/showthread.php?t=5
These threads present all of the information regarding theme submission and set some standards as far as thread conduct, naming, etc. Follow their instructions and make your announcement.
http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intermediate07.jpg
Once you make your post it is a good idea to wait for some feedback before you head off to upload it. You can usually expect a reply from someone on the same day that you post it, they may offer a critique, (we certainly want people to offer their advice and support to help create a strong theme building community), or simply express their opinions regarding your work. Don’t take a critique to heart, we are all here to see HyperSpin do some amazing things, and occasionally a theme falls into the mediocre category. It could be because of low quality artwork, poor video placement, or an idea that didn’t quite work out the way you had planned, but remember, a harsh critique is not a reason to stop, but rather, a reason to keep going, to improve, and to learn a thing or two along the way.
Once your theme has been met with a warm welcome and the general consensus is that it looks complete, then you most likely have the go-ahead to submit it to the downloads section of the HyperSpin website. Once there, it is not uncommon for a theme to sit for a few days while the moderators have a chance to view it, test it, and finally approve it. And with that I welcome you all to the HyperSpin theme building community!
In my next tutorial we'll be talking more about theme composition, getting that polished look, and creating themes that match the official HyperSpin "look and feel," as well as some of the more advanced options.
Updates:
This tutorial written by amchine. HyperSpin and HyperTheme written by BadBoyBill.