Devlog #3 - Equipment & Inventory Management

And off we go into week 3!

I ran into a pothole in the road when I was doing drag and drop. It's not built into BabylonJS so I had to roll my own from pointer events and that got time consuming and a bit messy but I made it through. Voila we've got drag and drop capabilities.

Now we need to add the ability to swap items when dragged onto other items and empty slots. After some reconfiguring of how bags are represented and adding the beginnings of functions that determine whether two items can swap slots on the client, I'm ready to have the client request that the server swap items when one is dragged onto another slot.

And I ran into my first nasty bug. Oh typescript is this what it takes to learn you. That wasted a few hours. I hate circular dependencies. And back to our regularly scheduled programming.

And now I get to do a ton of validation of items changing slots on both the sever and client. There's a few hundred lines of code on both sides just to make sure the swap is correct. It's annoying and boring for sure. And now that's finished for the main bag and will just require tweaks for other places like equip, market, etc.

Since drag and drop rotted my brain I'm going to work on finding a font now. FO's font was FFF Harmony Regular which looked great but it was missing some characters. This https://www.dafont.com/retro-gaming.font Retro Gaming font looks close and has nearly all characters for English. Looks good, lets use it. Converted it to a woff, uploaded to the server, loading in the html, and now lets see if we can get it working with BabylonJS. 

But before I do that, lets look at all the old slot icons. Head, Neck/Face, Shoulders, Chest, Left-Hand Ring, Right-Hand Ring, Legs, Guild slots will go on the left side of the equipment window... maybe. I removed the english text, cleaned them up, and rescaled a bit. Having text in images is bad for localization so I'll just use tooltips to show what they are. Main-Hand and Off-Hand in the middle. And there we go we've got a little over half the slots on the equip window.

As you can see I have background colors enabled on a lot of GUI objects to make sure I'm setting them up correctly. Ok, back to text. And wow that went quick, as I now have window headers with text working. Let's see that screenshot again but now with some of the colors turned off and window headers.

Looking great! The backpack is now nearly identical to FO's. The character window will go through a few iterations before I decide how to lay things out properly.

Now I'm going to switch gears and setup Patreon integration with https://fantasyonline2.com/. And I'm done, that was quick. You can now login with patreon to view the benefits you've built up. Here's how it looks.

Now back to the item slots. I'm going to work on tooltips now. This involves mouse enter/exit messages and formatting all the data onto a black rectangle. I'll just be doing the basics for now and will come back once skill and stats are added. So I got a black rectangle setup, added a text block with our font, attached to the mouse enter/exit events of our item slot, and boom we've got a tooltip. Also need mouse move to move the tooltip around. And I'm going to start with just showing basic text which works well for the equipment item slots. If the slots are empty they will show their name as you can see below.

Now I'll add the basics for mousing over item instances. BabylonJS doesn't support styling text blocks so I'll have to roll my own and that will take a bit of time so I'll skip that for now. Just getting the basics up and running.

And I took a detour to fully setup saving player data on the server. It wasn't totally working. Now it's working and setup for accounts. Players will have one account that can have multiple characters. I'm just defaulting to one character for now to ease development.

Ok, what was I doing? Oh right, item instance tooltips. So let's set up the privacy policy on the website instead. I decided to go with https://termly.io/ as they seem to cover all the laws everywhere and have a nice wizard to create these things. Ok, that's all done and up on the website. I'll get to the terms once the new business is formed.

Oh I also setup a business. The new company is called Pixel Games LLC and will be formed officially this week. Thank you to all the Patrons out there as all these initial setup costs add up quick. If you're thinking of becoming a Patron, please do as it's all going to server, domain, business costs. We just crossed 20 Patrons at the Gamer tier, which is amazing. With such a large amount of early Patrons that are actively involved in comments and polls we're definitely going to make something special.

Oh, did I mention the first Patreon exclusive item has been decided?

Drumroll please.....

The first Patreon exclusive item will be the Alpha Halo! The rarest and most sought after item in FO is returning and now you can have multiple to do with as you please!

This log is getting a bit long so I'll wrap it up here for this week. In the upcoming week I will continue tooltip work, get the bag bar going, work on the rest of the bottom of the screen with things like the xp bar and skill hotbar, and lots of other things. I'm posting this early as I've gotten so much done I just needed to end this week's log. I've started posting polls about slots and I'll keep posting these polls as questions come up during development. They're being posted under the tag dev polls.

https://www.patreon.com/FantasyOnline2?filters[tag]=dev%20poll

I did get a few more items in as well.

It's not even Tuesday yet so I'll say see you soon!

Have Fun & Keep Gaming!