Design and documentation journal for my interactive fiction (text games); also reviews and other miscellaneous stuff.

Wednesday, June 8, 2011

Graphics Speed Optimizing

Procrastination is dead.  Long live procrastination.  Yes, that is one of those fluffy flavor graphics I wasn't going to make until everything else totally working.  Sue me.

I'm feeling good about the project again, which is awfully nice.  I'm sketching out the speed boost for the graphics, which mostly consists of doing something about the *cough*mumble* hundred tree sprites. 

If I were very very careful, I think it would be possible to collapse all foreground layers to a single sprite with seasonal changes.  It would mean setting things up in Photoshop and snapping a "picture" of each season.  That would be fastest, and I'm not wholly opposed to it.  The downsides are: loss of flexibility and loss of variation.  The loss of flexibility is more serious - what if I touch up the "bare earth" layers, which I'm not happy with?  Instead of just saving new versions of the changed layers to the materials folder, I'd need to open the original Photoshop file, retake the pictures, and replace them.  If there's any kind of misalignment or color tweak, this would need to happen every time.  Those extra steps add up, and if I ever lost the master file, I'd be screwed.  (It would be a pain to recreate the master file from the current materials folder, but doable.)

So step 1 is making backups of the essentials - both the master photoshop file where I do tweaks and check general layout concerns before going into the canvas editor, and the original, large-size sprite files. 

After that, I'm planning on turning umpty hundred trees into a handful of layers: 3 backdrop tree layers, to give the forest on the horizon depth, and 1-2 foreground layers.  I'm planning to drop the interstitial layer between the front wave of grass and the back wave of grass, and merge the grass layers in-game, although I might add some seasonal herbaceous plants or flowers in there.  That frees up a layer for the cliffs, which have always been in the plans, but need to go in the far distance, behind the forest on the horizon. (Yes, it used to be bluffs - cliffs with a flat top - but now it's just sort of craggy hill things.  Turns out they're easier to make - bluffs are hard, and I couldn't find a top that I liked.  A for effort, but C- for graphical accuracy.)

In order to cut down on the work, I'm creating little tree groves - maybe a couple maples and a basswood, or five oaks and some bushes.  Arranging these tree packets is quick, and flipping stuff over and putting them in different positions makes it harder to spot that placement is not entirely random.  I practiced yesterday on the cliffs I made.  The forest is mostly in a place that won't be seen, but it was very informative.  Random placement is not as good as beginning at the back and working to the front - all kinds of overlap issues begin to crop up if you do that.  That means switching between sprites more often (so you get more diversity) or working over a larger area than the cliffs provided.  The grassland area should be fine.  Also, things get choked up with layers pretty darn fast - I'm planning on grouping every tree group into its own folder this time, and periodically combined/flatten out the various layers to speed things up. 

Or, you know, maybe your view will be of a prairie.  Writing all this out makes me tired.  Fortunately, it's definitely something I can do in little bursts of procrastination as a break from rewriting the damn hunting function, or implementing fish, or something.

800 width pixel crop - the small end of what I expect people to use.  I'm not thrilled with this one, but it does have some framing.  I think some branch/trunk might be better - but perhaps a bush under the tree would round things out.

1200 pixel crop - probably about where most people will end up.  Notice the complete lack of forests on the horizon.  Pretty sweet moon, though.  Notice how it's got a blue background during the day, just like a real moon?  Also, I think I better shrink the celestial bodies again.

1800 pixel crop - probably about as big as I plan to design to.  I feel like something should go on the left-hand side.  The dense pine forest is the experimental part of yesterday.  I think it looks pretty credible zoomed out.  (Zoomed in, it's pretty clear that I have exactly 2 pine sprites, and have trouble drawing cliff shadows with the mouse, and not enough patience to use more than one brush size.)
Cliffs, without trees. Something here is the wrong color.  Cliffs too white?  Back hill too blue?  Clouds?  I'd like to find a way to give the snowy hills some softness, but haven't been successful yet.
In other news, I fixed a couple minor things in clothing, and began to do the necessary work to make it possible to make clothes.  (Baby steps, but still.)  I stripped some old graphics code out of a couple places, where it was really gumming up the works, made some design changes to the way I want plants to behave, and investigated the Multitudes extension for the gathering of wild plants, and possibly a switch in tree calculations. 


  1. Will the text width be constrained somehow to less than the full width of the window?

    From your captions, I take it that you assume people will play with a window width of about 1200 pixels. That would be fine for me (my monitor has many more), except that I hate reading text that is 1200 pixels wide: far too long lines. I generaly resize IF to about 800 pixels, or something like that.

    I would hate to have to choose between a wide window for beautiful graphics and a narrow window for easy readability. :)

  2. I have the same concern, but I recall earlier images of the full game having a map off to the right of the main window. With any luck, that will alleviate the problem. FYI, depending on the font used, graphic designers would generally peg the ideal number of characters per line for long-form text at between 65 or so and 80.

  3. You're both right; 1200 is way too long to read, but there is a map/inventory window on the right. It's proportionate, and about 35% of the screen width at the moment. So 800 px is only about 500 px of reading area - about where I find is usable. My sweet spot is about 1000-1200 - by 1400 px, it starts getting uncomfortable, and 1800 is pretty much unplayable for me. So it's all based on personal preference at this point. However, having some extra padding at the edges means a little more flexibility with relatively low cost now. So if I decide I want to try a left-hand bar displaying, oh, a to-do list or something, the overall screen size necessary to maintain a good reading line will increase, but the frame can accommodate the experiment. It makes the opportunity cost for layout changes pretty low. (And, I suppose, caters to the demographic that enjoys eye strain.)

  4. Although, I just checked, and my ~1100 px is showing just under 100 characters, and the way I've got the screen, this comment thread is about 115. 80 is fine, but a bit on the narrow side.

    Hmm. Maybe this is why I find the Gargoyle presets too small - perhaps I have an above-average column preference.