5 ms·

Graveyard Keeper: How the graphics effects are made

559 points by thrower123 8y ago

degenerate 8y ago
At first I though the approach to dynamic lighting was overdone ("they had to paint light sources manually 4 times?") but then remembered the world is not 3D, so there's no way to do it automatically without drawing defined boundaries among objects. Painting 4 directional light sources and blending them together is super smart. I totally envy pixel artists, especially those from the earlier days of the art. What a different world.
- jweir 8y ago
  I got my start as a pixel editor/animator using Deluxe Paint and Deluxe Animator for DOS at Virgin Games. Hand anti-aliasing, selecting your limited palette, and working with the hardware and screen constraints was fun. But, we at the time (early 90s) couldn't wait to have more colors and more resolution and more framerate and more memory. So, folks today get to choose their constraints, which is important to most art, and the results are lovely.
  - corysama 8y ago
    Just making sure you've already seen Mark Ferrari's GDC talk: https://www.youtube.com/watch?v=aMcJ1Jvtef0 https://www.youtube.com/watch?v=aMcJ1Jvtef0 :)
- OskarS 8y ago
  The other way to do it which does work is to make both the normal maps and the diffuse maps from an underlying 3d model, and then render them out to make them look "pixely". That's how Dead Cells does it, the "source" of the sprites is a 3d model which is then rendered out as pixel art.
  - monk_e_boy 8y ago
    I played stardew valley and terraria a lot, but I do find pixel games hard on the eyes. I have no idea why you would want to go from a 3D model back to a pixel look. Yooka-Laylee has just done this to make it N64-retro-esque but ... no thanks. If anything make it higher res, more beautiful.
    - OskarS 8y ago
      The reason they want to do it is because they find it an appealing art-style, though obviously that's up to personal taste. I think the style really works for Dead Cells. You should check out the Gamasutra article on the graphics pipeline of Dead Cells if you're interested in how they did it: https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php https://www.gamasutra.com/view/news/313026/Art_Design_Deep_D...
bananaoomarang 8y ago
Always surprised by how well effects like this work. Wouldn't expect the wind shader to look as good as it does, for instance. Games (especially older games...) are full of so many elegant hacks! One that I think about a lot is how in order to animate a 'rain' effect, you can actually just spawn randomly positioned 'impacts' on the ground and randomly positioned raindrops that disappear 'behind' the ground. You would think you might need to resolve each raindrop's collision and animate an 'impact' at the right point but it turns out our brain is pretty good at being fooled.
- a_e_k 8y ago
  The beginning of "A Link to the Past" went even simpler than that and just looped a transparent rain layer over everything: https://i.imgur.com/W4fdw19.gif https://i.imgur.com/W4fdw19.gif I think what helped sell it, though, was the rain and thunder sound effects.
gavanwoolery 8y ago
Note on the usage of lookup tables: Color transitions are hard - their example here looks pretty good but in general tweening between two color spaces in a linear manner can produce unwanted "washing out" or dull in-between states. The problem is not just within the transition of individual colors, but how the relative values of nearby color affect our perception. For example, see this illusion in action: https://twitter.com/AkiyoshiKitaoka/status/1028473566193315841 https://twitter.com/AkiyoshiKitaoka/status/10284735661933158...
- pistachiopro 8y ago
  Color transitions are hard, and that illusion is pretty trippy. Beyond that, my sense is another big problem most people run into when they try to light pixel art (or any hand-painted asset) is that the asset is almost always "pre-tonemapped" by the artist. By first inverse-tonemapping the asset before applying any lighting, and then re-tonemapping afterwards, you can get pretty good results (assuming you can work out your artist's intuitive tonemapping function). Here's a fun article which explores the idea a bit more: http://www.codersnotes.com/notes/untonemapping/ http://www.codersnotes.com/notes/untonemapping/
  - gavanwoolery 8y ago
    Thanks, I will take a look :)
  - Ezku 8y ago
    That’s a really cool idea. Thanks for the article too, it provided for some excellent illumination. (Badum-tish. Sorry.)
  - garaetjjte 8y ago
    I think cause of this article problem is not that textures require some "untonemapping", but that they are typically stored with sRGB gamma, and thus should be converted to linear for lighting, and converted back to sRGB gamma in final pass. (either by explicitly using 2.2 gamma in shaders, or graphics API conversion, eg. in GL using GL_SRGB8_ALPHA8 format and sRGB framebuffer with enabled GL_FRAMEBUFFER_SRGB)
