Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Grids and Dialog and Npc's and stuff...
Okay, so bare with me here
I am trying to write a story that involves quite some narration, NPC's and conversation's with such NPC's (with different options for the player to choose from and to influence the result).
Now, my idea was to have the narrated text in the middle of the passage, as the default text usually is, but have the dialog occur in a separate area of the passage. Sooo, like a small area at the foot of the passage (with a fixed size) where the dialog and the options were displayed. A lot like it's seen in RPG's and such... And then once the conversation is done, the narration continues on the central area of the passage.
Now I've been trying to do this with CSS and a grid, but I'm coming up short . Now, please note that I'm a total newbie at twine, and programming and CSS, and just... life.
This is the code I have on my stylesheet (don't mind the color choice, it's just an experiment, and the code itself is probably terrible):
.areas-wrapper{
display:grid;
grid-template-columns: 100%;
grid-template-rows:80% 20%;
grid-gap: 10px;
grid-template-areas:
"narration"
"dialog";
align-items:center
}
.areas-narration{
grid-area:narration;
background:blue;
padding:10px;
}
.areas-dialog{
grid-area:dialog;
background:red;
padding:10px;
}
My intention was for the dialog area to be always at the bottom of the page (like an actual footer, or even the same way the sidebar has a fixed position), but instead of just appending information, actual things could happen there.
It wouldn't bother me at all also, if, when there isn't dialog happening, if the bar was just there, as long as it remained at the bottom of the page.
Is this possible? Can anyone help me with my terrible coding?
I have some other questions too, slightly related, but I'd be sooo happy with just some help on this....
Thanks!
Oh, and I'm using Twine 2.0 and Sugarcube 2.18
I am trying to write a story that involves quite some narration, NPC's and conversation's with such NPC's (with different options for the player to choose from and to influence the result).
Now, my idea was to have the narrated text in the middle of the passage, as the default text usually is, but have the dialog occur in a separate area of the passage. Sooo, like a small area at the foot of the passage (with a fixed size) where the dialog and the options were displayed. A lot like it's seen in RPG's and such... And then once the conversation is done, the narration continues on the central area of the passage.
Now I've been trying to do this with CSS and a grid, but I'm coming up short . Now, please note that I'm a total newbie at twine, and programming and CSS, and just... life.
This is the code I have on my stylesheet (don't mind the color choice, it's just an experiment, and the code itself is probably terrible):
.areas-wrapper{
display:grid;
grid-template-columns: 100%;
grid-template-rows:80% 20%;
grid-gap: 10px;
grid-template-areas:
"narration"
"dialog";
align-items:center
}
.areas-narration{
grid-area:narration;
background:blue;
padding:10px;
}
.areas-dialog{
grid-area:dialog;
background:red;
padding:10px;
}
My intention was for the dialog area to be always at the bottom of the page (like an actual footer, or even the same way the sidebar has a fixed position), but instead of just appending information, actual things could happen there.
It wouldn't bother me at all also, if, when there isn't dialog happening, if the bar was just there, as long as it remained at the bottom of the page.
Is this possible? Can anyone help me with my terrible coding?
I have some other questions too, slightly related, but I'd be sooo happy with just some help on this....
Thanks!
Oh, and I'm using Twine 2.0 and Sugarcube 2.18
Comments
The main issue with using CSS grid layout (MDN) to achieve what you want is that it is still only a Candidate Recommendation (W3) and it is not fully supported (Can-I-Use) by all web-browsers yet.
If you do want to persist with using it then you may want to read the A Complete Guide to Grid (CSS-Tricks) article which demonstrates much of the functionality.
SugarCube includes two special passages named PassageHeader and PassageFooter which can be used to append common content to the start and end of each passage, and you can use then <<if>> macro to make that content conditional. The Header/Footers and Graphic Overlays thread lightly covers one Author's attempt at doing this.
Another option is to permanently add your own footer area (similar to the side-bar) to the page's layout, the Making a mobile friendly UI - few snags thread lightly covers one Author's attempt at doing this.
If you supply a visual mock-up (image) of how you would like the end result to look then I am sure people here (of on the Q/A site) would be willing to help you achieve it. Remember that people use different devices (desktop -> mobile) to view their web content which in turn means different screen resolutions, you may want to take that into considerations when designing your layout.
I did take a look at the options you showed, and the closest thing I got to what I wanted was using this in the CSS:
I also added this in the JavaScript (unsure if I should):
var story = $("#story"); $('<div id="story-footer"></div>').insertAfter(story); postrender["Display Story Footer Contents"] = function (content, taskName) { setPageElement('story-footer', 'StoryFooter'); };Could you please tell me what I'm doing wrong? Thanks
You'll have to adjust it's size, style and position to fit your story, then add it via javascript:
$('<div id="dialogue-bar"></div>').appendTo(document.body);Adding something like:
Will now display the content of a passage called "Diaolgue" within your newly created element.
You can toggle the visibility of the element on and off too:
<<set document.getElementById("dialogue-bar").style.visibility = "visible">> <<set document.getElementById("dialogue-bar").style.visibility = "hidden">>Can I ask if there's a way to make it as a default 'hidden' and then just call it to 'visible' in certain passages? Instead of having to make sure they're hidden in every other passage?
Thank you so much, really!
In your last example the passage representing your footer should of been named StoryFooter not PassageFooter. You were mixing the two different solutions together.
If you had done that then any TwineScript content you placed in the StoryFooter passage will automatically appear on the page without you needing to manually update it. This is due to the setPageElement('story-footer', 'StoryFooter'); line in your second peice of code.
I'm not sure hat you want here...
<<set document.getElementById("dialogue-bar").style.visibility = "hidden">>That already turns it invisible in every passage, until its made visible once more.
You can alter the "PassageReady" passage to automatically turn the bar visible/invisible in passages with specific tags. Like for example turn it visible in every passage tagged "talk":
<<if tags(passage()).includesAny("talk")>> <<set document.getElementById("dialogue-bar").style.visibility = "visible">> <<else>> <<set document.getElementById("dialogue-bar").style.visibility = "hidden">> <</if>>@greyelf Thanks for your help too. I realize the mistake I did, and I got it to work! This will be a great help in the future!
<<if tags().includes("talk")>>The tags() function defaults to returning the tags of the current passage if no passage is specified, so passing it the return value of passage() is both redundant and inefficient. If you only need to test the array for a single member, <Array>.includes() is more efficient.Just as an FYI. If you ever needed to invert that check—i.e. to test if a tag was not there—you'd do something like the following:
<<if not tags().includes("talk")>>I've been using idling's dialog bar and it's been exactly what I wanted, visually speaking, and it works like wonders.
But now, I was trying to create a conversation between two characters in that area and I've come up with a slight snag...
So with all the code idling suggested, this is what I have in my passage:
Now, this kind of does the job, but I was wondering if certain things were possible:
a) first of all, is this the best way to have dialog follow each other up?
b)instead of the <<timed>> macro, is it possible to have, for example, a button (or a symbol, like an arrow) that replaces the current text with the next line? (i feel like this could get complex and beyond my current capabilities, but I would love anyting that resembles this functionality.)---> I added a picture to better example what I mean.
c)is it possible to have the transition between each line of dialog, be smoother? As it is right now, with my code, with each the whole box disappears and appears again. Can I just replace the text inside?
d)finally, and this is WAY less important, how would I do to have some of the text be align to the right? I've tried and I've tried , but it doesn't work. This is more of a whim of mine, but I'd still like to know if it's possible...
I'd really appreciate any help on any of these things. This forum has yet to disappoint me, so here's me hoping
<<nobr>> <<set $conversation to ["One of the characters speaks.", "Somebody else speaks.", "The conversation comes to an end"]>> <<set $count to 0>> <<replace "#dialogue-bar">> <p align="right"> <span id="content">$conversation[$count]</span> <br> <<button Continue>> <<if $count > $conversation.length - 2>> <<set document.getElementById("dialogue-bar").style.visibility = "hidden">> <<else>> <<set $count += 1>> <<replace "#content">> <span id="content">$conversation[$count]</span> <</replace>> <</if>> <</button>> </p> <</replace>> <</nobr>>I don't know how to combine both...
<<nobr>> <<if $lapass != passage()>> <<set $talk = "Hi, how are you?">> <</if>> <<set $lapass = passage()>> $talk <br> <<switch $talk>> <<case "Hi, how are you?">> <<button "I'm great. How are you?">> <<set $talk = "I'm great too. Wanna hang out?">> <<replace "#dialogue-bar">> <<display "Dialogue">> <</replace>> <</button>> <br> <<button "I'm feeling miserable.">> <<set $talk = "What's wrong?">> <<replace "#dialogue-bar">> <<display "Dialogue">> <</replace>> <</button>> <<case "I'm great too. Wanna hang out?">> <<button "Sure thing.">> <<set $talk = "Let's head to the candy shop then.">> <<replace "#dialogue-bar">> <<display "Dialogue">> <</replace>> <</button>> <br> <<button "Sorry I'm busy.">> <<set $talk = "Aw... Maybe next time then.">> <<replace "#dialogue-bar">> <<display "Dialogue">> <</replace>> <</button>> <<case "What's wrong?">> <<button "I ate too much candy...">> <<set $talk = "Better lay down for a bit then.">> <<replace "#dialogue-bar">> <<display "Dialogue">> <</replace>> <</button>> <</switch>> <</nobr>>In the passage, where you want this stuff to appear you'd then set:
I wasn't familiar with the switch macro, but I'm gonna start using it!
Also, I got it to work, but I don't understand exactly what you did in the first part of the code, with the $lappass:
<<if $lapass != passage()>> <<set $talk = "Hi, how are you?">> <</if>> <<set $lapass = passage()>>If it's not a bother, could you explain it to me? I'd love to understand it. It may come in handy in the future.
That's just to make sure that your dialogue or whatever you want the div to contain doesn't keep resetting to its initial state.
If you just write:
And then follow it up with the rest of the code, pressing any of the buttons would just set $talk back to "Hi, How are you?" and nothing would ever happen. With the <<if>> you make sure that $talk is only set to "Hi, How are you?" the very first time you use <<replace>>.
Also after thinking about it, it probably should be:
Instead of what I wrote initially. Both work basically the same way, but this is probably a little more efficient.
In the meanwhile I've been trying this out and it's working perfectly. I have to combine both options of code you suggested, in order to create strings of conversations with choice making for the player, but it's looking good! thanks again!
Is there a way to customize the appearance of the buttons in css? maybe as an element contained in the dialog area... thanks
button { background-color: black; color: orange; border: solid; border-color: orange; text-align: center; text-decoration: none; } button:hover { background-color: orange; color: black; border-color: orange; }