Komi OS devlog 4

It’s been a while since I wrote my last devlog, just been starting university, but I’ve made a ton of changes since my first ship and I’ll try to remember them all. First off, the boot screen has been cleaned up, the boot video will now stop at the correct time consistently on the beat no matter how bad your wifi might be, and I created a little Windows XP logo cutout on the bootscreen just as a nice little thing. The main difference you’ll notice immediately after it’s booted up is that there is now a taskbar! I always knew I was going to add this eventually I just wanted to implement it properly after I had gotten the apps and desktop working as I intended. There are three apps on the taskbar currently which are the notes, music and settings apps and the ones displayed on the taskbar differ slightly to the desktop icons, where the settings icon is not but there’s an extra app/game that I added there instead. When you click on app icons in the taskbar they pop down and back up, and when you hover over them the background behind them also lights up to show which app will open if you were to click now. I added my own custom right click/“context menu” which I also knew I was going to add at some point and currently it only has copy and paste (I say only but pasting was a pain to program, more than you’d initially think) however more options will be added to it in the future. Now inside the settings app I’ve began adding a side menu where if you click on each one it’ll take you to a different settings page, and the first one allows you to pick a different wallpaper from a selection of minimal Komi wallpapers which I’ll have save eventually in your browser when I implement user preferences. That about page is just there as a template currently just so I could test page switching but I’ll add to that in the future and also add more pages, one last thing for the settings app though is in the sidebar you can see little coloured icons to make it immediately more obvious when looking for a specific page. The last app I added since the last devlog was embedding eaglercraft into an app (which wasn’t as easy as I’d hoped it’d be) however I managed to get it working consistently enough to be able to keep it on my site, the corners of it are clipped to the window so that it doesn’t look out of place and it fits right in. I also added a ton of tiny tweaks, too many and too small to list but just things like changing the time to only show the time just to simplify any clutter in the top right, shadows were tweaked on the desktop icons as well as a dark black solid shadow was added to all of the text under the icons and I added a purple highlight colour when selecting text to match Komi’s haircolour. Other things I could remember were things like adding a favicon and moving some of my styling that had snuck into my HTML back into my CSS file but now I’m really reaching for stuff and this devlog is long enough anyway. Excited to continue working on this

Komi OS devlog 3
I believe my cold is starting to go away which is good, and I’ve been able to do little bits here and there this week with my OS and I’m super excited to continue working on it. I worked mostly on the music player since the last devlog and I was able to add a playback slider that lets you seek through the song thats currently playing while also showing the current time on the left, with the total duration of the song on the right. I added previous/skip buttons that let you move between songs in the playlist (current total of 4, which are 2 opening themes and 2 ending themes from the show) and I added/switched a lot of buttons to have icons like the play/pause button, previous/skip buttons and both sides of the volume slider. Because of the added playback slider and the icons taking up more space I had to increase the window height of the music player and I also slightly darkened the background of the player too to increase the contrast of the text and buttons and stuff in front of it to make them easier to see on lighter cover art. Lastly, if the song ends it will automatically move forward to the next song, the same thing if a song was currently playing and you skip it’ll autoplay the next song, otherwise if you skip while paused it’ll stay paused.

Outside of the music player, I added drop shadows to all the windows and the current focused window gains a darker shadow to show that it’s focused. I also began work on a boot screen that I’ll probably create a cooldown for so that you don’t have to watch it boot up every time you reload the page since it’s pretty long but I’m having a really great time working on this project, it’s been really fun and I can’t wait to get to work on it some more. If I forget anything else I worked on in this devlog I might mention it in my ship.

Komi OS devlog 2

Over the last two days I:

1. Got a heavy cold, not fun
2. Started working on my music player, much more fun :D

I first implemented the nice blurred background you quite often get with music players, along with the music cover art. Behind the scenes I got the play/pause button to work and play the current song as well as a working volume slider. I’ve also implemented a function that lets me change the song that’s currently playing however I’ve not yet attached it to any buttons or anything so I can only do it via script. I think I’ll either just have forward/back buttons that move through a hidden playlist or I might make an actual playlist that you select from if I can think of a design for that. Almost forgot to say that I also have the music and artist’s names appear alongside the cover art and I created a spotify-esque icon to make it more obvious to people what my app does before they even open it. I believe I covered everything, a couple of minor annoyances when trying to implement things but I guess I’ll count that as new web ball knowledge.

