AuthorTopic: Sidescroller mockups!  (Read 6921 times)

Offline no face

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Sidescroller mockups!

on: May 09, 2009, 01:29:00 am
Hi guys, i've lurked here for a while but never felt comfortable posting anything until now.

I've been making a sidescrolling platformer in my free time with Game Maker. I started out with practically no spriting experience, and even now it's still very iffy but i'm hoping that with your help I'll be able to convey the mood and create readable sprites.

note that these aren't actually mockups, the game is actually somewhat playable already: i just went into it and took screenshots... meaning that there may be screen "tears" which unregistered GM games are infamous for. I went in MSpaint and fixed the ones i could find, though. These are at 200% resolution off the bat because i know how hard it is to see enlarged images using the forum zoom function. Tiles are 32x32 at 100%.

also lol i've never posted images before so i'm hoping i don't make a fool of myself by using image tags incorrectly:



^^^
For these two I was planning on putting another background layer behind the big green trees and using the good old parallax scrolling method for a sense of depth. But i'm stumped on what to actually put back there.


^^^
As you can see i'm trying to make very simple undetailed backgrounds and just use color and shape to convey the atmosphere. I think i remember a game called knytt doing this very well and i got motivated from it



But yes aside from my ramblings feel free to comment and criticize anything, it will be highly appreciated. I'll also try to get a GIF of the playable character's running animation up sometime soon, because i was having a little bit of trouble with it.

Offline andy_w

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Sidescroller mockups!

Reply #1 on: May 09, 2009, 03:28:10 am
I like the simplicity and I think it works well to convey a nice atmosphere
In the third image, the hair blends with the trees a bit, but otherwise it looks nice.

Offline Scribblette

  • 0010
  • *
  • Posts: 185
  • Karma: +0/-0
    • View Profile
    • Livejournal

Re: Sidescroller mockups!

Reply #2 on: May 09, 2009, 06:06:14 am
Busy squeezing in PJ assignment before GF aggro hits in a few minutes, little time - but those colour ramps seem rather flat. Considered more hue shift? Might make things look more appealing.
Now reading: Animator's Survival Kit, Drawing On The Right Side Of The Brain, Fun With A Pencil. No time to pixel!
Pixelated Anatomy|Foliage

Offline infinitegames

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

Re: Sidescroller mockups!

Reply #3 on: May 09, 2009, 07:10:41 am
I like it. My suggestion is you should do more shadows. Such as the square blocks attached to the tree trunks, you could have a small shadow on that using the same colors you already have. It might add some depth and I don't think it would make it too much busier.

Offline Arne

  • 0010
  • *
  • Posts: 431
  • Karma: +1/-0
  • Panties.
    • View Profile
    • AndroidArts

Re: Sidescroller mockups!

Reply #4 on: May 09, 2009, 09:48:02 am
I agree about the 'flat' color ramps. Some of the gradients on the blocks also fail to convey volume, perhaps because you've placed the light at the edges (top of the shapes).

If 3 is the brightest, you kind of go

123

pillow shading would be

12321

I prefer something like

11123332

If the light coming from above and the observer is placed at the side, the light will not be on the top of the shape, since it's relative to the observer. Hold a cylinder (like a pen) straight under a light and you'll see that the specular ends up on the side-top of the shape, not the top.
« Last Edit: May 09, 2009, 09:49:48 am by Arne »

Offline willfaulds

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

Re: Sidescroller mockups!

Reply #5 on: May 09, 2009, 10:52:28 am
I agree with crits about the flat ramps and shading (the tree trunks and square blocks)

Here are some ideas about colour unity and a little on priority/readability (Explanation below)



Frame 1 - Yours
Frame 2 - Background Mask (Roughly colour of sky. That is usually the permeating environment colour)
Frame 3 - Set Background Mask to 'colour' blend mode and opacity 50%
Frame 4 - Lightened foreground to increase the priority/readability
Frame 5 - Reduced saturation of background to increase the priority/readability

When I refer to priority/readability it mean how easy it is to see what is background and what is not (How easy it is for the player to see platforms etc. and play the game).
« Last Edit: May 09, 2009, 10:54:54 am by willfaulds »

Offline no face

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Sidescroller mockups!

Reply #6 on: May 09, 2009, 04:49:17 pm
Quote
Here are some ideas about colour unity and a little on priority/readability (Explanation below)
*snip*

Wow, that is really cool. I'm going to have to use that technique. I don't quite agree with the final piece though; with all of the desaturation I think it has a completely different feel, something like autumn or a burnt down forest. Now that i stare at it longer, I think i actually kind of like #4 better. But yeah it's obviously much more readable and I think i understand the idea behind it.


Quote
I agree about the 'flat' color ramps. Some of the gradients on the blocks also fail to convey volume, perhaps because you've placed the light at the edges (top of the shapes).

If 3 is the brightest, you kind of go

123

pillow shading would be

12321

I prefer something like

11123332

If the light coming from above and the observer is placed at the side, the light will not be on the top of the shape, since it's relative to the observer. Hold a cylinder (like a pen) straight under a light and you'll see that the specular ends up on the side-top of the shape, not the top.

Got it. Where do you think this problem is most noticable? I think i see what you mean for the red stones in the first two pictures but I thought the orange ones in the third were better  :(



I'm making a new mockup for the first area right now; trying to incorporate all this awesome advice. I've got a problem though... the red stone cliff tiles. Not only do they seem undersaturated, but red doesn't really even match with the theme of this area imo. However, every time i try to change their color and up the sat, they tend to look all plastic-y and fake. Any tips?

otherwise thanks for the great advice

EDIT:


I tried to improve on the hue shifting

Added shadows under the large blocks

Gave the vines on the little horizontal log some highlights

Completely changed the color scheme of the stone cliff tiles (for better or for worse...  :()
« Last Edit: May 09, 2009, 06:02:21 pm by no face »

Offline Arne

  • 0010
  • *
  • Posts: 431
  • Karma: +1/-0
  • Panties.
    • View Profile
    • AndroidArts

Re: Sidescroller mockups!

Reply #7 on: May 09, 2009, 06:45:38 pm
I was mostly talking about the logs. It's less of a problem on the one with vines around it because the vines help to show the form.

Offline no face

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Sidescroller mockups!

Reply #8 on: May 09, 2009, 07:14:05 pm
I was mostly talking about the logs. It's less of a problem on the one with vines around it because the vines help to show the form.

OH DUH now i see it. That's actually pretty blatantly out there now that I look at it. The blocks n' logs were some of the very first tiles i made for the game so i've probably been desensitized to them after staring at them for so long.

How's this?

Offline Ergg

  • 0001
  • *
  • Posts: 11
  • Karma: +0/-0
    • View Profile

Re: Sidescroller mockups!

Reply #9 on: May 09, 2009, 09:11:27 pm


But I have also used even more colors...
« Last Edit: May 09, 2009, 09:15:07 pm by Ergg »