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/
Now, what I really wish for, to first decide where should anything go.
(http://i133.photobucket.com/albums/q53/JustLedZep/1-19.png)
-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 (http://www.youtube.com/watch?v=iLd7xXuw_r0&feature=related) 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.
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 :D
I'm planning to do that I just would prefer to arrange stuff before starting to sprite it..but well, i'll try it.
(http://img300.imageshack.us/img300/3940/over.png)
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!
Quote from: Ghost on Tue 24/02/2009 11:13:40
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.
Glad you like it, maybe we can puzzle it together togther..er..er. ;)
Quote from: Dualnames on Tue 24/02/2009 11:17:34
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 ;)
(http://img172.imageshack.us/img172/7711/pixelfont5x5.png)
There are similar fonts for free download at http://www.fontsforflash.com/ (look under "freebies") and http://www.bestflashanimationsite.com/pixel-fonts/ .
I get my fonts here (http://www.dafont.com/). 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.
(http://www.freewebs.com/ultimategamesolutions//photos/Screenshots/guide-ds-style2.png)
Promise to post something taking all those into consideration..
(http://img134.imageshack.us/img134/5652/guideimage.png)
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.
I really like it.
Just make the image box the same width as the topic list box and you're sorted! Good work!
Yes, I suggest to use pixel perfect alignment for all boxes
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 :)
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.
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.
Quote from: Darth Mandarb on Wed 04/03/2009 18:34:40
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?
Quote from: ProgZmax on Thu 05/03/2009 04:29:27
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.
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!)
(http://www.twin-design.com/ags/help/dualnames_help01.gif)
- 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) (http://www.twin-design.com/ags/help/dualnames_help01.psd) 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.
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):
(http://www.freewebs.com/ultimategamesolutions/photos/Screenshots/book-sample.png)
Can I suggest replicating the style of the animations from the TV series, rather than doing everything in blue?
I'd keep it in this style and not replicate anything. It should be a completely standalone unique appearance.
You know, Flibble's suggestion could really work in your favor if you actually extracted those clips from the series and used scotch's ogg theora plugin to overlay them in the spots where they should appear. Obviously, this will limit you to what is shown in the series to some degree, but at the same time it would look pretty darn cool. Also, I think Darth's redesign looks good, although the controls are a bit too similar.
Darth that's really a wonderful edit. Hope you don't mind me ripping off some ideas from your edit :D. I loved the movie too, despite all think it sucked big time.
Flibble(Wondering does the nickname have anything to do with Rimmer, a penguin and lunacy?):I thought of ripping the videos from the show when the ogg theora plugin made it's appearance. It's really a lot of trouble to go through this for two reasons
First I don't have high quality clips of the TV series.
Secondly The TV series don't have the same amount of video clips for all entries that appear inside the game version of the GUIDE.
Thirdly wanting to have the game contain a speech pack, the ogg files would make the game terribly large. Would the size worth it?
Darth:The edit you made has the clue from the movie that the GUIDE would appear as a book, which I've always wanted to use and my edit appears the GUIDE to be more of a circuit board.
Some buttons make me wonder what they do though..One is the arrow pad, and the return button next to the hitch logo.
As for scrolling arrows for text, must I say that this is AGS impossible or at least Hypertext module impossible. You can scroll pages but not text. If SSH adds it I'll make a stature for him though.. ;D
I didn't mean ripping the, but just copying the bright colours and simple animations. Of course those animations were professionally, and very cleverly, done, and may be too difficult to emulate in any way. Though I still think the Guide wouldn't be monochromatic : P
And on a side note, "What do we do to naughty boys, Mr Flibble?"
"Uncle Arnie fries 'em alive with his hex vision!"
Follow the Rimmer-shaped blur!
Here's my mockup. (http://www.geocities.com/pokemontours2/indexes/objects/pokedex1.gif)
~Trent
The articles on God from the Original Guide and the Movie Guide.
Movie - http://www.youtube.com/watch?v=kyYS-GzBSIg
TV - http://www.youtube.com/watch?v=dcncPpQ8loA&NR=1
Both of them seem more modern that your version, I think the guide needs to be as modern as you can make it, I think the modular look makes it look too much like a gameboy and not like a useful modern swish gadget thing.
I think if I was reimagining the guide, as you say you are, not reusing, I'd model it on something like Amazon's Kindle, as this technology does seem to lend itself to becoming the guide.
(http://blog.pricegrabber.co.uk/gottahave/files/2009/02/kindle-2.jpg)
or even one of the new lovely rolly screen thingies from phillips.
(http://www.ifa-show.com/2005/philips_review/101_philips_e-reader.jpg)
In a re imagining, and if by that you mean coming from a modern perspective, looking at a space age, then I think it's important to look at where technology is now, and try to extrapolate. Not necessarily to be accurate but to give it that sense of it being actually futuristic. Not clunky.
here is a bad drawing of what i mean, i kind of just drew a kindle in the end. but it was an accident.
(http://www.2dadventure.com/ags/hhgttk5.png)
[off topic]
My favorite quote from Red Dwarf, is by the day:
"Come on [name of princess here], there will be some time for explaining later, and hopefully some sex."
[/off topic]
Anyway, interesting ideas there Zooty, I get the feeling the GUIDE my way feels like a no-good piece of plastic.
So anyway I gave it a try.
Ressources:
Outline (http://i133.photobucket.com/albums/q53/JustLedZep/guidenew.png)
Basic colouring (http://i133.photobucket.com/albums/q53/JustLedZep/guidenewcoloured.png)
Version:
(http://i133.photobucket.com/albums/q53/JustLedZep/33-1.png)
Not 100% happy with it, and some font changes are probably needed badly.
I think it looks fine and the fonts are clear and readable.
Bump, but I want to know badly..is the version two posts up, giving you any feel like the GUIDE as i see it, is just right ?
Colours: clear, clean and easy on the eye, so check.
Fonts: Legible and *blue*, check.
Overall Design: Very functional and sleek, check.
I always *imagined* any Guide in existence to be battered, scratched and worn, but heck, go for that design, says I.
If anything: It seems clear that the Guide is now meant to be "flipped open"- the plain gray part in the middle could hint at this by having something like a hinge/shadow/detail.
Ah, thousand words vs. picture...
(http://img16.imageshack.us/img16/6295/unbenannt1kopiei.png)
Did you forget the return key on the keypad? Or was that deliberate? ;)
There seems to be a lot of empty space on the guide. If it were designed for someone to carry everywhere with them, I would imagine that it would be the most efficient design it could be and that there wouldn't be the space below where it says "battery" for example. Just my opinion of course. :P
Quote from: Hudders on Sat 18/04/2009 00:11:43
Did you forget the return key on the keypad? Or was that deliberate? ;)
There seems to be a lot of empty space on the guide. If it were designed for someone to carry everywhere with them, I would imagine that it would be the most efficient design it could be and that there wouldn't be the space below where it says "battery" for example. Just my opinion of course. :P
Now you got my into thoughts..wondering if you had a book short of gadget in a size of a small book, where would you put it to carry it? And would you give a case or something like a string to help users?
Ford had it on his satchel.
Quote from: Dualnames on Sat 18/04/2009 00:18:40
small book, where would you put it to carry it? And would you give a case or something like a string to help users?
Some sort of cover sheets, possibly futuristic, non-scratchable fake leather. Or one of these things that trendy cellphone users clip to their belts to look like trendy cellphone users.
As for Hudders' comment regarding wasted space, I don't think there's too much empty space. The rectangular blank bit to the left, under the scrolling buttons, maybe. But hey, the Guide's supposed to talk, isn't it? Why not put a small panel there for a speaker?
(http://img10.imageshack.us/img10/8059/unbenanntscn.png)
I also included the "hinges" I mentioned in my last post, and tweaked the scrolling arrow buttons a little. The double arrow ones could simulate Pos1/End or Fast Scroll, whatever takes your liking (and works better, scripting-wise). To be honest, I think the battery display is overly large; it could safely be made into a smaller panel, and when you shift it to the right you could add a little more space to the entry list.
[edit]
As I look at it now, it looks a bit crowded. The battery panel could still be smaller, least you're going to use it for an extremely LARGE puzzle ;)
Quote from: Dualnames on Sat 18/04/2009 00:18:40
Now you got my into thoughts..wondering if you had a book short of gadget in a size of a small book, where would you put it to carry it? And would you give a case or something like a string to help users?
O think it doesnt need anything to keep it in. It's future. Probably material that it is made of is not-scratchable anyway :) let them keep it just as it is :)
Quote from: Dualnames on Sat 18/04/2009 00:18:40
would you give a case or something like a string to help users?
I don't think it would be too much of a stretch for there to be a wrist strap. Possibly one so small nobody ever uses!
Nice edit there Ford, come to think with realism there, why put a keyboard when there's a speaker?
'Cause speakers are mostly associated with output and keyboard - with input ;)
I really love the last edit :) The only thing I can't quite understand is the battery thing and the bars on its right side. Are they supposed to show the speaker's volume?
Does the guide even take batteries? I don't remember it ever being put on charge.
Quote from: Hudders on Sun 19/04/2009 22:04:19
Does the guide even take batteries? I don't remember it ever being put on charge.
I'm assuming it is taking something like that. It can't harness power from brains..
Quote from: Dualnames on Sun 19/04/2009 20:35:39
Nice edit there Ford, come to think with realism there, why put a keyboard when there's a speaker?
EDIT: Btw I called Ghost Ford...man this is getting me...
Quote from: Dualnames on Sun 19/04/2009 23:01:50
EDIT: Btw I called Ghost Ford...man this is getting me...
I feel honoured. Ford always was sort of a role model for me. Especially the boozing and the flirting.
Quote from: Dualnames on Sun 19/04/2009 20:35:39
...why put a keyboard when there's a speaker?
Beats me, but right when Arthur's given the Guide in the book and he uses it to look up the Babelfish, it's stated that the Guide speaks. And they type stuff to look it up. So realism beats... realism. Almost a trope.
Lol GHOST. By the way, I'm thinking of adding a speaker and two plugs. One for headphones (iPod has it too) and one for microphone (The GUIDE should allow you to record your entries right? Or just use a mic to speak the entries)
Well, worked on suggestions from GHOST, and the rest of you.
(http://i133.photobucket.com/albums/q53/JustLedZep/untitled-3.png)
typo..
"....so you can always visit see the Marvels of the Universe for less than thirty Altairan dollars a day."
Does it have a stylus, or is it made by Apple to exclude anyone with a normal sized finger from operating it? :D
There are nice spaces on the borders to incorporate a stylus holder.
And just to be a pain (if you really are going for realism), I can't touch any of the keys without mashing between 2 and 4 at a time (excluding the space bar). I measured the height of the image on my screen to be roughly the same as my phone (which isn't touch, but I worked out the buttons are slightly bigger)
I know... I'm an asshole ;)
Quote from: Stee on Mon 27/04/2009 12:59:42
I know... I'm an asshole ;)
Yeah. :D :D. Well, nevermind the typos they're currently dying by Leon. It's not real size. It's approximate size. Size is an illusion.
Ah, well, can't really decide. I'm more happy with this version, but yet...does it feel right?