Hitchhiker's Guide To the Galaxy (GUIDE) - Update goes on last post.

[Dualnames]

Well, bleeps, I always though I had this covered. But it appears I was dead wrong. Come to think of it, I'm surprised I actually would allow the appearance of the GUIDE as it is now for the final game.


Originally on the TV-Series the GUIDE appeared to have entries of such form:

http://www.youtube.com/watch?v=iLd7xXuw_r0&feature=related

However, ok, it's really obvious I couldn't animate like this.
A list of entries of the game appear here:

Spoiler

http://www.csd.uwo.ca/Infocom/Invisiclues/hhgg/chapter13/

[close]

Now, what I really wish for, to first decide where should anything go.

-Yellow represents the place of two buttons (Show list/type entry and Close guide) *
-Light blue(cyan) represents the scroll entries buttons. (This would scroll the list of entries, not the entries themselves, I don't think Hypertext module supports that somehow)
-Blue represents the space in which the entry text will be placed.
-Darkish red represents the space where an image like the one similar to the inventory screen or a sort animation of some sort similar to the one happening here at the first 10 seconds(real to outline)
-Green represents the rest of the screen (the GUIDE GUI won't be taking the whole screen).


Questions:
-How should all this be arranged?
-Should the GUIDE take over the whole screen or just a section of it(right in the middle)
-Suggestions overall.


*Show list/Type entry button means that it would show the list of entries for normal mode and would make you type entries for hard mode.

[SpacePaw]

Cant really say anything as it's just arrangement. seems ok but you could add DONT PANIC logo in the upper right to kill the blank area
Please show us completed apperance of the guide

[Dualnames]

I'm planning to do that I just would prefer to arrange stuff before starting to sprite it..but well, i'll try it.

[Ghost]

Something like this should work. I tried to arrange the elements as "sensible" as possible- the GUIDE is the ultimate source of knowledge and should be easy to navigate.

- list entry and line to type an entry should be close to each other, so I moved the bar to match the prominent blue square.
- list of entries *should* be visible, so I included it next to the scroll bars.
- mode switch and on/off button are rather special, and the original GUIDE looked rather whimsical, so I broke the rectangular outline a bit.

Hope that is a step into the right direction Always know where you put your towel!

[Dualnames]

Something like this should work. I tried to arrange the elements as "sensible" as possible- the GUIDE is the ultimate source of knowledge and should be easy to navigate.

Nice one Ghost, as always. Care to tell me where I can download that font? That's mostly my idea of how it should be like..A bit different though. Like the position of the buttons to the right and the overall position of everything.

[Ghost]

Glad you like it, maybe we can puzzle it together togther..er..er. 

Care to tell me where I can download that font?

That's a "pixel font" where each letter takes a 5x5 pixel square- according to PixelJoint it's the smallest legible font possible... No idea if you can download it, I use a bitmap... here is

[auriond]

There are similar fonts for free download at http://www.fontsforflash.com/ (look under "freebies") and http://www.bestflashanimationsite.com/pixel-fonts/ .

[Leon]

I get my fonts here. Under bitmap/pixel are some very good (and tiny) ones.

You might want to create a 'real' digital book? This is my version, DS-style. Separating pages prevents having to use an all too tiny font and still have the ability to display a fair amount of info. I wouldn't want to cramp it all into one screen. Besides that is this layout perfect if you don't want a full screen display.

[Dualnames]

Promise to post something taking all those into consideration..

[Dualnames]

The close guide label flashes from that colour you can see to red. Next to the textual part of the entry if the entry has more pages buttons will appear. And well, tell me your thoughts.

[markbilly]

I really like it.

Just make the image box the same width as the topic list box and you're sorted! Good work!

[cat]

Yes, I suggest to use pixel perfect alignment for all boxes

[Darth Mandarb]

I wish I had more time ... I'd love to offer up a paint-over.

Alas, some suggestions will have to do.

1) the red title and blue body copy are very difficult to read (especially when paired like that)
2) this feels too "modular" to me ... for something so technologically advanced as the HHGTTG is supposed to be I don't see it being so 1960s Star Trek tricorder looking (if that makes sense)
3) if you are intentionally making it modular like that ... then the tops/bottoms and sides should align properly ... this is all over the place with things not lining up properly (as was already mentioned)
4) there are "modules" that don't make sense!  What is the bar with the red box at the end for?  It's just sort of hanging there off centered...

If it were me and I was "re-envisioning" the guide ... I'd make all touchscreen with the information displayed via a neat little interface rather than bounded in by boxes all over the place!  Just my take on it

[cosmicr]

you need to be consistent in your resolution. the majority of it looks low res, except for the scrolling box on the left. it looks out of place to me.

[Shane 'ProgZmax' Stevens]

