DEV Community: Tempest Io

Dev Diary #5 - Complete Home Screen

Tempest Io — Mon, 24 Feb 2025 16:29:00 +0000

So where have I been yes? I have definitely taken some time off because of a surgery and also! it was my birthday yay!

A good distraction from completing the home screen since ya know I was/am kinda strugglin with it. But hey that's alright we made some itty bitty progress each day in order to get it to a place that I was semi-satisfied with!

Where were we....

Ah yes! I finished the main page but then realized I have a bunch of buttons to add in, in order for the player to teleport to all their needed locations, etc.

So I started here by importing all of the icons onto my figma page and silently whining.

Curses! Why did I make so many locations ahahaha! oh well. So after some self pity, I sat down with some coffee and arranged these in a nice little order around the main button at the bottom.

I also arranged them going up to see how they would look too.

I ended up going with the design of them going around the button since I thought it looked neater. I also think it would be a pain the ass for the player to have to stretch their thumb waayyyy up in order to hit those buttons. I mean it's inevitable with some buttons but at least for the locations I can make it easier for the user to hop between them.

After deciding the placement, I took the bubbles and duplicated them around and placed the icons in changing the colors so that they look more like they fit in with the main button. I also added some subtext underneath so that we know where we are going when we press the button.

After that, I made two iterations because it just looked a little off, one where the buttons were slightly lower and one where they were where I originally placed them. ended up going with the adjusted position.

I noticed that it was hard to read some of the text on the buttons and they just werent standing out the way I wanted, so I added a big ol circle in the back to see if that helped make them stand out and made it a darker shade of grey. Usually adding a dark object in the back will help pop something that is getting lost and separate it from the background.

Once in the right position, I changed it to a gradient and faded it from top down, its basically just 2 shades of grey one dark at the top one lighter at the bottom, and then I have an effect on from figma that blurs the crap out of it. I changed the name of the main button from 'Hatch' to 'Nursery' since I think that fits it better. And then during this whole process I added the other buttons like settings, achievements, mail, etc.

I darkened them up in the final picture and I think now the home screen is looking pretty good! Off to the races! I may do a jam on character dialogue before jumping into development but we'll see. I can always hop back and forth anyway. Man the home screen was a slog, but hey it goes to show if you take it bit by bit you can make something nice! Just gotta make sure to keep moving forward!

Anyway thanks for the read! More to come!

Tempest out!

Dev Diary #4 - Home Screen

Tempest Io — Tue, 11 Feb 2025 03:07:08 +0000

It's definitely been a few days hasn't it?!

Although, I have wanted to give an update sooner my ability to work on my fun project has been interrupted by actual work...ugh ya know?

Gotta pay dem bills tho ahaha.

Anyway, besides upcoming deadlines and a minor medical surgery, I've been able to make some small headway on the Home Screen. (and by headway I mean like small update that I'm not liking too much atm xD)

After looking at all the different fun designs I made for the game and screens I was like let's put this baby into Unity whoooo yeah! And then quickly realized I needed to put the first screen in which....I did not actually design out. FUCK.

Welllll that's alright we will get back to da old drawing board and create a newwww design for our home page....yay....

So how do we start this off I mean originally I had a placeholder image and not really many icons at all...bleh.

So I started with a town, or rather AI generating an image of a town in Midjourney. I feel like this should be the center stage and the home of where the user should land. That way they can get to and fro different places such as shops or hatch their eggs or look at their equipment.

So central base - town easy peasy after a bunch of generations I came up with the above.

Now, what to do about these icons and things. Ya know, I didn't really have a good place to start. I was a bit errr burnt out from everything but! I did realize I had some old projects that I worked on a while back that went nowhere and decided to rummage through them for some good uhhh 'inspiration' yeah yeah!

A long time ago I had the fun idea to start an ambitious project of a gacha waifu game. Which went nowhere! But I made some pretty cool designs here I thought, this was also in the early days of AI so my generated characters a bit even more generic than usual. But hey, we're not using those we just want those icons babyyyy yeah!

After copying and pasting some of the icons and resizing in Figma I had to think about exactly how to lay these icons out that would make sense.

Well this was just a first attempt, so here we go:

This kinda brings it all together but I am a bit worried about the currencies being on the bottom at the moment. I'm not really too sure on that so I may shrink everything and move it up to the top like ya know allll games have but we'll see.

However, we are far from done with this home screen because:
1) I don't like it yet
2) We have way more many icons to add here to get to the other places quickly

Cue list of what's to come on the home. I'm sure once I start getting started with these icons and putting it together, I'll have a second wind when it comes to creating and designing this Home screen. Right now not really feeling it but you know those days happen.

Sometimes it's good to just take a step back and second look.

Tempest out!

Dev Diary #3 - Fishing Rod Equipment Page

Tempest Io — Tue, 04 Feb 2025 03:47:29 +0000

Back to the ol' fishing rods. I decided today to design the equipment pages for the equip part of the game.

Hmm designing, definitely not my strong suit yet here I am.

I had put together screens for the player whether they choose a woman or man character already. So I decided to overlay a design on top to show to the player what their equipment would look like and so they could choose from a list of rods. This would appear after you click on the fishing rod slot.

At first I started with a gradient brown square with a dropshadow effect but figured it needed something else. Did not feel like creating a whole cabinet but wanted something along those lines.

My good friend, who is an artist, helped with the idea of a simplified cabinet where I could overlay a screen on top for the rods to sit on. Here is an image of the simple shelf as it was being created. I used gradient squares within it and an inner shadow for the shelf to make it look like it was recessed.

