[C+C] Stage Select Conundrums

[Zizka]

Howdiho!

So while I still got the title screen on the backburner for a while, I decided to give the stage select a shot.

The idea is to reproduce something which Megaman players will be familiar with:


I don't want to go ahead too much before the design is set in stone so that I don't do the same thing 15 times like for the title screen.

This is the concept I have right now:


So, of course, the idea is to have Pan look at the selected stage.

Is the setup ok? Do you think I should go ahead and detail the living shit out of that Stage Select screen?

Please accept my salutations and most beneficial blessings.

Z.

[Gil]

The kerning on the fonts could use a lot of work, as well as the letter shapes. The toasters demand more attention than the boss portraits, so you should probably reduce contrast of the background a lot. Don't forget that strong patterns (for example, toasters all lined up) can draw visual attention, as much as the colors. In this case, reducing contrast would probably mean reducing the patterning.

[heyguy]

Maybe you can remove the black outline of the toasters so they don't demand so much attention. The toasters being lined up perfectly draws attention like Gil said. Maybe go with a more varied pattern. Something diagonal that looks like this?

http://images.wisegeek.com/gingham-swatch.jpg

I agree with Gil and I also feel the letter shapes can be adjusted. The "T" looks sort of unbalanced. I think the middle part of the "S" looks slim but that's just my opinion. I'm definitely ain't typography/graphic design expert. I do definitely think the set up is good, can't go wrong with the Mega Man inspiration!

[Zizka]

New version, I tried to take in everything you guys said:

[Decroded]

maybe try bringing selection boxes together leave more gap on outside to see flying toasters and animate them moving on a separate background layer.
This way they don't take away from the focus of the screen which is the selection boxes.

[Gil]

I still have the same problem as with the title screen, there's no mid-level detail. It goes from small pixel detail and single pixel outlines to large areas of uniform color. I feel like you are working way too big for your own skill-set and it's biting you in the ass. A perfect distribution of detail tends towards the sierpinski triangle:

[Zizka]

I feel like you are working way too big for your own skill-set and it's biting you in the ass.

You should encourage me instead. If something is out of my comfort zone, all the more reason to practice it to become better at it  .

Thanks for the triangle composition though, I'll keep it mind for the title screen. For the stage select, I want something which looks like Mega Man so this wouldn't do.

@Decroded: Mmm... maybe. I feel like the boxes are lacking a bit at the moment too.

Still unsure as to where to go from there. I'll try what you've mentioned about bringing the boxes together, Decroded.

[Gil]

Thanks for the triangle composition though, I'll keep it mind for the title screen. For the stage select, I want something which looks like Mega Man so this wouldn't do.

It's not about the specific composition, it's about distribution of detail.

The Mega Man boss select screens are conform to Sierpinski, yours isn't. Mega Man 7's boss select screens aren't Sierpinski and I feel like they are weaker for it.

[Zizka]

You've lost me then. I have no idea how this:

follows this pattern. I honestly see no resemblance in design in both.

[Ryumaru]

It's not about the shape design, but about the distribution of detail frequency.

edit: derp, should've finished reading Gil's posts first. Notice the frames surrounding the characters. The 1 pixel thick rings are probably the highest frequency detail due to small size and high contrast. But they are subordinate to the circular corners, which fall in line behind the frames themselves which only exist to hold the portraits which all echo the overall square composition. The idea is a little abstract, but dwell on it a bit and you'll get it. It will be good knowledge to acquire too, as user interface like you have here leans heavily towards pure design over representation.

[Gil]

Yeah, Ryumaru explains it better. It's about distribution of details. How many areas are there with high detail, how many with low, medium, etc. If you go with a gauss distribution or golden ratio or similar, you end up with a similar visual distribution to the Sierpinski triangle, so it's a great reference for stuff like this. You'll find that people like Da Vinci were heavy into this stuff. To see it in the mega man screen, you need to squint, so it blurs a little. If you squint, everything is still recognizable, a lot of detail is still visible, etc. If I squint on yours, the skulls become blobs (since they only contain high detail), the rest becomes big swats of color and the bread stays just the same (aka, there's probably some medium detail lacking in it).

