Backgrounds

Experimentation

Like the character sprites, I need to figure out the best and most effective method of creating backgrounds, as well as figuring out which backgrounds are going to be the most useful when creating my teaser trailer.

Lowering the Resolution

This is the first thing I wanted to try - simply taking full-res photos and decreasing the resolution. As some samples, I grabbed some photos that I took on my Canon EOS a few weeks ago in a bus station as examples. Long story short, just lowering the resolution alone is not enough to make an image look like pixel art, as it just looks like a really quality picture.

Manual

The first thing I thought of doing to make my pixel art more stylised is to manually draw overtop of the low-res image (see below video for my method) however while this method looks absolutely amazing, and incredibly professional, it takes absolutely forever. Bear in mind that this video to the bottom took 32 minutes, and I only managed a small portion of it. In other words, while this method looks really cool, it's probably not the best option for my backgrounds, given how long and tedious the process is.

Posterize

This is the final method that I wanted to try is to lower the resolution, and then posterize the image. See, what I was trying to achieve with the manual method is to make similar colours all the same, however Photoshop actually has a built-in filter that does this for you, called "posterize". This reduces the number of colours in an image, which should hypothetically achieve the same effect as colouring it manually. I did run into a problem, however, as when you decrease the number of colours allowed in an image, the colours themselves get confused and change to vivid greens and oranges. The images below show the steps that I take, from the first image (which I found on pinterest), to lowering the resolution, and then to the result of the posterizing. This was the most I could posterize it without the colours looking off, however I don't think it looks too good like this - a good tactic might be to posterize it as much as I'd like (ignoring the colours), before manually filling in the colours with the ones I want.

Final Backgrounds

After landing on what kind of technique I wanted to use in order to pixelate and posterize my backgrounds, I now needed to figure out two things:

Which backgrounds did I want/need to create (my plan is to use these backgrounds in my trailer, so having one that is relevant to each of the five characters is the most logical option)?
How will I get these backgrounds to look good, and fit with the vision I have for the game?

I decided on the answer to the first one query quickly; I will make each of the five characters' idle backgrounds (i.e. where they stand normally in the game's downtime, as dictated in my setting and story subpage). The second query is a bit trickier; I ran into a similar problem during my final major project last year, as background illustration is really not my forté. My first solution was to try and find images on pinterest and google that I thought matched well enough with my imagined settings, however none of them fit right, and were usually too detailed, dark, or colourful to make good pixel art backgrounds. Furthermore, I would much rather have backgrounds that fit my exact vision, rather than the "next best thing" that I would have to settle for. So, naturally, my answer to this problem is going to be the same as it was last year - to avoid the hassle of having to draw out perspectives, shapes, textures, and lighting, I will simply create each of these backgrounds in 3D, before using the above techniques to pixelate them.

Now, a similar problem to last year arises with this method; I am not a 3D artist. I work almost exclusively in 2D, and while I do technically know how to use blender, it is certainly not my area of expertise. As I mentioned, for my final major project last year I created the house my music video took place in in Blender so I didn't have to make my backgrounds by hand, and I mostly used premade assets from the incredible resource BlenderKit (which I also used when making these backgrounds). I did not realise this at the time, but I have since been informed that most of the assets on this resource are actually scanned in from real objects, which means they are generally not optimised for Blender - this is evidenced by the fact that I just opened the old Blender file of the house I made last year, only to find it has over one million faces, and (horrifyingly) 2.2 million triangles. For reference, just in case you, like me, are not particularly adept at Blender shorthand, that is a LOT of faces, and having too many triangles is not good for performance, so having twice as much as the poly count for a fairly simple house is terrible. I'm determined not to make the same mistake again for this project, so throughout the process this time around I asked my peers who are a little bit more Blender-savvy for advice and help. My friend Jo especially was leaning over my shoulder for large proportions of this process, and showed me how to properly decimate the scanned-in meshes so they didn't break my computer, and if you see any point during the time-lapse you notice it goes into geometry nodes or Cycles settings, then that's probably her taking over. I was watching the whole time, of course, and she walked me through what she was doing so I understood, but I'm simply endeavouring to give credit where credit is due. I also made sure during this process that I sorted the BlenderKit assets by poly count, so the assets I've imported generally have no more that 5000 polys, and even those I tend to decimate to improve performance.

