Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Game UI Panels/Frames
First off, Twine is awesome. I'm loving the simple, visual interface. What a time we live in, when even mongoloids like me can make horrible little CYOA stories and make our friends think we're "programmers!"
I habitually overdesign my creative projects, far beyond my ability to implement/complete. It's a well-known flaw of mine. With my latest, a simple text/story game (I'm in the right place, I know heh), I feel I've partially reigned that in. Almost all of what I've devised I'm confident I can make work (some of it may end up kinda complicated and I'm hoping that experience will reveal more elegant ways to do things). I took some C++ in high school so I'm not 100% untrained about programming logic and functions and commands and variables and such.
The one thing that truly eludes me is UI panels, or shrinking the "text" or "main" frame to sit in the center, and wrap it with readout or control panels for stats, action buttons, inventory, etc. Like how Twine's default is to have a panel on the left side to show the story title and author and such (ideal would be to replace that I think). I understand that making these panels unchanging/consistent across passages while only the main window switches might be A) difficult/impossible,
dangerous, and C) unnecessary. I'm totally okay with just pasting the panels's respective passages in each "location" passage (this might be the only way to do this, I couldn't say).
I see in Sharpe's Action RPG example he has a character stats pane on the right; that would be a good example of the type of thing I'm looking for. But after a few hours of playing with the .tws file I can't identify all the elements of how it's accomplished.
It's pretty important that one of these frames be useful as a button/action bar - it displays something like a table, each space being capable of housing an action button. The button itself doesn't need to be a graphical thing and can just be a simple link. Graphics and stuff, to me, are much more advanced stuff I can worry about later. Mostly I just want to get the UI working before I build too much game content.
Eventually I also want to have a relatively robust inventory system with an array of armor/clothing slots. But I think I can wait to worry about that later.
Thank you all for your hard work and class.
I habitually overdesign my creative projects, far beyond my ability to implement/complete. It's a well-known flaw of mine. With my latest, a simple text/story game (I'm in the right place, I know heh), I feel I've partially reigned that in. Almost all of what I've devised I'm confident I can make work (some of it may end up kinda complicated and I'm hoping that experience will reveal more elegant ways to do things). I took some C++ in high school so I'm not 100% untrained about programming logic and functions and commands and variables and such.
The one thing that truly eludes me is UI panels, or shrinking the "text" or "main" frame to sit in the center, and wrap it with readout or control panels for stats, action buttons, inventory, etc. Like how Twine's default is to have a panel on the left side to show the story title and author and such (ideal would be to replace that I think). I understand that making these panels unchanging/consistent across passages while only the main window switches might be A) difficult/impossible,
dangerous, and C) unnecessary. I'm totally okay with just pasting the panels's respective passages in each "location" passage (this might be the only way to do this, I couldn't say).I see in Sharpe's Action RPG example he has a character stats pane on the right; that would be a good example of the type of thing I'm looking for. But after a few hours of playing with the .tws file I can't identify all the elements of how it's accomplished.
It's pretty important that one of these frames be useful as a button/action bar - it displays something like a table, each space being capable of housing an action button. The button itself doesn't need to be a graphical thing and can just be a simple link. Graphics and stuff, to me, are much more advanced stuff I can worry about later. Mostly I just want to get the UI working before I build too much game content.
Eventually I also want to have a relatively robust inventory system with an array of armor/clothing slots. But I think I can wait to worry about that later.
Thank you all for your hard work and class.
Comments
What I'm trying to accomplish is to put a frame (actually a few) around the text area where I can <<print>> variables for player stats like HP, as well as one on the bottom for buttons/links that perform character actions like attack or go to different locations.
As I said, Sharpe's generic RPG project has pretty much what I want on the right, with the charater's name, stats, xp, equipment, etc. I can see he makes a passage for the code of that pane and then just <<display>>'s that passage in whichever passage he wants the frame to show up in, but I can't see what other elements go into making that frame work. I've guessed the stylesheet is a big factor, but I don't have the knowledge to dissect it.
To emulate his example, let's make a little block on the side that displays stats and armor while the player is in battle. That's the basic battle passage. Let's add our stats passage. So that's our stats passage. We can display it in our attack passage, like so. Now our stats are being displayed in the Battle Passage, but it's just plain text at the bottom of the passage. There isn't a way to style it yet. Now, we have made our span, allowing us to style our stats block. Name the span whatever you want, it doesn't matter much. In the stylesheet, make an id with the same name as our span. I'd recommend reading up on CSS to learn more about what you can do with the stats box. The float: right is important to add in, as it puts the block to the right side of the page instead of below the attack passage. It is also important to make the stats box more narrow. than the passage text, that way it doesn't push the text aside. Other than that, do whatever you want.
This worked absolutely beautifully, thank you. I have several very stylish frames that correctly perform what I wanted them to. I've also built a working AM/PM 12-hour clock run by variables controlled by the story. I even put in a table-based button bar along the bottom that looks great and works. It's all fairly basic compared to what I know could be, but it looks fine and that's all that matters.
The element I was missing was positioning, so I found the "position: fixed" property and everything blossomed from there. Any possibilities for glitches or unpleasantness using that? I couldn't really foresee any.
So, one big question I have is: is there a way to set it so that the frames created by Exile's method are automatically updated anytime you move to a new passage? I found that they don't unless you include the stuff. Since I have 4-5 different custom frames (even worse, one of them uses an html table [the button bar]), that'll get really messy fast.
This post may help you with using them.
That's amazing, makes life so much nicer.
I hope it isn't a big deal to keep bugging you guys because I'm new to this stuff and I'll probably have a lot more issues pop up before my project is finished. I honestly only come here as a last resort, when it's clear I've exhausted my own power to figure it out.
That said, I have two new things:
When using "overflow: scroll," the scrollbar doesn't reset to the top when you move to a new passage. If there are two walls of text in a row, a user will pop into the second one in the middle and that's weird. Is there either: A) A command to reset to the top OR
Second question:
Is it possible to use Twine conditionals and such while inside an html statement?
Example:
I want the user to be able to mouseover their stat numbers to get a short text blurb explaining what they "mean" or "look like," and have the text that appears reflect the player's actual current stat value using variable conditions. So I found the <abbr> command and did this: ...etc etc.
I got it working by switching it around, making the if statements wrap the whole thing and have lots of smaller <abbr> statements within. But that's a bit more messy than I was hoping for. Or maybe it's not really any less messy than otherwise.
But the other thing that struck me was you can't use any simple font html (<b> and such) in the abbr title (the text that hovers on mouseover). Is there a way to make that work?