Komi OS devlog 1

Gonna preface this by saying I really should’ve made more devlogs to split this up more because now I’m going to have to try and remember everything that I did, so here goes. I followed most of the guide initially just to get a similar setup working, but from the beginning I knew there were some fundamental things I wanted to change about the project like making windows use classes/OOP so that I can have multiple of them and easily interact with specific windows and another thing I wanted to change was just having some cleaner/nicer ways of doing things since I noticed the guide was kept relatively simple for absolute beginners. Anyway, once I had gotten as much as I wanted from the guide, I split off and started making the project fully my own. Windows being fully (I believe fully, altho I still have to do some cleanup) converted to using classes along with the ability to have multiple windows of the same app open is really the big main obvious one, however I have made so many tiny changes that don’t show visually which you’ll notice a lot more while you’re using and interacting with it, like adding mini app icons on window headers, changing the z-index ordering so it doesn’t infinitely go up, creating my own selection code for icons on the desktop including them requiring a double click to open, making some text/images non-selectable just like real operating systems and so many more little tweaks that really make it super intuitive to use. Currently I’m stuck on something trivial, I’m trying to decide between two images to use as the operating system’s “image” but I’m just going to set that aside for now, so instead next I think I will be working on adding either a music player or a settings menu that will allow me to change out the wallpaper, and maybe also save/remember anything you do on the operating system. Or I may leave that to WebOS 2 and just work on getting a nice base WebOS 1 page working by customising the operating system more to make it more unique. Either way I guess we’ll see. Sorry if you had to read this entire devlog I understand it’s a lot, so thank you very much.

Devlog #2

The word of the day API has been fully implemented and I put it on its own floating iceberg which makes it look so much better than when it was just hovering next to Charles. I also added the attributions required by wordnik to link to the word on their website and use their media logo. I also re-added the “splash” YouTube video that I originally had but made it take up less space and real estate on the screen and I added a nice little image underneath showing that it’s a recommendation of mine to watch. I also slightly tweaked positioning of the main search area and word of the day text as well as the position of the holes in the iceberg to make the entire thing more cohesive and to get that finishing polish done.

Yeah so I didn’t realise I needed to link Hackatime.

As the title says, I didn’t realise I had to link hackatime for my project hence why I’ve only logged about half an hour. However I can describe the things I’ve worked on this project up until this point.

Devlog

I decided not to follow the guide after looking through it as the images that nasa gives really did not match the sort of website I wanted to make so instead I took to making my own new tab page. It’s themed around an iceberg floating in the middle of the water with little wave effects and ripples when you click on the water. I also love penguins (and Piplup) so you might spot a little piplup swimming across the screen some times. You can also just chill and listen to music by clicking on Charles in the bottom right to play and pause the song. And for the main part of this project, in the centre on the iceberg is a search bar along with two options, one for changing the language and one for hiding the ai overview in your search. I’m currently implementing a word of the day from an api (my “real” feature) and to help stop people stealing it I’ve hidden the api key behind a cloudflare worker and also made use of caching so it will be very difficult to run out of requests but also caching makes it super fast like holy. Next I want to work on refining the design of the search area in the middle as I only just started changing it from the default bland grey look. Sorry for such a long devlog, I didn’t realise I was going to have to link hackatime and create some devlogs because for some reason I never looked at my project page until yesterday.

Final housecleaning before ship!

I’m not going to lie, I had a beautiful devlog written here before it disappeared because the video I tried to attach was over the 50mb file limit, but I’m going to try my best to recreate it because my dumb donut brain didn’t copy it as a backup before sending.