With that lengthily preamble out of the way, here is how I created my five backgrounds, and how they turned out:

Ross

Ross' background was made a little differently from the others', mostly because it was my first try and I was sort of finding my feet with it. I hadn't installed BlenderKit for the first half (as you can see), and so I actually modelled all of it myself. I took vast inspiration for the electric box from an image I found on pinterest, and I really love how it turned out (especially given that I modelled it all myself, with only one or two hiccups). The textures I found on BlenderKit, and as you can see I actually scrapped my hand-made bricks for this lovely texture, as I thought it looked more realistic (I found that just keeping the normal and displacement maps, combined with a harsh colour was enough to get it looking realistic).

I then used the techniques I described above to make it into a nice pixel art background - I had a bit of trouble getting it to remain pixelated when I scaled it back up to 1080p, as you for some reason have to merge it with the background for it to work.

Tokyo

This background was when I really started to utilize BlenderKit. Unfortunately Jo got a little bit over eager and nearly crashed the computer attempting to remesh and decimate the chair - this was quickly sorted out and then I continued to make the room. At one point in the process, Blender inexplicably crashed and I lost about 15 minutes worth of work, so I stopped the screen recording process - I then promptly forgot about it for another 20 minutes whilst I got my progress back, and so that's why the robot arm randomly appears and other assets are gone. I spent a little while trying to get this light bulb lamp to glow (which would have been easy if I'd have used cycles instead of eevee as I did in later scenes, however Jo was off on her lunch break at this point) so in the end I just used a regular light that I duplicated from the stick in the corner.

Other than those minor hiccups, I really love how this room turned out - I took loads of inspiration from just scrolling on BlenderKit, and I think it all really fits Tokyo's aesthetic.

Romeo

Romeo's room might be my favourite of all the backgrounds I've made - I'm a sucker for soft lighting, and the use of cycles instead of eevee really made a difference to how the scene feels.

This scene was definitely the most stress-free of them all. I took tons of inspiration from pinterest, and basically just pulled in tons of cozy assets and then pink-ified them. The one part of this scene that I'm the most proud of is the fairy lights - I initially tried to find some on BlenderKit, before looking online, however I realised that in order for them to look right and be in the right place, I would need to make them myself. I used bezier curves to make the wire, and then enlisted the help of both the designated Blender nerds of my class to get the lights attached quickly and easily. They used some kind of super cool (and complicated) geometry node to make the spheres lock with the curve. It worked perfectly, of course, and this is also where I first used cycles instead of eevee, to make the materials glow.

Noah

This room was so much fun to make - I imagine Noah's space being very cluttered and personal to him, as it's where he would spend all of his time, and so I had loads of fun putting in tons of trinkets and mess, such as the pot noodle and mug on his desk, or the boxes and microwave. I think that the dingy lightbulb and bare brick wall really give this place the look of a basement (which is, of course, where in the building it is located), and I ran into virtually no hiccups in the creation of this room.

I did, as you can see, change my mind at the very end of this process, as I thought the room was too dark and the screens to difficult to see, so I went back and added an emission texture onto all the monitors so that they glow. I'm quite glad I did this, as it looks much better because of hit, however in hindsight it would have been super fun to put CCTV footage of all the other blender rooms that I've made in the screens, as if they were cameras into the rooms. It would have taken much longer, though.

Oran

For Oran's room, I actually forgot to hit record on OBS Studios, so you can't see my exact process in making it. Pretty much the exact same process, and there's not many assets in the background, so use your imagination. No hiccups, and it looks great!

All Backgrounds

Page updated

Google Sites

Report abuse