Theme Creation Direction - 16:9 is the New Standard

[Avar]

In an effort to provide clearer ongoing art direction, this thread will serve as a quick reference for theme creation best practices. We are presently working on native support for additional aspect ratios and, as such, recommend if people do make 16:9 themes right now they keep a backup of their source material. If you still want to use the current workaround to make a 16:9 theme right now, the below information can help:

 

Please note, the way we do things is going to change as far as themes goes but making 16:9 versions is so quick and painless I figured now is as good a time as any to start. We have plans in place to preserve and grandfather existing themes for the next gen as we move forward.

In general, there are as many ways to make a theme as there are ideas in a person's head. In general, themes should highlight the system or game they're representing in an attractive way using the best quality art possible. Here are a few basic guidelines to follow:

• Try not to make your animations times/delays too long. 0.5-1.5 is a good range. We don't want the user to have to wait forever for the full theme to load.
• Whenever possible, avoid fusing artwork elements to background layers unnecessarily (ie. If Artwork1-4 is still free, don't put something that could use one of those slots on the background image if you don't have to)
• Artistic variations are accepted and encouraged but if you're going for an official look/feel, try to make the themes as true to the source material as possible. For example, for a main menu theme, try to match the style used by the system/company. For arcade games, try to match the cab art/marquee as best as you can, where possible. For console games, try to use era appropriate graphics (ie. It'd be weird to see Mario Galaxy's Mario on a Super Mario Bros. 2 theme).
• Go nuts and be creative

Until now, the theme standard has been 4:3 with efforts to convert existing themes to 16:9 ongoing. However, from now on the standard is 16:9 in order to reflect the needs of the majority of our current and future users. 4:3 themes are still allowed and encouraged but the standard is and will forever be 16:9.

Down the road, the way we go about creating and distributing themes is going to change but 4:3 and 16:9 variants will pretty always require distinct approaches. Right now, converting 4:3 to 16:9 is still very easy, especially if you're the original content creator. Here are the steps for converting your 4:3 theme to 16:9:

