Scripting Variable Items
OverviewThis article discusses the concepts needed to create a dynamic inventory system using variables and other scripting instead of items. It discusses not only ways to create the inventory system, but also ways to enhance it, solve problems that people often have using items, and utilize it to create advanced features not possible with the item system.
The system uses:
- Extensive variables, and variable use.
- HTML formatting and code.
- Collapse/Expand text.
- Main text links.
ResourcesThis material is quite confusing. It involves a lot of things, and so much of it needs to be customized to what you want it to do. Its not a terribly easy system to work with, but it has an endless amount of benefits. I've got two things that you may want to look at to help you figure out the concepts here.
The first is a sort of Test storygame that I made to figure this stuff out. I use it sort of as a reference for the examples in this article so it might be helpful to see what I mean. Not all examples are in this test game, but it still helps out for a lot of them.Link.
The second is a great HTML and CSS code reference site. It explains many good codes that you can use in your story game, some of which is used in this article. It has an amazing feature, as well, where you can test out the html and css (et al) codes to make sure they work without having to see if it works (which is way easier and faster than testing them out in the editor on CYS, because you just click one button instead of several). It only tests html stuff, remember, not things like $PAGETEXT or IF statements, so you'll need to add that stuff in later. Link: Link.
Setting up the variablesFor every item you make, you need to make a HASITEM variable. For instance, if you have a sword, a flute, bread and meat, then you would need to make the variables: HASSWORD, HASFLUTE, HASBREAD, and HASMEAT. Set all of the starting values to 0 unless you want the object to be in the player's inventory from the start of the game (in which case the starting variable would be 1).
Those variables will be used to set whether or not the object will show up in the users inventory.
It might also be a good idea to have an ANYITEM variable, that you add and subtract how many total items you have from it, so that you can get rid of the Inventory Header if you have no items at all. This is optional, though.
Creating a Inventory interfaceThis is where your objects will appear on the page. To create this, you will need to edit the Global Page script.
A basic Inventory interface:
What this means is that there is a horizontal line, then the word 'Inventory' (at a larger size, and centred in the page.) And then another horizontal line.
What it will create is something that looks like this:
If you want the Inventory header to only show up once you have at least one item, then you should put in a conditional statement like this:
You can create more complex inventory interfaces, as well. You could have them coupled with other Player Information, and have the heading say "Player Information" as well. Then have information about, say, the player's health, or age or anything you like.
Collapse/Expand TextA good way to make items, and have them as unobtrusive to the game as possible, is to have a small thumbnail of the object, plus Collapse/Expand text for the options of how to use it. Collapse/Expand text allows for the options to be hidden until a button is pressed, and then they appear. It works really well for this, and makes the use of variable items similar in feel to the items used by the site.
This code is a bit more complex, but try not to get overwhelmed. First off, this needs to be put at the top of the Global Page:
This whole thing just needs to be copy and pasted near the top, and then left alone. All it does is say that there is going to be a script to be run, that when a button is pressed, if the text is collapsed it needs to be expanded, and if it is expanded, it needs to be collapsed.
This next part needs to go where you want your item(under the Inventory Header):
This has a lot of things in it that you need to change to fit what you are doing. First things first: the asterisks around the first 'para1' needs to be changed to & # 3 9, but without the spaces in between. It just automatically would change to a single quote symbol when showed here. And its really important to know that the first para1 needs to be surrounded in that code otherwise the whole thing just won't work.
Second thing: The needs to be changed so that the button says whatever the name of your item is. So if you were making the sword, change it to 'sword'. Or you can have it say something else like 'Use this item' or whatever you feel like.
Third thing: will likely stay the same, but can be changed so that instead of 'none' it says 'block'. This will determine whether the text will be already expanded to show the options when the page is loaded. This probably isn't a good idea for every page, but if you were to have an option where you can use an item with another item (like to use bread with meat, and make a sandwich item) then you may want to have an IF statement inserted here, so that the options on the items will be expanded, and it will be more apparent that another item can be selected. If you wanted this, you could change it to something like:
and then continue on with the rest of the script. (I'll explain the %USEWITH variable later.)
Fourth thing to change: The part that says "This is where your links will go" and well, it needs to be changed to have the code for your links. This part will be explained later, as it is a bit of a process to get the links.
And the very last thing you need to change is that when you create a second item, and for every item after that, you need to change both of the spots where it says para1 to para2,para3, para4, etc. This just tells it which paragraph to show or hide.
Main text LinksNow you'll need to use main text links to put in the options for your items. This is a little bit of an involved process, but it can do so many things.
First, what you are going to do is go to a page and create a link, calling it something close to the action you want to have. Something like "Eat bread". Now, it doesn't matter at all which page you put this link on. I recommend putting them all on one page (the first page) because you later have to navigate to them using 'View this story' and if its at the beginning, you don't have to worry about clicking on all the right links to get to the page where the link you want is. However, it might be less confusing for you if you had it on the page where it should be. Just do whatever makes sense to you.
It also doesn't matter at all where you have this link going to either, so just pick any page.
Now that you have done that, you need to get the code for this link. This is where it gets a bit confusing. What you need to do is go to "My Stuff" and then click on the name of your story and then on "View This Story". Then navigate to the page where the link is on (this is why I put all my links on the first page). Now, don't click the link, you have to be on the page where it shows the link. Now look at the top of the browser window, where it says File, Edit, etc... You'll need to look through those menus for something that is similar to "View Source". It might be in different places for people on different operating systems, or even different browsers, so I don't know specifically where you'll find it, but it'll probably be in a heading like File, or View. Just try to find it.
When you open that up, you'll see a lot of code, you want to scroll down, nearly to the bottom of the page, until you see something that looks like this:
It should be easy to find, because this part of the code has a -lot- of space between the code, whereas the rest of the code is far more compact. So just scroll down until you see a lot of white space.
You will see individual links that are really separated from each other. You need to look for the one that says the name of your link in it somewhere. It should look something like this:
That's what you need. Now, copy that, and put it in the area of the Collapse/Expand part where I said the links go.
Now you'll need to change a few things so that it will actually work.
Because the PAGESCRIPT uses double quotation marks to mark where the added pagetext starts and stops, it gets confused when there are double quotation marks in the script, and won't allow it. So change the double quotation marks (") to single quotation marks (').
You'll also notice that in the original script there are already single quotation marks around FollowLink and 7. The same problem as above occurs with this, so you'll need to change those too. What you need to change them to is & # 3 9, but without the spaces.
So it should look something like this (but again, without the spaces in the & # 39 thing):