clarry 8y ago
>The problem “how to find the closest 3 light sources and to calculate the distance and an angle was solved with a script running in the Update() loop. > > Yes, it’s not the quickest way considering how much math is involved. If I programmed it today, I would use that modern Unity Jobs System. But when I did it there was no such thing so I had to optimize regular scripts we had. I wish they'd let you in on a little more. Because my numb mind says this isn't something you should ever need to optimize. How many light sources do they have, dozens at most? And how many sprites? Dozens/hundreds? That is nothing.. what is this heavy math? I figured all they'd need is a vector from light source to object, and the vector's magnitude.
- mmastrac 8y ago
  This could _possibly_ be because Unity's scripting engine is Mono/C# which might not be optimal for doing large amounts of math in tight loops in this particular case. 100% supposition.
  - clarry 8y ago
    I mean, my point was that a few dozen light sources times a few hundred sprites isn't large amounts of math, unless they're doing something really fancy with each pair. Language speed definitely isn't key here. It's got to be something else.
    - beetwenty 8y ago
      Finding the nearest three light sources is the main bottleneck, and in scenarios with many lights, is highly dependent on having a broadphase algorithm to filter them out early. If they did it the naive way, the algorithm becomes O(number of sources * number of lit objects). But that doesn't seem to be their concern here, either. Optimizing broadphase collision is a well-understood problem, and the scenario of finding the nearest is only slightly different from that.
  - pjmlp 8y ago
    In more recent versions it is actually IL2CPP for most targets, and with the addition of former Insomiac devs, their C# subset (HPC#) has been taking a greater role on the engine.
city41 8y ago
I worked on a game with very similar dynamic lighting. I wrote a blog post that goes into more detail code-wise on how I did it if anyone is interested: http://www.mattgreer.org/articles/dynamic-lighting-and-shadows/ http://www.mattgreer.org/articles/dynamic-lighting-and-shado...
- deleted 8y ago
  [deleted]
- JoeMattie 8y ago
  Hi there! just wanted to say thanks for your write up. I recently implemented this approach (thanks to your notes) in the Godot engine for a game I'm working on. https://twitter.com/FlyingBastion/status/1054394571948417024 https://twitter.com/FlyingBastion/status/1054394571948417024
  - city41 8y ago
    Oh nice, you were able to use my post? That's awesome. Your game is looking good, I just followed you guys.
airstrike 8y ago
What an interesting read. Thanks for finding and sharing.
randyrand 8y ago
Gorgeous. Did you consider doing things in 3d with an isometric camera?
hughes 8y ago
Images have been consistently failing to load on this article for the last few hours.
- a1369209993 8y ago
  Same here; `wget -HkKp` worked, albeit it took about a minute to actually download everything (and also the CSS broke).
mistercow 8y ago
This is really neat. I was amused by this, though: >I tried to add a skew there, but it turned out to be unnecessary. and then >It should be noted here, by the way, that the sprite is highly distorted vertically (the shadow sprite original looks like a circle). That’s why its rotation looks like not just a simple rotation but also like a distortion. …which, if I recall my affine transforms, would also be called a "skew". I think I get the point though. This let them construct the skew in a more intuitive way than trying to make it an explicit parameter.
johnchristopher 8y ago
Neat. Now I understand why modern "2D" pixel art games still sometimes need some GPU and CPU power.
billfruit 8y ago
Another recent game 'Brigador', also has earned much praise for its lighting work, and as a game in general.
- patio11 8y ago
  That game got a very interesting review in Japanese which I was compelled to translate: https://gamedaisukinahito.blog.fc2.com/blog-entry-954.html https://gamedaisukinahito.blog.fc2.com/blog-entry-954.html https://pbs.twimg.com/media/Dja-bHqU0AEYJYe.jpg:large https://pbs.twimg.com/media/Dja-bHqU0AEYJYe.jpg:large
davedx 8y ago
I started porting my 2D roguelike game to a 2D engine like this one and got so bogged down in lighting difficulties that I gave up and abandoned the project. This is really impressive, and a succinct write up of what can take a very long time to implement successfully. 2D/3D hybrid engines are hard!

