Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

RPG Character Sheet

2

Comments

  • Is there something I have to do to subrtract two Variables? 

    Example:
    <<set $x = 100">> <<set $y = 100 - $x>>
    <<print $y>>

    [
    ]

    This doesn't work for me for some reason.
  • It could be that you have a quotation mark in the code, but if that's just an error in your example, then I don't know. Also, I ASSume the brackets are mistakes in the example as well.
    <<set $x = 100>>
    <<set $y = 50 - $x>>
    <<print $y>>
    That prints -50.
    <<set $x = 100>>
    <<set $y = $x - 50>>
    <<print $y>>
    That prints 50.
    <<set $x = "100">>
    <<set $y = $x - 50>>
    <<print $y>>
    That also prints 50 (both in Sugarcane and 'Cube), though I kinda thought it might error.

    So, yeah, I dunno.
  • I got to thinking a bit more about your question.
    <<set $x = 100>>
    <<set $y = 50>>
    <<print $x - $y>>
    That prints 50.
    <<set $x = 100>>
    <<set $y = 50>>
    <<set $z = $x - $y>>
    <<print $z>>
    That also prints 50.

    Maybe that's the answer you sought.
  • Sharpe wrote:
    <<set $x = "100">>
    <<set $y = $x - 50>>
    <<print $y>>
    That also prints 50 (both in Sugarcane and 'Cube), though I kinda thought it might error.


    It's not an error (unfortunately).  JavaScript (which underpins Twine headers) is a loosely typed language which employs dynamic type coercion, so the string "100" is coerced into the number 100 for the expression $x - 50.

    I suggest never doing that, however.  Dynamic type coercion actually doing what you want pretty much relies on programmer knowledge and discipline, the run-time will happily do the wrong thing if you aren't careful and such bugs can be difficult to detect.
  • Ah, I see.  Wow, a week ago I knew nothing about programming and now I'm full of partially baked knowledge and making terribly complicated and redundant works of insanity, 

    Sharpe - question about your RPG.  Let's say that for the sake of the story that on the way into town the hero was attack by a specific NPC.  Let's call him Gray Wolf for this example.

    Gray Wolf was hired by nefarious forces seeking to undo the King and was alerted you'd be traveling the road and hired to kill you.

    Now, this fight is not random and Gray Wolf gets two attacks per round, though they aren't very powerful.

    In your very organized setup you have everything running through the Encounter passage and it looks neat as heck whereas mine is a depressing mess.  How would you add scripted encounters to your Encounter?  Could you do it in a way so that you could add any number of them throughout your game or would you make separate encounter routines for each?
  • Wraithbane wrote:
    In your very organized setup


    I think you just gave TheMadExile a brain aneurism. ;)

    Wraithbane wrote:
    How would you add scripted encounters to your Encounter?  Could you do it in a way so that you could add any number of them throughout your game or would you make separate encounter routines for each?


    Wednesday, I plan to release version 0.4, which is a huge improvement over your 0.3 (but still far, far behind my current version). Version 0.4 has spells and endless dungeons with scripted battles and bosses and a bunch of other stuff (but still not one tenth of the current version). It also is loaded with comments in the code. Basically everything is commented. So, if you want to write your own battle, you'l see how to integrate it with the combat matrix. All combat goes through the existing combat code. You might want to wait for that version before getting too heavy into your game. It will be a much better foundation. Actually, it's done, I just want to check it for bugs. I just got home from class and am going to bed.

    As for two attacks per round, that won't be too hard. I can get it into 0.4 if you'd like. Anything else? I have poison in there too, so if the player is poisoned, they lose HP at the start of their turn. Poison also serves as a template for other status inflictions, such as blindness or weakness.

    It's funny how much easier and quicker this is to re-do after already having done it once. ;D
  • Thats amazing!! Thanks man!  I'm psyched - I think I can spend the whole day reading yours once its up. 
  • This might be answered later today when you release your next tutorial version Sharpe.  If it is - just say so and I'll learn from there.


    Is it possible to display data on hover?  Example - my game has strength and dexterity and some other stats.  I want to explain how each stat affects the game play, but I don't want to make a whole page of it.  Can I have it so that when you hover over each stat it displays some data in a pop-out box?
  • Think I found my answer.

    span.dropt {border-bottom: thin dotted; background: #ffeedd;}
    span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
    span.dropt span {position: absolute; left: -9999px;
    margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
    border-style:solid; border-color:black; border-width:1px; z-index: 6;}
    span.dropt:hover span {left: 2%; background: #ffffff;}
    span.dropt span {position: absolute; left: -9999px;
    margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
    border-style:solid; border-color:black; border-width:1px;}
    span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}
    And

    <span class="dropt" title="Title for the pop-up">Hot Zone Text
    <span style="width:500px;">Pop-up text</span>
    </span>
  • I'm thinking out loud in here in case any of this helps anyone else who comes along with these same questions.  Feel free to help if you have an answer.


    My new goal is to have  the ability to hover over a name.  Frank the Orc WarChief.  So you hover over Frank and in the Stat Box (like the one in Sharp's RPG tutorial) an image of Frank replaces the data until you hove no longer.

    I have some code for the hover and display part.

    <span class="dropt" title="Title for the pop-up">Hot Zone Text
    <span><img src="card.jpg"/><br/>
    Caption
    </span>
    </span>
    and I have code for imagine swapping as long as the images are the exact same size.

    span.imgswap {background-image:url("bottom-image.jpg");
    background-repeat: no-repeat; display:block;}
    span.imgswap:hover img {visibility:hidden;}
    and


    <span class="imgswap">
    <img src="top-image.jpg" alt=""/>
    </span>
    I think I'm just missing how to call an area or "box" as a target to replace the location.
  • I've cleaned up the hover code for those using the black background.

    .dropt { background: none;}
    .dropt:hover {text-decoration: none; background: #090808; z-index: 6; }
    .dropt span {position: absolute; left: -9999px;
    margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
    border-style:solid; border-color:black; border-width:1px; z-index: 6;}
    .dropt:hover span {left: 2%; background: black;}
    .dropt span {position: absolute; left: -9999px;
    margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
    border-style:solid; border-color:black; border-width:1px;}
    .dropt:hover span {margin: 20px 0 0 170px; background: black; z-index:6;}
    Here is an example of my line describing Strength in my game.

    <span class="dropt">Strength: <span style="width:500px;">Strength increases your hand to hand damage and determines whether certain paths are open in the game or not.</span></span> <span class="value"><<print $Strength>></span>
  • Showing text when you hover over something is generally known as a Tool-Tip.

    As shown by this article the text to be shown can be stored within a tags title property.
  • Thanks for the link Grayelf.  I checked it out and my problem with that format is that it then LOOKS like a hyperlink and messes up the look of my interface.  I just want it to look normal.  I like the arrow and the clean look to that tooltip though. 


    Any way to make the link not look like a link?
  • Wraithbane wrote:
    Any way to make the link not look like a link?

    You have a number of options:
    NOTE: In HTML5 all tags can have a 'title' attribute even though the browser may not do anything with it.

    :: Start
    Testing tool tips

    <a title="A under-scoreless hyperlink." class="tooltip plain">CSS3 Tooltip</a>

    <a title="A button looking hyperlink." class="tooltip button">CSS3 Tooltip</a>

    <span title="This is using a span." class="tooltip">CSS3 Tooltip</span>
    Style sheet with some different samples

    /* change background to grey to make it easier to see things */
    body {background-color: grey;}

    /* 1. Remove the underscore from all four states of the hyperlink ('a' tag) */
    a.plain:link {text-decoration: none;}
    a.plain:visited {text-decoration: none;}
    a.plain:hover {text-decoration: none;}
    a.plain:active {text-decoration: none;}

    /* 2. Remove underscore and make the hyperlink look like a button. */
    a.button {
    background-color: green;
    color: black;
    padding: 0.5em;
    }
    a.button:link {text-decoration: none;}
    a.button:visited {text-decoration: none;}
    a.button:hover {text-decoration: none;}
    a.button:active {text-decoration: none;}
    The above are only a couple of examples, the possibilities are many. I hope this helps
  • Very cool.  I'll give it a try to see how it looks now.
  • I would use the title attribute on a <span>.
  • New question concerning graphics.

    1.  I am working on a portrait area of my character sheet.  I want the portrait to change based off of options you make throughout the game so is the following possible or is there a better way?

    <<set $portrait = "standard.jpg">>

    Then when they during the course of the game.. lets say they become a werewolf so when they change into a werewolf I have that image replaced by doing the following:


    <<set $portrait = "werewolf.jpg">>



    2.And would that work for gifs?
  • I have done something similar - take a look at this thread

    http://twinery.org/forum/index.php/topic,1594.0.html
  • I'd suggest using imported images. To import, it's under the Story menu at the top. They look like this when imported: [img[img]].

    Add an image property to your player/NPC objects.

    Then, to set:
    <<set $player.port = "[img[img]]">>
    Do that for $monsters and $NPC's as well.

    Stylesheet CSS isn't needed but here is what I use (prints centered, take out margins and use float or text-align if desired):
    span.port > img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    height: 128px;
    width: 128px;
    }
    I have a bunch of CSS like that depending on what I'm printing.

    In passage, do:
    <span id="port"><<print $player.port>></span>
    Or, no CSS:
    <<print $player.port>>
  • Would that work on mouseover also?  Like I could write something like "The dog barks furiously at you."  and wrap that in a gif of a dog barking that pops up when you mouseover?

    I can get this working without using the import image option, but I'd much rather use the import image option so my html file is wrapped up nicely.
  • Ah - that did the opposite.  I want the text visible and the image in the tooltip.
  • You can add a background image to the CSS based tool-tip by adding background-image and background-repeat to the .tooltip:hover:after rule.

    .tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    background-image: url("sample.png");
    background-repeat: no-repeat;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    }
    NOTE: my sample.png image was only 32px square.

    The problem is that you have to hard-wire the background image name because the currently the attr() method used to set the content does not work on images.

    A non working example using attr() to dynamically set image:

    /* first change background-image property in style sheet */
    .tooltip:hover:after {
    .....
    background-image: url(attr(data-image));
    ....
    }

    /% Next change the span tag in passage. %/
    <span class="tooltip" title="Some text to show" data-image="sample.png">This is a span with tool-tip, but dynamic image does not work.</span>

    Maybe one of the CSS guru's knows a fix, other wise you will have to use java-script and i'm not at my dev machine atm.
  • Yeah, but I'd have to add one of those to the stylesheet for each image wouldnt I?  Thatd be nuts! =P  HAHA
  • I've read and tried so many things - I don't think having imported pictures and gifs popup on text mouseover is possible in any format at this point.  I lack the foundation of java it takes to make it myself.
  • If I understand what you want, then something like this should work for you:

    The <span class="tooltip dog">small dog</span> barked furiously at the <span class="tooltip alien">alien monstrosity</span>.

    /* Image tooltips: basic styling */
    .tooltip { border-bottom: 1px dotted #fff; }
    .tooltip:hover { position: relative; }
    .tooltip:hover:after
    {
    position: absolute;
    left: 0;
    top: 110%;
    z-index: 100;
    color: transparent;
    background-color: rgba(0,0,0,0.6);
    border-radius: 5px;
    padding: 5px;
    }
    /* Image tooltips: per-image styling */
    .tooltip.dog:hover:after { content: [img[dog]]; }
    .tooltip.alien:hover:after { content: [img[alien]]; }
    The tooltip will automatically size itself to the image, since they're assigned to the content property.  Just add more images as shown in the two per-image styles.
  • Thanks, TME. I didn't know about the content property. That's really cool. I'm a total novice, but that seems more like the realm of HTML than CSS to me, so I wouldn't have guessed. I would have done like greyelf suggested.
  • Holy wow!! Thats amazing.  Let me tell you guys.. I almost feel like I'm trying to write a book in a language I know nothing about.  Without you guys it'd be : See spot run.  With you guys it'll be a poorly tuned tragedy... but at least its tuned!
  • Okay.. so I have seriously spent the entire day with Sharpe's tutorial. I finally got enough work on it to the point where I am feeling comfortable with the combat concepts and how the layout works.

    My problem is that the content = method of handling positions of things on the page doesn't really give you much room to work.

    So I have a few questions - I realize these are probably out of the realm of people wanting to answer because they probably aren't simple.  That said - it definitely won't get a look unless I ask. 

    1.  I would like to do a layout that would let me have "Good Guys" on the right and "bad guys" on the left.  Up to 2 good guys and up to 4 bad guys.  So anywhere from 1-4.
    Check this screen out.

    undefined

    I looked into iframes and div as an option, but I'm guess if I do that then the area becomes stagnant and won't load variables and such as other screens update.  Any ideas how to do something like this?

    2.  Would this code work for health/mana/xp bars?  http://answers.unity3d.com/questions/31416/my-bar-script-for-healthmanaenergy.html

    3.  Sharpe, does your way of combat work for multiple opponents?

Sign In or Register to comment.