High detail is something like AA or single pixel outlines (the skull is almost fully high detail).
Medium detail is something like shading or the facial features on the bread or the text.
Low detail is just the big swats of color, like for example the square shapes.

[Zizka]

Well, I still find the whole thing sort of confusing but the explanation helps. Because, when you look at the Mega Man screen, everything is distributed in a square (not a triangle) and the level of detail (to me eyes) is the same for each robot (I don't see Mega Man as being more detailed than the other guys). But from what I understand, it's more like about the frame surrounding each robot and the way it's organized.

[32]

You're definitely taking the triangle too literally. It's about how much each level of detail exists within the image. There's 1x giant triangle, 3x big triangles, 9x mid triangles etc. The idea is that you want to weigh the different level of details against each other.

So hopefully to help clarify in very loose and simplistic terms to just help you understand, certainly not to be taken literally: To translate this to what Gil said there should be 1x "Low detail is just the big swats of color, like for example the square shapes." to every 3x "Medium detail is something like shading or the facial features on the bread or the text." to every 9x "High detail is something like AA or single pixel outlines (the skull is almost fully high detail)."

You have a lot of large flat areas and a lot of small high detail but not much medium level detail.

[Gil]

I don't see Mega Man as being more detailed than the other guys

Of course not. The portraits all have the same medium density, while the borders are high density and the background is low density. So the background is like the big triangles, the portraits are smaller triangles, the borders are even smaller triangles.

And again, I'm not talking about actual triangles of course, but how they are distributed across the image. I could tell you the actual math, but that wouldn't be very useful.

[Zizka]

background is low density. So the background is like the big triangles, the portraits are smaller triangles, the borders are even smaller triangles.

Ahhhhh ok! I understand better then. I would have thought that the portrait should have been high detail as opposed to the border of the frames.

[Ryumaru]

High detail is definitely a viable way to create focus, but certainly not the only way. If you look at any anime, the backgrounds always have far higher detail, but the flat shaded characters on top stand out due to outlines, higher contrast, and the fact that they move! Creating a focal point then is more about disparity ( how different the area is from somewhere else) than it is about any one element such as high detail, saturation, etc. ( but feel free to use multiple elements to enhance the effect)

[Zizka]

Alright, so I read each message about the triangle setup thing repeatedly but I still don’t understand, even with you guys' explanations. I have the feeling this is something very complex because I can’t find a clear explanation about the concept. Everybody seem to have “sort of” an idea but I’m under the impression no one really “gets it” so to speak. Unless I'm mentally retarded.

So what I did as I did 8 different concepts for the boxes, which I also moved closer like Decroded suggested. I also added the animation at the back like he also said.


I’d like to know which one of the 8 concepts works best please.

As for the triangle thing, I think it’s one of those things which I’ll only understand if someone does a demonstration with an edit so don’t bother writing about it. I mean, you’d just be wasting your time as I wouldn’t understand it anyway.

[PsylentKnight]

I kind of get what the other people are saying about detail distribution, but I don't necessarily agree. I like the borderless boxes best.

Oh, and not necessarily a commentary on the art, but it would be pretty nifty if when you select a stage, toast pops out of the selected toaster, off the top of the screen, then falls back down directly in front of the screen to function as a screen transition.

[Zizka]

Oh, and not necessarily a commentary on the art, but it would be pretty nifty if when you select a stage, toast pops out of the selected toaster, off the top of the screen, then falls back down directly in front of the screen to function as a screen transition.

That's a great idea, very creative!  :y:Don't mind if end up using it.

I kind of get what the other people are saying about detail distribution, but I don't necessarily agree. I like the borderless boxes best.

Well, what is it that you understand? What low level, mid level and high level detail in there? Would the animation count as "high level" (the big triangle?) Because if you sort of understand than you're one step ahead of me  .

[Gil]

Well, what is it that you understand? What low level, mid level and high level detail in there? Would the animation count as "high level" (the big triangle?) Because if you sort of understand than you're one step ahead of me  .

The big triangle is low level. I need some help here, as I can't seem to explain it to you. The problem is that it seems super basic to me, so I don't know how to explain it.

[Zizka]

Well, draw me an example then!  If it's super basic I would get it instantly when I see it  .