Grass Textures, Apropos of Nothing
So, after work (being as all of this has to be done after work), Voxel showed me these isometric textures that she’d been working on throughout the day:
Handsome textures indeed.
“These are perfect”, I said.
Then, I asked if she could make me a top-layer for the grass.
”A what?”
”Well, you know, if you were to stand on the grass, some of it would display behind your feet, and some of it would display in front of your feet - so, if you could, like, cut out some of the grass that would appear in front of your feet, I can stack the layers so that objects appear to be nestled in the grass rather than standing on top of it”
”Well, if you want that, can’t you just paint out the bottoms of the things that you’re putting in to the grass?”
”Yeah, but we’re probably going to have a lot more objects in our universe than we are going to have types of terrain, I think - so it makes sense for the terrain to flow around the objects rather than vice-versa - do you want to have to paint out the bottom of every single animated object in the entire game?”
At this, Voxel just stared at me like I was speaking French. “I thought you said we were starting with just some sheep and grass - lots of objects? I don’t know. What if we just make the characters without legs so that they don’t sit directly IN the grass?”
”That’d work, but what if we have other ground-level stuff? Like, uh, cans. “
“Cans?!?”
”Okay, here’s an idea - what if I just take any element that I’m displaying on grass and mask out the feet with a gradient - that should give the illusion of them vanishing into the grass, right?”
We tested it out in Photoshop and it looked pretty okay. Plan made.
I was in the process of futzing around with procedural music, but I needed to integrate these textures right away if I wanted to be able to give useful feedback on them. So I had to take the current state of the isometric grid, which looked like this:
and integrate Voxel’s new grass texture. It… didn’t take too long.
You’ll note that my Pixi filters and the process of small-squashification take Voxel’s beautiful art and make it look much worse, more like SNES-era pixel-art, which is kind of what I’m going for. Some time might be spent pixel-twiddling to take her gorgeous concept art and really concretely pixelify it - bump up the contrast a little, that sort of thing. The A E S T H E T I C here is “Windows 95 game”.
You’ll also note that my Groovelet world is filled with chess pieces. I’ll explain the chess stuff in more detail later, but for now, let’s just say that the chess pieces are temporary developer art, intended to hold the fort while I build out More Engine.
With the grass tiles placed, I had succeeded! I called Voxel over to look at the triumph I had wrought, not realizing that she had already gone to bed. She blearily got up, looked at her tiles rendered in gorgeous scanline-chique, and with a “hmph” of what I can tell was deepest admiration, went back to bed.
Now, for the icing on the cake: the gradient mask layer.
Unfortunately, I found stacking a mask on a piece in the way that I wanted nearly impossible. I don’t want to go into technical detail, but sometimes the interaction between react-pixi and pixi.js is documented somewhere between “not at all” and “zero”.
After multiple hours of trying to shoehorn a gradient mask on top of my pieces, and after reading through every word of pixi.js and react.pixi’s maybe 12 half-hearted collective lines of documentation on masking, I finally gave up, sunk my head into my hands, and made the whimpering sound I make when defeat has frustrated me so badly that I don’t think that I can continue.
What if I … just… did it the way that I thought I’d do it in the first place? I’m not much of an artist, but I can art!
I took the original art and erased everything except what I felt was definitely the foreground.
Then, I futzed with my isometric grid code until it wrapped anything on the tiles nicely with both the background and the foreground, which produced this:
Look at how lush it seems in comparison! ABSURDLY LUSH. These lushness levels are off the verdant charts!
now where in the hell did that little 2-square island come from