Scripting Variable Items
by Zikara
<< All Articles
|
Print
Overview
This 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.
Prerequisites
In order to fully understand the concepts discussed in the article, you need to know how to use variables, links, and page scripts. It would also be very helpful to understand html, CSS, and javascript coding but it is certainly not necessary. I made this system, and I didn't know anything about these things before I started.Resources
This 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 variables
For 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 interface
This 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 Text
A 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 Links
Now 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):
You can also change the 'Eat Bread' text to something else, like maybe just 'Eat' as it doesn't need to be as specific as when you actually created the link.
The great thing about variable links is that you can created multiple uses for the same item. So you can go ahead and add more links if you want. You could have 'Eat bread' 'throw bread' (which could hit someone in the head if there was a person around), 'Rip bread in half' (which could create two 'chunk of bread' items) or 'Use with' to use it with other items. None of these are really all that practical in a game, but you can make up your own useful actions for the items you have in your game.
Item Image
Now that you have the link and the collapse/expand script in place, you'll probably want a nice little image to appear above the link.Use:
Then just change where it says 'URL' to the web address of the image you want to use, that is uploaded to either CYS or another image hosting website. Also, you can change where it says width and height, but I recommend using 50 pixels as its a good thumbnail size and doesn't get to overbearing on the screen for users trying to play your game.
Tables
There is one more thing you have to deal with when creating the inventory interface for your variable items. When you use the concepts above to create it, you will have a problem with putting the items right next to each other. One item will be automatically placed below the other one, because of the collapse/expand text.To solve this problem, you have to use tables. This can be simple, or complex, depending on how many items the user will ever be carrying at one time.
If they will have from 5-10 max amount of items in their hands at one time, then all you have to do, is put this code at the beginning of the objects scripting (between the Inventory header, and the IF %HASITEM = 1 blah blah blah...):
Then in each part with the code about the individual objects, you need to start them with and at the end of each of these codes, you need to put .
The code for the individual objects should now look like this:
It gets a little more complicated when you have more than about 10 items, because they start to be too long for one line, and stretch the page. You can just leave it if you decide you don't care, but its better for the user if they don't have to scroll over to get to the items they need.
So what you need to do is create a few more variables. These ones are to mark how many of the items before the one you're dealing with are in the user's inventory. So, create the variables BFITEM (for Before Item, or whatever you wanna call them), starting with the sixth item (if you want to have 5 items in each line, if you want 10 in each line, start it at the eleventh item). Now, whenever a link adds to a HASITEM variable, have it add to all the BFITEMs of the items it is before. It can be a lot of work, especially since you have a fair number of variables, but its the only way I know how to do this.
So, say you had the variables for apple, sword, shield, helm, gauntlets, bow, spear, flute, bread, meat, and water. And you wanted them to appear in that order in the inventory. You would create the variables: BFBOW, BFSPEAR, BFFLUTE, BFBREAD, BFMEAT, and BFWATER. And then when you had a link to pick up the sword, you would use link scripts add 1 to the variables HASSWRD, BFBOW, BFSPEAR, BFFLUTE, BFBREAD, BFMEAT and BFWATER.
If, however, you picked up the flute, you would add 1 to the variables HASFLUTE, BFBREAD, BFMEAT and BFWATER only. These also have to be in the same order as how you write them in the global page script.
Once you have all of that, go back to the page script, and starting with the sixth item, write in the following before each item's code:
Then, do the same for all the other object variables, and when you get up to the 11th, 16th, etc. items, then include a second (third, fourth, etc) IF statement that says IF %BFITEM = 10 THEN. Then it should move the items into the next row if you have too many.
At the end of all this, whether you did the simple version or not, then you have to close off the table by using:
Putting it together
Putting all of these concepts together can be a little tricky, as certain things need to go in specific places, and they need to be in the right order. With what I've explained so far, you need to have the first part of the collapse/expand script first. After that comes the inventory header, and then the beginning of the table script. After that, you need the IF statements to check if the user has item 1 in the inventory and if there is need for a new table row. Then, you need the image script so that a small icon appears for the item, and then the rest of the collapse/expand script (with the name of the item in the button value, and the links to the uses for the items inside the script). Then the closing off of the table command for that cell. Then, the same for the other items.Here's an example of what the whole script should look like for an inventory with 11 items (5 on each row):
Setting up the link and page scripts
After the Global page scripts are set up, you need to go into the links and edit the link scripts to do what you actually want them to do.So first, you need to decide what you want each item action to do. For instance, if you have a flute you could play a lullaby which makes you stay on the current page, but with extra text on the page saying you've played the flute, and makes someone drop an item which then appears on the page. You could have a sword, which when you use it to attack, let's you go to another page entirely. Or you could have bread, which you can use with meat to make a sandwich.
Each of those scenarios requires the links scripts to do different things. So lets start with the first.
To get the flute to do what you need, you'll need to make a few more variables. FLHAPPY, FLSAD, and FLLULL (for flute happy, flute sad, and flute lullaby) as well as SWORDOP (sword on page) to indicate that the sword should appear on the page and be able to be picked up.. This will allow you to toggle what action has been used. So you'd edit the 'Play a Lullaby' link script on whatever page you created it on, so that it will set the FLLULL variable to 1. Then, you need to edit the page scripts. You can use either Global Page scripts, for text that should appear the same on every page, or individual page scripts for specific page text.
You can use these scripts to get the text "You play a peaceful lullaby. People slow as they pass and those sitting around appear more drowsy" to appear on every page. And on a specific page with a soldier (that has a sword you need), you could have the text "A nearby soldier falls completely to sleep, letting go of his sword which falls to the ground." And then have the sword available to pick up.
To accomplish this, use these scripts:
Global page script (You would add this in after the Collapse/expand script, but before the Inventory Header):
Individual Page script:
Link script for 'Play a lullaby':
Link Script for 'Sword' (which appears on the page when you play a lullaby):
Global Link script (you need this part so that the effects of the flute will only last for the page you are on):
Using the sword is quite a bit easier, depending on how you want it to work. You can have another variable that indicates whether you are on the correct page, and links you directly to the next page if you use it at the right spot. Or you can have a link on the desired page, that is only activated once the sword is used. (Also, the scripts assume that the page the sword should lead you to is Page 32.)
For the first option, create a SWRDUSE variable. Then have every link script that leads to the page you can use the sword on, to set the SWRDUSE variable to 1.
Link Script (for the sword item's actions):
Page script:
For the Second option, simply have a link on Page 32, that leads to the next page that has a restriction to only appear(or be operational) if the variable %USESWRD equals 1.
Then set the Link script for the sword's action to this:
For the bread, you need to make the variable %UWBREAD (use with bread). When you click on the use with link, you set %UWBREAD to 1, and then have it also set up that one of the links in the meat item only appears when %UWITEM equals 1. Then, that link gives you a sandwich item.
Link script for the bread item:
Global Page script at the part for the meat item:
Link Script for 'Use with Bread':
There are a lot of these sort of things to do, as you have to do them for every single action you have, so if you have several items (each with a couple possible uses) it can really add up fast and take a huge chunk of time. You'll have to change these things so that they fit the items you want to have in your inventory, but hopefully this will allow you to use your items the way you want them to be.
