Building UI for Diving in my Marine Biologist RPG

hey everyone thanks for joining me for another devlog for dauphin my 2d rpg about a marine biologist trying to save the ocean and its inhabitants today is monday december 6th and this week i'm jumping back on the wagon after a brief break from youtube to visit family and just kind of recharge over the recent holiday before that break we were starting to make some pretty great progress on dauphin's diving system we left off at the point of the player being able to initiate a dive using the dive flag explore a procedurally generated but pretty empty underwater scene and return to the surface at the exact location in the body of water from which they started the dive since then i've made a few tweaks off camera apart from generally trying to clean up defects i've also spent some time refining animations and controls associated with the player's dive state so swimming now looks a bit more natural with smoother movement and some inertia when you stop paddling in a given direction and i created some basic idling animations from the player is just floating there with no input there's certainly more polish to add here but for now i think i'm content to move on to my next task for the diving milestone which is the foundation for the oxygen retention and depth tracking systems we'll talk about these in more detail in the future but my basic idea here is to have the length of time the player can spend underwater and the depth at which they can dive in the ocean be limited by their gear and associated skill levels so for example leveling up your diving skill by completing dives as well as upgrading from a mask and snorkel to a single tank scuba setup will let you dive deeper and longer you'll also notice in the top right corner here that i've already started very roughly prototyping a new piece of ui to support these systems hopefully this is recognizable as kind of a diver's watch which i'm thinking could have different watch faces to show how much oxygen you have left how deep below sea level you are and maybe even something like a mini-map as if it were a gps watch i'm going to start running with this idea for now but i'd love to hear what you think down in the comments i can already tell it's gonna be a struggle to create meaningful ui displays in such a small space given that i keep the pixel size consistent but we'll try it and see how it turns out it is now 7 30 just finished up dinner and my plan is to spend some time tonight fleshing out this ui just a bit more so that i'll hopefully soon have something that i can start hooking up to some gameplay logic [Music] [Music] hey everyone back with a quick update here on tuesday morning just after 8 30. last night and this morning i've been on the grind creating all the individual pieces of ui that i need in order to implement this dive watch or dive monitor in the engine so here's what i have so far this is kind of the base version of the watch without any watch face equipped and i have a couple different watch faces for different types of data that i want to show to the player so the first one of these is the oxygen retention watch face which will show how long the player can remain underwater we also have one that will display the player's current depth which will update as the player is swimming and then we have one for the time which will show the time up here and maybe a little icon for the weather down below to accompany all this i have created a quick little font for the various numbers that can be shown on those watch faces to make things a little easier on myself and i've also created some icons here for the weather so you can see we have sun moon for the evening rain storms and wind to finish off the morning i've exported all these individual components here into the engine and i'm ready to rip out my placeholder here and start building the brain of the actual dive monitor of course with it being 8 30 it is now time for work so i'll close up shop for now and we will catch up soon [Music] [Music] hey everyone welcome back to wednesday morning just after 7 a.m last night i ended up having a pretty productive development session working on my watch faces so i figured i should get you all caught up what we're looking at here is the main scene for my dive monitor which is pretty simple you can see we now have the correct texture for just the base watch without any actual faces and the only other children of this dive monitor are the depth face the air face and the time face and these are all set by default to be invisible inside the script of the dive monitor i've also tried to keep things very simple we have the notion of which watch faces are available to us as well as the current watch face and the only logic inside this script is just the ability to toggle through these watch faces no actual logic associated with any face in particular what's nice about this design is that any gameplay logic associated with this watch is entirely left up to the individual watch faces for example if we look up at our faces here we can see that each has its own scene so if we click into the depth face we can start to see how this comes into play the depth watch face is just a control with a background text direct and in this case a label which represents the number of meters that the player is under the surface this face like all others has its own script so if we click into here we can see the logic associated with this particular watch face what we see here is pretty simple inside our physics process function if this particular watch face is visible we want to pull the player's depth which we do by just looking at the player's global y position and kind of doing some napkin math to convert pixels into meters once we have the value for meters we just update the label the result of all this is pretty much what you'd expect when we are at the surface we show a depth of zero meters and as we start to dive down to the bottom that value will update as the player moves because we're just calling it in that physics process function so at this point i think we're in pretty good shape with our depth face what remains is to build out those two other faces one will have time and current and perhaps future weather conditions and the other will have the player's remaining air supply we'll catch up once those are working [Music] [Music] hey everyone friday evening now just after work around 5 30. i'm going to be taking the night off tonight but before i do i wanted to give you an encouraging update on the state of the watch faces from this morning as you can see we're looking at the time face here this is just reflecting my system time at the moment and we also have a weather icon below the time this weather icon is going to change currently every time you launch the game because i now have an auto load singleton weather controller that is randomly determining the weather every time we launch the game now this is not obviously hooked up to any weather effects yet but it is picked up by the watch so this will be able to in the future accurately depict the current weather and hopefully even be modified for future weather as well apart from our time face here i've also made progress on the air retention face which has turned out pretty cool so far there's a couple elements going on here on this watch face of course we have the timer down on the bottom and on top we have this kind of half moon shape which is meant to be a visual representation of how much air you have either left in your lungs if you're just snorkeling or left in your tank or tanks if you're scuba diving so the idea here is that this little indicator on the left hand side will track along this half moon shape moving from green to yellow to red to let you know when you're starting to run out of air so to take a look at this we will go ahead we have our dive flag equipped walk out to the deep water deploy that and once we're under water this timer will automatically trigger so we will see the timer start to count down from two minutes and then kind of based along this two minute scale that indicator is going to track across the top of this half moon shape and stay rotated so that this little bottom part is always facing towards the middle and overall i think these two things together provide a really cool effect and a clear representation of how long the player can remain under the surface creating that effect with this little half moon shape here was actually not as bad as i thought it was going to be this little white object here that moves along the shape is called the air indicator and if we look inside my script for this watch face you'll see that inside my process function basically as often as i can i'm attempting to update the position and the rotation of that indicator the position was the toughest part for my brain at seven o'clock this morning basically using the formula for the points along the circumference of a circle and the percentage of time elapsed to calculate the position as we travel across the top of this shape here and similarly when calculating the rotation we again look at the percentage of time elapsed and just rotate this towards 180 degrees so that it's always kind of facing towards the middle i'm definitely pleased with this result but there is more work to be done when the player actually comes up to the surface here and is able to exit the underwater scene right now i don't have a way of knowing that the player's head is above the surface at which point we actually need to stop this timer and kind of recharge the player's air supply apart from that if we stay underwater too long when this gets all the way to zero nothing happens yet i do have a plan for that but i think we'll talk about that a bit more tomorrow for now time to kick back and have a relaxing friday evening so we'll catch up in the morning [Music] [Music] hey everyone welcome back it is now saturday just going on noon here had a productive morning with a workout and cleaning up some chores and making some good progress on our dive state and its interaction with the dive watch so we'll go ahead and take a look my main goal this morning was figuring out how to recharge the player's air supply when they stick their head above the surface up here on the top of the water and i'm glad to say we have that working now so if you look over here at the air monitor you can see that we're slowly ticking down towards empty as our timer counts down if we swim up towards the surface and peak our head up above the water line here you can see that we start to recharge our air at kind of just a fixed rate so this works now how you'd expect you can dive around spend up to two minutes underwater with the current timer and then if you want to take a quick break and recharge that timer you can just head up to the surface and pause there for a few seconds while the timer resets and our slider slides back to the front here to achieve this i ended up further modifying my chunk that's used to build the surface portion of these underwater procedurally generated scenes so this is my surface chunk here this is the scene where we already have a collider to prevent the player from swimming above the surface of the water and we have our scene trigger that allows the player to exit the dive and go back to the point in the ocean where they started it to this scene i have added yet another area 2d which represents kind of a surface collider when the player is colliding with the surface up here they should be able to recharge their air supply we make use of this collision information in the player's dive state where we now have an instance of terrain detector we use a terrain detector as well on the player so that the player knows which type of terrain they are traversing but now we have one here to help us determine whether we are under water or colliding with the surface in either of these cases what we do is just set a simple flag of surfaced and where this flag is used is up here in the physics process function of our dive state if we are surfaced we can go ahead and add time back to our current underwater time limit and if we are underwater we will just change the current time limit based on a timer that's counting down this all works great but there's still one important piece of functionality to build and that is what happens when the timer runs out this is where i need your help my current thinking is that when the timer runs out instead of the player just dying which i'm not really going for in dauphin they automatically swim towards the surface as the scene fades out while they're swimming they will drop some random items from their inventory as if to aid their panicked ascent upon reaching the surface the player will receive a message telling them that they lost some items on the way back up as well as potentially some of their diving experience let me know what you think i'm looking for a way to punish the player pretty severely while also kind of keeping the positive theme of the game intact this seems like a good way to start in the meantime i think now is a good place to wrap up this week of progress i'm pretty pleased with these past few days i've always struggled with ui design and although this dive watch isn't perfect i think it's a pretty cool step in the right direction and a great pairing for the diving mechanic as always i want to give a big shout out to all the folks supporting dauphin's development and this channel on patreon especially my gourami supporters cody oden fenikfu games mega ombre vlad sunny james kennedy jess sargo deluse and happy hippie i hope you all enjoyed this week's devlog excited to see what y'all say about the diving system and i look forward to seeing you in the next video take care

Channel: DevDuck

Views: 38,215

Keywords: indie game devlog, indie game dev, godot game dev, godot devlog, dauphin devlog, dauphin, devduck, 2d rpg devlog, godot 2d rpg, godot rpg, gamedev, game development

Id: H_gia2g4NYk

Length: 13min 0sec (780 seconds)

Published: Sun Dec 12 2021