MudBytes
» MUDBytes Community » Game Creation » Client Development » Full Web GUI Concept (to Real...
Pages: << prev 1, 2, 3 next >>
Full Web GUI Concept (to Reality?)
plamzi
Wizard






Group: Members
Posts: 1,026
Joined: Nov 10, 2010

Go to the bottom of the page Go to the top of the page
#1 id:52752 Posted Dec 15, 2010, 2:22 pm

I recently learned that Flash ActionScript3 offers a telnet socket layer, which some people are already using to build MUD clients. I've made a small Flash telnet object with a text UI in HTML+JavaScript but I'm now toying with the idea of building a full-blown GUI. The idea is for it to visualize most in-game events in my MUD and to make most in-game actions possible without typing.

This would be a massive project, and before deciding whether to undertake it, I'm going to create a series of mockups, which I'd like to share here and get some feedback on. The format of the following mockup is that of a Facebook app. Comments and suggestions welcome.

http://bedlam.gotdns.com:8088/demo/bam1.png
.........................
The MUD Portal, Bedlam for iPhone, Web & Telnet, MUDMaster for iPhone

quixadhal
Wizard






Group: Members
Posts: 2,591
Joined: Oct 17, 2007

Go to the bottom of the page Go to the top of the page
#2 id:52754 Posted Dec 15, 2010, 3:01 pm

To me, you have now crossed the line from text MUD to arbitrary web-based fantasy game.  Anything that looks like the picture above is not a MUD, in my mind.

Part of what makes a MUD a MUD (to me!), is the fact that it feels like an interactive novel.  You are using your own mind to turn the textual descriptions of things and events into images.  Moving things like maps, health bars, even inventory to a pointy-click system doesn't change the way the game presents itself.  Moving characters, NPC's, and rooms to graphics does, because it removes my ability to imagine what things look like.

In the above, perhaps my imagination would have provided me with a picture of a massive stone tunnel, large enough to drive a truck through, with hints of carvings and statues just at the edges of my torch's light.  But, by putting a little graphic there, I now have to use the image of the narrow one-person-wide tunnel, hewn roughly through the rock for access and nothing more.  Likewise, in my mind, a troll might be a much larger thing than an orc, but since you show a character model, I have to believe the orc is larger, and the hobgoblin is also almost as large.

Now, I'm not saying this is necessarily a bad thing... but to me, it moves your game out of the field of MUD's and firmly into the field of web-based games.
.........................
https://lh3.googleusercontent.com/-vYoSYr4luwg/UdpJ_fYLt8I/AAAAAAAAAUw/B-8sQAoGOtA/s800/MUDBYTES_zps028f0a68.gifhttps://lh5.googleusercontent.com/-S1rE61rTCMM/UdrboSwRJsI/AAAAAAAAAYI/MVUkOP_baKs/s800/kool-aid_zpsf0068bff.png

Runter
Wizard






Group: Developer
Posts: 3,409
Joined: Jun 1, 2006

Go to the bottom of the page Go to the top of the page
#3 id:52755 Posted Dec 15, 2010, 3:12 pm

Yawn.  Here we go again.  Keep up the good work on your mud.

plamzi
Wizard






Group: Members
Posts: 1,026
Joined: Nov 10, 2010

Go to the bottom of the page Go to the top of the page
#4 id:52756 Posted Dec 15, 2010, 4:09 pm


quixadhal said:
To me, you have now crossed the line from text MUD to arbitrary web-based fantasy game.  Anything that looks like the picture above is not a MUD, in my mind.


I'd like to focus the discussion on how to make the GUI concept better, what people here think will and won't work, etc. Honestly, I'm really not concerned about definitions and I'm okay with crossing any number of arbitrary lines if it introduces new players to the world of mudding. The target audience for a Facebook app would be all of its users, most of whom are unlikely to have heard such words as MUD and telnet. I happen to disagree with your viewpoint but we can have a separate discussion about text, image, and the imagination.

Runter said:
Yawn.  Here we go again.  Keep up the good work on your mud.


Hmm, if something specific about my GUI concept made you yawn, please let me know and I'll definitely change it. This concept has to excite or else I should probably pick another project...
.........................
The MUD Portal, Bedlam for iPhone, Web & Telnet, MUDMaster for iPhone

Runter
Wizard






Group: Developer
Posts: 3,409
Joined: Jun 1, 2006

Go to the bottom of the page Go to the top of the page
#5 id:52757 Posted Dec 15, 2010, 5:16 pm

No.  I was responding to Quix.  I think your interface looks modern and functional.  I myself am working on a mmo.  I'm interested in the specific technologies and libraries you're using.

lockewarrior
Apprentice






Group: Members
Posts: 40
Joined: Jan 23, 2010

Go to the bottom of the page Go to the top of the page
#6 id:52758 Posted Dec 15, 2010, 8:20 pm

You ever get to such an advanced level with a system that you start to forget the basics? Take message forums, some people get so good at making posts they forget how to read them.

On topic, I think this looks pretty good. In this example, the area where it lists party members would 'cycle' or 'scroll' left/right to show other party members, assuming there are more than two people in the party? For something like this I would offer one suggestion, which is allowing people to toggle between plain-test/graphic displays for various options. Your interface looks pretty clean and I think any way you allow people to move it or customise it will potentially open it up to a greater number of users.

For example, instead of showing graphics for all party members, maybe allow the user to display party members as a list and use the space it frees up for something else? This reminded me of Realms of Kaos (http://www.realmsofkaos.com).

P.S. Realms of Kaos is classified as a text-based MMO, though I remember finding it on a mud listing resource in 1999. TBH, I wouldn't waste time trying to properly classify your projects. It's all pretty subjective anyway.

lockewarrior
Apprentice






Group: Members
Posts: 40
Joined: Jan 23, 2010

Go to the bottom of the page Go to the top of the page
#7 id:52759 Posted Dec 15, 2010, 8:28 pm

Spelling correction: Plain-text, not plain-test.

I just want to explain what I meant about 'customisable' GUI. It looks like you have some 'panel' type system on a grid.. I meant possibly allowing users to move panels around and restructure they layout as they prefer. Of course, to be of any real use, you'd need to implement a way to allow them to save those changes, though that should be fairly easy.

Best of luck with this, keep us updated! :]

Idealiad
Wizard




Group: Members
Posts: 919
Joined: Jan 28, 2007

Go to the bottom of the page Go to the top of the page
#8 id:52762 Posted Dec 15, 2010, 9:33 pm

I think it's not necessary to always display eq and inventory items; maybe put those in slide out panels with a slight transparency, this would free up space for event and chat messages.

plamzi
Wizard






Group: Members
Posts: 1,026
Joined: Nov 10, 2010

Go to the bottom of the page Go to the top of the page
#9 id:52763 Posted Dec 15, 2010, 11:31 pm

Thanks for the ideas, fellas.

lockewarrior said:
For something like this I would offer one suggestion, which is allowing people to toggle between plain-text/graphic displays for various options... For example, instead of showing graphics for all party members, maybe allow the user to display party members as a list and use the space it frees up for something else? This reminded me of Realms of Kaos (http://www.realmsofkaos.com).


Maybe both mobiles and players in the room can auto-collapse into smaller panels (like the ones seen in Reams of Kaos screens) based on how many there are in the room? After all, the icons are just placeholders for users to drop stuff into; the only reason I'm showing them this large is to increase the visual appeal.

Idealiad said:
I think it's not necessary to always display eq and inventory items; maybe put those in slide out panels with a slight transparency, this would free up space for event and chat messages.


I think the easiest may be if worn and inventory could collapse into single rows, and the area they free up can get filled by whichever text window is underneath them. I just have to make sure that there's a way to have both expanded for easy manipulation such as picking up items from ground, quaffing during battle, equipping stuff on the go, etc.

lockewarrior said:
It looks like you have some 'panel' type system on a grid.. I meant possibly allowing users to move panels around and restructure they layout as they prefer. Of course, to be of any real use, you'd need to implement a way to allow them to save those changes, though that should be fairly easy.


I think it will be possible to let the user move modules around. Letting them resize stuff, however, is going to be extremely tricky. I'd probably have to come up with a minimized and maximized state for each element and only let them toggle between the two. That will also make saving the layout a whole lot easier.

Runter said:
I myself am working on a mmo.  I'm interested in the specific technologies and libraries you're using.


The telnet layer would be a small Flash ActionScript piece I wrote a few days back, which sits invisible on the page and passes info to/from the JavaScript. The UI would be built using jQuery + jQuery UI. In parallel with game authentication, users will also be authenticated into a MySQL server, which can host their app prefs.

I haven't decided yet what format the information coming from the server will be in. JSON will make parsing super-easy on the client side so it's the best candidate for me (but I'm also ok with regex processing similar to what I did for the iPhone app). Whatever it is, it would have to use the regular telnet SEND because the Flash AS3 piece is pretty basic.
.........................
The MUD Portal, Bedlam for iPhone, Web & Telnet, MUDMaster for iPhone

quixadhal
Wizard






Group: Members
Posts: 2,591
Joined: Oct 17, 2007

Go to the bottom of the page Go to the top of the page
#10 id:52772 Posted Dec 16, 2010, 6:56 pm

plamzi said:

I'd like to focus the discussion on how to make the GUI concept better, what people here think will and won't work, etc. Honestly, I'm really not concerned about definitions and I'm okay with crossing any number of arbitrary lines if it introduces new players to the world of mudding. The target audience for a Facebook app would be all of its users, most of whom are unlikely to have heard such words as MUD and telnet. I happen to disagree with your viewpoint but we can have a separate discussion about text, image, and the imagination.


My statement wasn't about definitions... it's about perception.  You say you want to "introduce new players to the world of mudding".  How is a fully graphical UI where text serves only to provide a chat interface, a place to type commands, and a few incidental messages about events (which could easily be replaced by graphical events), in ANY way, introduce players to the world of mudding?  It's a bit like claiming that watching a movie helps people enjoy reading novels.

But, as I said, that's not necessarily a bad thing, just not MUD-like.

As for GUI improvements.... I would replace what you have shown there in "events" with graphical depictions overlayed on the character models in question.  I would also rearrange your movement keys to a more traditional layout of "down north up, west south east", so they map more like what most keyboards use.

If you're using a widget toolkit that lets you snap things onto edges (IE: the enemy pane snaps to the right edge of the screen, and the bottom edge of the minimap), you might want to try to allow players to shift them around, but not resize them directly.  By that, I mean the graphical elements should probably stay fixed in scale, but the text elements and the multi-slot elements (inventory) could adjust to fill space as needed.

I would also try to store all the layout and preference data on the server, if you can.  Cache it locally for the browser/app, but if it's on the server, people can play from anywhere and not have to waste time reconfiguring everything.

I also heartily agree with the choice of JSON for data transport to and from the client.  It's very simple and does all the good things XML was meant to do, but without the 900lb gorilla bashing your skull with rocks. :)

Good luck!
.........................
https://lh3.googleusercontent.com/-vYoSYr4luwg/UdpJ_fYLt8I/AAAAAAAAAUw/B-8sQAoGOtA/s800/MUDBYTES_zps028f0a68.gifhttps://lh5.googleusercontent.com/-S1rE61rTCMM/UdrboSwRJsI/AAAAAAAAAYI/MVUkOP_baKs/s800/kool-aid_zpsf0068bff.png

plamzi
Wizard






Group: Members
Posts: 1,026
Joined: Nov 10, 2010

Go to the bottom of the page Go to the top of the page
#11 id:52774 Posted Dec 17, 2010, 4:41 am

quixadhal said:

My statement wasn't about definitions... it's about perception. 


Your perception has everything to do with a very narrow definition of a MUD which, as I understand it, has to do with whether there are any distracting pictures in the proximity of your telnet window. Any camp has its purists, who will fight for 'keeping things real' with or without having a clear sense of what that real is exactly. Your view seems to be that some kind of line separates MUDs from everything else under the sun, so any beast calling itself a 'graphical MUD' should be asked politely to pick sides. With this mindset, 'graphical novels' or any other hybrid genre, can be endlessly and rigorously examined for which side of the line they're *really* on... Some may find pleasure in policing boundaries, but not I. If it's okay with you, I'll keep calling this project a MUD GUI for mudding.

quixadhal said:

You say you want to "introduce new players to the world of mudding".  How is a fully graphical UI where text serves only to provide a chat interface, a place to type commands, and a few incidental messages about events (which could easily be replaced by graphical events), in ANY way, introduce players to the world of mudding?  It's a bit like claiming that watching a movie helps people enjoy reading novels.


Just yesterday, a player who had been using my iPhone GUI to play the game asked me about telnet. He was not turned off when I told him it would be all text. Next, he will most likely find out that there's a world of game servers out there of which mine is only one. Maybe he'll come and play your MUD. Having experienced this dozens of times, I can assure you that a GUI does introduce players to the world of mudding. In fact, it is much better at such introductions than pretty much any other weapon we have in our arsenal.

Some people enjoy both movies and novels, and if they see a good movie based on a book, they're likely to pick up the book as well. Some people would never have picked up a book had they not seen a movie first. Hard to believe, but it's true, in that it happens a million times a day. That said, comparing a static GUI with a movie (which has moving pictures, music, sound effects) is misleading. In my mind, the GUI I'm fleshing out is one shade away from a telnet client and 99 shades away from World of Warcraft. I suspect you think the opposite is the case but we'll just have to agree to disagree.

quixadhal said:

You are using your own mind to turn the textual descriptions of things and events into images.


It was a long time ago for most of us, and we've probably forgotten that the first books we read were mostly pictures. They introduced us to a world of images which, together with our own subsequent experiences, form food for the imagination. Without a strong foundation of images absorbed from the outside world, the imagination is a beggar.

When you say you'd rather let your own mind turn textual descriptions into images, what you're really saying is that you're intentionally depriving your senses of direct stimulation so that they can create an amalgam of images based on all you've already seen. That's a great experience for those who have accumulated enough images and experiences and have confidence in their own ability to 'compose' on the fly based on indirect stimulation. But make no mistake--your imagination is mostly not yours.

And then there's those who would always prefer more direct visual stimulation. We could judge them, or we could try to lure them in. Because to me, a MUD is much more than a streaming text adventure. It's more about player interactions and player contributions to a complex virtual environment than it is about how wide you imagine a tunnel to be.
.........................
The MUD Portal, Bedlam for iPhone, Web & Telnet, MUDMaster for iPhone

Ssolvarain
Wizard




Group: Members
Posts: 863
Joined: Nov 14, 2008

Go to the bottom of the page Go to the top of the page
#12 id:52776 Posted Dec 17, 2010, 1:39 pm

I believe this type of thing has been accomplished already, though it has no multiplayer.

Monster's Den: Book of Evil
.........................
Slacker - End of Time

asave world
You saved the world.

Runter
Wizard






Group: Developer
Posts: 3,409
Joined: Jun 1, 2006

Go to the bottom of the page Go to the top of the page
#13 id:52777 Posted Dec 17, 2010, 1:46 pm

Monster den is pretty fun but really no depth. 

lockewarrior
Apprentice






Group: Members
Posts: 40
Joined: Jan 23, 2010

Go to the bottom of the page Go to the top of the page
#14 id:52778 Posted Dec 17, 2010, 1:51 pm

@Plamzi: Nice, that works too! Toggle/states would probably work well, though Realms of Kaos uses an actual resize function (VB). I think even JQuery UI provides resizing functionality. It might require a little extra care designing your UI but in my opinion its probably worth it.

I'm pretty sure Realms of Kaos is what turned me on to MUDs seriously in the first place. I had played with LambdaMOO and such way back but got pulled away from that realm to a place they call reality for an awfully long time. I discovered Realms of Kaos through a friend and fell in love with the client. The graphical user interface was clean and functional, though it could definitely be improved on. The problem was the game. I was inspired to write my own game (after RoK), which led back into the newer, more modern world of MUDs.




Ha, you are suck! Your work is terrible! Let me now away - that I should profit from your labor while slandering your name!
-People You (Don't) Know On the Internet

plamzi
Wizard






Group: Members
Posts: 1,026
Joined: Nov 10, 2010

Go to the bottom of the page Go to the top of the page
#15 id:52816 Posted Dec 18, 2010, 5:50 pm

Here's Mockup #2. What's new/changed:

* condensed player icons (based on feedback). mobiles can collapse in a similar way if too many in room.
* reversed position of mobs/room, players/inventory. that way location falls under minimap and the overall weight of attention is shifted to the right (based on feedback)
* added a "text-only mode" button to top menu that will let users access a large telnet-like window (based on feedback)
* added a "forum" button to top menu

Quick note: The empty spaces next to the focus mobile are for special options like quests, shop menu, banking, etc. that some mobiles will enable. The empty spaces next to the player icon are most likely going to be used for favorites.

http://bedlam.gotdns.com:8088/demo/bam2.png
.........................
The MUD Portal, Bedlam for iPhone, Web & Telnet, MUDMaster for iPhone

Pages:<< prev 1, 2, 3 next >>