›

Howdy, Stranger!

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

Sign In Register

Categories

Icon fonts with Harlowe in Twine 2.0.4 + inventory issues

KoalaKoala
edited April 2015 in Help! with 2.0
Hi,

I am trying to develop a short morality game in which the player chooses options that detract or add points to a morality score and a "biz" score. At the end, they see where their morality and business acumen fell.

I'm running into two issues, which I can't seem to find answers for despite looking through the forums.

In lieu of images, I'm trying to use icon fonts from Font Awesome. I was able to add the icons and preview my game from the online version of Twine, but when I published the game, the icons were completely gone. Likewise, trying to add the icon font to the downloaded version of Twine doesn't work.

Here is my code for that:

<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body style="overflow: hidden; height: 100%;">
<center>

<div style="position: relative; top: -150px; overflow:hidden; padding-bottom:-500px;">
<p style="font-family:Trebuchet MS; font-size:70px;line-height:90%;color: green; spacing:-30px;">
Ethics, LLC </p> 
<p style="margin-top:-80px">[[<i class="fa fa-money fa-5x"></i>|Start]]</p>
</div>

It's kind of ugly, but the positioning looks good on preview. When I export the game, the money icon completely disappears, and there's no longer a link to click to progress in the game.

I opened up the .html file in Brackets and added the stylesheet code from Font Awesome to the head of the .html file itself, but that didn't do anything either. I tried to attach the file, but it was too big. If you'd like to see it, I can post a link from Dropbox.

EDIT: I've gotten the webfont issue resolved. Now it's just this!

The other thing I'm having issues with trying to create a morality counter. Here's what I've tried to do without success:

[[Choice|Result]]
(set: $moral to $moral + 1)
(set: $biz to $biz + 1)
[[Choice|Result]]
(set: $moral to $moral - 1)
(set: $biz to $biz + 2)

Ideally, selecting either choice will change the stored variable ($moral or $biz) by adding or subtracting points.

The "Result" page uses print to show the "score" of points for the choices. I'll clean that up eventually, but I want to get the mechanics down first. As-is, when I click on either option, there's no difference in the displays. Do I need separate "Results" pages? Ideally, the game would lead into a cumulative tally of both variables.

In addition to the above, I've also tried:

(set: $biz to ($biz + 2))
(set: $biz to it + 2)

These were ideas I found while searching the forums, but neither seemed to help.

I would like to use the icon font simply due to the hover effects and look of the game. The morality and biz counters are the sole gameplay mechanic. I have attached screenshots of how the icon appears on preview and how it appears from the .html file.

Thanks for your help. It says it in the title, but again, I'm using Twine 2.0.4 with Harlowe. I tried the downloaded version and the web version, and the icon fonts "work" in the web version but disappear after export.

Comments

  • nicolemnicolem
    Regarding webfonts: It might be helpful to take a look at the actual code. Are you loading the file:/// url in your browser? If so, it probably won't let you load the webfont with // for security reasons. Web browsers are pretty big sticklers about that.
  • KoalaKoala
    nicolem, I'm pretty new to webfonts, so I didn't realize that would be an issue. I was going to share the game with just the .html file, but now I realize I need to host it. I uploaded the test.html file onto Philome.la, and the icon font showed up just fine. That explains why the game didn't work from the downloaded version of Twine as well.

    Still frustrated with inventory, but that's at least one issue resolved. Thanks!
  • nicolemnicolem
    Yeah, it's not so much a webfont-specific thing as any asset. if there's no ftp: or https: or http: or whatever:  before your //, it can't work--and worse, file:/// automatically tells your browser to go into "don't load anything from any other domain ever" mode because...well, would YOU want some arbitrary JavaScript on an .html file you'd downloaded to have full read access to your entire hard drive, and the ability to communicate with a server somewhere else? :)

    As for your other issue, does this comment by TheMadExile help?

    The problem with writing "(set: $moral to $moral + 1)" inline is that, from the browser's perspective, the entire page is executed in one go, so it's the same as putting all the "set" stuff up at the very top of the passage. If you use TheMadExile's explanation of Greyelf's code, the value will instead be set at the time you click on the link, but before it forwards you to the subsequent passage. Does that make sense?

    (Note: In the current incarnation of Twine 2/Harlowe, you won't get a nice link line drawn between your passages using this method. That will probably change in future, but for now, no.)
  • DennyDenny
    Here is one way you could do a running tally. Note that the "start" passage is not even seen--it sets the variables and goes straight to the first read passage. Also note $nextPassage is changed as you go along, so that you only need one "results" passage.

    first passage name: start
    (set: $morals to 5)
    (set: $biz to 5)

    (set: $nextPassage to "")

    (goto: "lostPuppy")
    second passage name: lostPuppy
    You find a stray puppy advertised as missing and return it to its owner.

    (link: "You try to collect a reward")[(set: $biz to $biz + 1)[(goto: "results")]]

    (link: "You don't ask for a reward")[(set: $morals to $morals + 1)[(goto: "results")]]

    (set: $nextPassage to "lostKitten")
    third passage name: results
    Your morals are $morals

    Your business is $biz

    (link: "Okay")[(goto: $nextPassage)]
    fourth passage name: lostKitten
    repeat process....


Sign In or Register to comment.