Tiles, Lighting, and Art

Hey folks! Hope everyone had a good weekend. I sort of violated one of my rules this weekend and did some work in my brief free time. I had a real hankering to work on some pixel art spaceship stuff, so I couldn't help myself.

Up until now, I've been using a hacked-together, green ship layout tileset I made many years ago. It was a 10x10 grid tileset I bumped up to 32x32 crudely. Neither the art style nor the quality were my goal, so I set about working on some bespoke 32x32 tiles for this prototype.

Here's a shot of what I came up with:

IMAGE(http://bluebottlegames.com/img/screenshots/screenshot-2015-10-26b.jpg) Who doesn't like light bloom?

Now there's a lot going on in this pic, so let me break things down.

First, the new artwork. I drew some new tiles which combine a white exterior cladding with rust-colored girders/structure and blue-tinted interior walls. The floor is also a rust-colored grating. I think it's a big improvement over the old tiles, for sure, but still pretty basic. Even so, it's a step in the right direction, and more importantly, has revealed some new questions I need to answer about the game. But let's put a pin in that for a moment.

The second thing you'll notice is that there's a big white line down the center. This is where the image is split between a flat "diffuse map" renderer and a "lightmap" renderer. (A crude lightmap, but bear with me.)

"Diffuse map" just means the tiles are drawn without any shading. The input images are drawn on-screen as they appear in the files. This is on the left.

"Lightmap" means the tiles are tinted according to nearby lights. Some tiles can block light (such as walls) while others don't (like floors). This is the right side.

Now, this may not be the best map layout to illustrate, but it's what I screengrabbed, so we'll work with it. Notice that the left side is the same brightness everywhere, and doesn't look too bad. The right side, on the other hand, has variable brightness, including a completely dark room. You can also see how the lights affect nearby walls and floors, with the tiles getting darker as distance from light increases.

Here's where the question comes in. Notice how the lights inside the ship are illuminating the outside cladding of the ship? It's also happening on interior walls, but the walls are darker so it's hard to tell.

This is due to the way I've drawn the tiles. In this tileset, a single tile can "straddle" up to three materials. E.g. an outside wall has 1/3 cladding, 1/3 rust-colored structure, and 1/3 interior blue wall. However, the lighting engine doesn't know that. It just sees a single tile, and lights the whole thing.

So my next experiment was going to be creating a tileset where each tile is a single material. One whole tile for cladding, one for structure, and one for interior wall. In theory, this would mean exterior cladding (and even the rust-colored structure) would remain unlit in such a tileset, and the lights would only affect interior walls. It would also mean that interior dividing walls could be lit separately from either side.

However, the trouble I'm running into is that 32x32 tiles look way too "thick" for each of those materials. In order to have a double interior wall (like we see between two adjoining rooms above), that'd be 64 pixels thick. And with humans only 32 pixels wide, that's one heck of a thick wall :)

(I can sort of bypass this problem on the outside cladding since only one side of it needs to connect to structure. The other is exposed to empty space, so I could make them less than 32 pixels thick, if desired.)

Now, one's first instinct might be to "just make humans bigger than 32 pixels" and/or make the tiles smaller than 32 pixels. However, then we start to run into another problem: the game gets a bit weird when the human size doesn't match the tile size. Humans start clipping through walls when they walk around. E.g. they'll see that a 16x16 tile is walkable, and move into it, but they'll overlap into the adjoining wall tile without triggering any problems in the pathfinding code.

It's probably solvable, but it breaks with Flixel's standard pathfinding algorithm. So I'll need to write my own code atop it if I want to do that. Not sure if it's worth it. (Then again, I'm already writing my own stuff for the lighting, so maybe...)

Anyway, food for thought. It was a welcome break from boring UI and data-parsing work, though :)


Kaaven's picture

"Who doesn't like light bloom?"
I don't! Seriously ;)

Anyway, about the tileset. The good old RPG Maker (and any other 2D games, such as Warcraft 2, C&C, etc.) had a kind of transitional tiles that automatically formed a border between two "full" tiles (sorry, don't remember how those are called).

They look like the grass ones on the picture.

So the tileset defaults to wall (initially, all on screen is wall) and consist of two placable floor tiles - the space and the ship interior. Those transitional tiles would be formed when the two neighbor each other, forming a border with the interior part of the wall belonging to the "inside tiles" (and so being lit) and the tiles outside of the hull belonging to the "space tiles" (not being lit).

So it ends up being like this:
A - inside - lit by an inside light
B - inside wall - lit
c - outside wall - not lit
d - space - not lit

The trick with those RPG Maker tilesets was that it was automated in placement. Problem - such a simple generation method only allows for "square-ish" shapes.

<--Mighty (mini)Mod of Doom-->
DeviantArt Gallery of MoD Sprites

matsy's picture

I prefer the look on the right hand side.

Having each single material does lend it self for the player to be more creative, and more control in their ship design! I was also imagining that the player would have to place utilities (per your engine system) such as air ducts, water pipes, heating, and power which again would look too big if it were 32 pixels.

dcfedor's picture

@Kaaven, seriously? No bloom? I know it's been abused in some games (ahem), but I think it can look good in others. Here's a snapshot I created with and without bloom (a.k.a. glow):


Note that the rectangular portion of the lights are the same RGB values in all cases. The "glow" seems more attractive to me, at least in this case. Though, the way it's setup right now, one could easily strip out the glow in a mod. (It's just painted into the sprite for the light.)

As for transition tiles, I think I see what you mean. And that's kind of what I'm wrestling with now. Two of the approaches I see are:


The top one is the most straightforward, and will behave as desired. Namely:

  • Outer walls only lit by outside sources.
  • Structure remains unlit (most of the time).
  • Inner walls only lit by inside sources.
  • Humans are the same size as tiles. (I.e. they don't overlap into non-walkable tiles.)

However, the top one also has really chunky-looking walls. Like, that hull is probably 2-3 meters thick. And inside walls would have to be at least two tiles (2m) thick to keep lighting segregated. (Also, note that the outer wall can "cheat" a bit by being less than a full tile thick, since it adjoins empty space.)

The bottom one is a bit closer to what you're proposing in the ABCD image above. The main difference is a "structure" tile between inner and outer walls. Now, with such a layout, I get hulls with a more reasonable thickness. But behavior depends on a few things.

First, it's worth noting that the lightmap code uses walkable flags to judge whether a tile blocks light or not. (But this can be changed.) Is the inner wall tile walkable? If so, my 32-pixel human is going to overlap with it if they walk there. Also, walkable inner tiles will allow light through to the structure (or C in your example).

Also, these "straddle" style tiles (where one side of the tile is floor and the other is wall) means a wall style will be locked to a floor style, or else one has to draw every possible combination. I haven't yet decided how tilemap graphics are going to work, so there may be room to make the floor and walls use different image sources. But it's something to consider.

One other benefit of this straddle style is inner walls can be much thinner while still having two (lighting) sides.

Some weirder solutions include:

  • Make the inner (and outer?) walls items and not structural tiles. E.g. place the wall panels like you would a bed, fridge, etc. This allows us to have super thin inner walls atop walkable tiles, but it wouldn't really help with inner walls. (No walk/light blocking.)
  • Change the tiles to be smaller than a human. We'll have to get tricky with walkable vs. non-walkable tiles to avoid creatures overlapping/poking through walls, but the added granularity would look better in terms of scale and lighting.
  • Change the lightmap code to use a smaller grid than the tiles. Kind of like 2 above, but just with the lighting. This might mean significant lighting code rewrites, shaders, and messy code to keep the actual tilemap in sync with the denser lighting tilemap.
  • Ditch lighting. Boooring! But it works.
  • Use a 3D lighting solution. This is likely a different engine than HaxeFlixel (e.g. Unity). Better for lighting, but starting from scratch in many ways.
  • Something I haven't thought of yet.

I'll have to play with the simpler approaches a bit first to see how they look/feel. That means thick 3x walls, straddle walls, and smaller tiles than humans, in that order.

And yeah, square-ish shapes will be an issue. Though, I've already been able to do sloped shapes that span multiple tiles just by writing the tile data to have special edge-connection rules.

@matsy, that's kind of how I pictured it, too. Player lays down pipes, conduits, HVAC, etc. once their floorplan was set. And 32 pixels is way too fat for a pipe, I agree. I was hoping I could use layering or similar tools to put multiple utility/item sprites into a single tile. But that's yet to be determined :)

Dan Fedor - Founder, Blue Bottle Games

Kaaven's picture

I really do! I am by no mean purist here, and do believe that those have a place and time, of course. But for the most part, especially in the lo-fi/pixelart games, the use of such tricks feels very cheap for me - it is equivalent of them young folks thinking that making black-white or sepia photos makes them artsy. "Yeah, all woods in sepia look somewhat mysterious - thanks for reminding me that. Can we go now?" ;) Also, it is in essence covering the tiles with a pre-generated filter, which screams "I'm insecure about my pixelart" a little...

