Advice on flat art style?

[Enhex]

Hi guys,

 

I'm currently working on a surf game and I want to have simplistic and abstract art style.
I want to use flat textures but it turns out to be problematic in some aspects:

- Point/spot lights suffering from color banding, making them look awful.

- Sensing speed. There needs to be stuff for the brain to track in order to get a sense of speed.

Stuff in the background and on the ramps can help with that.

- It's hard to tell where edges are at.

I'm using outlining to make them visible.

 

This is what I have so far:

(please try to ignore the lack of anti-aliasing for now)

 

Anyone have suggestions about how to improve it? Perhaps make it more vivid?

[jackophant]

Would using ambient light help? I don't imagine shadows are overly important?

 

But with regards to being able to track ramp position, could you not use a more vertically aligned blue streak?

 

Maybe even use a large texture with the blue design in it so that it can tile on the ramp face for you.

 

Alternatively, look to portal. The flat colours they use in the testing labs are quite good, but use a tile in the texture which doesn't impact on the art style too much. Hey why not make a portal styled surf map? Flashes of mirrors edge style bright colours or something. I've totally hijacked the thought process here. I get carried away

[Vaya]

I would be looking at audiosurf. Horizontal detail (perpendicular to the players direction of travel) will help with the sense of speed.

[Enhex]

I did try to test using grid textures, but unlike portal I want to use more complex world geometry, in which case completely flat textures look more coherent, especially with the neon'ish stripes.

 

Using vertically aligned stripes is possible and I've been thinking about it. I don't like the idea that it will "segment" the ramp, but maybe a staggered horizontal line can be used like on the standing platform.

 

I also wonder what kind of skyboxes can be used with such style?

[tomm]

 

I also wonder what kind of skyboxes can be used with such style?

 

space, definitely space.

 

surfing on asteroids while being chased by some space drones, would be pretty cool.

[Enhex]

 

space, definitely space.

 

Spacescape will be perfect for this.

Edited January 28, 2015 by Enhex

[Zezeri]

You certainly need some kind of GI/AO to get some directionality in your image. Without it the brain has a really hard time understanding the space and the relations of the objects in it.

[2d-chris]

What engine are you using?

 

IMO, this style should be grounded in some reality for it to make sense in the way you intend. Tron is a good example of clean dark scenes that have depth and look cool. If reality isn't your thing (computer simulation) then you need more grid lines and definition in the model itself, like in shadowrun ... 

 

 

You defo need reflections, if your engine is outdated you can prob render a generic high res cubemap (blur it) Mass Effect 2 did this to great effect. If you have real time reflections like in U4 then you don't need to worry so much about it. They could become too messy in motion, so lowering the amount you see could help. 

 

The dark surfaces still need some basic material definition, some kind of tiling generic grid like the panels in Portal 2 would work. The glow surface could use some bleed and if the engine doesnt simulate it automatically you could add a gradient in the model.

 

Focus on lighting and material definition, it's deceptively simple but I've heard it's really hard to pull off, especially last gen. If the scene becomes a little complicated visually, pull back or use colors to have various elements stand out.

 

Also, a trick in sci-fi or high tech is to use 45 degrees on corners etc, a circuit board is good to look at and study for shapes. 

 

 

and trons more stylized but realistic rendered art style. 

 

Sorry for the crappy formatting, I'm pretty busy!

 

Edited January 28, 2015 by 2d-chris

[Enhex]

The engine I use is Urho3D.

 

Reflections are a good suggestion, and I hope it will combine well with space skyboxes.

 

I started with grids and I think completely flat textures look better and more coherent, with the downside of speed perception problems. We need to keep in mind the world geometry isn't axes aligned so texture alignment could be a problem, especially with curved ramps which I'll want to have later on. Example:

[Klems]

Maybe this can be of some use

 

I had the same problem about sensing speed on a flat texture. The answer isn't hard though: don't use flat textures. Lighting and reflection can do wonder. Another solution is to add some grain to the texture, either in a shader or on the diffuse. You can also try changing the fov depending on the speed, or add a looping sound (whoosh like) and change the pitch/volume according to the speed.

 

About being able to see edges, you could add black/white outlines to the geometry, or make a shader which read the depth buffer and do something at the edges. The problem is that each surface is completely flat, so the eye doesn't catch the edges as there's no normal/light change. You should smooth the edges in the geometry, so you can either add lighting or a rimlight effect.

 

Use dithering if you have color banding issues.

Edited January 28, 2015 by Klems

[Enhex]

Maybe this can be of some use

 

I had the same problem about sensing speed on a flat texture. The answer isn't hard though: don't use flat textures. Lighting and reflection can do wonder. Another solution is to add some grain to the texture, either in a shader or on the diffuse. You can also try changing the fov depending on the speed, or add a looping sound (whoosh like) and change the pitch/volume according to the speed.

 

About being able to see edges, you could add black/white outlines to the geometry, or make a shader which read the depth buffer and do something at the edges. The problem is that each surface is completely flat, so the eye doesn't catch the edges as there's no normal/light change. You should smooth the edges in the geometry, so you can either add lighting or a rimlight effect.

 

Use dithering if you have color banding issues.

 

Omnific was my first inspiration but because of the lights problem it didn't look good. Dithering will require modifying the game engine and that will require way too much time learning how to implement (could take over a month) and I'm not 100% sure it will even solve it or that other problems won't appear so it's too much risk. Grain to the texture could help but I don't believe it will be enough to make it look good. Source uses baked radiosity lights which again will take too much time and too much risk to pursue.

This is how the omnific expirement lights looks like:

You can see the overlapping patterns and banding.

What I've seen on radiosity lighting is that it calculates it per square so you get an average light for that square, which gives less sharp edges for the light spheres and the light bouncing around also helps to level things. In source it also seems like there's some extra stuff done to deal with banding, I've seen shades of green and wave'ish patterns of what seems to be dithering on places that would normally have banding.

 

Keep in mind that so far this is a solo project and I don't have infinite resources, so in some cases I have to min-max things to get the game finished.

 

BTW here's the flat level with space skybox:

[blackdog]

Well neon bands will definitely have a gradient of some sort, that will help a little. Then you can inset neon bands a little in the geometry.

Instead of grids you can give a very light material texture, a grain, that might help?

[Enhex]

Well neon bands will definitely have a gradient of some sort, that will help a little. Then you can inset neon bands a little in the geometry.

Instead of grids you can give a very light material texture, a grain, that might help?

 

I replaced the completely flat texture with one that has some grain. It doesn't help with the lights but it helps with tracking the ground while not creating tiling patterns on large surfaces, it just gets flat on far surfaces because of texture filtering.