How to Create a Variable Item System

by AzBaz

<< All Articles | Print

Firstly I need to thank Zikara for her original article, which laid the groundwork for this one. She came up with the impressively original idea and script behind it. I've fixed bugs, made it quicker to read through and script, and improved how it all looks. I also have to thank BradinDvorak for giving me the script for the greedy toggle function, which allows players to toggle item description instead of manually closing and opening each one as in the default system.

Text in bold purple indicates what you should swap in your own specific names, descriptions, etc. Moving on to the breakdown:

1) Create a variables 'ANYITEM' and 'ITEMFAIL'. Then create 'HASITEM' variables for each item you want (swapping 'ITEM' for the actual name). If you really want to personalise your game, you can create 'ITEMFAIL' variables for each item and customise what the text says when the player uses an item on a page where it has no effect.

2) Copy and paste this sexy bit of script into your global page:

# BD's Greedy Toggle Function
$PAGETEXT := "<script>function toggleGreedy(a, b) {var e = document.getElementById(a);if (!e) return false;c = document.getElementsByClassName(b || e.className) ||document.getElementsByClassName(e.className);for (i = 0; i < c.length; i++)if (c[i] !== e) c[i].style.display = 'none';e.style.display = e.style.display === 'none' ? 'block' : 'none';return false;}</script>" + $PAGETEXT

# Inventory Heading
IF %ANYITEM >= 1 THEN $PAGETEXT := $PAGETEXT + "<HR><center><font size=4>Inventory</font></center><hr>"

# Buttons
IF %HASITEM1 = 1 THEN $PAGETEXT := $PAGETEXT + "<a href='#' onClick='return toggleGreedy(&quot;para1&quot;, &quot;para&quot;);'><img src='URL HERE' width=60 height=60/></a>" IF %HASITEM2= 1 THEN $PAGETEXT := $PAGETEXT + "<a href='#' onClick='return toggleGreedy(&quot;para2&quot;, &quot;para&quot;);'><img src='URL HERE' width=60 height=60/></a>" IF %HASITEM3 = 1 THEN $PAGETEXT := $PAGETEXT + "<a href='#' onClick='return toggleGreedy(&quot;para3&quot;, &quot;para&quot;);'><img src='URL HERE' width=60 height=60/></a>"

# Descriptions
IF %HASITEM1 = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='para1' class='para' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td width= '150'><a href='#' onClick='return toggleGreedy(&quot;para1&quot;);'><img src='URL' width=100 height=100 /></a></td><td valign='top'><hr><br/><h2>ITEM1 NAME HERE</h2><p>ITEM1 DESCRIPTION HERE<br/></p><p align='center'>ITEM LINKS HERE- DROP, USE ETC</p><br/><hr></td></table></div>"

IF %HASITEM2 = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='para2' class='para' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td width= '150'><a href='#' onClick='return toggleGreedy(&quot;para2&quot;);'><img src='URL' width=100 height=100 /></a></td><td valign='top'><hr><br/><h2>ITEM2 NAME HERE</h2><p>ITEM2 DESCRIPTION HERE<br/></p><p align='center'>ITEM LINK(S) HERE</p><br/><hr></td></table></div>"

IF %HASITEM3 = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='para3' class='para' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td width= '150'><a href='#' onClick='return toggleGreedy(&quot;para3&quot;);'><img src='THUMBNAIL URL HERE' width=100 height=100 /></a></td><td valign='top'><hr><br/><h2>ITEM3 NAME HERE</h2><p>ITEM3 DESCRIPTION HERE<br/></p><p align='center'>ITEM LINK(S) HERE</p><br/><hr></td></table></div>"

This is an example and needs personalising to work. Add thumbnails by replacing 'URL' with the actual URL. I have included 3 trial items into the code, but more can be added as discussed in step 8. Save the script.

3) Create a new page in your story, title it 'LINKS', and set up a link to it from the first page. On the LINKS page, set up links called 'Pick up ITEM' for each item, with the link leading to the page you actually pick up the item. In the link script for each link, copy and paste this:

%HASITEM:= 1
%ANYITEM:= %ANYITEM + 1

4) Open/create a page where you want an item/items to be picked up. Let's call this the "ITEM PICKUP PAGE". I'm going to assume all items can be picked up on the same page because it's easier, but the same steps can be followed for different pages.

Copy and paste this at the bottom of the page:

%%HASITEM1%=%0%<a onclick='PostBack(&#39;FollowLink&#39;,&#39;FIRST NUMBER&#39;);return false;' href='#'><img src='URL' width=75 height=75/></a> %%%%HASITEM2%=%0%<a onclick='PostBack(&#39;FollowLink&#39;,&#39;SECOND NUMBER&#39;);return false;' href='#'><img src='URL' width=75 height=75/></a> %%%%HASITEM3%=%0%<a onclick='PostBack(&#39;FollowLink&#39;,&#39;THIRD NUMBER&#39;);return false;' href='#'><img src='URL' width=75 height=75/></a> %%

