AuthorTopic: Visual Designs for Sidescroller Levels  (Read 5899 times)

Offline astraldata

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

Visual Designs for Sidescroller Levels

on: August 11, 2014, 03:37:51 am
What process or methods do you use to come up with specific-looking terrain, backgrounds, and set-pieces (tilesets) for side-scrolling / platform levels? How about when all you have to go on is a very general theme or vague idea?

For example, say you need to come up with X number of levels for a game, but you only have vague ideas from the game designer -- i.e. I have to make a mansion level, a desert level, and a highway level for example, but I need to come up with a way to convert the vague themes to more specific-looking locations and create tiles, props, and backgrounds for them without any further specifications.

I've had this issue on many occasions, as I'm sure someone else out there has too, but I personally have just winged it with random references as best as I can to generate ideas for my set-pieces, but it's hard to find good references without solid ideas as to what you're going to put in the level in the first place, so it becomes pretty tedious in the long run to do it this way, and thus I'd really like to find a better way to go about this sort of thing, especially for larger projects (where good inspiration might be lacking). What would do you do in a situation like this?

Is there a better way to go about converting such abstract ideas like these into specific platforms & slope tiles you can walk across, or props/variations that fill the middle-ground spaces behind the player? How do you go about generating ideas for such things?

Do you just write out a list of stuff you want to include in the level and google a ton of random refs with those keywords, hoping you can find stuff whose visual style and photo angle matches close enough to what you're looking for? That just sounds too impractical imo, but maybe it really is the way some of us work??
« Last Edit: August 11, 2014, 05:10:36 pm by astraldata »
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline YellowLime

  • 0010
  • *
  • Posts: 227
  • Karma: +0/-0
    • View Profile
    • Sour Pixels

Re: Visual Designs for Sidescroller Levels

Reply #1 on: August 11, 2014, 08:59:51 am
The question feels too vague still:
Do you mean inspiration for game-design set pieces? (new types of slope, platforms and props?)
Or just visual inspiration? (nice patterns and shapes and colors?)

I think that the physical locations/sets aren't the most important factor to take into account if one wants to make a beat-em-up stand out. No locations will save a beat-em-up starring your "Cody and Haggar fighting a gang to save the girl" from being generic.

If you really want it to stand out, I think a different setting (Victorian Era, Native America) or different story (bad guy defects, circus performers go on a rampage) is far more effective.

But even if you (and/or your partner) don't want to stray so far away from the classical formula, I think the personality and look of both the characters and the enemies has more weight in creating a more 'unique' game. (Also gameplay elements, but we're talking art here ;))

I guess I didn't answer your question, but since I saw you were so concerned about the game standing out, I wanted to share my opinion on the matter. :-X

Offline astraldata

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

Re: Visual Designs for Sidescroller Levels

Reply #2 on: August 11, 2014, 06:28:40 pm
Yeah, I was mostly referring to inspiration for game set pieces like you mentioned.

Ideas for visual inspiration (patterns/shapes/etc.) would be appreciated too, since it kind of ties in with the whole issue of vagueness and creating something specific for a platform game from a generalized theme/idea essentially.

And yeah, I agree about having a unique setting for standing out. That said, I was also talking about platform games, not beat-em-ups (I just used a poor example for the context in which I was trying to refer -- I edited my original post for clarity).

Standing out aside, I'm mainly only referring to situations where you have no control over the setting/theme of a game but all the same must do something creative with a fairly generic theme/idea that might not even seem suited to platforming gameplay (i.e. rolling desert dunes or a long stretch of highway -- but for platforming game -- as hinted at in my original post).

