Skin optimisation tips (version1.1) by TheGreenReaper (Laurence Parry)
As I write this, there are approximately 1500 WindowBlindsskins out there, and more come out every day. Most of them look great. Most of them took their authors a lot of time to make. And an awful lot of them aren't performing as well as they could - either because the authors know how to improve it, didn't think it made a difference, or didn't think they could do better. As a result, some repaint more than 20 times slower than Windows itself. But it doesn't have to be that way.
Here are a few simple "rules of thumb" (where does that phrase come from? Anyone know?) to bear in mind when making skins.
· Rule 1: Tile, tile, and tile again.
Tiling is possibly the most important factor affecting skin performance. Tiling your borders rather than stretching them will generally get you a 40% increase in performance. But it doesn't stop there. Tile your menu bar image, too - that's another 20-30% on apps with menu bars, often overlooked. Tile your scrollbars. Tile your buttons. Tile your tabs. Tile your roof. Tile everything. You know it makes sense.
·Rule 2: Never use transparency whereyou don't have to (or can fake it)
Transparency is bad, 'mmkay? It's slow, because of the need to copy bits from two places at once. I know; transparency is nice. Very nice. But is it worth it? Only you can decide. To make it easier, consider ways of faking transparency. For example, many scrollbars thumbs are transparent over a blank or regularly lined background.Just put the background into the thumb images, and presto - a 'transparent' thumb image! Oh, and remember to avoid putting in "Trans=1" where you don't need it.
In a similar vein, alpha blending of buttons can be pretty, but very, very slow. If you want the blended look, either pre-process the images (put the button in a layer over the background with transparency) or try using mouseover scripts to restrict blending to when it's most effective.
·Rule 3: Computers like rectangles. So should you.
Yeah, I know windows are usually rectangular, and that sucks. I like rounded windows, too. But using"NoShape=1" will gain you about 30%, over and above the non-use of transparency in your borders. This is another trade-off you have to choose for yourself. Sometimes you can pad out a nearly square window with darkened or patterned corners. Definitely put NoShape in if you like rectangles - in which case you might want to consider becoming a programmer . . .
·Rule 4: Textback = Bad news
Textback images are both stretched and blended, and appear on every titlebar. Bad news for performance (some skins run three times slower with one than without). Don't use them.
Text outlining and (to a lesser extent) shadowing will also significantly slow the titlebar refresh, as they effectively cause the text to be drawn multiple times. [thanks to Neil Banfieldfor this tip]
·Rule 5: Size your bitmaps carefully.
A skinner once had a choice of three bitmaps to use for a border. They all ended up displaying the same window, but the first one was two thousand pixels wide, the second was two pixels wide, and the third was two hundred pixels wide. The first bitmap was too large, wasting memory and disk space. The second was too small and took a lot of tiling, reducing performance (having read rule 1, he knew enough not to try stretching it). But the third was just right. Moral of the story: use the third. Also, if your skins are actually large onscreen, they will be slower, simply because WB has to push more bits around.
·Rule 6: Cut that flab! Palletise and compress your bitmaps.
Ok, so you've got a skin. It performs well. It looks good. It's ready to present to the world, right?
Wrong.
Sure, you could just zip up your skin directory and submit it . . . but you'd be reducing the chance of people downloading it. Remember, not everyone has a high-bandwidth connection. People are going to look at your 500k skin and think "is this really worth 5 minutes of my life to download?" - and then they get my 200k one, and suffer agonies unimaginable. Don't let that happen to them.
Take your bitmap and reduce it to a 256-colour palette, or less if you can (for PSPers, I recommend use of the "Optimised Octree" with reduced colour bleeding). Most of your bitmaps will probably use less than 256 colours anyway (you don't have to use the same 256 colours in each), and even those that use thousands can often be indistinguishable from their reduced equivalent.
Wallpapers and other large images with widely varying colours tend not to be suitable for this, but try it - you may be surprised. Then zip it - there will be a difference, and it will (almost certainly . . . <g>) be smaller than before.
·Rule 7: Short is sweet. Shorter is sweeter.
You have sounds in your skin? Great! Sounds can be that extra bonus to the user that makes the difference between their using your skin or someone else's. But sounds files can be big, and don't compress all that well, so before you release your skin, trim your WAVs. Simply open each one up in sound recorder, and move the slider up until you see some action on the waveform display. Then move back a bit and select "Delete all before this position". Then do the same to the end (except use "Delete all after this position", not before :-). Play it to ensure you haven't trimmed off some of the sound, then save, and appreciate the benefit of reduced file size. As a bonus, the sound will lag less, as it starts sooner!
If you really want to get serious about it, consider converting them to 22050Hz and/or mono format (via"File/Properties") - but play them before and after to ensure the sound quality doesn't degrade too much. Every little helps.
·Rule 8: Try UIS1+ - the "lite" alternative.
If your skin concept doesn't need all the features of UIS2, have a look at UIS1+ (also known as the"basic" skin format). UIS1+ is compatible with more problem applications, and is all you need in some situations. However, the truth is it's not as flexible as UIS2 (which is one reason few skinners use it - along with somewhat "sparse" documentation). Have a look at it before you start, though, and consider making a UIS1+ version of your skin if the regular one looks like being very 'heavy'.
Also, only UIS1+ skins can be used with the new WB Basic, so if you don't want to miss out on any possible users (and the ultimate in performance), go for it. Note that there is a difference between WB and WB Basic in this respect; with WB, the main difference when using UIS1+ is that the titlebars are less flexible, while with WBB a lot more functionality (checkboxes, scrollbars, etc) is not present,so if you're distributing both UIS1+ and UIS2 versions together, add the relevant sections to your UIS1+ version so that WB users get as much as possible skinned while retaining the compatibility of UIS1+.
·Rule 9: Animation is hard work - not just for you, but for your computer.
If you commit to creating thirty frames of animation, be sure it's worth it. If you choose to animate your skin, it will run slower than if you didn't. Windows wasn't exactly designed to support animated frames, and the faster the animation runs, the more processing power it will take. If possible, restrict the animation so it doesn't require the repainting of multiple borders - that will speed things up a little, as well as reducing the number of frames you have to create.
If you want to be even sneakier, use scripting and moving buttons to provide animation effects that don't involve repainting the entire titlebar (and which look extra cool).
·Rule 10: Buttons are a bit like barnacles - the more you have, the slower your skin goes.
Make sure you're only showing buttons when you need them. Users shouldn't see max/min or help buttons when windows don't support maximising/minimising/context help - proper use of visibility codes will reduce confusion (clicking on a button that does nothing is annoying) and increase performance. They shouldn't be too big, either - trim the space you left while making them, unless you need it to make the button activation area bigger. Also, it's a good idea to offer the option of having certain buttons visible only in "Advanced mode" (visibility=50), so that users that don't use the extra buttons (like rollup) don't have to have them.
If you don't want a button to be visible, either set contradictory visibility parameters so that it will never be visible, or (less preferably) move it off the edge of the titlebar. Don't set Alpha=0, as WB will still draw it . . . and alpha-blend it, which results in a massive performance hit (Note: as of WB 2.2, this is no longer true, so feel free to do so if everyone's using that or a later version). Never blend where you don't have to.
Remember: performance isn'teverything. If you know what you're doing, you should of course feel free to break any of these rules (they're more like guidelines, in any case). For example, there is no way to get certain effects without stretching. The most important thing is your artistic vision, and nothing should come in the way of that. Just be sure that you know what you're doing.
(Warning - advert follows- wear safety goggles)
In any case, you might want to check your skin with SkinBench, as it's often virtually impossible to judge how much of an effect changes to a skin have on performance by eye alone, especially if you've got a fast computer (and remember, some people out there [me] don't ;-). Try it now - freely licensed under the GPL - at http://greenreaper.co.uk/
Well, that's it - I hope you found something here that helps you out. If you have any additions, corrections or comments, I would be very glad to hear from you (full credit will, of course, be given).
Now go forth and create a skin! <G>
---
TheGreenReaper (Laurence Parry) -
"Eternity lies ahead of us, and behind. Have you drunk your fill?"