Plus, it looks really artificial/unrealistic in my opinion - the light does not work like that, unless you're in a room filled with mist/smoke - a feeling it shares with lens-flare, in my head ;D

Anyway, about the tiles. First of all, don't tie the walkable flag with anything else - you may want to have different ones for that, simply to have a more space for maneuvers later (glass/plexi walls will block movement but not light, graters/meshes will block movement of people but not gases/smoke, etc.).

Second thing - I don't know if I'm getting it right but the way RPG Maker did it, is that each tile in a tileset had all 4 dimensions of movement set (left, right, up, down - allowed or disallowed), so you could have a tile from which an actor could move up, down and left, but no right (aka a wall).

Also, why don't just make the peoples a bit smaller instead? If their sprite won't "touch" the boundaries of the tile, they will be able to move near the wall with little to no overlap. Same for the ship gear - just make sure that each console/device have 3-4 pixels of it's "back" left free with the interior walls in mind. That will make those look a bit less "bulky" when standing separately too.

Walls being bound to floors - not if you make walls and floors on two separate layers (plus possibly third layer for gear, so that a console standing next to the wall will have visible cables going over the wall graphic and straight into the "structure" bit). Make all floors walkable by default, and the second layers of movement-directing walls above.

<--Mighty (mini)Mod of Doom-->
DeviantArt Gallery of MoD Sprites

