The project I’m currently working on is a throwback to the ZX Spectrum and the adventures I loved as a kid. With that in mind I have a particular image in my mind of how I want this to look.
I’ve found the TADS documentation on how to create game content to be second to none. But finding out how to alter the look of your adventures is a bit scarcer and more impenetrable.
I think that for my purposes the Web UI is the way forward for me. Below is an outline of what I want to achieve and I’ve attached a mock up of what I’d like the game to look like. Any assistance, even if just pointing me in the right direction would be greatly appreciated.
I’d like to specify the font used. One of my own creation. Is this possible?
I’d like the interface to be split into 3 sections (see image for more details):
Title bar (static)
Main output window (scrolling)
Input window (scrolling)
I’d like to specify the browser window size and some additional properties like hiding tool bars etc. From previous experience with HTML (a long time ago) I remember being able to do this via a link in a normal browser window and setting some properties in or around the hyper link. Is this still theoretically possible using the Web UI?
It’s definitelly challenging task, but most of it should be doable on web UI. Its hard to tell for sure, because some research would need to be done. Are you familiar with programming and web technologies? Do you want some hints or guidance? Or you feel more you need some complete working example or extension? Well, it is an interesting problem, but I’m completely unsure in what time frame I could put something together :-/
That shouldn’t be too hard. TADS’s web UI is completely open so you can do just about anytning with it. In CSS you can use font-face to download a custom font into the browser and use it. Of course you must follow licensing terms, only some of the fonts downloaded from internet are licensed freely enough for font-face (license must allow distribution of the font to end users by you). Of course when you draw your own font, you are fine. For the font-face it could be in TTF or WOFF format, I thing there are free convertors online which converts from TTF to WOFF. As of support in browsers, take a look on http://caniuse.com/#feat=woff and http://caniuse.com/#feat=ttf.
Just there is one catch, web UI has font configuration dialog which allows user to override the basic styles so for your game you should disable this so user cannot mess with the fonts.
I thing the most complicated part is separating command history from output history, if I understand your mockup correctly.
Should be possible by opening the game into a new window using javascript. However browsers these days tend to prevent opening new windows. You need the exact size of window in pixels so pixels in image and pixels of the font match in the size?
I’m not averse to getting stuck in myself I just found it hard to get a hook at all from the current documentation. Any assistance at all is great.
I never thought about the window being treated as a pop-up. Which, I suppose, it is. Be nice to give a couple of resolutions for someone to choose from but fit to a squarish window like my mock up.
So can you basically put a webpage front page together and from this (using a bit of javascript) point to a particular game file that would launch the game in a window. If I give the user an option to click something before it opens would a browser still class it as a pop up? Not sure.
If I put together a front “launch” page that would also allow me to give users a chance to select a window size.
You got the mock up correct. Separate scrolling area for input and one for displaying.
PS. the font in the mock up is mine. Well when I say mine its based on the spectrum Hobbit game font.
Well there is no specific documentation about hacking web UI, you would need to read comments in the code. But as a start you could look at my chat extension http://tads.cz/en/download for a general idea how to override some of TADS’s js and css files with modified versions. You just need to create webuires folder in your game and put modified files here. Then add webuires folder as a resource. Files placed here will take a precedence over original files in the library. Try it for yourself, take tads.css from an original distribution, copy it in the webuires folder and change some css styling to see how it works.
Maybe you can also look how the frames are created and repositioned when the chat window is opened or closed. Look mainly on initDisplay() function. You would need to create another window besides commandWin. When you type a command it is inserted into the history directly in the browser. Then the command is send to the server and game responds with several responses leading to displaying output. Game server actually sends several events, first close command line event, then text and then open command line. Study the communication over the net in Firebug or similar tool.
You would need to change server processing to send the text output to different window, but close/open command line keep in the commandWin. I’m making it up from memory, maybe details will be little different, you would need to study this into detail.
Btw. the image in your mockup is staticly displayed on the same place as long as you are in the same location? Or is it scrolling with text?
Cheers for the advice. That’s somewhere for me to start.
The image would scroll with text. I may not do an image for each location. I may also do smaller images for various objects within the game. I would need to see how it panned out.
