ID:1360117
 


Murder Mansion has always stuck to the old-style BYOND interface layout. Map to the left, single text output on the right. Even when I created its rudimentary custom skin, I just went with that, and it's been that way ever since.

However, a player recently suggested that it could be improved to make the text a little less cluttered and hard to follow (an active round can cause the text to just flood past), and to enhance the game's bare-bones OOC communications. (and to be honest, this was something on my To-Do list for the big update, but I have extremely little experience with skins, and I kept pushing it down the list, rather than diving into trying to learn the interface editor and various functions)

So, I've finally taken the plunge and have been toying with alternate layouts to separate out the different types of text output.

The above is what I'm currently messing with.

The basic idea is that all game announcement types of text (the intros, rules, round start/end text, etc.) will output to the box on the left, while player communication will output to the right.

You'll notice that the right box is tabbed between the two "channels" of player communication as well.

For the OOC output, this will include all text from "ghost"/spectators, plus any text from active players using a new "OOC()" verb. And thus, finally, MM will have an actual chatting system.

The In-Game output will include all speech from active players (obviously), and any short game-output that players need to read on-the-fly (all of the red "action prohibited" notifications, attack/death announcements, descriptions of actions, etc.) This way, players in an active round need only pay attention to this tab.

I'm planning to also add functionality where the unopened tab will notify you of new messages (by a change to the tab's title; either changing the title text itself, or by changing the background, or whatever), which will then be reset once you open that tab. I'm currently only vaguely aware of how to do this, though (I know that it will involve winset(), and a proc stuck into the "run this when open this tab" hook, but the specific details currently elude me)

I am thinking of further splitting up this right area, so that the "In-Game Comm" tab will only output player speech, while all of those other game-announcements will go into the third tab (or, potentially over to the left box; but I don't want to split the player's attention across the entire screen; that left box is meant for things that only need to be read once and ignored, or things that otherwise do not require constant attention)

Perhaps I'll split the right side into two halves horizontally, with the top box being tabbed for "OOC" and "IC" text, and the bottom being for notification outputs? I dunno.