matsy's picture

I was going to mention layers, but seemed like you'd still have to do a lot of coding around if the player is by the wall then add some sort of padding, but I guess you could just be a little crude and have the player drawn between the floor, and wall layers. Only thing with multiple layers is that there could be a performance hit.


dcfedor's picture

Fair enough. I've found myself arguing against certain effects for similar reasons. (Realism, or because everyone else is doing it.)

Just to dig a bit deeper, is the existence of the bloom the bigger problem? Or just the style of bloom? E.g. if the bloom had a more lo-fi banding/dithering/aliasing to it, would that improve it?

Or is it the (lack of) realism that bugs you? I'm usually a stickler for realism, too. So I get that. No light sabers and dogfights in this game :)

For reference, though, the Nostromo is the aesthetic I was going for. Here, you can see bloom in some of the shots, but whether it's old camera equipment, a stylistic choice, or all those cigarettes they smoked is hard to say. (Could even be that misty, UK air!) I've always chalked it up to mining ships being dank, musty, and dirty.

Regarding the separation of walk collisions from other physical properties, agreed. I'd like to be able to specify things like barriers to light, gas, liquid, and solids separately. (Possibly even multiple categories of light, so I can do things like rad shielding.) So it makes sense to separate the two.

And I think Flixel does it the same way. Namely, there's a flag for each direction to allow for one-way collisions on things like platforms. So paper-thin inner walls can block walking even using existing systems.

As for making human sprites smaller, that's an option. But it increases the size of all ship tiles relative to humans. Wall/floor tiles become thicker/wider by comparison, corridors wider, spacings between adjacent features are further (e.g. two creatures in adjacent hexes stand further apart). In an ideal world, tiles would actually be scaled the other direction, so there's more granularity/detail compared to humans.

What I may try is to make two floor tiles: one walkable and one non-. Then, when the ship layout has a wall meeting a floor, I can pad the intersection with a row of non-walkable floor tiles, and the larger human sprite will overlap the non-walkable floor but not the wall beyond it. (Or something like that.)

But even that'll depend on separating the walkable from the lightmap calcs, so we're accumulating many reasons to do so sooner than later.

And yeah, layers may be the way to go for floor and walls (and maybe other things). I already envision needing layers for things like items, effects, gases, liquids, etc. So I should probably be prepared to have a few of them.

Dan Fedor - Founder, Blue Bottle Games

Kaaven's picture

As I said, I'm not against any effect, by default. And I'm, too, a big fan of the Alien/Firefly aesthetic and a more industrial feel to my space adventures.

The problem is, that the bloom, especially this strong and colorful, gives more of a My Little Pony vibe for me. I would expect that kind of effect in some fantasy game where the world is lit with magic crystals, ever-glowing with a fairy-fire...

The one in the pictures you linked - it's barely there, with the exception of the few shots showing ship lights outside, and you can see the dusty air on the inside shots when it's present. And it's very, cold, fluorescent way. I would not mind cold, barely noticeable kind of extra lighting effects - it would be actually really neat. The very visible, bright, colorful ones are better for the happy mushroom lands ;)

The realism in games is nice, but secondary, of course, especially in the 2D games - the tilesets are meant to be more symbolic than actual things after all. But its always nice when it's there. Like the dusty air, allowing for bloom effect - I can bet my left pinky the reason why they sprayed fake mist on the sets of Alien is simply: "because it looks ominous". One would expect that, unless something goes terribly wrong, the air on a spaceship (especially the "on the budget" one) would be like in a closed office space - dry, average and otherwise air-conditioned to hell and back.

Same with the lights - why are all the lights on the ship fixed in such a way that the shine upwards, straight into the eyes of God/me? Or do those ships only have floor lamps? But if those are on the floor, the dudes should cause shadows when walking over them (which would be a super extra turbo cool effect, btw ;). Stuff like that - but, as mentioned, the realism angle is purely for nit-picking sake.

<--Mighty (mini)Mod of Doom-->
DeviantArt Gallery of MoD Sprites