pixel rooms!

The pixel room that inspired me! I think the artwork is from the Cyworld room building feature, but it may also be from this game!

I really love the pixel adoptables and various other graphics I've seen being shared around Neocities and the rest of the web, but just putting them together on a page didn't really make me excited. When I was trying to think of ideas for more pages to put on my shrines, I came across some cute old graphics from a couple of old browser games in Korea, Say Club and Cyworld, and one of them really stuck out to me (pictured above). I thought it would be cute to use a little room like that as a container for graphics I really like and want to keep, and to have a space (or two, or three, and so on...) on my website to interior-decorate!

The rooms I've made so far aren't solely my own work - they're sprite edits. I traced a layout and some furniture based on the room in the picture above, and for wallpaper and so on I've been converting textures from games like Stardew Valley and Animal Crossing into isometric perspective to use. Aside from that, though, I really want to let adoptable pixels shine, so I've elected to try to keep things pretty sparse for the base rooms.

Since I wanted everything to be pretty modular, I decided to use the rooms as the background of div containers, and to use relative positioning and the z index to put individual items where I'd like them in the room so that they can function as links back to their sources. In practice I've made some pretty ugly code - I know there's a more elegant way to do it, but with some trial and error I can still position everything where I want it, which is all that really matters, haha.

Here's an example of a room with just one piece of furniture clickable (hello Märchen, darling!):

This is what the code looks like.

"Wow, Lestat, that's fucking unreadable!" Sorry 💖

I set the container to be the same size as the background image to make my life easier. This is a very ridiculous thing I did, but I put the GIF I wanted outside the window on top and then layered the background image on there again in the exact same position to create the illusion of a cohesive animated background. I also did this in my Emet-Selch shrine in order to keep the bubble script I had on the page from flowing over the room but underneath the furniture, since it doesn't play nicely with Z-indexing. This is the part that's kind of dumb and inelegant, but if it works it works.

Anyway, aside from that it's pretty straightforward. I positioned everything where I wanted it, and set my Märchen gif to be a smaller size so he wouldn't obstruct too much space in the room. I also gave him a Z index that was higher than strictly necessary just for peace of mind.

Adding in new images isn't too hard, but they have to be put in AFTER the old ones, if I'm remembering correctly. For whatever reason putting a bunch of items with relative positioning in the same div makes them not want to play nicely (probably something about me being bad at HTML), and I fucked everything up trying to add stuff to Emet's room at one point. Adding line breaks prevents that, but elements get pushed waaay far downward for some reason? In any case, it's no big deal to reposition stuff if it gets knocked out of place, it's just fucking annoying.

After writing this page I went on adding more stuff to my rooms and noticed I'd really made a mistake with my code. Overflow is set to visible by default, which I didn't know, so adding stuff after a certain point made the page keep getting longer and longer. Setting it to hidden fixed that. I'm still not sure why some pictures show up so far down on the page, though.

great explanation! show me how to make one.

I'm glad you asked! If you didn't ask, too bad!

This is a color-coded version of the template I use to make the rooms. Feel free to swipe it and do whatever you want to it! It'd be cool if you linked back to this page so other people could use it if they're interested, but it's not a requirement.

This is a guide to isometric pixel art. It's useful if you want to repurpose textures or draw your own furniture to go in your room. Give it a read!

This archived game has lots of furniture and props to choose from!

Finally, here's some of the furniture from the original room I fiddled with. In the future I'd like to draw my own furniture and add it to the site as adoptables for other people's rooms (or whatever else they'd like to use it for).

return