There seems a pretty obvious reason for the font discrepancy:  he wants to fit in a lot of text in the list pane so he's used a scaled hi-res font, but in the larger area he's gone with a larger font because it will fit.  It doesn't really bother me, in any case.  I also have to disagree with darth and say that I find the font and color choice very, very easy to read (monitor settings?), though I suppose you could change the outline color to something dark but contrasting so the letters stand out better.  Also, the modularity seems to work with the 'intent' of the series, where the Hitchhiker's Guide was very much a piecemeal device that was woefully out of date even for its time.  I do think that getting rid of the default list scrolling arrows and making your own would improve this, along with a highlight color for the interface and some more contrast.  Naturally it could be made to look very alien and sophisticated, but I don't think it 'needs' to look that way.

[Dualnames]

I wish I had more time ... I'd love to offer up a paint-over.

Alas, some suggestions will have to do.

1) the red title and blue body copy are very difficult to read (especially when paired like that)
2) this feels too "modular" to me ... for something so technologically advanced as the HHGTTG is supposed to be I don't see it being so 1960s Star Trek tricorder looking (if that makes sense)
3) if you are intentionally making it modular like that ... then the tops/bottoms and sides should align properly ... this is all over the place with things not lining up properly (as was already mentioned)
4) there are "modules" that don't make sense!  What is the bar with the red box at the end for?  It's just sort of hanging there off centered...

If it were me and I was "re-envisioning" the guide ... I'd make all touchscreen with the information displayed via a neat little interface rather than bounded in by boxes all over the place!  Just my take on it

1)Any other colour suggestions, I think the red is good, the blue as it is, might really feel a little hard, perhaps a choice from the colours I'm using to draw the visual entries seems better?
2)Sort of agree with what you're saying there. The GUIDE feels a little split in sections, but there was no better way I could came up with to have it work and not trouble players gamewisely.
3)Alignment will be done.
4)That's supposed to be the place for textbox. Thing is to explain myself better, like the king's quest remake, there are two difficulty modes; one for normal players and one for purists. In the first mode GUIDE has entries in a list, and on the purist mode you type your entries. Should I make the GUIDE the same for both modes? And if yes wouldn't it be too much to have a textbox and a list? Wouldn't the textbox appear obsolete?

There seems a pretty obvious reason for the font discrepancy:  he wants to fit in a lot of text in the list pane so he's used a scaled hi-res font, but in the larger area he's gone with a larger font because it will fit.  It doesn't really bother me, in any case.  I also have to disagree with darth and say that I find the font and color choice very, very easy to read (monitor settings?), though I suppose you could change the outline color to something dark but contrasting so the letters stand out better.  Also, the modularity seems to work with the 'intent' of the series, where the Hitchhiker's Guide was very much a piecemeal device that was woefully out of date even for its time.  I do think that getting rid of the default list scrolling arrows and making your own would improve this, along with a highlight color for the interface and some more contrast.  Naturally it could be made to look very alien and sophisticated, but I don't think it 'needs' to look that way.

The arrows aren't the default ones. I know however understand that they appear to be so I'll change them.

[Darth Mandarb]

I am bored (at work) and decided to goof-off a bit ...

So I did a paint-over (not really) to illustrate some of my ideas.

DISCLAIMER: I'm a fan of the book(s) and have never seen the TV show versions (only seen the movie that nobody seems to like but I loved).  Anyway... I made this off of how I always envisioned the guide to be (except I kept it 'modular' like you want it!)


- I made it feel like a book that can be closed
- I added in the search box like you want (plus a keyboard)
- I added in some controllers (the + directional pads)
- I added some buttons (next to the controller) to select the top or bottom screens (the up/down arrows) and to enter/select (the left pointing arrow on both sides) and an X/Close button to close the guide.
- I tightened up the displays a bit (margins, alignment, etc)
- I unified the resolutions (I think)
- I kind of mixed high-tech vs. low-tech (the touchscreen keyboard thing and the directional pads) to give it that nostalgic/futuristic feeling
- I added in the two small informational screens (bottom right, middle left)
- I tried to put the directional controls and buttons in convenient locations for handling the guide

Here is the production PSD (~1.5mb) file if you want it to see what I did.

I went WAY over-board with this and it's probably not anything like you wanted to use and/or envisioned.  Or what die-hard Guide fans think the guide looks like!  I just wanted to share my interpretation.

I hope it helps.

[Leon]

Wow, I like this version. Indeed like a book. I do however have two points:

1: The keyboard takes up quite a bit of space. When you imagine a touchscreen you shouldn't need one and have some space free for
2: Some bigger animations. There's two sets of directional controls on both sides. One is enough I think, althoug I can't imagine why you'd want to scroll right/left.

My idea (just a quick/dirty edit):

[Mr Flibble]

Can I suggest replicating the style of the animations from the TV series, rather than doing everything in blue?

[Leon]

I'd keep it in this style and not replicate anything. It should be a completely standalone unique appearance.