The next part was to add the overlay, originally I wanted it to be cohesive with other overlays where they held a white design, but it didn't feel right with the opacity. So instead, I opted for a darker shade but with a similar gradient pattern.

This of course caused the text to no longer work when I brought over the equipment slot asset. So, I changed the color of the text from dark to light to give it more contrast so the player could easily read the text.

Here's a before & after.

Before:

After:

Afterwards, I imported in all of the slot assets and realigned them (somewhat) into the new container. I started to redesign the shelves so that they aligned with the text, but then realized that was a failed design since the slot assets will be on a scrolling field and may not align always with the shelf. Goes to show the iterative process of designing. So I reverted back to the 3 shelves I had originally.

Failed Shelf Design:

Fixed Shelf Design

After fixing that it was merely a tedious task of taking the fishing rods that I generated in AI and replacing the images from the slot assets with them. All of the fishing rods are kinda jank tho and we will need to fix them later, but they will be a good placeholder for now.

Here's the finished asset!

Maybe I will get to coding in the next blog. I sure hope so...

Eyy, Tempest out!

Dev Diary #2 - Fishing Rod Concepts

Tempest Io — Sun, 02 Feb 2025 02:35:28 +0000

Welp, back to working on fishing rod concepts. I have a list of fishing rod names that I want to create concepts for. It's a bit of tedious process since AI tools such as Midjourney don'ttt really have a great knack for making fantastical fishing rods. All of the concepts I created will definitely need to be edited heavily eventually, but they will work for now as good placeholders.

Today, I figured I'd finish off the rods for the Dark and Light elements.

It's mostly just a day of generation and re-prompting, generating and then upscaling. With the final bit being a bit of photoshop to cut out the images into pngs and clean up any spots that are messed up.

Here's a Shade Rod that I generated. I've been trying to be better at taking pictures of my process as I go through here for the blog posts.

Going back to the process, what I end up doing is generating the image and then putting in photoshop. Then once it's in photoshop I use the AI Remove background button to give me a starting point of removing the background. Afterwards, I put either a black or white layer underneath in order to see any artifacts that appear so I can erase them from the image. That way we have a nice clean image of the asset that I can use in Figma for prototyping. This image can also be imported into Unity later and be used as a texture. Of course, ideallyyyy I'd put them on some sort of sprite sheet in order to optimize later but errr we'll do that eventually... >.>

Sometimes, even when you remove the background though you're left with these weird white spots or just parts that weren't removed. In that case, I end up using the magic wand tool on the mask in order to remove the excess white pieces. I try to avoid using the brush as much as possible but sometimes you do need to use it since the artwork is complicated.

Basically, I got these pieces of art to a point where I am semi-satisfied with them, I'll eventually take them over to my cintiq and clean them up without using my mouse and draw the rest of fishing hooks in or composite them together with more generated images. Depends on my mood I guess.

Anywho! Here's the final images of all the rods. Very exciting yay. There are 4 different tiers of rods for our 6 elements. The elements are: Normal, Ice, Dark, Fire, Earth, & Light. As far as the tiers go we have: Basic, Uncommon, Rare, Mythic fishing rods for each element.

Each rod will increase the odds of catching those types of fish. For example, the Rare Fire Fishing Rod will make it easier for the player to catch/find Rare Fire Fish. Of course all of this is subject to change if I think of different mechanics later, but that's what I'm going with now. Yep yep! ^-^

Welp, that's it for today, I'll probably work on how the inventory page will look for these rods another day. Thanks for tuning in!

Tempest out!

Dev Diary #1 - Hello World

Tempest Io — Sat, 01 Feb 2025 05:11:48 +0000

_How on earth do you start these? I guess we just begin. I'm not really one for logging my work but here goes. _

Hi all, Tempest here, I'm a ux prototyper with the background of a 3D artist.

I started planning out a tamagotchi-like game with Anime style characters. The premise is you fish for resources, you make meals and money, feed them to your character or give them to your character and they grow! AI interaction pending, still trying to figure out the best way to implement it. (have done it for other prototypes before but not sure where it would take place in this project).

I'll say it's unusual for me to start by planning since the majority of my projects I just jump in and create. And then those projects never see the light of day! xD So I figured I'd start here and then post my progress in case anyone is interested.

Okay, enough with the chitchat, I'll jump right into the work so far!

The above is my current Figma board that I have for planning out my full project. It's not fully complete but mostly there. I'm still trying to figure out the specifics on the Fishing Mini game but the majority of the work is done!

I am totally itching to just jump in Unity and program >.>...

Here is a look at how I plan to implement the character stages. Starting with an egg form. All the characters will be hatched from an egg that you can fish up. Once you hatch the egg, you can care for the character that appears and they will evolve over time!

I've been using midjourney, stable diffusion, and my own art background to come up with designs and guide me along the way with the look and feel. Basically the process is generate with AI, clean up in Photoshop, import designs into figma.

Using this process I've been able to generate nearly all the 2D assets for the game. Of course theres a lot more work to be done in making them move, animate, fx, etc but that'll come later.

If the game ends up doing well, I would love to just hire artists to make the art style more cohesive but right now I don't have the capital to do this. Because of my actual job I am very in the know with the cutting edge technologies and have been deep in AI for a few years. I figured hey why not use these skills in prompting to get a look and feel that I want. Plus it leaves me more time to focus on awesome animations, story, mini-games and just other features I'd rather do.

Needless to say, generation has been tricky getting the AI to yield you something you actually want to use and in a semi-similar style to what you have. xD cue many failed images.

However, when you get the images you want, it really ties the whole look of the concepts together.

Anywho, more to come! I think I'll end my blogpost here but as I work on more parts of this project, you'll see more and more of the features and mechanics I came up with.

**Tempest **out!