Doing a Grid Based Inventory

[PeterD23]

Hey all,
So as part of the project idea I've had I was wanting to make a grid inventory system like in Resident Evil 4 or Deus Ex but I'm honestly not sure I'm smart enough to do this, one of the major issues I've run into with Godot is that it can't do typed 2D Arrays, so changing the existing InventoryPD class to use two dimensions instead of one seems to be impossible. I tried with a Dictionary but Dictionaries in the editor dont appear to support resources, and I wasn't able to find a way to prefill the dictionary with empty values.

Has anyone tackled grid based inventories in projects before? I'm kinda really struggling with this.

[Phazorknight]

yeah... missing multi-dimensional arrays definitely caused me a headache here and there in Godot.

I'm just thinking out loud here, but if all your items are at least rectangular in their shape they'd on the grid (no tetris blocks, more like battleship), then you could just add a Vector2 property to an item that stores its size.

Something like:

required_space : Vector2 = Vector2(4,2)

would be equal to:

XXXX
XXXX

And in your "suitcase", extrapolate if an item fits by checking the empty slots around a clicked slot and compare that to the space requirements of an item.

(sorry for accidentally closing this discussion 😇 )

[PeterD23]

Yeah, I think having the objects being rectangles would be much easier than custom shapes. I saw an interesting thread where someone treated a 1D array as a 2D one by referencing indexes based on the width and height so I gave that a try. I added a Vector2 to the InventoryItemPD base class, as well as an "origin" index for the slot, so that by clicking on one of the occupied slots to move the item it should in theory clear out all the slots it occupies:

func null_out_slots(slot_data):
	var item = slot_data.inventory_item
	for x in range(0, item.size.x-1):
		for y in range(0, item.size.y-1):
			inventory_slots[slot_data.origin_index + x + (y*inventory_size.x)] = null

The main issues now seem to be having all occupied slots highlight when the user mouses over, scaling up the icons so they cover multiple slots, and being able to set a new origin point based on where the user clicks.

[ac-arcana]

Phasorknight, I remember discussing this with you a little before and you seemed interested in making it more modular so a third party inventory system could optionally be used

Perhaps instead of overhauling the current system we could make a framework of some kind so that a system like GLoot is compatible? Perhaps via signals?

[Phazorknight]

I'm not familiar enough with GLoot to make a proper guess on how difficult this would be, but I assume it's definitely possible.

That being said, it might still be easier to adapt the current system. For example, if we add the width and height properties to the InventoryItemPD base class, none of the current inventory item checks and implementations should break or fail (thinking mostly of the wieldables, etc).
The trickier part would definitely be the slot handling and the UI.

[aronand]

There's good discussion here already, so just touching on this:

I tried with a Dictionary but Dictionaries in the editor dont appear to support resources, and I wasn't able to find a way to prefill the dictionary with empty values.

They do support resources, but the editor side is awfully clunky, and Dictionary doesn't support typing its content like its Python counterpart (or Array in gdscript) does. To get resources in the editor, you have to initialize the value as an Object:

This then allows loading or creating resources (ItemInformation is a Resource in my project):

I'm hoping Godot 4.3 would introduce typing to the contents of Dictionary as well.

[PeterD23]

So I made some progress on making it work like a grid! I'm still needing to figure out how to get it to work with colliding unmergable objects and also scaling up the texture without scaling up the grid square that its attached to:

[PeterD23]

Update on the grid inventory system, apologies for the delay since I've been procrastinating a lot:
I've added a boolean to the inventory to enable the grid mode, otherwise it will treat it like the old 1x1 system.
Theres also a new export array called starter_inventory which serves as replacement for the Inventory Slots variable which is now hidden. If you want to use the inventory you'll need to call a method called apply_initial_inventory which will redim the inventory grid to the chosen X and Y and then applies the starter inventory items to it. I would have used it in _init() but learned that export variables don't get applied until after the resource is fully initialised T_T

As for inventory manipulation, it now detects the edges of the inventory when trying to place it, and wont overlap slots that are occupied with other items. I've also added a signal to the Slot scene so it has easy access to the grid array to highlight the relevant slots instead of my initial horrendous $"../../../../".slot_array hack! Next steps are:

• Getting the textures to scale which will likely mean having to reimplement how the textures are rendered
• Making sure the ammo/quantities only displays for one slot instead of all of them
• Highlighting the slots while grabbed to the cursor and changing colour if there is a collision

gridtesting.mp4

[PeterD23]

my image rendering solution is extremely disgraceful in code but looks pretty nice if I can reduce the margins of the grid further

[Phazorknight]

Oh for a second I thought the images are masked by the screen, but now I see that they're actually split up!?

Not sure how you did it, but it might be more complicated than it needs to be?
In the default inventory system, the Slot.tscn has a TextureRect that loads the image from the InventoryItem.
I assume you could just get rid of this one, and instead use your system to instance a TextureRect at runtime and dynamically size it to match the item size. Sizing it dynamically would also help keeping it compatible if the Ui Theme ever changes (thinking of the margins you mentioned).

