GridPack - Create Grid/Tetris Style Inventories

Resources Community Resources
, ,
#104

Thank you for this amazing module! Very useful for my STALKER GAMMA like game.

1 Like
#105

can I have the solution to the highlight color? ran into the same problem

#106

What part do you need help with?

#107

This is a fantastic module that makes inventory management so much easier to implement, thank you!!

I had one issue though when setting it up; Is there an easy way to disable the tween that plays when dropping a item into a grid?
I see you have booleans inside the Item module, useTween and usePositionTween, which can disable the tweening, but I don’t see anyway to set them from looking at the API.

at first I tried using the “useTween” parameter when adding an item to my grid but it didn’t do anything

VICINITYGRID:AddItem(item,nil,false)

So I had to manually set useTween to false in the Item module to disable tweening when moving between linked itemManagers

-- Apply sizing when the item's ItemManager changes
self._trove:Add(self.ItemManagerChanged:Connect(function(itemManager: Types.ItemManagerObject?, useTween: boolean?)
		useTween = false

and usePositionTween to false to disable the tween when moving within an item manager.

--[=[
	@private
	Updates the Item's GUI element size and position to align with the new ItemManager.

	@within Item
]=]
function Item:_updateItemToItemManagerDimentions(applyPosition: boolean?, applySize: boolean?, usePositionTween: boolean?, useSizeTween: boolean?, itemManager: Types.ItemManagerObject?)	
	usePositionTween = false
1 Like
#108

Happy you like it! And sadly no there is no way to disable it without modifying the source code. GridPack is not finished yet, but further tween and visual customization is something i really want you to be able to do.

1 Like
#109

Im having trouble on the highlight color when dragging items into single slots that are excluded for that specific item

#110

Alright,

Firstly you want to define your types, using the metaData:

local inventory = GridPack.createGrid({
    ...

    AnchorPoint = Vector2.new(0, 0.5),
    Position = UDim2.new(0, 0, 0.5, 0),
    Size = UDim2.fromScale(1, 1),

    Metadata = { 
       Type = "Test",
    }, -- here you can change your type to whatever, just note that the items type needs to be the same 
})

Then inside the item you have created you use moveMiddleware, this is explained further up.

local yourItem = GridPack.createItem({
	...

	MoveMiddleware = function(movedItem, newGridPosition, newRotation, lastItemManager, newItemManager)
		lastItemManager = lastItemManager.Metadata

		if newItemManager then
			if movedItem.Metadata.Type == newItemManager.Metadata.Type -- here is where the types are compared
				or newItemManager.Metadata.Type == "Inventory" then -- you can keep on adding these so it can be added to multiple types, this is a really unprofessional way to do it but it works 
				return true
			else				
				return false
			end
		else
			return true
		end
	end,

	Metadata = {
        ...
		Type = "Test", -- this must be the same as the slot you want to put your item into
	},
})

essentially what this is doing is its returning to the module if the item can or cannot go into the slot, if it can then it will return true, if it cant it will return false.

Now we need to go over and modify the Item module under the Gridpack Module
image

Scroll down until you see the function
function Item:_updateDraggingPosition()
Inside that code ive modified it to

function Item:_updateDraggingPosition()
	local mousePosition = UserInputService:GetMouseLocation() - guiInset
	local test = self.ItemManager.GuiElement.Parent.AbsolutePosition

	self.ItemElement.Position = UDim2.fromOffset(mousePosition.X - self.MouseDraggingPivot.X * self.ItemElement.AbsoluteSize.X - test.X, mousePosition.Y - self.MouseDraggingPivot.Y * self.ItemElement.AbsoluteSize.Y - test.Y)

	local currentItemManager = self.HoveringItemManager or self.ItemManager
	local gridPos = currentItemManager:GetItemManagerPositionFromAbsolutePosition(self.ItemElement.AbsolutePosition, self.Size, self.PotentialRotation)
	self._highlight.Position = gridPos

	local isColliding = currentItemManager:IsColliding(self, { self }, gridPos, self.PotentialRotation)

	local metadataMatches = true -- simple variable 
	if currentItemManager.Metadata then -- if the itemManager has metaData
		metadataMatches = currentItemManager.Metadata.Type == self.Metadata.Type 
		or currentItemManager.Metadata.Type == "Inventory" -- finds the match
        -- if it does then it sets metadataMatches to true, if it doesnt, false
	else
		metadataMatches = false
	end

	if isColliding then
		self._highlight.Color = Color3.new(1, 0, 0) -- this just makes it red if it is colliding. This gives some knowledge on what to do with the incorrect metaDataMatch
	else
		if not metadataMatches then -- come on
			self._highlight.Color = Color3.new(1, 0, 0) -- sets the color to red if not a match
		else
			self._highlight.Color = Color3.new(...) -- put your own color here for the match
		end
	end
end

And that is about it. Dont worry if things come up as orange when doing the createSlot, item etc parameters, it doenst affect the code.

Now im uncertain this will work since ive heavily modified my gridPack modules but feel free to reply if you have any issues.

2 Likes
#111

Thank you so much! This is exactly what I needed, btw the code does work!

1 Like
#112

Heya, I have an interesting question/suggestion!

Is there a way to create shapes like the ones in tetris, or any sort of irregular shape in general?

1 Like
#113

No, sorry only boxes for now but I am going to add more advanced item shapes in the next big version.

1 Like
#114

Great design. This might be the best UI to make resident evil style game

1 Like
#115

Thanks! I can’t wait to see this be added! Please keep us updated on the next big version! :smiley:

1 Like