Something fun
I really wanted to do something fun today. Not super intense and time consuming, not making the website 1000x better, not replacing all the tailwind css and js with my own custom solution. I just wanted something that would make me smile at the end. Thats why there is a little purple husky running across the footer bar!
How it started
Its not an original idea. There is a game (tool really) that got recommended to me on steam that adds pixel art pets to your task bar. It was a cute little idea, adding some life to your PC, but it cost £8 so I didn't bother. And as the egotistical developer that I am, I thought it can't be that hard to do, I'll just do it quick. The only thing thats gonna be a real pain is getting the sprites to animate on the page.
As someone without any artistic skill, the hardest part was going to be making it look ok. I figured there are a number of places I could probably get a sprite sheet from and just animate it myself, or maybe even just get AI to make it quick so I didn't have to. As it turns out, while AI can make some cool and pretty images, it is no where consistent enough to make a sprite sheet! I originally asked for a pig, because I wanted to do a bunch of animals running across the screen, but that idea was scrapped when it took me 2 hours to make 1.
(Quick aside, a sprite is pixel art representation of a character/object. A sprite sheet is copies of that character/object in different positions that create an animation).
In the end, I decided to use both, kinda? I didn't have the artistic skill to make a good looking pixel art husky, and AI didn't have the consistency to make it work, and the free sprite sheets weren't all about purple huskies (weirdly enough). So, I got ChatGPT to make me a pixel art purple husky, just one frame, which I could use as a base and edit from there, since I'm not good enough to make the whole thing but if I'm just moving the legs its gotta be somewhat easier right? Then I can use the generic dog sprite sheets to get the leg movement correct.
From there, I found Piskel, an online sprite editor. I figured it was gonna be bad, full of ads and try to make me spend £9.99 a month to export it to PNG, but I got that really wrong. Maybe I've just been burnt by "free" online services before, but this was a delight to work with. I created a new sprite, slowly outligned the image from ChatGPT into this editor (ChatGPTs image wasn't really pixel art, since it was in 4k) and kinda painted it myself, keeping the AI image as my reference, and that worked out really well. Piskel allows you to duplicate frames, so I did just that, deleted the legs and drew them taking a step, which was probably the hardest part of all and took me ~2 hours.
I also learnt that Piskel lets you choose an FPS and export it as a .gif file, so that saved me some time. I really do like that tool.
Adding it to the site
Keyframes. Its just keyframes. Starts at left: -10%, goes to left: 100%. Chucked a relative walkway ontop of the footer bar, turned off x-scroll on the body (when the image moved off the side it make a horizontal scroll bar appear and it annoyed me). The sprite itself does the animation in 45 seconds so it looks like its walking across the screen slowly (It might look bad on mobile). And I think thats it. Being able to export the sprite as a gif was unexcpected and really saved me some time so once the sprite looked good it was 90% done.
I might add more in the future, but for now its just a cute little thing that runs across the screen.