Games who have done something with these sorts of levels (i.e. Megaman X and Megaman X2 for example, highway and desert respectively) have really taken some liberties with the way these appear perspective-wise (the highway [that doesn't look like a highway at all] in MMX) or the context in which to represent them (the desert base [instead of a true desert w/dunes] in MMX2's Overdrive Ostrich's level).

I think one of the Star Wars games on the SNES did something with a true desert level though, but as I recall, it didn't really have a middle-ground area to deal with perspective-wise, as far as I can remember, so it it didn't have to worry about making platform tiles with the kind of perspective MMX2 (or especially something like Donkey Kong Country) had. If it's not a straight side-view, it's a lot more complicated imo to come up with stuff to deal with the potential perspective-distortion issues. This kind of perspective (which is the sort of perspective I'm working with now) leads to even more difficulty in designing assets because it requires coming up with more props, etc. in the middle-ground to deal with the transition from the middle-ground to the distant background elements. In addition to my original question about conjuring up ideas for platforms and set-pieces, how do you tackle this perspective issue when designing your tiles -- especially when it comes to slopes, etc.?
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Kasumi

  • 0010
  • *
  • Posts: 275
  • Karma: +1/-0
    • View Profile

Re: Visual Designs for Sidescroller Levels

Reply #3 on: August 11, 2014, 11:25:24 pm
Disclaimer: I've never done this sort of work professionally, nor worked on vague themes. (That weren't my own vague themes).

But typically what I do is create a document in the screen resolution with the palette I'm using. I then quickly sketch photos that match the theme in this document, to see what will read, what colors work together to create objects etc.

Here's an example of things from a "beach" theme:

I vaguely keep the restrictions (if any) in mind while drawing, but typically just want to know what will read at the given size/resolution/palette. From there I take what's interesting and put it into the set, which is where things get imaginative. The middle picture is a different kind of beach than the bottom right, but you can figure out how to connect them in your set to create "unique" structures. The top left is actually already a combination of ideas. The original image was pretty plain, so I ran through my random slideshow to find other things to add to it.

I don't have much info for finding good ref, I just save cool images while browsing in general so they tend to be there when I need them. I put what I have on a random slideshow and draw what comes up. Sometimes I have to hunt a little, and I do what you say. Look for search terms related to theme. And this can be tedious, but it also adds to collection for whenever you might next have to draw a similar thing.

Also, sometimes looking at textures (from/for 3D games) can be really interesting. Because they're built to tile/loop obviously, but I didn't think of them until I encountered some in another search.

For how to convert things to slopes/such... typically while sketching it just comes to me. "This would be a good slope. This could be a drop-through platform."

I have no advice on the perspective issue. The cove in the bottom middle? Realized I couldn't use it after actually making real tiles out of it, because it implies there's water back there, and it not being horizontally aligned with water when it ends is... weird. Hopefully that's helpful.

Edit: I'm reminded of this: http://www.pixeljoint.com/pixelart/87096.htm

That dude drew 100 trees from reference. I looked at this and checked out every tree in his ref list that looked cool. That Rainbow eucalyptus, mmm.... I saved images of every single tree I thought was cool. Even though... I'm not working on trees right now. So next time I'm to make a forest set, or trees I'll have REALLY COOL INSPIRING images already. Stuff I wanted to save just because I liked it so much, not because it was for a project. This is also how I attempt to avoid generic stuff. if I need to search while I'm making the thing, I'll tend to settle for less cool and less unique images. My goal is always to preempt a problem of inspiration. If I see things like, "Places on earth you won't believe are real." I'll look at it and save the cool stuff.
« Last Edit: August 11, 2014, 11:44:46 pm by Kasumi »
I make actual NES games. Thus, I'm the unofficial forum dealer of too much information about the NES

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Visual Designs for Sidescroller Levels

Reply #4 on: August 12, 2014, 08:40:34 pm
Quote
What would do you do in a situation like this?

You need to find a balance between form and function.

Also attach an event or mood to your locations.
This will make them a lot less vague --> more fun and easier to work on.
Here's some examples.

Haunted Mansion
Classy Mansion
Drug dealer Mansion

Frozen Desert
Sagebrush fire Desert

Heavy Traffic Highway in the morning
Abandoned Highway at night

Make your set pieces interactive.
You'll get a better idea of what you need and what would be creative.
Give them a function.

Process wise:
Do you have the collision and level designs already built and you are going to pixel over it?
Or you are doing the artwork up front and will build levels and game ideas as you go?
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline astraldata

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

Re: Visual Designs for Sidescroller Levels

Reply #5 on: August 13, 2014, 12:42:09 am
@Kasumi:
Those are great considerations Kasumi -- I never thought to approach it that way. Looks like it would work excellent for worlds based on reality. I wonder what you would do for more abstract sort of worlds?

@PPD:
Never thought of assigning an event or mood actually -- would you have any tips on doing that? For example, what event or mood might you assign to a level called "Steam Factory" without any idea of what it might consist of except maybe steam-pipes and conveyer belts?

Regarding Process:
I generally do the latter, and I'd like tips on that most if possible, but I'd also really like to know how others in the industry go about the artwork for the former process too though -- I've seen a lot of games that look like they were done layout-first, then graphics, but always wanted to know what their approach was (because reusability and modularity seems difficult to achieve this way) -- that said, do you have any tips on how to go about this type of art process too?
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Visual Designs for Sidescroller Levels

Reply #6 on: August 13, 2014, 12:53:14 am
Quote
what event or mood might you assign to a level called "Steam Factory" without any idea of what it might consist of except maybe steam-pipes and conveyer belts?

Just some random ideas for things I would find interesting to look at and also affect the flow of the level design.

- Busy, functional, happy work day Steam Factory
- Dangerous, cruel, slave labor Steam Factory
- Empty, low tech, boycot/riot outside, police enforcing crowd control Steam Factory
- Ancient, abandoned, rusting, collapsing Steam Factory
- Shoreline, automated, sinking Steam Factory
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline Kasumi

  • 0010
  • *
  • Posts: 275
  • Karma: +1/-0
    • View Profile

Re: Visual Designs for Sidescroller Levels

Reply #7 on: August 13, 2014, 01:26:27 am
There's things like pink lakes out there. Volcanoes with blue flame. You could go totally galactic and do something based on the Pillars of Creation.

Even some of the more surreal junk from Earthworm Jim 2 like this map could be made by thinking of red blood cells and microscopic life. If your theme is beach, you're stuck with beach. If your theme is abstract, you can mix really odd stuff.

Maybe you mean even more abstract than that. I'd say at that point it's patterns. I'd look at fabrics to see what makes a good pattern.

I also agree with PPD. If a generic theme is giving you trouble, make it less generic. Purple Abstract could become macro photo eggplant world.

As far at things in a level called Steam Factory, check out Metropolis Zone from Sonic 2. Could have robot arms swing the character, or random trains (steam powered!) to carry you. Water that evaporates into gas carrying the player up with it. Depends on how grounded in reality your character/levels are in general. If you have no obligations to reality whatsoever, there's all kinds of neat stuff to do.
« Last Edit: August 13, 2014, 01:27:58 am by Kasumi »
I make actual NES games. Thus, I'm the unofficial forum dealer of too much information about the NES

Offline astraldata

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

Re: Visual Designs for Sidescroller Levels

Reply #8 on: August 17, 2014, 05:30:40 pm
@PPD:
I'm starting to get where you're coming from regarding idea-generation (thank you for that btw) -- but the problem I've really got is creating modular enough tiles for something like the below image (especially when it comes to composing tilesets w/ multiple slope angles):



Any ideas on how to go about drawing these sorts of slope graphics in a way they can remain modular? I'm really not sure of the standard approach to composing a tileset for something like that, so any advice on different processes or approaches would be really helpful if you have it.


@Kasumi:
Those are some really great suggestions. I had no clue there were pink lakes in the world. How do you find out about stuff like this? (I ask because I tried googling the phrase "interesting lakes" and it just wasn't enough. ;P )
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: Visual Designs for Sidescroller Levels

Reply #9 on: August 21, 2014, 09:12:15 pm
I like this topic.

Nice points, PPD.



. . .
Any ideas on how to go about drawing these sorts of slope graphics in a way they can remain modular? I'm really not sure of the standard approach to composing a tileset for something like that, so any advice on different processes or approaches would be really helpful if you have it.
. . .

Same as any tileset, sir: get your hands on the template and simply swap out the art in each tile.

That Earthwork Jim screenshot uses 16px tiles:


Or are you talking about designing your own new tileset from scratch?

How will collision detection work in your game?

Offline astraldata

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

Re: Visual Designs for Sidescroller Levels

Reply #10 on: September 02, 2014, 07:32:39 pm
I'm talking about designing your own tileset from scratch.

In my game, collision detection will be done with tiles, 2 types of downward slopes (i.e. shallow and steep slopes), and 2 types of ceiling slopes (in areas with ceilings). I'm going for a more 'top-down' view akin to something between Donkey Kong Country and Megaman X (both collision and view-wise), but I can do more free-form collision-wise if it's easier to design/draw for.

Modularity in visual assets is my main desire, but combined with enough variation in centerpieces/variety/details to keep the visual interest as strong as possible throughout a particularly long and continuous level design with no screen-breaks. I'm aiming for a look between a 2d fighter and platformer -- i.e. enough visual interest like you'd have in a nice fighter-level, but not so much detail that it can't be reused in other parts of a larger platformer-style level. The problem with the platformer level is that it ends up looking somewhat too repetitive if I repeat large detailed visual assets too much, but I want to keep the wow moments too, although I don't want to draw too many unique graphics.

I was thinking that maybe tiles can allow some of the more unique formations in the level by redrawing only a small portion of the larger tile, but I was also thinking that perhaps drawing many larger tiles with large variations might also work better? Which approach do you feel is generally better and/or faster in your opinion?
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/