Building a Dynamic Tile-Based Inventory System

Continuing on our jounrey of a tile based inventory system was the need for rotation mechanics. This was something that appeared daunting at first but was quickly resolved with basic matrix mathematics.

Rotation System

Rotating items in a grid-based inventory may seem simple at first glance, but for multi-tile shapes, rotated objects, and restricted slots, it quickly becomes a complex problem. The rotation system in this inventory is designed to maintain accurate placement, visual clarity, and gameplay consistency.

Updating the Shape Tiles

Each item has a set of shape tiles stored as Vector2Int[], representing which grid cells it occupies relative to its top-left origin. Rotating the item involves transforming each tile according to a 90° clockwise rotation matrix:

• Swap the x and y coordinates of each tile.
• Invert the new y axis to maintain clockwise rotation. 
• After rotation, check for negative coordinates and apply an offset so that the top-left tile remains at (0,0).

At first this really hurt my head and I had to write it out visually a couple of times to wrap my head around the logic but once it was cleared up actually applying it was really easy. I did initially want to make it so that the object could be rotated clockwise or anti clockwise but this seamed like a very limited mechanic that wouldn't be utilised too often so I kept it as is. Adjusting the shape tiles ensures that all placement checks, highlights, and grid interactions remain accurate after rotation, even for irregular multi-tile objects.

Pivot Point Adjustments

Simply rotating the visual image without adjusting its pivot point would cause items to shift incorrectly, misaligning the tiles with the grid. To counter this each 90° rotation corresponds to a specific pivot point (top-left, top-right, bottom-right, bottom-left) and then the pivot is recalculated based on the item’s width, height, and rotation state.