Article: Game Art Art

1235710
interpolator
Offline / Send Message
Pinned
SimonT interpolator
Hi friends! Not sure if i'm correct here, but my issue is heavily technical - but of course about game art. Anyway this is pure self-advertisment. I write an articles about...
"Fakes & Tricks of games which impressed me"

It goes about crazy ideas or awesome tech fakes which made an cool effect. I write about this in my blog and collected everyting i can remember. Feel free to comment about my stuff, explain what i didn't understood or tell me about what stuff impressed you.

01 Fallout 3 - Edges
02 Teleglitch - Viewcones
03 Teleglitch - RGB Flickering
04 Diablo 3 - 2.5D Trees
05 Warcraft 3 - Billboards
06 Divine Divinity - 2D Reflexion
07 Cell Shading
08 Deus Ex - Occlusion
09 Deus Ex 3 - Folds
10 Deus Ex - Scan Lines
11 World of Warcraft - Balloon
12 Assassins Creed 3 - Windows
13 Assassins Creed 3 - LoD Blending
14 Kid Icarus - Tricks
15 Left 4 Dead - Puke
16 Sacred 2 - Crystal Reflexion
17 Sacred 2 - Pulse Shader
18 Battlefield Bad Company 2 - Smoke Column
19 Battlefield 2 - Flag Pole
20 Sacred 2 - Burning Map
21 Assassins Creed 3 - Bouncing Light
22 Airborn - Trees
23 1943- Retro Shadows
24 Metal Gear Rising - Slicing
25 Dead Space 3 - Diffuse Reflections
26 Homeworld 2 - Backgrounds
26.2 Homeworld 2 - Backgrounds.Tech
27 Diablo 3 - Resource Bubbles
28 007 Legends - The World
29 Homeworld 2 - Engines
30 Homeworld 2 - Hyperspace
31 Bioshock - Glossiness
32 Starcraft 2 - Localization
33 Doom 3 - Volumetric Glow
34 Doom 3 - HDUI
35 Scribble Cel
36 Lego Batman - Crawler
37 Dungeon Keeper 2 - Walls
38 Lego - Studs
39 1nsane Carpet 2 - Repetitive Worlds
40 The Binding of Isaac - Composition
41 Company of Heroes - Shaded Smoke
42 Company of Heroes - Flamethrower
43 World of Torch Siege - Blended Trunks
44 Oblivion Territory – Tree vs Palm
45 Handmade Normal Map
46 Tomb Raider - Laras Hot Secrets
47 Don’t starve, Diablo – Parallax 7
48 Windows - AC/Row/Infinite
49 Render Hell 2.0
50 Zelda Wind Waker - Hyrule Travel Guide
51 Rei Ayanami – Inner eyes
52 Sacred 2 – Fake Mirror
53 X:Rebirth – Geometric Lensflares
54 Fallout 4 - Wasteland Eyes
55 What is Color Banding? And what is it not?
56 Fallout 4 - The Mushroom Case
57 Diablo III - The sacred spiderweb
58 Alpha1 - My Top 5 usescases
59 Blubb! - Fish Tanks in Games
60 Diablo III - Wings of Angels
61 Dark Maus - Top Down Trees
62 Alien vs Wolfenstein – Cutting Torch
63 The Joy of VFX – Pin Table
64 Assassin’s Creed: Black Flag – Waterplane

To give you some hints whats that all about, here some of the pictures i made for the article:
iLYbsUgRLz7qEgif
tree_zoom01jpg
iLQejf1HiJq8vgif
j4EUjEjw3QVOojpg

