Magical Girl Saga Devlog[2]
JRPG Mechanics #1 - Inventory
Hello everyone and welcome to devlog #2 for my 2D JRPG indie game, Magical Girl Saga! In this devlog, I'll be discussing how I implemented the inventory system for Magical Girl Saga and going through the design and thought process behind why I chose what I chose for the inventory system. Without further ado, let's dive right into today's devlog!
Inventory Design
For the intial design of the inventory, I wanted the inventory to be a little more than just a screen in design, so I did some research and looked at other JRPG games and I found myself really drawn to the idea of having the inventory screen be an open book, with all the inventory items arranged in a grid-like fashion on the page of the book, with little bookmark tabs indicating the different parts of the inventory screen, such as the item inventory, the weapons inventory and the player's party. I decided it should be a purple book since when I started to design weaponds for the game, the first weapon I designed was a purple spellbook called the Magician's Book, and I figured it would be a unique aesthetic if the idea was there that the inventory book was also the same as the intial spellbook, so I wanted to have that type of subtle correlation. I then recorded some simple sound effects of a page turning and a book opening and closing to use as the sounds for toggling between the different aspects of the inventory and for when the inventory was opened and closed. I then designed a simple slot design, which would just be a brown border for a slot, with a yellow cursor surrounding the inner part of the slot to act as a way to tell when an object in a player's given inventory is currently selected. So with these in mind, I ended up with a prototype inventory design looking like this:
Implementing The Inventory System
The first step in implementing the inventory was to figure out what nodes I would use for the inventory. Ultimately, I decided on
using a Control node as the base node for the inventory, with a child node of NinePatchRect and a child node of that NinePatchRect being
a GridContainer node. NinePatchRect combined with a child node of GridContainer allowed the slots of the inventory to be created
evenly spaced in a 4x5 grid fashion without having to worry about scaling the size myself. I then added 20 Panel nodes as a child
of the GridContainer node, which created the 20 slots of the inventory. I then created two signals, one to signal when the inventory was
opened and another to signal when it was closed, by doing the following programmatically:
public void Open() {
Visible = true;
isOpen = true;
EmitSignal(SignalName.InventoryOpened);
}
public void Close() {
Visible = false;
isOpen = false;
EmitSignal(SignalName.InventoryClosed);
}
private void _on_inventory_closed()
{
GetTree().Paused = false;
}
private void _on_inventory_opened()
{
GetTree().Paused = true;
}
As you can see, I also have code to pause the scene tree of the main scene whenever the inventory is opened. This allows for the
inventory to be opened and transitions the control of the player to control of the inventory, while also making it so other things,
such as enemies and NPCs, do not move or try to interact with the player while the inventory menu is opened and the user assumes
control of the inventory.
I then added in the ability to stack obtainable items in the inventory, so instead of picking up two red potion items and having them
take up two inventory slots, they now stack and only take up one inventory slot while indicating the amount of that item available
in the player's inventory for them to use at any given time.
public void update() {
if(playerInventory != null) {
for (int i = 0; i < playerInventory.items.Length; i++) {
slots[i].update(playerInventory.items[i]); string
labelPath="ItemAmount" + i; RichTextLabel label=GetNode
And finally, the last thing to do was to implement the actual control of the inventory. I start by implementing cursor
movement, using the following code:
public void HandleSlotNavigation(InputEventKey keyEvent)
{
if(slotSFX != null) {
soundPlayer.Stream = slotSFX;
}
// Handle slot navigation based on key input
if (keyEvent.IsActionPressed("ui_up"))
{
selectedSlotIndex = Mathf.Max(selectedSlotIndex - 5, 0);
soundPlayer.Play();
}
else if (keyEvent.IsActionPressed("ui_down"))
{
selectedSlotIndex = Mathf.Min(selectedSlotIndex + 5, slots.Length - 1);
soundPlayer.Play();
}
else if (keyEvent.IsActionPressed("ui_left"))
{
selectedSlotIndex = Mathf.Max(selectedSlotIndex - 1, 0);
soundPlayer.Play();
}
else if (keyEvent.IsActionPressed("ui_right"))
{
selectedSlotIndex = Mathf.Min(selectedSlotIndex + 1, slots.Length - 1);
soundPlayer.Play();
}
UpdateSlotHighlight();
}
private void UpdateSlotHighlight()
{
for (int i = 0; i < slots.Length; i++) {
slots[i].SetSelected(i==selectedSlotIndex);
}
}
And then I implemented a simple toggle that allows the player to toggle between the items inventory and the weapons inventory using
the 1 key.
Cosmetics
Finally, the last thing was to prototype the cosmetics of the inventory. I first started by changing the inventory sprite to be a fully open book with both sides showing and then I added in a simple page turning animation that flips the page forward and backwards depending on which inventory is currently toggled. I eventually will modify this with finished assets and an extra third inventory to represent the player's party of selectable characters to choose from, but for now, the design is officially finished and prototyped.