Oh and I just realized, with this you probably still need a custom solution for the HotBar slots.

Anyway, nice work on this so far though!

[PeterD23]

Hey! So the issue I ran into is that the TextureRect in the Slot is constrained to the boundaries of the root parent, so I couldn't figure out how I'd be able to stretch the texture out, so I opted to draw the image across the slots instead by dividing them into segments.

func get_region(x, y):
	var image = icon.get_image()
	var x_chunk = icon.get_width() / size.x
	var y_chunk = icon.get_height() / size.y
	var region = Rect2i(Vector2i(x * x_chunk, y * y_chunk), Vector2i(x_chunk, y_chunk))
	return image.get_region(region)

Which I then call in the populate_item_grid method:

func apply_slot_icon_regions():
	var added_items = []
	for slot in slot_array:
		if slot.item_data and not added_items.has(slot.origin_index):
			added_items.append(slot.origin_index)
			apply_item_icons(slot.item_data, slot.origin_index)
		else:
			continue

func apply_item_icons(item_data, origin_index: int):
	var size = item_data.size
	for x in size.x:
		for y in size.y:
			slot_array[origin_index + x + (y*grid_container.columns)].set_icon_region(x, y)

Its not particularly elegant but hopefully it might make some sense. The main challenge has been treating the 1D grid like a 2D array hence the wacky row + column maths in the index.

As for the hotbar slots I actually got it working by splitting the logic in two, depending if the grid mode is enabled

func populate_non_grid(inventory_data : InventoryPD):	
	for slot_data in inventory_data.inventory_slots.slice(0,hotbar_slot_amount):
		var slot = Slot.instantiate()
		h_box_container.add_child(slot)
		if slot_data:
			slot.set_slot_data(slot_data, slot_data.origin_index, false, 1)
			slot.set_hotbar_icon()
		
# For grid population, add only slots with the first unique instance of an origin_index
func populate_grid(inventory_data : InventoryPD):
	var index = 0
	var origin_indexes = [-1]
	for slot_data in inventory_data.inventory_slots:
		if not slot_data or origin_indexes.has(slot_data.origin_index):
			continue
		origin_indexes.append(slot_data.origin_index)
		var slot = Slot.instantiate()
		h_box_container.add_child(slot)
		slot.ammo_slot = true
		slot.set_slot_data(slot_data, slot_data.origin_index, false, 1)
		slot.set_hotbar_icon()
		index += 1
		if index == hotbar_slot_amount:
			return

[PeterD23]

More progress:

• Hotbar works properly now
• Texture renders across multiple slots if using the grid inventory
• Quantity and Ammo appear in the top right and bottom right slots respectively
• Picking up a grid object now shows green highlights in the occupying spaces which turns red if it cannot be placed there (also covers edges too)

gridinventory2.mp4

[PeterD23]

@Phazorknight I'm close to a fully functional solution. I've tested it on the Cogito 04 scene and the only thing I need to get working now is the external inventories and making sure that the default unaltered inventory state doesnt break anything. How would I go about raising a PR?

[Phazorknight]

There aren't any formalities or special rules for PRs, so feel free to go ahead.

Just include any needed information, if it's ready for review, etc. We'll let you know if any changes are needed.

[PeterD23]

So i created a feature branch on the Cogito repo but it said I didn't have permission to push:

remote: Permission to Phazorknight/Cogito.git denied to PeterD23.
fatal: unable to access 'https://github.com/Phazorknight/Cogito.git/': The requested URL returned error: 403

[ac-arcana]

As long as you've got your own branch or fork, when you go to cogito and go to pull request choose create new. Select cogito main on the left and the branch you want to merge on the right. That'll allow you to create the pull request.
If you have your own cloned fork there is a click you need to click to compare across forks.

[PeterD23]

That seems to be the issue though, I'd be able to raise a PR if I had a remote branch to compare, but even though I branched off the main branch git cli seemingly wont let me push to it so I'm not sure what special permissions I'm missing

[PeterD23]

I ended up forking the repo and just pushing to that, PR is up #194

[Phazorknight]

Hey everyone,
So the first version of this is now in /main/, should work properly in 9872705 onward.

Since I merged PR #194, I'm replying here.

Here's a quick demo:
https://github.com/Phazorknight/Cogito/assets/70389309/9ade7eaf-70eb-429b-8c2b-d4737beed5e0

I'm going to open a few issue tickets for a handful of quirks that I wasn't fully able to fix myself yet, maybe someone else can take a look.
Overall it looks and works great, so once again, major thanks to @PeterD23 for this awesome new feature!

As this also changes a handful of things, I'll try to add a new section in the documentation that explains how it all works soon.

[PeterD23]

Sorry for the lack of comms, was pretty exhausted when I got back from London and then Starstruck Vagabond came out which I immediately started hyperfocusing on.
Demo looks great, thanks again for accepting my changes into the framework! ^^

[Phazorknight]

No worries at all, people get busy!