Inventory Demo

[Nysuatro]

Hey,

I am using the Inventory Demo as reference for a UI I am making. But I am not understanding some stuff.

I understand that you set the type in this code.

var itemData:Object = [
	{type:"armor",asset:2},
	{type:"weapon",asset:3},
	{type:"spell",asset:4},
	{type:"spell",asset:5},
	{type:"wand",asset:6},
	{type:"spell",asset:7,quantity:7},
	{type:"spell",asset:8},
	{type:"spell",asset:9,quantity:3}
];

But in the demo there is an inventoryslot that ahs the value of "Shield" in the "DragEccepTypes" property. But this shieldtype is not in the previous code and I can't find it elsewhere in the code. Where is this shield type code?

My other problem is that I want to prevent that a row of inventoryslots can switch of icons. I tried to set every inventoryslot with there own type. But then I can only move the first 2 inventoryslots to an other row of inventoryslots and the other one not. Here are 2 screens to make it clear.

The goal is to have a row with nodes that I can move to the row above. But The row on the bottom may not interchange nodes.

This first one works.


The last one doesn't.


All the inventoryItems on the top row have the * value.
The bottom row have there own type.

[Matt Doyle]

The 'shield' type does not exist, but was put as an acceptable drag type. You could easily add it, but the demo works without it.

What is happening in that demo is that 8 items are arbitrarily created and stored in the 'itemData' object. Each item has a type (armor, weapon, spell, etc.) and each item has a unique asset number assigned to it (2, 3, ... 9). Some have a quantity. This is done in the 'demoComponents' movieclip timeline.

If you then go into the 'panel' movie clip, you will see the 8 inventory slots. These slots are instances of 'InventorySlot'. You will find this class in the \Development\Flash\CLIK\gfx\controls\ directory. InventorySlot extends DragTarget (found in the same directory). And both make use of DragManager. DragManager is found in the \Development\Flash\CLIK\gfx\managers\ directory. You'll want to load up these class and be sure you understand what they do.

Now, each slot has an instance name of: slotn (slot0, slot1, ... slot8)

In the actions keyframe of this movie clip ('panel'), you can see that a for loop sets the data for each inventory slot arbitrarily based on the contents of the 'itemData' object that was created in the previous (parent) movie clip. This is a hack for the demo. In a live game, you'll want to populate your inventory in a more correct and dynamic way.

for (var i:Number = 0; i<8; i++) {
    this["slot"+i].data = _parent.itemData[i];
}

So, slot0 will hold the 0 element of _parent.itemData - which happens to be asset 2 (type: armor). And slot1 will hold the 1 element of _parent.itemData - which happens to be asset 3 (type: weapon). And so on. This is just an arbitrary way to populate the slots, but the key thing to notice here is the asset #.

If you drill down into any one of the inventoryslot movie clips (slot0 for instance) , then drill down again into the 'icons' movie clip, you will see it has 9 frames. On each frame is an icon for an inventory item. Frame 2 has the armor. Frame 3 has a sword. These frames match up exactly with the 'asset' values. If you recall, asset 2 was type: armor. So, if you wanted to add a shield icon to frame 10, that would mean you would add asset 10 as type: shield to itemData, and of course you would need to change the for loop to test for i<9 instead of i<8. (0 to 9 = 10 total assets)

Checking the dragAcceptTypes parameter in the component inspector for the inventoryslots (slot0, etc.) in this panel, we see they are all set to * - meaning anything can be dragged there.

Go back out to the demoComponents movie clip and this time go into the paper doll inventory window. Checking the component inspector of these InventorySlots (on the paper doll), we see that the top slot allows only armor, and the side slots allow either a weapon and wand or a shield and wand. The bottom slots are instances of ItemSlot, not InventorySlot, and allow only spell or usable. I can change the dragAcceptTypes to * for one of the slots, and I can then drag anything to it.

So - put shortly:

The asset value = the frame # of the icons movie clip, where the image for that asset is stored. (armor, weapon, shield, etc.)
The type value is used to specify whether an inventory slot will accept that asset. (specified by its dragAcceptTypes parameter)

Unfortunately, I don't know what is wrong with your version, as I don't know what your code looks like, or what your Flash file setup is like, but the actual Scaleform Inventory Demo can be modified and works as expected.

[Nysuatro]

Thank you very much for your fast reply. I appreciate this.

It helped

I hope you don't mind I ask some other questions.

