Devlog #6 - NPCs & Shops

Time to walk to the store, but first...

I started by saving Patreon login information to cookies on fantasyonline2.com so that you don't have to log in every time. Then I updated the privacy policy and added a cookie policy as the new business, Pixel Games LLC, is now formed and operational. Also added that dang cookie pop up that's necessary these days.

And now lets make the npc MySQL table. For npcs we need an id, zone id, position, sprite filename, and type for now. And like always we need a NPCDefinitionTranslations table for npc names. Now lets fill it up with a few Noob Island NPCs. And now lets load the npcs on the server. We need NPCDefinition classes and we need to fill them out from a SQL query just like items. That's setup and now populated from SQL queries. Now we need to send this data out to the client when a player enters a zone.

And now after I've received the zone npc spawn message with all the npc info, I need to actually load the npc sprite and position it and voila we've got Shopkeep Sal back in business.

His position looks a bit off but I'm pulling directly from old FO data. Hmm, will have to investigate once I get more npcs loaded. Now I'll load a few more npcs and then work on the click interactions for them. Then I'll start the shop window. I've also just realized the BabylonJS Sprite and SpriteManager classes won't work well for FO2 so I'm going to have to write my own which might take a week.

But for now let's make a ShopDefinition table with it's ShopDefinitionTranslations and ShopDefinitionItems. Ok, that's setup and we have a shop that sells Filthy Pants and a Fanny Pack for testing. We need to now load all the shop data onto the server and have NPCDefinitions be able to reference ShopDefinitions. And now that is done and ready for testing. Just need to make that npc on the client clickable and then we can move on to the shop window.

So it turns out the BabylonJS Button is very bare bones so I'll have to make my own button. I created an ImageTextButton added the old button background image, added text on top, and now I need the other font we used for buttons and other menu text items. It seems we used a font name Kroeger which came from Macromedia Fontographer https://en.wikipedia.org/wiki/Fontographer. So that was a font built into Flash. Let's see if we can find something similar that has more characters. Pixel Emulator looks great and it's public domain, let's use that for now https://www.fontspace.com/pixel-emulator-font-f21507 which is free to use yay https://www.pixelsagas.com/?p=55285.

Ok, I've got a button partially working, now lets start putting together the item for sale display in the shop window. It has several elements like the buy button, the cost text, cost icon, and item icon plus mouse over tooltip. I'll get the buy button and cost hooked up. And with all that hooked up I'm populating it with the first npc's shop data from the server and it looks like this.

Coming along nicely! Now I just need to do the item icon/tooltip, hide ones we aren't using, and send that buy message to the server. Then on the server we have to check if the player has enough coins and then attempt to add the item to their bags. The server side of things will take quite a bit of code.

Let's fill up this shop with items first. Ok, added Filthy Pants, Wanderer's Cloak, Dull Wooden Sword, Small Basic Bow, Magic Stick, Fanny Pack, and Satchel. Magic Stick was way more expensive than the sword or bow so I've made them all the same price. Also, the Satchel was 40 Gems and now it will cost Coins. That's 7 of 12 items we need to fill the shop, let's see what else we've got. Ah, let's add the Small Health and Small Energy potion as well. That's 9. Oh jeez we need a map of Noob Island, a helmet, and a shield. That's 12. And now all items are in and added to the shop and voila we've got our first full shop. The helmet is the first new item to be added to the game!

I even got a bit of the tooltip done. Now on to the server buy code. First we need to send the buy message to the server so we add a onPointerClickObservable method to the buy button and in there we extract the npc id and the index of the item to buy in the shop and send that on to the server. Then on the server we get all the npcs from the zone the player is in and see if the requested npc is available. Then we check to see if the player is close enough to the npc to interact with it. Then we get the npc ShopDefinition and see if the item index actually has an item that we can buy. Then we check if the player has enough money, if there is actually an open bag slot, and then we take the money and add the item to a bag. Let's see how that looks after buying a few things with no money check.

Looking very nice! Now I need to have the server tell the client about the item that was added to the bag and tell it to reenable the shop and bags as they are disabled whenever an inventory operation is performed. Also we need to deal with currencies now as well. I'm starting with our classic currencies which are Coins and Gems. I've got both represented on the server side with the option to expand to more later if need be. And now I've added all the code necessary for taking and giving currency as well as updating the client when they change. 

Now we'll take a small sidetrip to deal with this poll https://www.patreon.com/posts/how-do-you-want-80027116. We're going to allow shift+click to sell and drag and drop to sell. Ok, the window is all reconfigured, and now I've got all the server side code for selling working and voila here's the new look.

I took a break to write up a couple issues on the BabylonJS forums as there are bugs I need to fix with it.

https://forum.babylonjs.com/t/sprite-pixel-art-artifact-issue/39123

https://forum.babylonjs.com/t/is-there-a-way-to-turn-off-filter-of-fonts/39122

The main issues are filtering pixel art makes it look blurry and ugly but no worries, it will be fixed.

And then I went back to adding the currencies to the bottom right bar and updating those when I sell or buy from the shop.

I also coded up name reservation for Gamer tier patrons. That took longer than I thought it would but it's up and running and working well. Patreon's API sometimes takes a few hours to update so if you become a Gamer tier patron and can't reserve your name yet, just wait a bit to see if it fixes itself.

https://www.patreon.com/posts/gamer-tier-can-80090414

And the last thing we have to do this week is have the server tell the client to add an item to the client bag when you buy an item and delete an item from a bag whe you sell an item. I'm now sending those messages from the server to the client and I just need to update the visuals now. And voila that's done. I gave myself a ton of coins and went on a spending spree.

And that's where we'll end it this week. All week I tried to get to clicking on an npc to open a shop and I never got there! No worries, it will come in time. Next week I'll be working on skills I think. See you next time!

Have Fun & Keep Gaming!