559 points by thrower123 8y ago

At first I though the approach to dynamic lighting was overdone ("they had to paint light sources manually 4 times?") but then remembered the world is not 3D, so there's no way to do it automatically without drawing defined boundaries among objects. Painting 4 directional light sources and blending them together is super smart. I totally envy pixel artists, especially those from the earlier days of the art. What a different world.

jweir 8y ago
I got my start as a pixel editor/animator using Deluxe Paint and Deluxe Animator for DOS at Virgin Games. Hand anti-aliasing, selecting your limited palette, and working with the hardware and screen constraints was fun. But, we at the time (early 90s) couldn't wait to have more colors and more resolution and more framerate and more memory. So, folks today get to choose their constraints, which is important to most art, and the results are lovely.
- corysama 8y ago
  Just making sure you've already seen Mark Ferrari's GDC talk: https://www.youtube.com/watch?v=aMcJ1Jvtef0 https://www.youtube.com/watch?v=aMcJ1Jvtef0 :)
OskarS 8y ago
The other way to do it which does work is to make both the normal maps and the diffuse maps from an underlying 3d model, and then render them out to make them look "pixely". That's how Dead Cells does it, the "source" of the sprites is a 3d model which is then rendered out as pixel art.
- monk_e_boy 8y ago
  I played stardew valley and terraria a lot, but I do find pixel games hard on the eyes. I have no idea why you would want to go from a 3D model back to a pixel look. Yooka-Laylee has just done this to make it N64-retro-esque but ... no thanks. If anything make it higher res, more beautiful.
  - OskarS 8y ago
    The reason they want to do it is because they find it an appealing art-style, though obviously that's up to personal taste. I think the style really works for Dead Cells. You should check out the Gamasutra article on the graphics pipeline of Dead Cells if you're interested in how they did it: https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php https://www.gamasutra.com/view/news/313026/Art_Design_Deep_D...

bananaoomarang 8y ago

Always surprised by how well effects like this work. Wouldn't expect the wind shader to look as good as it does, for instance. Games (especially older games...) are full of so many elegant hacks! One that I think about a lot is how in order to animate a 'rain' effect, you can actually just spawn randomly positioned 'impacts' on the ground and randomly positioned raindrops that disappear 'behind' the ground. You would think you might need to resolve each raindrop's collision and animate an 'impact' at the right point but it turns out our brain is pretty good at being fooled.

a_e_k 8y ago
The beginning of "A Link to the Past" went even simpler than that and just looped a transparent rain layer over everything: https://i.imgur.com/W4fdw19.gif https://i.imgur.com/W4fdw19.gif I think what helped sell it, though, was the rain and thunder sound effects.

gavanwoolery 8y ago

Note on the usage of lookup tables: Color transitions are hard - their example here looks pretty good but in general tweening between two color spaces in a linear manner can produce unwanted "washing out" or dull in-between states. The problem is not just within the transition of individual colors, but how the relative values of nearby color affect our perception. For example, see this illusion in action: https://twitter.com/AkiyoshiKitaoka/status/1028473566193315841 https://twitter.com/AkiyoshiKitaoka/status/10284735661933158...

pistachiopro 8y ago
Color transitions are hard, and that illusion is pretty trippy. Beyond that, my sense is another big problem most people run into when they try to light pixel art (or any hand-painted asset) is that the asset is almost always "pre-tonemapped" by the artist. By first inverse-tonemapping the asset before applying any lighting, and then re-tonemapping afterwards, you can get pretty good results (assuming you can work out your artist's intuitive tonemapping function). Here's a fun article which explores the idea a bit more: http://www.codersnotes.com/notes/untonemapping/ http://www.codersnotes.com/notes/untonemapping/
- gavanwoolery 8y ago
  Thanks, I will take a look :)
- Ezku 8y ago
  That’s a really cool idea. Thanks for the article too, it provided for some excellent illumination. (Badum-tish. Sorry.)
- garaetjjte 8y ago
  I think cause of this article problem is not that textures require some "untonemapping", but that they are typically stored with sRGB gamma, and thus should be converted to linear for lighting, and converted back to sRGB gamma in final pass. (either by explicitly using 2.2 gamma in shaders, or graphics API conversion, eg. in GL using GL_SRGB8_ALPHA8 format and sRGB framebuffer with enabled GL_FRAMEBUFFER_SRGB)

