0 votes
by (160 points)
edited by

Hey everyone,

I'm a completely new user of twine and I want to create an adventure game. In the last days, I learned how to create a Day/Time System and now I want to create an inventory and shop system. For this, I use UInv, because of the (sadly not yet complete) documentation. So, I created an inventory tab with the following code:

Your backpack contains <<= UInv.DisplayItemList("inventory", "plural", "nothing", ",", "and", "singular")>>.


In the java section, the item is defined with the following code:

Items.dagger = { type : ["weapon", "stabbing", "1-handed"], singular : "a dagger", plural : "daggers", size : 2, image : "icon_dagger3.png", description : "A small dagger." };

And the Player get the item via:

<<UInv.AddItem("inventory", "dagger")>>


So the result is, that the dagger appears in the inventory tab, but just as text. The image doesn't appear. How do I solve this problem? Is their maybe a more simple system for a Iinventory and shop system with images? I hope this all makes sense for you, as I am a total noob in Twine. ^^

2 Answers

+2 votes
by (44.7k points)
selected by
Best answer

UInv's DisplayItemList() function is only meant to display text, not images.

If you want to display your inventory as images, take a look at the "UInv_Sample_Code.html" file that comes with UInv.  You can import that into Twine and then take a look at its code to see how you can create a table which will display your inventory.  You can use the "Table Builder" in the UInv Help File to design how your table will look, and it will give you the CSS and HTML code needed to add that inventory table to your game.

If you don't want to use the inventory table method, then you could write your own code to display the inventory however you wish.  For example, you can use:

[img["images/" + UInv.GetItemPropertyValue("inventory", "dagger", "image")]]

to display the dagger's image.  If you want to make that work from within Twine as well, then you can add something like this to the top of your JavaScript section:

if (window.hasOwnProperty("storyFormat")) {
	// Change this to the path where your HTML file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Games/MyGame/";  // Running inside Twine application
} else {
	setup.Path = "";  // Running in a browser
setup.SoundPath = setup.Path + "sounds/";
setup.ImagePath = setup.Path + "images/";

(Change "C:/Games/MyGame/" to the path to your game.)

Then, assuming your image is in the "images" subdirectory, you would do this:

[img[setup.ImagePath + UInv.GetItemPropertyValue("inventory", "dagger", "image")]]

and now it should display the dagger image correctly, both when playing it inside Twine and with the published HTML version.

In either this upcoming version or (more likely) the next one I plan to add the ability to add an easy to create shop interface, as the point of UInv is to try to make doing this stuff simple, even for "total noobs".  ;-)

If you have any other questions on how to use UInv in Twine or any more general Twine/SugarCube questions, feel free to ask here any time, as I check this site pretty regularly.

Hope that helps!  :-)

by (160 points)
It worked perfectly, thanks a lot for your help. And thanks for your work with the Guide and everything, it helps a lot. I 'm sure will ask here, if I stuck again :)
0 votes
by (159k points)

one small clarification.

> In the java section..

Java & JavaScript are two unrelated programming languages with unfortunately similar names.

The Twine 2,x application includes a (Story) JavaScript section.

by (160 points)
Good to know, sorry for the mistake. :)