• Resize all of your artwork elements and any video.png (if present) to 75% of their original widths.
• If required, your background must also be resized but it will still have to be 1024x768. Fit a normal background image to 1365x768 then resize it to 1024x768 to achieve the needed 75% squish.
• There should no rotation being done by HyperTheme. This is because anything rotated will be skewed in HyperSpin so if you want an artwork element rotated, rotate it in Photoshop and save it at the angle at which you want it to be displayed.
• Apply Dark13's NO_SCALE_SMOOTH script (PNG_to_SWF_dark13_NO_SCALE_SMOOTH.jsfl) to everything. This drastically improves the quality of the artwork on HD displays and effectively makes your theme fully HD.
• If you use Flash animation SWFs, these can be resized in flash and bulk-resized/repositioned with the multiselect and onion skin tools before re-publishing as a new SWF.
• Zip everything up like you normally would using the SWFs instead of the PNGs with the exception of the video.png for which we still have to use the PNG since the SWF won't work.
• Open the theme.xml and reduce the video width by 75%. This will usually mean it will be equal to the video height but for widescreen systems, handhelds, or vertical games it won't be. Once done, set forceaspect="both" and save.
• Open the theme in HyperTheme and re-position the elements and resize the video as required to take advantage of the 33% increased space that you have to work with in a 16:9 display. Make sure neither the video nor any of the elements have an r value (ie. they're not rotated) or they will be skewed when displayed in 16:9. This is the skew that happens to anything on a non-4:3 display that's been rotated by HyperSpin:

As you can see, it gets turned into a rhombus. The same effect happens to everything that has any sort of tilt, including the rock animation, spinning discs, even the circular wheel.

• Save your changes and you're done.

Some of the first videos I ever did explain this concept in a bit more detail. While they're more for people trying to cope with converting artwork they didn't themselves create, the info in this playlist is still useful to artists in general:

 

And here's a great example of how awesome a SWF smoothed 16:9 Theme can look:

 

Obviously we're not twisting anyone's arms to do this but this is the standard we intend to use moving forward: high-definition and widescreen. While I do intent to keep working my buns off auditing and converting existing material, I would appreciate it to no end if we started transitioning to this now for any new submissions so as to reduce my workload and give theme creators full creative control over how they want to present their 4:3 creations in 16:9. Cheers!

 

16:9 to 4:3 Comparison:

4:3 Original

16:9 Conversion

[Avar]

Preview Suggestions:

This party will remain true forever. Here are some general guidelines when taking your theme preview screenshots:

• Try to avoid having Special Art that's not part of the theme in the screenshot
• Take the screenshot with the system/collection/game video playing in it like it normally would. If one doesn't exist, consider a screenshot of an appropriate game as filler or use a static screenshot. Avoid using the big red exclamation mark or WIP video unless the system is, in fact, a work in progress overall. In instances where the system is still very incomplete, it's fine to use a WIP video/snap.
• Avoid showing the wheel unless the theme is designed to interact with or showcase the wheel in some way (eg. Aorin's themes)
• When taking a screenshot for a 4:3 theme on a 16:9 display, please shrink the width to 75% before uploading so it displays at the correct aspect ratio.

 

Final note: Please be sure to mention which system(s) any game theme is intended for!

[KlopjerO]

Linking Dark13's smoothing scripts, for convenience

 

[Roadrunner]

I have a bunch of widescreen PinballFX2 themes that I never did anything with because I didn't know how to create the theme in widescreen. The artwork is done I just have to create the themes themselves. 

I haven't been on in a while and haven't kept up on the changes. Does HS now support widescreen? Why create these themes if it doesn't? Sorry if these questions are out of date but like I said it's been a while since I've been on here. 

[griffin518]

42 minutes ago, Roadrunner said:

I have a bunch of widescreen PinballFX2 themes that I never did anything with because I didn't know how to create the theme in widescreen. The artwork is done I just have to create the themes themselves. 

I haven't been on in a while and haven't kept up on the changes. Does HS now support widescreen? Why create these themes if it doesn't? Sorry if these questions are out of date but like I said it's been a while since I've been on here. 

Welcome back, Roadrunner!

[Roadrunner]

1 hour ago, griffin518 said:

Welcome back, Roadrunner!

Thanks. 

Just let me know if there's a way to put these together and I'll create the themes. All the artwork is ready to go and the theme previews were shown in a thread. Just never put the themes together because I wasn't sure how to do it and HS didn't support it. 

[KlopjerO]

44 minutes ago, Roadrunner said:

Thanks. 

Just let me know if there's a way to put these together and I'll create the themes. All the artwork is ready to go and the theme previews were shown in a thread. Just never put the themes together because I wasn't sure how to do it and HS didn't support it. 

welcome back meep-meep, see it as an introduction night at your new school. we need to make Hyperspin look good for the new kids in light of the new school year. the school year is the hyper update that is rumored to be around the corner. so we place nice table clothes and green plants on the table (widescreen and themes, HD if possible) and we need to make the kids feel welcome (easy setup through HyperAI/Hyperlist live). but instead of falling back into the dreary nighmare that school life is, the schoolboard has decided that introduction night will be the new standard and school will be a happy homely place where everyone can be happy in a table-clothed-green-planty environment.

I hope that makes sense.

[Roadrunner]

8 hours ago, KlopjerO said:

welcome back meep-meep, see it as an introduction night at your new school. we need to make Hyperspin look good for the new kids in light of the new school year. the school year is the hyper update that is rumored to be around the corner. so we place nice table clothes and green plants on the table (widescreen and themes, HD if possible) and we need to make the kids feel welcome (easy setup through HyperAI/Hyperlist live). but instead of falling back into the dreary nighmare that school life is, the schoolboard has decided that introduction night will be the new standard and school will be a happy homely place where everyone can be happy in a table-clothed-green-planty environment.

I hope that makes sense.

That's fine but... how do you load widescreen artwork into Hypertheme? The version I have doesn't support it. I made one widescreen theme and was able to do it because I made the background itself move around. How do you make widescreen themes? Do I have to download a new version of hypertheme? I have the artwork ready to go all I have to do is put the themes together. 

[Avar]

No at present you have to workaround them as per the steps I laid out in the OP. Down the road there'll be native capability but the current way will still be just as future-proof / convertible.

[Roadrunner]

6 minutes ago, Avar said:

No at present you have to workaround them as per the steps I laid out in the OP. Down the road there'll be native capability but the current way will still be just as future-proof / convertible.

The backgrounds I have right now are 1920 x 1080. What do I have to convert this to in order to make a widescreen theme? 

I also created regular themes for these, they're available now. I uploaded all of those and just figured I'd wait until widescreen came out to put together the other ones. 

[Avar]

Resize them to 1024x768 and apply Dark13's NO_SCALE_SMOOTH script (link in OP) so the image quality is maintained HD once it's re-stretched.

[Roadrunner]

Here's what I have loaded now native 1024:

Here's what I have waiting native widescreen... 

 

Just wondering if I should bother putting this together now or just wait for WS to be supported. Aren't they just going to look pretty much the same if I smush this down to 1024? 

[Avar]

May as well put it together now imo. The extra steps don't take long and from my experience the image quality is retained as long as we don't skip the SWF smoothing step.

[Roadrunner]

I've taken a look here, you're saying the background should start with 1365x768 but it looks like I started with 1920x1080. So what do I do with this? Can this still be done? Obviously all my other artwork is going to be larger as well. So a few more questions here:

1. Can 1920x1080 be reshaped as per what you're saying above? If so, what's the instructions on how to do this?

2. Are there plans in the future HS release to support widescreen 1920 x 1080? What will native resolution be for the future releases? 

[Dilated18]

18 minutes ago, Roadrunner said:

1. Can 1920x1080 be reshaped as per what you're saying above? If so, what's the instructions on how to do this?

 

Use Dark13 1080p background scale script

[Dilated18]

22 minutes ago, Roadrunner said:

2. Are there plans in the future HS release to support widescreen 1920 x 1080? What will native resolution be for the future releases? 

Im wondering the same thing and if 1080 will get support, what will happen with all the themes we create to wide screen now

[Avar]

1 hour ago, Roadrunner said:

I've taken a look here, you're saying the background should start with 1365x768 but it looks like I started with 1920x1080. So what do I do with this? Can this still be done? Obviously all my other artwork is going to be larger as well. So a few more questions here:

1. Can 1920x1080 be reshaped as per what you're saying above? If so, what's the instructions on how to do this?

2. Are there plans in the future HS release to support widescreen 1920 x 1080? What will native resolution be for the future releases? 

You can use the 1080p smooth as well, it's just I've converted about a thousand and I found the most efficient workflow was to either manually scale the bg to 1365x765 and use the 16:9 to 4:3 script on everything at once, or just manually fix everything to 75% and use the no scale smooth. The reason I just manually do everything to 75% first is because if there's an artwork layer that uses a 1024x768 canvas, manually resizing it by increasing the canvas size then shrinking the width to 75% conserves the intended placement so over time I learned it was faster and more convenient to just check all items manually. Different if you're the creator though since you know exactly what elements you're putting in.

I can't directly answer your question but I can say it would be a logical step.

1 hour ago, Bain408 said:

Im wondering the same thing and if 1080 will get support, what will happen with all the themes we create to wide screen now

Can't answer this either but I can say it would be logical for there to be some sort of stretch option like we have now, making any existing widescreen conversion effectively just as good as raw widescreen themes. Beyond that there are ways we should be able to preserve/grandfather everything. If not I'd've not made the thread as I'd hate for ppl to waste effort

[KlopjerO]

It should be clever, at the moment I can't think of a way on how to script this sort of detection without the aide of some sort external flag. kind of what knewlife did with his hyperbezel app. (which is a great app). I mean the program can't tell if art in the archive is squished or it's proper size, it can't see it.

This is not to say that we shouldn't make themes widescreen. we should because they look awesome!

I cast

[Avar]

Amendment to this: If you do make widescreen themes, it's probably worth keep a backup of everything you use in its original size.

[Dilated18]

4 minutes ago, Avar said:

Amendment to this: If you do make widescreen themes, it's probably worth keep a backup of everything you use in its original size.

Was wondering this

[Avar]

I can release further details to clarify: We are right now actively working on native support for additional resolutions and aspect ratios. While there is potentially a way for us to grandfather 16:9 conversion workarounds to a degree, this new support will make life a lot easier moving forward and I suspect people will ultimately prefer to make their themes in native.

[wallmachine]

Native all the way!

[Suhrvivor]

What do you mean by native? Widescreen? 1080p? 4K?

Is that great of a difference to use obsolete flash file formats over squished pngs for current widescreen themes?

[Dilated18]

So im guessing its better to stick with the 4:3 themes and art from now on since you would see the squish if HS gets widescreen ability?

[Avar]

Native = will support w/e resolution/aspect ratio you're using. There's a way we can workaround existing themes to get them working but it's non-ideal relative to themes built for native w/o the workarounds we've been using.