clarry 8y ago

>The problem “how to find the closest 3 light sources and to calculate the distance and an angle was solved with a script running in the Update() loop. > > Yes, it’s not the quickest way considering how much math is involved. If I programmed it today, I would use that modern Unity Jobs System. But when I did it there was no such thing so I had to optimize regular scripts we had. I wish they'd let you in on a little more. Because my numb mind says this isn't something you should ever need to optimize. How many light sources do they have, dozens at most? And how many sprites? Dozens/hundreds? That is nothing.. what is this heavy math? I figured all they'd need is a vector from light source to object, and the vector's magnitude.

mmastrac 8y ago
This could _possibly_ be because Unity's scripting engine is Mono/C# which might not be optimal for doing large amounts of math in tight loops in this particular case. 100% supposition.
- clarry 8y ago
  I mean, my point was that a few dozen light sources times a few hundred sprites isn't large amounts of math, unless they're doing something really fancy with each pair. Language speed definitely isn't key here. It's got to be something else.
  - beetwenty 8y ago
    Finding the nearest three light sources is the main bottleneck, and in scenarios with many lights, is highly dependent on having a broadphase algorithm to filter them out early. If they did it the naive way, the algorithm becomes O(number of sources * number of lit objects). But that doesn't seem to be their concern here, either. Optimizing broadphase collision is a well-understood problem, and the scenario of finding the nearest is only slightly different from that.
- pjmlp 8y ago
  In more recent versions it is actually IL2CPP for most targets, and with the addition of former Insomiac devs, their C# subset (HPC#) has been taking a greater role on the engine.

city41 8y ago

I worked on a game with very similar dynamic lighting. I wrote a blog post that goes into more detail code-wise on how I did it if anyone is interested: http://www.mattgreer.org/articles/dynamic-lighting-and-shadows/ http://www.mattgreer.org/articles/dynamic-lighting-and-shado...

deleted 8y ago
[deleted]
JoeMattie 8y ago
Hi there! just wanted to say thanks for your write up. I recently implemented this approach (thanks to your notes) in the Godot engine for a game I'm working on. https://twitter.com/FlyingBastion/status/1054394571948417024 https://twitter.com/FlyingBastion/status/1054394571948417024
- city41 8y ago
  Oh nice, you were able to use my post? That's awesome. Your game is looking good, I just followed you guys.

airstrike 8y ago

What an interesting read. Thanks for finding and sharing.

randyrand 8y ago

Gorgeous. Did you consider doing things in 3d with an isometric camera?

hughes 8y ago

Images have been consistently failing to load on this article for the last few hours.

a1369209993 8y ago
Same here; `wget -HkKp` worked, albeit it took about a minute to actually download everything (and also the CSS broke).

mistercow 8y ago

This is really neat. I was amused by this, though: >I tried to add a skew there, but it turned out to be unnecessary. and then >It should be noted here, by the way, that the sprite is highly distorted vertically (the shadow sprite original looks like a circle). That’s why its rotation looks like not just a simple rotation but also like a distortion. …which, if I recall my affine transforms, would also be called a "skew". I think I get the point though. This let them construct the skew in a more intuitive way than trying to make it an explicit parameter.

johnchristopher 8y ago

Neat. Now I understand why modern "2D" pixel art games still sometimes need some GPU and CPU power.

billfruit 8y ago

Another recent game 'Brigador', also has earned much praise for its lighting work, and as a game in general.

patio11 8y ago
That game got a very interesting review in Japanese which I was compelled to translate: https://gamedaisukinahito.blog.fc2.com/blog-entry-954.html https://gamedaisukinahito.blog.fc2.com/blog-entry-954.html https://pbs.twimg.com/media/Dja-bHqU0AEYJYe.jpg:large https://pbs.twimg.com/media/Dja-bHqU0AEYJYe.jpg:large

davedx 8y ago

I started porting my 2D roguelike game to a 2D engine like this one and got so bogged down in lighting difficulties that I gave up and abandoned the project. This is really impressive, and a succinct write up of what can take a very long time to implement successfully. 2D/3D hybrid engines are hard!