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 online now
Member
 
Join Date: Aug 2016
Location: Maryland, USA
Posts: 494
Gender: Unknown/Other
Credits: 19,313
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.

-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 a new file called twine.css.

-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 you need twine.js, just download the file included in the attachments for this one. I edited it so the pop-up error no longer appears when you load the page, but make sure you exported your story with the Harlowe format!

-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:
Attached Files
File Type: js twine.js (253.9 KB, 5 views)
__________________

Last edited by Dinocanid; 12-31-2017 at 05:22 PM.
Reply With Quote
  #2  
Old 10-26-2017, 02:23 PM
Kesstryl's Avatar
Kesstryl Kesstryl is offline
Member
 
Join Date: Feb 2012
Posts: 120
Gender: Female
Credits: 5,162
Kesstryl is on a distinguished road
Default

Glad it worked out for you :)
Reply With Quote
  #3  
Old 12-31-2017, 05:24 PM
Dinocanid's Avatar
Dinocanid Dinocanid is online now
Member
 
Join Date: Aug 2016
Location: Maryland, USA
Posts: 494
Gender: Unknown/Other
Credits: 19,313
Dinocanid is on a distinguished road
Default

I just updated the OP. Now it includes an attachment for your twine.js file that you should use instead. The difference is that I removed some lines of code, and the annoying "the code is in a mess!" pop-up no longer appears now.
__________________
Reply With Quote
  #4  
Old 01-09-2018, 11:05 AM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: Somerville
Posts: 4,388
Gender: Male
Credits: 123,970
Hall of Famer is on a distinguished road
Default

Its nice integration guide, thanks for posting this.
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
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 01:34 PM.

Currently Active Users: 198 (1 members and 197 guests)
Threads: 3,931, Posts: 31,326, Members: 15,516
Welcome to our newest members, Nicholas Adam.
BER





What's New?

What's Hot?

What's Popular?


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