I want to make an instance of the icon when I drag one from an inventoryslot
I tried this :

/*slot0_mc.dragBegin = function(){trace("This drag works!!")};

But when I do this, the inventoryslot gets disabled.

Would you mind helping me in the right direction pleas?

[Matt Doyle]

InventorySlot (the class) is a subclass of DragTarget. Inside DragTarget, the function configUI() adds dragBegin and dragEnd as event listeners to these slots. When the event dragBegin occurs, it fires off the function dragBegin() found in DragTarget.

Now, I moved your trace statement inside this function at the bottom, and it worked properly. The trace statement occurs (multiple times however - couldn't tell you why), and the original inventory slot is not disabled. Here is the code from DragTarget as I modified the class. The last command is your trace statement:

private function dragBegin(event:Object):Void {
    if (!allowDrop(event.data)) { return; }
    trackAsMenu = _visible = true;
    gotoAndStop("up");
    gotoAndStop("dragUp");
    trace("This drag works!!");
}

However, you could also put the trace statement inside the onPress() function that lives in InventorySlot, and it will work just as well, and will only fire once.

private function onPress(controllerIdx:Number):Void {
    if (_data == null) { return; }
    Selection.setFocus(this, controllerIdx);
    icons._alpha = 20;
    dragOrigin = true;
    DragManager.instance.startDrag(this, "icons", data, this, icons).gotoAndStop(_data.asset);
    trace("This drag works!!");
    _data = null;
}

So, long story short - you're going to want to modify the class for your needs, rather than trying to do code in the Flash timeline. Otherwise, you're going to break things.

Now - if you comment out the line _data = null in onPress(), you will in fact create an instance after dragging an object to a new slot, because this one line of code in onPress() tells the inventory slot you just dragged from to be made empty, once the function update() executes. Notice in update() it checks the value of _data. If it is null, then it sets that inventory slot (represented by _data) to frame 1, which is the empty icon slot.

//_data = null;

But this is a hack that you don't want to use, as it creates an instance of the object in every inventory slot you drag from infinitely. So you're going to need to figure out how to make it work only in a specific instance - probably with an if statement of some kind.

Take this example 'if' statement I just added to the onPress() function:

private function onPress(controllerIdx:Number):Void {
    if (_data == null) { return; }
    Selection.setFocus(this, controllerIdx);
    icons._alpha = 20;
    dragOrigin = true;
    DragManager.instance.startDrag(this, "icons", data, this, icons).gotoAndStop(_data.asset);
    if (_data.quantity == 1 || _data.quantity == null) {
        _data = null;
    }
    else {
        _data.quantity -= 1;
    }
}

This code checks to see if a dragged item has a quantity of 1 or null. If it does then it clears the data and does not allow an instance to be created. But if the quantity is higher than 1, when you drag the item to a new slot, it will leave behind an instance with a quantity of 1 less than before. The only problem with this code is that it does not give the correct quantity of the new instance that was dropped in another slot, but it illustrates the point I'm making.

What I would do is create a new subclass of InventorySlot - something along the lines of MyInventorySlot. Or I would just modify InventorySlot. Then I would modify it to my hearts content. Any function I wanted to modify from DragTarget (such as dragBegin()) I would override by copying it into my subclass and modifying it there.

[Nysuatro]

Matt Doyle, you are great!

Thanks for the help.

[Matt Doyle]

No problem. Be sure to reread everything I wrote, as I've made considerable edits while investigating your scenario. Also bear in mind that my recommendations may not be the best way to do what you want. You may need to alter other functions instead. I'm just trying to show you how it could be done and how the whole thing is put together.

[CloDel Studios]

Wow, I just read through this, I'm very impressed with your replys Matt. Its nice to see this, I'm just starting to work on my invertory, and I'm going to be much better off after reading this.

[Nysuatro]

A little side question. Does the swf file also also to be like 1024*512 or ... ?

[Matt Doyle]

Any size will work technically with SWFs, but using power of 2 on all images within the SWF is a must.

[Nysuatro]

I hope you don't mind I put all my questions in this topic.

I want to test my UI out in udk, but I am not sure how achieve the "Dead space" result.
In your tutorial you show how to use the swf on a bsp. But how can I achieve it like in dead space ?

Was this just projected on a plane or is there a specific method to do this?
And how did they set focus on the wpf so there is a mouseInput?

Already thanks for your help. I appreciate it.

[Matt Doyle]

You're going to want to look at the 3D inventory tech demo file: GFxProjectedUI.uc for all the 3d rotation stuff - as well as the HUD wrapper class (UTGFxHudWrapper.uc) where the inventory screen is toggled on/off.

In our original tech demo, the player is put into 3rd person mode, and his head follows the inventory selection as you make selections, but it doesn't do that anymore.

I didn't built that tech demo, so I couldn't tell you exactly how that was done, but my best advice to you is to review those script files.

[FlowState]

Well, Matt, not to hijack this thread, but this was the straw that broke the camel's back.
I have officially made a bookmark folder called "Matt's Gems" because I had so many bookmarks of your responses to questions.

I hope you hear this all the time, but just in case you don't, you are doing an incredible job with support in these forums. I have worked with many 3rd party APIs in different game engines, and never have I seen support of this caliber. Thanks again, your responses in this thread could be made into a tutorial by themselves.

When I start working on the UI for my project again, I might just make a video explaining the Inventory demo based on your comments, if that's cool with you.

[Nysuatro]

Is there any reason for hiding the labels and actions layer in a flashfile? And when a file is hidden, is it still exported and read by the compiler?

[Matt Doyle]

By hidden I assume you mean setting a layer to be a guide layer? If so, that layer is not compiled into the SWF file.

[Nysuatro]

No, just pressing on the dot under the eye so if there is content in the layer that it becomes unvisible. I was just checking the flashfiles and noticed some layers were hidden and one of those were an action and label layer. I was wondering of this had any special meaning?

[Matt Doyle]

Oh - no that has no effect on compile.

[Nysuatro]

This is maybe a stupid question, but how do you debug your unrealscriptclasses of gfx ?
I tried to use log and ClientMessage but they give errors.

Edit: looks like 'log works.

Edit2: I want to let my hud be floating above a pawn in third person. is the best way to make a material with the swf and assign it to a plane that I link to the pawn or is there a better method?

[Nysuatro]

I am a bit stuck on this so srry for the double post.

Like you suggested I looked at those classes and I have now written my own class. But I couldnt get the effect what I wanted. Like you can see here.


The problem here is that the UI is always in front of the playercamera while I want that the UI will be above a charackter in front of me. Floating above his head. The good thing is that here the UI gets the mouseinput. So that works well.

I wanted to solve the problem of the UI that has to float above a player. So I tried to assign a material with a rendertotexture2d to a plane. Like you can see here the UI is visible but the colors are gone and there is no mouseinput.



I already edited in kismet the property "Take Focus" and "Capture Input" of the Open GFx Movie node. But nothing happens.

Could you help me a bit pleas ?

[Nysuatro]

Nobody has an idea? I saw that there was a focus node in the previous version of udk. Why is this gone and what do you have to do now?

I hope somebody can help me.

[Matt Doyle]

I'm not familiar with how to do this, otherwise I'd offer some pointers. I do believe that capture input and take focus seem kind of broken in September UDK in Kismet. If you have capture input set to true, that movie will capture input no matter where you are in the level.

I believe the way we did 3D inventory window in the previous builds (window rendered behind player gun) was with some modifications that no longer exist in the new builds. So in order to find out how we did it, I'll need to dig around in an older version. Unfortunately, I don't have the time to do that right now.

I do know you can capture mouse input from UnrealScript as well. Some default properties to consider when doing something like this include:

defaultproperties
{
    bIgnoreMouseInput=FALSE // this determines whether the mouse is captured or not
    bPauseGameWhileActive=TRUE // do you want your game paused when this is open?
    bCaptureInput=TRUE
    bDisplayWithHudOff = TRUE // do you want the HUD displayed while this is open?
}

[Nysuatro]

Ok thank you for your help Matt Doyle.

[Nysuatro]

is there a way I can disable an inventoryslot ? I tried the property _enabled, but this didn't worked. I can still drag and drop from it.

EDIT: nvm, without the _ it worked!

[theycallmepiatt]

its going to sound stupid, but where is the inventory demo located? Is it for scaleform licensees only?

[Matt Doyle]

Do some digging in the /Development/Flash folder. You'll find it.

[theycallmepiatt]

Thanks Matt. Sorry for the insane delay.

I was using flash CS3 and kept getting "unexpected file format" when trying to open up some of those resources. I just upgraded to flash 8 pro, but the same thing is still happening. Does this sound like a compatibility issue or am i missing something?

[Matt Doyle]

Probably because those files are CS4 files.

[theycallmepiatt]

whoops. Alright thanks i'll try to switch to the right version.

[LordNelson7]

How would one go about equipping an item in-game, such as armor, when the icon has been dragged to the slot(armor dragged to armor slot). I have looked the InventoryDemo over and over and can't make out a function that can allow me to do this.

I believe that this code is responsible for making this occur,

dragBtn.onPress = function() {
	this._parent.startDrag();
	// not sure why onMouseUp doesn't work here.
	this.onRelease = this.onReleaseOutside = function() {
		this._parent.stopDrag();
		delete(this.onRelease);
		delete(this.onReleaseOutside);
	}
}

but how can I apply this code so that when armor is in the armor slot, it performs an action that equips armor.
Also, how can this code be referenced by UnrealScript?

[LordNelson7]

Still trying to figure out how to actually equip an item in-game when a button has been populated with an item. Any hints?

[Chosker]

for this stuff to translate to in-game actions you gotta make actionscript communicate with unrealscript (see Matt Doyle's tutorials), and write your own functions so that actionscript is able to call the apropriate unrealscript function for the equipping/unequipping to happen

[LordNelson7]

In inventoryslot.uc(which opens through flash) I see function acceptDrop. I added a trace command to that:

trace("Dropped " + data.type + " (" + data.asset + ") !");

When I drop an item, it is correctly tracing the asset number and type, but i tried to do a ExternalInferface.Call in the function, but it says that it can't find 'call'. I made sure that I put import flash.external.ExternalInterface; on the top, but it doesn't seem to be working. How can this code be referenced by unrealscript? I have looked all over and can't find the answer.

Thanks for all your help.

EDIT: The reason I want a ExternalInferface.Call is so I can call an UnrealScript function and modify armor type that is currently equipped on the player.

[Maxunit]

Heyo guys,

this seems to be a more active topic and Matt Doyle from Scaleform posts here as well.

I'm trying to re-create the "Dead Space Styled" Inventory from the Tech Presentation as well, where I am really totally sure, that it was available in one of the old UDK 2010 Builds. Tried it with the May and June 2010 Builds, no luck so far. I think I will try out all UDK Builds between May 2010 and September 2010, maybe I find a Build, which has the "Dead Space Styled" Inventory working, so that I can re-create it for the UDK Feb 2012 Build and share it here.

If you like to, you can join the "hunt" as well

[Maxunit]

EDIT:

It seems like, that the UI, as it is in the newest Build, is the same as in all the 2010 Builds I tested...where did the "Dead Space" Inventory go?

[LordNelson7]

What would the code that references the drag_ type look like in Unreal? I will keep working on it until I get it, but any help or nudges would be greatly appreciated.

[LordNelson7]

Ok I figured it out, clik type CLIK_drop event is the key. Mr. Doyle how would one go about populating the movie from unrealscript? I will try to figure it out but any hints would be appreciated.

[LordNelson7]

http://forums.epicgames.com/threads/...ile?p=27796332

I believe this link has the answer to my question

[LordNelson7]

I figured out the inventory system. For Anyone trying to create an inventory system with the Inventory Demo, my above posts will guide you to the correct answer. I am now able to populate the Gfx movie's slots based on the inventory of the player(from Unrealscript). I am going to create different tabs in the inventory movie for things such as potions, ingredients, armor, and weapons, so that there is enough space for everything in inventory. I will post a tutorial eventually, and a video of the system on my thread below.

http://forums.epicgames.com/threads/...7#post29971877

[alvarofer0021]

if you manage to get the information of the clicked slot make sure to tell me (:

[bizbanger]

I have question about unrelascript and actionscript2, some projects use very few actionscript, everything is handled with unrealscript (data event etc).
At now I'm developping an inventory and I use actionscript for every event which not communicate with Unrealscript.
For instance Display a characteristic when the mouse rollover an ItemSlot.

actionscript is as well as unrealscipt ?

[LordNelson7]

I will be uploading a video of my inventory and dialogue system soon on my thread in my signature below. I will eventually do tutorials showing how my slot-based inventory system works. I've got the inventory movie successfully populating from Unrealscript, and changing the item type(data) in the inventory movie, and calling an Unrealscript function to perform some action in the game when the system detects that something is placed in a particular slot.