Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Tutorials and Tips

Reply
 
Thread Tools Display Modes
  #1  
Old 10-24-2017, 07:45 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
 
Join Date: Aug 2016
Location: Maryland, USA
Posts: 381
Gender: Unknown/Other
Credits: 13,717
Dinocanid is on a distinguished road
Default Twine 2 integration

I just tried it out today (thanks to Kesstryl for suggesting!) and I seriously like it.
For those who don't know, Twine is a free, open-source program used to make interactive/non-linear stories. Today, I'm just giving the instructions on how to integrate an exported project with mysidia.

[Warning: This has a weird issue where a pop-up will appear, saying "the code is in a mess". It can be dismissed and doesn't stop you from proceeding with the game, but it's annoying. Any help on how to get rid of it is seriously appreciated!]

-Step 1-
Download Twine 2 from twinery.org. You can possibly use the online version, but I'm unsure how reliable it is in this particular case.

Once you do that, read up on the documentation and go ahead with making your story/game. I recommend making something short and sweet at first before integration, just so you get the hang of it before making anything lengthy.

-Step 2-
Done? Now go ahead and export your story (export should be called "publish"). After that, it should save in the folder of your choice as an html file.
Open it up in a code editor, doesn't it look messy and crowded? Good, because that thing's getting cleaned.

Create a new folder in your root folder (presumably public_html) to hold all of your twine files. I called mine "explore". Inside, you're going to make two new files called twine.css and twine.js.

-Step 2A-
1. Open up the exported html file then cut-paste that huge wall of code between these tags into twine.css (Do not copy the style tags themselves):
Code:
<style title="Twine CSS"></style>
Save it and close it.

2. Now cut-paste all of the code between these two tags into twine.js:
Code:
<script title="Twine engine code" data-main="harlowe"></script>
Same deal, and, again, don't copy the actual script tags.

-Step 3-
Now, inside of any old view file you want to use, paste the remaining code using a $document comment. Like so:
PHP Code:
$document->add(new Comment("
        <script src='/explore/twine.js'></script>
        <tw-story></tw-story>
<tw-storydata name='Blackridge Explore' startnode='1' creator='Twine' creator-version='2.1.3' ifid='E246C9E9-6630-46ED-847D-9305E3F80B59' format='Harlowe' format-version='2.0.1' options='' hidden>
<style>
        tw-sidebar tw-icon.redo {
                display: none;
            }
        tw-sidebar tw-icon.undo {
                display: none;
        }
    </style>
    <script role='script' id='twine-user-script' type='text/twine-javascript'></script>
        <tw-passagedata pid='1' name='Den' tags='' position='757,479.16666666666674'>
            <img src='https://cdn.pixabay.com/photo/2017/09/28/18/22/forest-2796414_960_720.jpg' style='height:400px; width:500px;'>
            You leave the densite and into the open world.
            </br><button type='button' class='btn btn-dark'>[[Head west]]</button>  <button type='button' class='btn btn-dark'>[[Head north]]</button> | [[Head east]]
        </tw-passagedata>
        <tw-passagedata pid='2' name='Head east' tags='' position='970,499.16666666666674'>
            <img src='http://www.rideouts.com/assets/eastgrandview.png' style='height:400px; width:500px;'>
            You head east into the hills. From there, a large lake is visible. While too large to swim across, you can see more of the large open world on the other side.

            You can head down and try fishing, otherwise you might as well [[go back-&gt;Den]].
        </tw-passagedata>
        <tw-passagedata pid='3' name='Head north' tags='' position='764.3333333333334,217.5'>
            You head north. After a few miles you can spot two bodies of water on either side of you from a high hill. You...
            [[Proceed to Dead Lake]] | [[Visit the large pond by the hills]]
        </tw-passagedata>
        <tw-passagedata pid='4' name='Head west' tags='' position='564.3333333333333,490.83333333333337'>
            Double-click this passage to edit it.
        </tw-passagedata>
        <tw-passagedata pid='5' name='Proceed to Dead Lake' tags='' position='570.9999999999999,222.5'>
            To the north of the lake is a tall, looming tree standing on it&#x27;s own. It looks old, but it&#x27;s withstood the weather this long.&lt;/br&gt;
            While not good for fishing, it does have a good amount of frogs.
            You can go frog fishing here, or you can [[go back-&gt;Head north]].
        </tw-passagedata>
        <tw-passagedata pid='6' name='Visit the large pond by the hills' tags='' position='956.6666666666666,224.16666666666666'>
                Double-click this passage to edit it.
        </tw-passagedata>
        </tw-storydata>

        
        "
)); 
(Psst, I replaced the double quotes(") with single quotes('). Your code will break if you don't!)

-Step 4-
Aaaand that's it, you're done! If you didn't notice, I didn't even include the css file we made. That's because I didn't want it in my case, but you can use it if you wish. As far as I know, you'll never need to do step 2 again once finished, no matter how many files you use Twine in; as long as you remember to reference it that is.
What's oh so wonderful about this is you can style it however you want. I've started using bootstrap 4 with mine:
__________________
Reply With Quote
  #2  
Old 10-26-2017, 02:23 PM
Kesstryl's Avatar
Kesstryl Kesstryl is offline
Member
 
Join Date: Feb 2012
Posts: 119
Gender: Female
Credits: 4,638
Kesstryl is on a distinguished road
Default

Glad it worked out for you :)
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 05:16 PM.

Currently Active Users: 189 (2 members and 187 guests)
Threads: 3,893, Posts: 30,992, Members: 15,441
Welcome to our newest members, Anya_BR.
BER





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2017, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636