AuthorTopic: Modular Background Designs  (Read 4414 times)

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Modular Background Designs

on: February 18, 2014, 04:16:40 pm
If you've no idea what I'm talking about, think about Super Mario World for a moment. Remember how the gameplay was based around the variation of blocks around a level, but the background elements were always reused from previous levels? For example part of the BG was generic clouds, the other part was hills, and possibly more clouds in the distance. Or, in a different level, it was all clouds on every layer, and the furthest BG was sparkly stars. The hills/clouds of, say, the background's middleground layer could be interchanged with a different set of hills/etc. if they wanted it to. They were modular and allowed the game to be stretched over as many worlds as possible, with a limited number of assets.

Yeah, so, I was wondering if anyone here had considered such a concept before? If so, has anyone attempted it with any success?

I'm trying to design backgrounds with this concept in mind with a more mature style of artwork that can work with any set of tiles in a similar vein to the way SMW did it, but I'm coming up blank. I've scoured the internet for ideas on how to design like this, but I've found nothing at all. I'm looking for ways to design to keep the layered look, while being able to swap out the tileset or any background layer I want and still have the whole thing visually cohesive. Any ideas on how one might go about such a thing?
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Modular Background Designs

Reply #1 on: February 18, 2014, 05:57:41 pm
When posting about inherently visual matters, I highly recommend posting images as well.
Can you grab some screenshots of the specific parts of Super Mario World you're referencing?

It sounds like you're just talking about tiles, though. Tiled textures with random, singular doodads throughout.
Nearly every 2D platformer does this.

Offline RAV

  • 0010
  • *
  • Posts: 293
  • Karma: +0/-0
    • View Profile
    • Blackbox Voxel Tool

Re: Modular Background Designs

Reply #2 on: February 18, 2014, 06:53:49 pm
What he sort of means is that each tile itself is layered for variety. It's more than just sprinkled doodads, each thing is a seamless construction naturally.
Think of how it's done with base puppet sprites dressed with costume/hair/feature/equipment variants; like in the recent "Ace of Base" challenge on PJ.
I considered something like that for iso maps, with base tiles + dirt layers; eg a snow-layer that fits on different ground tiles.
Also thought about modular layers for 3d skyboxes, eg. different skies + different clouds + different mountains, etc.

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: Modular Background Designs

Reply #3 on: February 18, 2014, 07:17:13 pm
@Mathias: Good point. Sorry if my original post isn't clear enough. Image below should help. I'm not referring to the technical nature of tiles as modular, but instead to the overall arrangement of the tiles as a single background image perceived to be various layers that, if indeed these "layers" were separate, could be added/replaced/removed/palette-swapped depending on the type of game level desired.

For example a sky level could consist of the two 'layers' in image row 0, col 1 in the image below, while a hill/plains level would consist of the 2 'layers' in image 0,0 and a mountainous level would be the 3 layers in 1,2 for example, and a hilltop level would be the 3 layers in 1,3).





As you can see, the sky "layer" is almost exactly the same in almost every image. the hills could easily be palette-swapped for a night time level, using a different sky of stars instead of clouds in the farthest BG layer (which is actually done in the game when Yoshi gets wings if I'm not mistaken, though this was the most illustrative example I could find).

What I'm trying to do is find a set of principles I can use to design unique-looking background 'layers' that aren't quite as generic-looking or cartoony as these, but still keep them modular enough (while maintaining some sense of consistent lighting / color-harmony that applies to less-surreal environments) that they can be combined with any other tilesets (in the playable area) and foregrounds.

Hope that explains what I'm trying to do a bit better.

Has anyone else done something like this before? If so, can you offer me some tips/ideas/rules-of-thumb on how to do it?

EDIT:

@RAV: Yeah, pretty close to what I was trying to say. Sky color is one layer, clouds are on another, thicker clouds are another, trees another, closer trees another, bushes another layer, and finally, the playable area, and then a foreground of some kind. Say you don't need trees in the distance, but you do need mountains, you just swap them out. You may still want bushes, though your trees closer to the bushes won't fight with the mountains and wont look out of place without the distant trees you replaced with mountains either, or better yet, they work in-addition to the mountains. That's what I'm going for.
« Last Edit: February 18, 2014, 07:35:00 pm by astraldata »
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Modular Background Designs

Reply #4 on: February 24, 2014, 07:43:36 pm
I believe every one of your examples is simply tiles. Layers of tiles.

Even the little floaty clouds, with black eyes, in the top two examples. All the blank space in the cloud layers are simply blank/empty tiles.

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: Modular Background Designs

Reply #5 on: February 24, 2014, 08:52:03 pm
Yup, I'm aware of the fact that most old school SNES games used tile layers for pretty much everything.

I am, however, still pretty certain that, whether the tiles were on a single technical bg layer or not, the art director must have considered the exact number/kind of tiles that would be necessary to create the 'layered' look they were apparently going for.

After all, the artists had to know what type and amount of work needed to be done before the development team got fully underway with the final artwork I would think. There were few (or zero) wasted background-tile resources in the SMW ROM after all. That tells me the artists likely didn't just go about it willy-nilly and throw together a lot of tiles with no regard to what they were going to look like and work with (tile-wise) in the long-term.

For me, it's a point of curiosity as to what approach oldschool pixel-artists (who worked with heavily-modular artwork requiring lots of tiles) took to come up with their designs -- especially those background/tileset designs that worked well in multiple contexts. Take this screenshot for example of the genius I'm referring to:



See the way the clouds and the bushes are the exact same tiles? Though, with a simple palette-swap, they become two completely different things -- but, visually, they still work well together -- even on the same screen!

Despite having to be resourceful and creative with your limitations on the NES, the SNES cartridge that SMW used could have supported more tiles than were present in all of SMW. Why didn't they add more? Because they weren't necessary. The size of the game was sufficient with the amount of graphics they had because those graphics would be combined with varying backgrounds, palette changes, enemies/obstacles, and level layouts, creating a near-endless variety of possible level designs with only a small number of pixeled background/tile resources. This mindset is still used in a lot of Nintendo games today -- including 3d ones like Super Mario 3D Land -- that all still use a few modular resources designed to be arranged/combined/color-swapped into endless variations using the same base graphics or object-code with very very minor (non-fundamental) tweaks to their behavior/color.

I believe that same principle can be applied to backgrounds.

As with pixel art, or any other design, reusing elements/colors with slight variations provides a sense of unity that can't otherwise be achieved with all new or unique resources. I would like to discuss and brainstorm methods/principles in how to do this with larger game art like backgrounds/level props and the places this kind of modular stuff will and won't work.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/