Today I worked on the final “housecleaning” for my project before I ship it for the first time which involved me making sure that every aspect of the game was playable. I did this partially by adding a list of controls that the player sees when they start the game so that they actually know how to play the game. I also exported it to the web again since I hadn’t tested that it definitely worked on there in a while and that was going to be the final destination for my game. Luckily I didn’t find anything gamebreaking and only found one new slight issue (ignoring the other issue I already knew about that I’ll talk about after) which was that when entering the pause menu using the escape key, you would have to press it twice to get the pause menu to actually show up since the browser captures the first escape key press to free the mouse, unfortunately there’s not much I can do about that but it does still work. The other issue that I already knew about was that newly instantiated objects would freeze the game the first time they’re loaded in however I still haven’t found a solution to this and there might not be one, at least to my knowledge.

However, I believe the game is still fully playable which is why I decided that the downsides were still able to be ignored to allow the game to still be a web game so you can have easy access to it. Sorry, I know that this devlog is quite a bit longer than my other ones but thank you for sticking to the end. :)

New Lighthouse Map! (and flash flood tweaks)

Today I created a lighthouse map to increase the variety of maps you play on in the game, taking the base of the castle and editing it to look like a lighthouse, which unfortunately now makes the castle look bare compared to it :( so I might add more stuff to that later. I also tweaked the flash flood disaster so that taller maps have the flash flood rise faster and lower maps have the flash flood rise slower to make the disaster more survivable but also increase the difficulty on taller maps. I’m loving the games progress and excited to add more!

Backstory yap (you can skip this)

It has been a while since my devlog, I started work on another project which I know isn’t a very good idea but I’m gonna get this project finished I think before I continue working on the other one.

Actual devlog

Today I worked on adding another disaster and this one might actually be my favourite because the atmosphere along with the sounds is so cool. What did I add? A thunderstorm. Bolts of lightning will randomly hit the ground, similar to the meteor shower it raycasts down and hits whatever it finds first, allowing you to take shelter under the roofs of buildings. However, there’s a 1/5 chance that lightning will collapse what it hits meaning you might have to move about if your cover gets blown (literally). One other thing I added was I made the sky darker to make it feel stormy and more claustrophobic. Super happy with how this disaster worked out and can’t wait to work on more! Next it’s time for another map since the last two devlogs have been on disasters (rightfully so since I only had two disasters before I started working on this again)

What this project is

This is a passion project of mine that I’ve had an idea for a while and I’m super excited to finally be able to work on it. Adam Young, most well known for his most popular project Owl City, is my absolute favourite artist. Instead of being quite depressing and gloomy which you hear a lot of young people wanting to listening to, his Owl City project is all (mostly) upbeat and optimistic and really really dreamy, and I would really recommend you listening to any of his songs. The idea for this game is you explore a big world, maybe play some minigames but most importantly just soak up all his music as you travel by relevant places, and I hope that by the end of the game you will have the same appreciation for his music as I do.

The actual devlog (#1)

Over the last couple days I worked on the initial player controls for the game as well as basic map layout to try and figure out how I want the game to work. The player character should actually be done for now as I’ve got it exactly how I want it, fully animated and all. The plan is to add more heads that you can swap out, with that being the main objective of the game - collecting different heads. I also spent a lot of time creating an intro that I had an idea for in my head which was really fun to work on and syncs with his song called “The Real World”, which is very apt for the title of this game and you also probably could’ve guessed that’s what the game is named after. I also added the “Adam Young sea”, I don’t remember how this idea came into my head but… it’s there… I guess (but fr tho it’s kinda mesmerising to look at) and it’s literally just his name waving up and down in the ocean.

First update completed today! I added some things that I was going to add originally in my project if I had more time like a pause menu and intro screen. I had to modify bits of my code in multiple places to get pausing to work correctly but after that there weren’t any problems so now you can take a break whenever you need :) I also added an intro screen when the game initially starts up so that you’re not just immediately thrown into the game after it loads so you can start when you’re ready. I also added a third disaster since I originally only had time to implement two, this new disaster is a “flash flood” where the chocolate ocean rises and you have to get to high ground before it drowns you. The main things I want to add to this project are just a ton more disasters and a ton more maps so that’s probably what I’ll focus on in the next few devlogs.