Hopefully you know how to use on-page script so you can add more items if you want- just copy and paste.

5) Go into storygame preview, go to the LINKS page, then right click somewhere on the page. Go into 'view source page' like a legit hacker (I've seen Die Hard 4.0, I know what I'm talking about). Press ctrl+F and type in the link description for your first item's 'pick up ITEM' link. You should now be looking at something like this:

<a onclick="PostBack(&#39;FollowLink&#39;,&#39;631&#39;);return false;" href="#">Pick up ITEM</a>

That number in purple will be different for you. Copy whatever it is- 631 in this case. Go back into the ITEM PICKUP PAGE and paste that to replace 'NUMBER' in the corresponding item on-page script. Repeat for each item. While they don't have pictures yet, you can now pick up items in the viewer and toggle them in the inventory. Huzzah.

6) Now we want 'USE ITEM' links, so make a link for each item on the LINKS page (doesn't matter where it links to, pick any old page). Type into the link description: 'Use ITEM'.

7) In the page scripts of pages you can use an item on, copy and paste:

IF %ITEMFAIL = 1 THEN BEGIN %ITEMFAIL:= 0

$PAGETEXT := $PAGETEXT + "You can't use that here mate- try using your noggin, not this item." END

You can change the message, even more so if using more than one ITEMFAIL variable. This method may give weird results if you use the $PAGETEXT variable for other stuff on the same page, so you can choose to have separate pages for the item failure message. In that case you'll have to use page recall as explained in this article.

Again, go into the story viewer--->LINKS page--->right click--->View page source. ctrl+F and type in the use item link description, copy the whole line of code this time (looks something like this: <a onclick="PostBack(&#39;FollowLink&#39;,&#39;661&#39;);return false;" href="#">Use ITEM</a>), go to the global page and paste to replace where the respective 'ITEM LINK(S) HERE' is. Then change all the double quotation marks (") in that line of script to single ones ('). If you ever get an error message saying the script is incorrect, it's likely you haven't swapped the quotes.

You can now use items! You can create 'drop item' links etc. in a similar way (putting in the link script: %HASITEM:= 0). If you do put in drop links, you might need to think about subtracting from the %ANYITEM variable if you use it for anything other than what's covered in this article (e.g: if in your story you script an 'IF' statement leading to different destinations depending on how many items the player has).

8) Almost there! Now you just have to repeat for each new item added (gets a lot easier once you have all their links and all the script in the global page). Each new item needs its own button, as seen in stage 2. This is the general formula:

IF %HASITEM = 1 THEN $PAGETEXT := $PAGETEXT + "<a href='#' onClick='return toggleGreedy(&quot;paraNUMBER&quot;, &quot;para&quot;);'><img src='URL HERE' width=60 height=60/></a>"

BUT, you need to change the 'NUMBER' to correspond to one above the previous 'NUMBER', so it goes 'para1, para2, para3...' and so on for the button scripts in ITEM1, ITEM2, and ITEM3... etc. I've already done this for the first three, but you need to continue doing this if you want to add items.

Next, copy and paste a description script for the added item. General formula is:

IF %HASITEM = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='paraNUMBER' class='para' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td width= '150'><a href='#' onClick='return toggleGreedy(&quot;paraNUMBER&quot;);'><img src='URL' width=100 height=100 /></a></td><td valign='top'><hr><br/><h2>ITEM NAME HERE</h2><p>ITEM DESCRIPTION HERE<br/></p><p align='center'>ITEM LINKS HERE- DROP, USE ETC</p><br/><hr></td></table></div>"

Again, change the NUMBER so it matches the number for the button of that item; this time there are two "para"s you need to change.

Of course, make 'use' and 'pick up' links as shown above for each new item and add link scripts, as well as 'USE' and 'HAS' variables. Also, new items need the on-page script mentioned before on the 'ITEM PICKUP PAGE'. You can copy and paste the on-page script from one other item and just change the link number as discussed previously.

9) Now we can add item effects that can be activated by clicking the 'use' link on specific pages. Go into the LINKS page, go into a 'use ITEM' link script, and copy and paste this:

IF $PAGEID = ID OF PAGE YOU USE ITEM THEN
$DEST:= @PID OF PAGE USING ITEM LEADS TO
ELSE IF $PAGEID = SECOND ID OF PAGE YOU USE ITEM THEN
$DEST:= @PSECOND ID OF PAGE USING ITEM LEADS TO
ELSE
BEGIN
$DEST:= @NONE
%ITEMFAIL:= 1
END

Make sure you type in page ID numbers only, not the little '#' next to them in the editor. From now on, anytime you want to add a new item effect, just copy and paste one of those 'ELSE IF' statements above and alter the numbers as prompted.

10) Done! It's long winded to set up, but quick to add effects for items. I think it's worth it because you can do loads of cool stuff with this system if you put in the time and have the creativity, like set up combine item links or block item use/descriptions until players have set off certain variables.