Vector Murals to Pixel Art Backgrounds!

Waffle Logic · Sat 01/10/2022 08:27:07

Hi everyone!

I'm looking to make a game for my partner for our 10 year anniversary. We both love adventure games. We run a creative business together and our career started with vector mural designs of local landscapes, so I had the idea of making a little game starring me and her, walking around INSIDE our local landmark murals, and solving little puzzles.

I did a quick test downsampling one of our pieces of Seaton Carew, which is a local seaside resort. I would make all the backgrounds this way for this little game.

Would love to know your thoughts! As this mini game would be just for her, I like the idea of ripping some old sprites from classic lucasarts games and having her meet them within these scenes and have conversations? Perhaps each one could be convinced to give my character a gift to bring to Abby for our Anniversary. My character would be panicking, of course, because he's left it to the last minute and needs all the help he can get.

All the backgrounds would be made by downsampling our illustrations, which can be seen below:
https://abbyandowen.com/shop

My main dilemma is finding someone to help me build this little game, but that's another story!

(PS, the cat in the inventory is our cat, Theo).

(PPS, the characters are crude tests! I know the cat has a weird kink in his tail and my sprite could do with some pixels tidying, but thoughts on general style of them would be awesome too).

Owen

Snarky · Sat 01/10/2022 08:41:38

The art looks good and very suitable, but I wonder what you did with the downsampling, because you're getting some weird artifacts with inconsistent pixel resolution, as well as rather inexplicable dithering. (For example, right above the character's head there are strips of "fat" pixels and strips of "thin" pixels.) It almost looks like one of those image-generating AIs when told to make pixel art.

Waffle Logic · Sat 01/10/2022 09:52:27

For the downsampling of the mural artwork which is originally drawn in Adobe Illustrator as vector over the top of a pencil sketch.

I took an exported Jpeg into photoshop and resized to 320x210 (or whatever the Monkey Island BG size is, can't remember off the top of my head). I chose resampling to the nearest neighbour (Hard Edges) to minimise anti aliasing, then went to mode>indexed colour, and dropped to 256 colours with diffusion dithering selected. I think it's generally done a decent job but I'd agree that the dithering on the sky (which was a gradient vector) and the dithering in the water both need retouching at the least.

Any thoughts on a smarter way to downsample would be much appreciated! New to this, and pixel art in general.

In terms of the sprites, you're right on the money Snarky! They're AI generations which I'm using to prototype the characters for the sake of speed, but they need tidying up to be usable. I'm hoping to have something made by mid-November and I've never turned my hand to pixel art before, so the way I see it is, this AI is going to be putting up enough challenges for people in the creative industries like myself, and any way I can work with it (in between shaking my fist at the sky), all the better.

Snarky · Sat 01/10/2022 12:45:18

Quote from: Waffle Logic on Sat 01/10/2022 09:52:27Any thoughts on a smarter way to downsample would be much appreciated!

What you describe sounds fine (as you say, you might want to tweak the dithering, but it's a good start), but there is something off about the image as you have uploaded it here.

Examining the file in an image editor, I think I see what it is: the version you have uploaded has been upscaled again, to a resolution (808x579 with the frame, 784x556 without) that is not an even multiple of the original file. That means that pixels are unevenly stretched, with some strips "fatter" than others.

If the game resolution is 320x240, you should share it either at the original scale, or upscaled by some integer multiple (640x480, 960x720, etc.) using nearest-neighbor to ensure the pixels are preserved without distortion.

But other than that minor technicality, I think this looks good. The graphics are perfectly viable for an adventure game.

Waffle Logic · Sat 01/10/2022 23:43:12

Thanks everyone! Much appreciated. I'll probably lose the Lucasarts UI and go full screen with the backgrounds.

heltenjon · Sun 02/10/2022 04:25:07

Quote from: Waffle Logic on Sat 01/10/2022 23:43:12Are there shared sprites and assets for RON too?

https://www.realityonthenorm.info/resources.php

Waffle Logic · Tue 04/10/2022 08:40:13

Hi again,

I've uploaded this one at x3 the size of 320x200, Hopefully it works better!

I'm wondering if there are any open-source sprites of people that might fit well into this type of environment that I can modify? Happy to give attribution too.

Snarky · Tue 04/10/2022 12:52:18

Yeah, the second screen looks good! (You might want to clean up some of the linework, but everything looks scaled correctly.)

You could check out the AGS Awards ceremony. A lot of those avatars have been open-sourced, and if you let me know which you're interested in I can share them, licenses permitting. (We haven't made them publicly available just because of the work it would take to set everything up properly with the right licenses and attribution.) And if it's just for you and your partner and you don't plan to share it publicly, copyright status doesn't matter much, and you can find sprite sheets for a lot of classic games online.