Replies

  • alfalfasprossen
    The problem seems to be photoshop. Their gradients, also entitled as being linear are not linear in the resulting image. I don't know about color profiles and stuff within photoshop, there might be some way, maybe working with the gradients in 16 bit might help (only saving in 8bit) but i didn't test it.

    my result with a gradient rendered in maya was as one would expect it to look like.

    For uncompressed textures use TC_NormalmapUncompressed. it throws away the blue channel and will reduce the resolution by 50%, but it keeps the rest uncompressed. Make sure to set the UnpackMin values in the texture back to 0 for all values then (normalmap import sets unpack min to -1 )

    uvTest_flatGradients.png

    for testing it yourself:
    photoshop created texture (.tga)
    maya crated texture (.tga)
  • SimonT
    Offline / Send Message
    SimonT interpolator
    alfalfasprossen
    thanks man! have to check this out! for such like this i hate 3d & tech :D i mean why does it have to be so complicated. :D its really weird how black the lower left corner gets in photoshop...
  • alfalfasprossen
    yeah, the joy of linear workflow :D
    (i just checked, the gradient textures would look more alike, i tested something with sRGB turned on, when taking the screenshot, so the difference between the two textures is close to not visible at all, but the results are kind of horribly different :poly136: )

    edit: well ok, the photoshop is still definitely darker in the lower left parts :D
  • sinistergfx
    Offline / Send Message
    sinistergfx polycounter lvl 14
    RE: photoshop gradients for generating TexCoords:
    You need to set the smoothness of the gradient to 0%.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    RE: photoshop gradients for generating TexCoords:
    You need to set the smoothness of the gradient to 0%.

    YOU ARE A FOX! It works! THX! Awesome! Here's an example:

    ioMCA6Awxpd4g.gif

    And if you don't know where is setting is, here you go:

    jenMAyiCrQfxW.jpg
  • Obscura
    Offline / Send Message
    Obscura veteran polycounter
    You can get the same gradient with the texturecoordinate node.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    I know but i tried to make it by my own and then play around with it. Just to understand how exactly it works. Really nice stuff! Will write it together soon.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Sorry guys, i have another question. Couldnt find anything useful in google. Its a bit weird. Originally i tried to invert the green channel of the texture because in the TexCoord node the darkest corner is up/left and in my texture it was bottom/left. Since then i got weird results. The i made the texture like it was, but the weird stuff didnt disappear.

    Part 1: Import a test texture, all fine, no problem (compression TD_Defaul)
    Part 2: Import a uv color texture (compression TC_Default), now i get weird colors in the Material Editor during the colors in the Content Browser it looks like it should
    Part 3: Use uv color texture as uv input for the test texture: it tiles 2x, WTF? Why?

    jcbcdPBPMxwoK.jpg
  • alfalfasprossen
    from your images i suppose you mean you imported it using TC_Normalmap_whatever, as your colors are that blueish pink stuff. Or, if not directly for this texture, did you import it before as normalmap, and use the same name? It might keep the settings for the texture and only update the underlying values.
    anyway.
    Check the settings of your texture (Texture Properties). Make sure the unpack min values are set to 0. If you imported as NormalMap, they will be set to -1.
    the range -1 to 1 in uv coords will repeat your texture twice across a unit area.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Thanks man! Now i got it running like it should :)
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW
    #28 007 Legends - The World

    iY0SJZd6EpLLI.gif
  • Tamarin
    Offline / Send Message
    Tamarin polycounter lvl 12
    Thanks for breaking this technique down. I put together a small web demo if you want to check it out. I just discovered your blog and really enjoy it.

    http://dl.dropbox.com/u/16703380/scrollingUV/scrollingUV.html

    No progress with the vertex colored skybox. I think it was just took some really skilled artists to create that effect.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Wow cool! Nice demo! When i update the article i'll add this link! Thanks for taking the time! Oh and of course thanks for the compliment :)
  • mikiex
    Offline / Send Message
    mikiex polycounter lvl 5
    Glad you managed to work it out in the end Simon - nice write up, nice demo too Tamarin!
    Once I created the texture and an example shader I passed this on to the effects guys who created the full effect you see in the video. So really I didn't do much :) And of course the method is inspired by lots of other peoples work.

    I remember we had a lot of screens in the game and I thought it would be cool to have something more interesting on them, something less "2d". Of course you could use render targets and render an actual 3d scene to a texture, sometimes that's fine, but that does incur extra memory and rendering costs.

    When running the shader with the rendered UV texture for the first time I was kind of surprised it actually worked in terms of the scrolling. When you think about it it makes total sense , but it was a "could it be that simple?" moment.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Mikiex
    Glad you like it. And thanks again for mentioning this. It was really interesting to learn how you did it. And personally i look at it again and again and can't believe how good it works :)

    NEW
    #29 Homeworld 2 - Engines

    jblh49o6qxRXZs.jpg
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 7
    I'm surprised as to StarForge using the same 'layered' glow for the lights, doesn't make sense for a game in 2013.

    I mean HW had shader limitation, so they make do back in the day, but SF doesn't benefit in anyway from this, especially since you can get up close and personal with the spot lights and aren't in a position to hide it effectively without layering many versions of them.
    A simple cone, which once intersects with another geometry fading away via shader is a much better way to accomplish this, unless I missed something.

    Maybe procedural solution? They're generating each layer on the fly from the origin, and will stop generating after "X" length or of it hits another vertex? Hmmm.

    Also, about the flat planes behind the Interceptor, maybe they're distance based glows? They're following the engines pretty close, and from the picture, there is a faint 'smog' like effect outside of the trail? Can't really tell, and I don't have the game.

    Or hell, they could even be spline-like delayed rigs, where everytime the ship turns, they will record the vertex bend of the position for the tail and from where they're supposed to start?

    No idea, but I'm very curious about them whites.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Hehe good thoughts! Maybe an old homeworld dev will see this and brings light into the dark :)
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Update
    Pretty awesome! Julian Love gave us great information about the bubbles. With shader code examples!
    #27 Diablo 3 - Resource Bubbles

    Tamarin
    I added your demo link to the 007 article :) Thanks again!
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW
    #30 Homeworld 2 - Hyperspace

    iP1JcswT75v0J.gif
  • DEElekgolo
    Offline / Send Message
    DEElekgolo polycounter lvl 11
    hmmm. Would you consider doing something involving how Journey managed it's sand?
  • SimonT
    Offline / Send Message
    SimonT interpolator
    DEElekgolo wrote: »
    hmmm. Would you consider doing something involving how Journey managed it's sand?

    Hm good question. The problem, i don't own a PS3, never played Journey and even if: there are no tool for investigating on a console :,( But thank for the tip. I have to watch a Let's Play. But if you're interested in Sand in general check this out (starts at slide 90): http://gdcvault.com/play/1015898/The-Tricks-Up-Our-Sleeves
  • passerby
    Offline / Send Message
    passerby polycounter lvl 8
    MFnetWorkBase.jpg

    this here will create a mask to mask out the opacity on a object based on a arbitrary vector coordinate.

    so more or less animated values on that vector that controls this in conjunction with a plane that move along with it.

    could all be made into actor with unrealscript, where as you move the actor which would be the plane, it changes the value of the vector that pushes this effect.
  • Froyok
  • equil
  • Kurt Russell Fan Club
    Offline / Send Message
    Kurt Russell Fan Club polycounter lvl 8
    Awesome work Simon, fun stuff to read.

    That Homeworld effect is probably achieved using clip planes (a programming thing, not as much an art trick.)
  • fatihG_
    Offline / Send Message
    fatihG_ polycounter lvl 12
    I was going to guess they used some kind of boolean thing.

    For the white glow/outline thingy. It might be similar to how water shaders fade at intersecting geomtery, using the zdepth trick.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Froyok & equil
    Thanks for the links! Really interesting!

    Kurt Russell Fan Club
    Thanks man :) Hm nice link ... i don't understand the shader code and stuff but it looks really nice!

    p.s. i added your link to the blog :)

    bb0x
    Hm right...good idea. Maybe it's some kind of "softparticle" ...

    All
    If you have a PC version of the new Tomb Raider or Walkind Dead: Survival Instinct which you don't need, i would love to checkout some stuff in these games. I already bought Metal Gear: Rising and Dead Space 3 to make these articles but it gets a bit expensive.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW
    #31 Bioshock - Glossiness

    jj5oFhHF8lH2S.jpg
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Neu! New! Nuovo! Новый!
    #32 Starcraft 2 - Localization

    jJOJsKQix1tlM.jpg
  • Adij
    Offline / Send Message
    Adij polycounter lvl 8
    Computron wrote: »
    Found it, thanks guys.
    LQd4QIW.png

    Decimation master doesn't really work that well if you go below %10.
    (I guess that's why its called DECImation master, heh...)
    CzXOTwr.png

    Going any lower than the current polycount, 4,685, (even after re-anylizing/decimating) destroys that image entirely. And this is just the flat plane3d with importance set %100 on polypaint in decimation masters settings.

    Cool stuff though. Probably with some tweaking on some more practical meshes it will work out nicely. It is necesary to have a pretty blurry/dreammy texture, sharper stuff will not work nearly as well.

    Is this possible with mudbox?
  • Computron
    Offline / Send Message
    Computron polycounter lvl 7
    Adij wrote: »
    Is this possible with mudbox?

    Not as far as i'm aware. I don't think any of the mudbox versions support vertex paints and up until recently, their decimation/retopo tools have been severely lacking when compared to zbrush.
  • NAIMA
    Offline / Send Message
    NAIMA polycounter lvl 10
    Awesome thread ... is it been organized with the link selections in the wiki?
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Thx Naima, personally I didn't add it to the wiki. Maybe someone other did? I'm not sure, but I'm happy that you like the articles :)
  • commander_keen
    Offline / Send Message
    commander_keen greentooth
    SimonT wrote: »
    Neu! New! Nuovo! Новый!
    #32 Starcraft 2 - Localization

    jJOJsKQix1tlM.jpg

    Just because the translated variations of the textures are in the game data doesnt mean they dont use a system for auto translation. They could have a simple tool for designing localized textures by compositing existing textures and font based text, which would be translated along with all the other things that get translated. The tool could have tools for texture/font layer transformation, masking with other textures, and blending modes, which would give you enough control to make nice looking textures but still be able to swap out the text automatically. A system like this would probably build all of the needed variations while doing a full build instead of doing it at runtime on the users computer, which could either be slow, or have compatibility issues if its hardware accelerated.

    The graffiti looks like its probably hand made in photoshop, but the other standard font stuff looks like a good candidate for automatic translation.

    When I worked at Cryptic there was a tool in the editor for doing this.
  • Computron
    Offline / Send Message
    Computron polycounter lvl 7
    ^That reminds me of Alegorithmic's Substance procedurally generated materials/textures.

    Its also interesting if you tie it back to how this can be used to save space, especially considering how many Blizzard games allow you to download just a small portion of the game and start playing while the rest of the game downloads in the background in the order its needed, essentially streaming the game...
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW
    #33 Doom 3 - Volumetric Glow

    iOpJfq5ozW5f8.gif


    commander_keen
    Yeah that's right. I asked Julian and i hope to hear back from him how the SC2 Team did it. Thanks for you comment, really interesting to hear!

    Computron
    That's right. Really impressive how they stream the content while playing :)
  • Michael Knubben
    I was just talking to my colleague about that effect last week! I was convinced the artists just placed a cone around the lights with vertex colour and alpha, but I never noticed that it actually got occluded. Very nice, I like the lofi appeal on the gif you posted.

    I came across this video and love the effects in there to death:
    https://www.youtube.com/watch?v=dNm0l1L8O1A

    particularly the kind of effect of things seen at an angle, where it looks like a heathaze or something.
  • cupsster
    Offline / Send Message
    cupsster polycounter lvl 9
    Transparent fresnel in vertex offset shader, multiple pass maybe?
    Terrain can be 3D noise texture, color by world axis mix with view direction?
    Hmm want to make it.. :)
  • diamond3
    Offline / Send Message
    diamond3 polycounter lvl 7
    SimonT wrote: »
    ScribbleHead
    Thank you! I hope i can get my fingers on a PS2 sometime because there are soo many great games available on this console.


    NEU - Homeworld 2 Backgrounds
    #26 Homeworld 2 - Backgrounds

    ibf58nX6qZUPGm.gif


    Does anybody know about tools which can tessellate arbitrary models this way? My idea is to bake lightmaps into vertex colors this way. Would be a great performance and resource saver for mobile graphics.
  • SimonT
    Offline / Send Message
    SimonT interpolator
    UPDATE
    I added a link to my 3Ds Max > Doom 3 Modding nodes and a link to a reddit discussion about the article.

    MightyPea
    Thanks for your reply! Oh, the effect video you posted is sick! Like it very much...why didn't we see something like this in some games...hm maybe becuause there aren't that much space games...but looks really cool!

    cupsster
    I have no idea what you talking about :D But if you want to explain it with some more words i would love to read it :)

    diamond3
    I'm note sure if this is necessary. I mean you can bake lighting information into vertex color with 3Ds Max. For basic stuff this i totally fine. I mean what you want is, taking a final geometry (with already done UVs) and re-organize the geometry depending on the lighting info but without loosing the UVs and without loosing the general form of the original shape. This sounds crazy complicated.
    What i could imagine is, that you just invest some more geometry detail (like in Stalker, there was a lot geometry used) and bake the lighting into the vertices.

    I hope you could understand what i wrote :D
  • cupsster
    Offline / Send Message
    cupsster polycounter lvl 9
    diamond3 wrote: »
    Does anybody know about tools which can tessellate arbitrary models this way? My idea is to bake lightmaps into vertex colors this way. Would be a great performance and resource saver for mobile graphics.

    I try it in 3DS Max but couldn't find nice workflow. I was using baking GI to radiosity then extract radiosity mesh with script.I tested this on mobile It works but need workflow optimization and better shaders on mobile.
    For your purpose just use radiosity and mesh decimation. Special algorytm tahan cat cut mesh along shadow umbra and subdivide resulting cut would be handy... Any maxcript guru here? :)
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Any maxcript guru here?
    Maybe not in this thread but of course in the tech section. Maybe open a new topic? And feel free to post your results here :)
  • Bruno Afonseca
    Offline / Send Message
    Bruno Afonseca Polycount Sponsor
    SimonT wrote: »
    UPDATE
    diamond3
    I'm note sure if this is necessary. I mean you can bake lighting information into vertex color with 3Ds Max. For basic stuff this i totally fine. I mean what you want is, taking a final geometry (with already done UVs) and re-organize the geometry depending on the lighting info but without loosing the UVs and without loosing the general form of the original shape. This sounds crazy complicated.
    What i could imagine is, that you just invest some more geometry detail (like in Stalker, there was a lot geometry used) and bake the lighting into the vertices.

    I hope you could understand what i wrote :D

    But on games where the geometry you can use is very limited, this would lead into blurry lighting. The method that diamond3 described could give you very sharp shadows with not a lot of geometry.
    I've seen something like this before, on some mobile games. God of war on PS2 uses something like this, also. You can see that it's vertex-lit, and you can notice that they made arbitrary cuts into the geometry to allow such sharp shadows. A way of automating that would be great and I'd be interested too!
  • SimonT
    Offline / Send Message
    SimonT interpolator
    fonfa
    Yes, that sounds interesting... :)
  • equil
    under modify>convert>, maya has a function called "texture to geometry" that lets you cut geometry according to an input texture. i've used it to do kind of what you guys are talking about by taking lightmap textures into photoshop, and apply a posterize filter with at least 3 levels to it. using that as an input i got some pretty nasty results , but after a bunch of manual cleanup they were actually useable. wonder if you could combine this with that zbrush trick.
  • bobmartien
    Offline / Send Message
    bobmartien polycounter lvl 7
    Hey. Lots of really cool tricks here.

    Thanks for sharing :)
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW
    #34 Doom 3 - HDUI

    iSVdLsGibt4WA.gif


    equil
    THX for the tip!

    bobmartien
    Thanks man!
  • SimonT
    Offline / Send Message
    SimonT interpolator
    NEW

    #35 Scribble Cel

    ngbbs44e655308d119.gif
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Twitter
    Hi guys, i just would like to mention that i created a twitter account for the blog so if you want to connect, click click:
  • SimonT
    Offline / Send Message
    SimonT interpolator
    Thanks for joining my twitter account. :) Here's the new article:

    NEW
    #36 Lego Batman - Crawler

    ikuLSSazv33IW.gif
1235710
Sign In or Register to comment.