And that's why I'm bringing this to you guys! What are your thoughts? How do your own games handle this stuff? Does that look too cluttered with added boxes? (I like that it centers the map; but it has a dangerous potential to drown it out) Would it perhaps also make sense to break the left box into tabs? (one to "store" the map text, one to "store" the current mode's intro and/or rules, and another for the feed of all other game announcements?)
I'm not really a fan of interfaces.

Here are a few things I'd consider doing. Change the view size to 20x15. Most monitors are rectangular in shape now, not square. 4:3 is a common resolution in a lot of games now and has been for at least... 20 years now? Maybe a lot more. It is used for a very good reason.

Secondly, I'd ditch the interface entirely. I'd go with the game window, and anything else you need displayed over it using screen objects. In most cases this'd be a chat window, and maybe a few buttons. You tell me which looks better/more professional...
http://i.imgur.com/vhzdGdD.jpg This
Or http://i.imgur.com/DTg6l11.jpg

Not only does the first example look a lot better (if you ask me), but it was a whole lot easier to do as well, is more flexible and much easier to change if I need to. (The only thing that is harder, is handling text input when someone wants to talk for example, this is a million times harder than it needs to be.)

Just remember, you might be making a BYOND game, but it doesn't need to look like every other BYOND game.
In response to The Magic Man
The Magic Man wrote:
I'm not really a fan of interfaces.

I'm not, either. In fact, as soon as I first learned how to use screen objects (even farther back than they introduced the interface/skin editor), I refused to ever use a verb/statpanel in any of my games.

Chat/text output, however, is a different story. One that I still feel the interface is a necessary evil to handle. Obviously, there are plenty of alternatives these days, with built-in maptext and plenty of libraries to perform the function, but implementing any of them just seems a waste, especially in a game that has a lot of output, and it'd be better to have an off-map text area.

Here are a few things I'd consider doing. Change the view size to 20x15. Most monitors are rectangular in shape now, not square. 4:3 is a common resolution in a lot of games now and has been for at least... 20 years now? Maybe a lot more. It is used for a very good reason.

The viewable area itself needs to remain a square. I don't want players' views to be arbitrarily hampered just because they're facing north or south. Obviously, I could orient the entire map window (map+HUD) to be a horizontal rectangle, but I didn't like that layout way back when I tried it out. I prefer the current vertical HUD layout.

Secondly, I'd ditch the interface entirely. I'd go with the game window, and anything else you need displayed over it using screen objects. In most cases this'd be a chat window, and maybe a few buttons. You tell me which looks better/more professional...
http://i.imgur.com/vhzdGdD.jpg This
Or http://i.imgur.com/DTg6l11.jpg

Not only does the first example look a lot better (if you ask me), but it was a whole lot easier to do as well, is more flexible and much easier to change if I need to. (The only thing that is harder, is handling text input when someone wants to talk for example, this is a million times harder than it needs to be.)

The first looks much nicer, yes, but Murder Mansion requires a much larger text area than I'm willing to give up to overlap the map. If I did incorporate maptext and screen objects, I'd have to offset them next to the map, and extend the box from top-to-bottom of the screen. And since I'm going to do that anyway, why not just use the provided text handling system? In the end, they'll look roughly the same.

Just remember, you might be making a BYOND game, but it doesn't need to look like every other BYOND game.

Agreed. But again, this is only for text output purposes, in a game that requires much more text output than just a simple chat window on the map.
In response to SuperSaiyanGokuX
If you have a lot of text to output, maybe consider reducing it some how. You don't really need to output text for every action that happens for example. I can understand why it's done, but perhaps maybe make a lot of the mundane text simply be represented by an animation in the game? (In a RPG for example, you don't need to have a message output "This person attacks that person" everytime someone attacks, just have an attack animation)

It might be a lot more effort to do things like this, but it's these kind of efforts that can really improve the quality of a game.

If you can't do this, my advice is hide the interface as much as possible.
http://files.byondhome.com/TheMagicMan/winterfacenew.jpg
And
http://files.byondhome.com/TheMagicMan/winterfaceold.jpg
Are the same interface, one is obviously an interface, one is less obviously an interface. Consider trying to hide it like this.
Reducing the text somewhat is possible (and would mostly involve cutting out things like action/event announcements; "So-and-So hit OtherPlayer with a Shovel!" or "PlayerX started stumbling.", etc). However, the game itself, by design, is text-heavy (even after cutting out those sorts of "unnecessary" text outputs).

I'm not sure if you've ever played it, but the general idea is that it hinges greatly on investigation. One among the group is a murderer, whose job it is to kill everyone else before anyone can deduce who he/she is and correctly accuse them (well, that's the idea for Classic mode, anyway)

And the primary tool for investigation is by Examining everything. You examine other players to see not only a description of that player (including physical traits, like shoe size, build, distinguishing features, etc.) but also output for anything special about them (what they're carrying, are their hands bloody, are they wet from walking around outside, etc.). You also examine items dropped on the floor (a bloody weapon might have been discarded; your investigation of it might turn up a colored hair or clothing fiber that matches the person who last carried it), liquid clues left behind (a trail of bloody footprints that will tell you their size; does that size match anyone you've examined?), bodies (that will list their wounds, to match up to a murder weapon type), item spawners (do you know that a Knife was the murder weapon? well, a close look at the Knife Block in the kitchen might turn up hairs or fibers that can point you to whoever may have recently picked up a knife), and so on.

All of this needs to be output in text. Only a very little bit of it could even be represented graphically.

And on top of that, there's a huge amount of atmospheric/set up text in the game (a description of the current map, a description of the current mode, etc.)

So there's really no way to cut the text down to anything that won't require a full text area (and to top it all off, all of the text is HTML formatted, including color-coding of player names to match their chosen room color, size/weight differences to emphasize things, centering, embedded icons/images, etc. etc.

Anyway, it all boils down again to the fact that a large, dedicated text area is necessary. It's just now my goal to better separate out and present player communications from the rest.

But yes, much will be done to make it look less like the usual BYOND interface, my image above is mostly just for layout purposes, with no "shiny" added. I'm likely to tie in the look of the interface elements with the look of the screen-object HUD the game already uses.

(incidentally, from the two images you posted, I'd say that the "old.jpg" version is actually the one that is less interface-y than the "new.jpg" version... Are they named backwards? lol)
SuperSaiyanGokuX wrote:
Perhaps I'll split the right side into two halves horizontally, with the top box being tabbed for "OOC" and "IC" text, and the bottom being for notification outputs? I dunno.

I did this in reverse (top for notifications, bottom for chat) in the newest version of BoD. I liked it quite a bit, and it really did cut down on a substantial amount of clutter. The only problem is making sure they're both a decent enough size to read the content in them.
I've been tinkering with it, and I think I'm getting close to what I want. Still very open to further adjustment (in fact, I'm already working on changing it slightly from these shots)



I further divided the In-game communication tab into horizontal halves. The top half gets in-game player communications, plus all important-but-small game-activity announcements ("X has died!" "Lightning has struck the grounds!" "So-and-so deposited the Red file!" etc.)

The bottom will get all minor activity reports ("X started stumbling" "so-and-so picked up the Knife" "you are currently unable to do this." etc.) All of the kinds of stuff that people don't really need to pay attention to (but I want to keep them as output, just so they're there for reference)

The "OOC chat" tab will remain full-height, with nothing but OOC text output displayed.

These chat panes will retain all messages during the session (well, until they hit the 1000 line limit, which automatically shaves off the oldest lines as they go), and I will have the RoundEnd function output a divider of some kind to each box to show where the cut-off between round is. I considered just emptying them between rounds (well, at least the in-game panes; OOC can stay forever), but then I realized that people (myself included!) might want to go back to read (or even archive) the output from the previous round.

The left box gets all "major" game text, as I've been saying. It is currently set to clear itself with every new message sent to it (so no scrolling, unless the window is sized too small to fit the current message) Login displays the game welcome text, map selection switches it to show the map intro text, round start switches it to show the round description text, etc. Lengthy in-game output (registry checks, examination texts, cluebook output, etc.) will also be sent here. (the latter will likely overfill the box, and cause a need for scrolling, but that's no biggie)

"But wait! What if I want to read the game welcome text or the map intro text or whatnot after it has been replaced in that box???" I've added options to the "Help" menu (click on the Murder Mansion logo at the top center of the HUD to call it up, if you've never seen it) to display these when/if the player wants.

The below is what it looks like during a round-in-progress (with some text in the chat panes, and I've called up the Registry, which has updated the left pane):



I've gone through every output in the game (I call my "TextOutput()" proc 267 different places in the code) to review (and correct or remove as necessary) the outputs themselves, and the "categories" that they've been assigned to. Prior to messing with dividing the text up, I was already using "category" names passed through the universal "TextOutput()" proc to do my formatting. If a message came through with a "prohibited" category, it was formatted into an italicized, small, red font; "communications" are made bold, large font, etc. I've simply hijacked this existing system to also decide to which output pane each message should be sent. But this meant that I had to do a little bit of reorganizing/re-categorizing.

Anyway, I like where it's headed!

My next step, I think, is to further cut down the real-estate given to that bottom portion of the in-game tab. It probably only needs to display the last two or three lines of output, instead of everything.
Could you also link to the raw screenshots, as those are a bit difficult to see.
Thanks.
I could, but I did not save them at full size, as I didn't think the specific detail was important enough to warrant images 200% as large as those...lol (I mostly just intend these to show the general layout; there's no content in any of them that isn't already seen in the game, after all... it's just moved around a bit)

But, here's a few, anyway (that I just took fresh):


http://files.byondhome.com/SuperSaiyanGokuX/skintest5.png

http://files.byondhome.com/SuperSaiyanGokuX/skintest6.png

http://files.byondhome.com/SuperSaiyanGokuX/skintest7.png

http://files.byondhome.com/SuperSaiyanGokuX/skintest8.png

http://files.byondhome.com/SuperSaiyanGokuX/skintest9.png

Those actually portray a series taken during the course of a round; from game start-up/login, through the (artificial) end of a CTF round.
Your screen area needs to have more prominent display of what's going on. A lot of these browsers and tabs can be dropped into the visual display and dropped into over-screen popouts. It's better to hide things that take away from the player's focus until they are explicitly requested by the player.
In response to Ter13
Ter13 wrote:
Your screen area needs to have more prominent display of what's going on. A lot of these browsers and tabs can be dropped into the visual display and dropped into over-screen popouts. It's better to hide things that take away from the player's focus until they are explicitly requested by the player.

Basically, what you're suggesting is making the in-game screen bigger to show more stuff, isn't it? Since the in-game screen needs to be squared (as it was already mentioned), hiding the text areas won't help in making the views bigger. Also, when playing the game, you do notice that the data shown by the game is mostly requested from players at all times (what everyone says, what clues you find, what happens globally, etc.), so I doubt that it really saps at the player's focus when playing the game (not to mention that, at least for people like me, you always have to focus to play a game like Murder Mansion, it's not casual at all xD).

Anyone could argue that the announcement tab could be hidden at some times (even though it wouldn't serve any purpose for the reasons aforementioned), but most of the text output can't be removed from the game either, because they're needed for playing the game efficiently. However, making the output text take less space between lines and finding a good font size that helps fitting more text without making the game unplayable could be the way to go. Perhaps, also an option to change the font size.
That's exactly my main reservation about this; that the map will be "lost" in the middle of all of the stuff.

The problem with trying to move any of it into as-needed windows is that none of it is a good candidate for that sort of thing.

The left box updates very infrequently, and only ever in direct response to a player action, but most of the output going to it is lengthy, and needs to stick around (but out of the way) long enough for a player to read. The output is not something I want popping up in the way, or even in some separate window that could be moved out of the way; it just seems to make more sense to give it its own dedicated space.

The right box mostly contains chat output, which will update very frequently, and the player will likely want to monitor it constantly. (and as I mentioned in an earlier response, something like maptext just won't do; I don't want to lose the HTML formatting or the screen real estate on the map)

The only reasonable part of the output that would make sense to handle through other means is the stuff that goes to that little secondary box under the in-game chat. But what's that gaining me? That little box?

More importantly, though, is that the majority of the text is an important aspect of the game. It's not really a distraction for the action on the map, it's half of the gameplay...lol

But, all that said, I do want to emphasize the map (like I said, I don't want it to drown in a sea of text outputs), so I've reorganized ever-so-slightly to give it the full window height:


http://files.byondhome.com/SuperSaiyanGokuX/skintest10.png
I feel like a jerk now, though. I came asking for feedback, but it seems that I've more-or-less shot down everything offered so far...lol

Sorry, guys.
In response to SuperSaiyanGokuX
One thing I saw you say was you needed a lot of text and the example was you could examine people and see what they were wearing.

Couldn't you just... Make the character look like this in the game? If he's wearing red clothes, make him red? Is there any need to describe in detail what a player can already see?
Small sprites are small.
In response to MisterPerson
They're not that small. In the screenshots provided I can clearly see what colour hair, clothes and even shoes the person is wearing. I can even see his hands and if he had gloves on I could tell.
In response to MisterPerson
MisterPerson wrote:
Small sprites are small.

This, basically.

An example examination output:

"This is Dr. Green from the White room...

-Dr. Green has large sized shoes
-Dr. Green is of above average height
-Dr. Green is of underweight weight
-Dr. Green has the following distinguishing traits:
-A pronounced underbite
-A hunchback"

The only part of that that is represented (or representable!) graphically is the part about what room this person is from (as, of course, their clothing is color-coded)

Granted, many of those lines (the last 5, actually) are really only good for one particular round type, but if I can't ditch this text universally (by replacing it with a purely graphical system), I see no point in ditching it at all.

As for shoe size, that is incredibly important, as any footprints found will report their size. I can't represent this graphically, though, because there is a wide range of shoe sizes (6 or 7?). Impossible to extract that from a 32x32 icon, with 2 pixels or so showing of the tip of a shoe...lol

But in addition, this is only "round beginning" examination output. There are none of the added-on features that come later. "So-and-so has bloody hands" "So-and-so is wet from going outside recently" "So-and-so is carrying a [used?] [item]"

And then, on top of all of that, every attack you suffer generates a wound description (that matches the weapon that you were attacked with, so a player can deduce what the weapon was from this description; knives and other sharp cutting instruments include the word "slashing" in their wound description, scissors and other sharp stabbing instruments use the word "stabbing", rocks and other small blunt objects use "bruising", shovels and other large blunt objects use "bone fracturing", etc, etc.) And absolutely none of this variation could be shown graphically (well, within the on-map icon, anyway)

But beyond just player descriptions (which are the longest, of course) even objects on the map require text descriptions. A dropped object, or an item spawner will pick up clothing fibers and hairs matching the player(s) that touched them, and the text output will include any such clues found.

So perhaps there are certain elements within the descriptions that can be displayed through non-text means, but not nearly enough of it to eliminate the text output entirely. It must remain, but even shortened it won't correct the "distraction" it causes, nor the need to have a place to display it.
In response to SuperSaiyanGokuX
So how about this... When you examine someone, a detailed picture of them appears on screen rather than lots of text?

I'm not talking about a 32x32 sprite, I'm talking huge, detailed picture. I can't find any good examples, but imagine something similar to this http://domo.lotusgoddess.ca/armor/sprite-m/ Costume_FifaYellow.png
In response to The Magic Man
The Magic Man wrote:
So how about this... When you examine someone, a detailed picture of them appears on screen rather than lots of text?

I'm not talking about a 32x32 sprite, I'm talking huge, detailed picture. I can't find any good examples, but imagine something similar to this http://domo.lotusgoddess.ca/armor/sprite-m/ Costume_FifaYellow.png

I'd considered that option (hence the "(well, within the on-map icon, anyway)" disclaimer).

And frankly, I don't want to spend that kind of effort for something I don't truly see as a problem. Especially when doing it for players would also be an incredibly strong case for doing it for everything else (spawners, weapons, etc.) Plus, I don't want to pop-up anything in the player's view, so these images would end up displayed off to the side, anyway, and we're essentially right back to square one of taking their focus off of the map. And ultimately, text is far more precise than anyone could ever draw with even a large representation such as that, or that anyone viewing it could interpret. (again, even at that size, there's not a whole lot of ways to convey a range of shoe sizes; at best you can draw each a few pixels larger than the last; but how is the viewer going to know which was which?)

Of course, adding that little bit of vague-ness and player interpretation might actually be a realistic/good thing, but it's a complication that I don't feel the game really should have. ("hmm, his shoes look sort of big, but not really huge; maybe they're the same size as those footprints I found? I can't tell!"; that makes sense from a real-world perspective, but this added difficulty isn't something I feel the game would necessarily benefit from)
In response to SuperSaiyanGokuX
I take it you've never heard of the expression "a picture is worth a thousand words"?
Page: 1 2