- Published on
Devlog #4 - Noob Island, bank, bags, and more
Hello week 3.5?
Started off by adding a bag item bar below the main bag, and a space below that for window buttons. Then I added bag bar data to the server, sent it to the client, and started drawing the bag bar. There will be 5 bag bar slots including the main bag. Then I setup the main bag slot to have it's icon and not be movable.
Now on to drag and drop of bag to and from the bag bar. When you drag onto the bag bar it creates a bag and when you drag off it destroys a bag. Got that working and fixed a few bugs. Now I need to alert the client that bags are being created/destroyed and also arrange bags so they're not on top of each other. Also need to make the bag bar slots toggle-able so I'll need to get a couple GUI images moved over.
Dragging needed a bit more work. I had to add a timer and a check for mouse distance moved to put it into the dragging state in order to allow regular mouse clicks. Got that done and updated validation to deal with all 5 bags and the bag bar. It's always tedious, time consuming, and requires a lot of edge case checking. Don't want to be able to drag a bag into itself.
Took a break from bags to setup a discord server. Everyone can join it here https://discord.com/invite/7J3UTqPy2R. If you're a Gamer tier patron you will be assigned to the Gamer server role. I will be making Gamer server role exclusive channels and possibly more but right now it just turns your username blue and lets you see the "patron-sneak-peak" channel.
And back to bags. I had to move the bag bar slots into their own "window" and now they have a nice background. Also added the highlight image and open close capabilities. Added all the actual bag windows to a BabylonJS StackPanel in order to get ordering of windows for free. It looks quite nice now. And here is what it looks like.
And now I'd like to make the initial bank/storage window. Threw that together and updated a bunch of checks and voila we have a bank. Starting at 140 slots and will add purchasing of tabs later. That means everyone gets the initial first bank tab for free. Also added a few more items.
GUI work has rotted my brain so I'm going to switch to loading and displaying Noob Island. All FO maps were made in https://www.mapeditor.org/. Here's a look at Noob Island which still loads and displays fine in Tiled!
BabylonJS does not support directly loading of Tiled tmx files so I get to write a file loader. I also have to translate that data into a format BabylonJS likes. For some reason BabylonJS only accepts JSON from https://www.codeandweb.com/texturepacker right now. Ok, off to load and translate.
So Tiled encodes and compresses tile data so I had to figure out how to decode base64 and decompress zlib compression in typescript. Found a good way to do it and now I have the tile map data. Unfortunately the BabylonJS tilemap is missing some features so I might have to write my own. As you can see below things are wonky.
The BabylonJS SpriteMap doesn't support multiple tile sheets, and it's flipping/mirroring the map. Oops. Ok, time to write my own based on theirs and we'll actually have a map to display correctly!
What's actually really cool about this is that it's on a plane in 3D. This will let us create really neat particle effects and maybe even a little bit of lighting. It will also make the minimap and map window much much easier to implement as I'll just have to add a couple more cameras to the scene. Very exciting.
Ok, back to fixing the map. So I had to add a new function to BabylonJS SpriteMap to load in Tiled map data. Then I had to rotate and flip it and temporarily turn off something called backface culling. Then I got the camera to move around nicely and voila here we are once again at the start of Noob Island.
Next I'll be working on spawning the player and moving it around with the map camera. Then npcs and back to the shop window so I can walk to an npc and buy something.
And once again this log is getting long so I'll wrap it up here. What day is it? Is it Tuesday? I can't tell anymore. See you soon for the next devlog!
Have Fun & Keep Gaming!
P.S. - Alpha Halos are still available! Become a Gamer tier Patron today!