I am currently working on Handmade Fighter, and I am now trying to figure out the lighting system for my software renderer (will convert to openGL later like Handmade Hero). I am using the lighting Skullgirls as a initial goal to reach since it is one of the few 2D (art) fighting games that looks really good. Examples:
I was wondering if anyone was willing to give me a some ideas on where to start with this. I will most again in this thread if I come up with ideas on my own. Thank you for any assistance.
I was wondering if anyone was willing to give me a some ideas on where to start with this. I will most again in this thread if I come up with ideas on my own. Thank you for any assistance.
I wouldn't really say that a 2D fighting game requires complex lighting (I could be wrong - never implemented one).
The only real effect I can make out of those screenshots are the dropshadows of the characters.
Those could be relatively easily implemented by taking the bitmap of the character, making it black (with some alpha) and skewing it.
That's basically the first thing that comes to my mind.
The only real effect I can make out of those screenshots are the dropshadows of the characters.
Those could be relatively easily implemented by taking the bitmap of the character, making it black (with some alpha) and skewing it.
That's basically the first thing that comes to my mind.
Looking at this image, it looks like they might have included some normal maps for the player sprites so that the reaction to the effects being produced look a little better.
I am having some problems with my first pass. Here is what I am trying to do:
I am just focusing on basic shading on the characters for now. In scene lights like projectiles can be done later. What I am trying to do is find the pixel I want to render in stage space(using the stage's coordinate system, not the cameras). Then I find the UV of the Pixel. After I get the environment map I want to use, I use the UV I just got to find the pixel in pixel in the environment map I want to use. Then I get the bilinear sample of the pixel and blend them together. Then I blend it with the light color which I will get from the middle map later. The tFarMap I just decided to make 0.9f for now while I debug. Finally, I add that to the Texel.
I am using this model because I thought it might be easier for me to understand but it did not work out that great. This is what the result ended up looking like:
Google Drive
*Sorry don't know how to upload an image that I can display here.
I am not sure why it ended up looking like this. If anyone is willing help any help is appreciated.
Also, if you just want to download to project to look at it. You can get it here: Github
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | v2 PixInStage = CameraPInStageSpace + PixelP;
v2 PixUV = {PixInStage.x/StageSize.x, PixInStage.y/StageSize.y};
loaded_bitmap *Map = &TopMap->LOD[0];
v2 MapPixelP = {Map->Width * PixUV.x, Map->Height * PixUV.y};
bilinear_sample MapSample = BilinearSample(Map, MapPixelP.x, MapPixelP.y);
v3 MapTexel = SRGBBilinearBlend(MapSample, fX, fY).xyz;
v3 LightColor = {0, 0, 0}; // TODO(barret): How do we sample from the middle map???
real32 tFarMap = 0.9f; // TODO(barret): what will this be for me???
LightColor = Lerp(LightColor, tFarMap, MapTexel);
Texel.rgb = Texel.rgb + Texel.a*LightColor;
|
I am just focusing on basic shading on the characters for now. In scene lights like projectiles can be done later. What I am trying to do is find the pixel I want to render in stage space(using the stage's coordinate system, not the cameras). Then I find the UV of the Pixel. After I get the environment map I want to use, I use the UV I just got to find the pixel in pixel in the environment map I want to use. Then I get the bilinear sample of the pixel and blend them together. Then I blend it with the light color which I will get from the middle map later. The tFarMap I just decided to make 0.9f for now while I debug. Finally, I add that to the Texel.
I am using this model because I thought it might be easier for me to understand but it did not work out that great. This is what the result ended up looking like:
Google Drive
*Sorry don't know how to upload an image that I can display here.
I am not sure why it ended up looking like this. If anyone is willing help any help is appreciated.
Also, if you just want to download to project to look at it. You can get it here: Github
Edited by Barret Gaylor
on
I didn't run your code (I'm using vs2012 so some features you are using are not supported, it's missing stb_image.h and the build script doesn't find the files directly).
I can only suggest you to remove things to test that each step alone is working as expected. You can try to only display the light map, not do the bilinear sampling, not do the srgb conversion, not rotate de source image...
Here I would make the assumption that there is a problem with the bilinear sampling of the lightmap (but I haven't run it so it's just a guess) as it looks like the border "gradient" is turned 90°. And since the tree is rotated about 90° it might be related to that.
On a side note, you project on github contains Handmade Hero assets (and maybe code, I didn't check) and I don't think it's ok with the handmade hero license.
I can only suggest you to remove things to test that each step alone is working as expected. You can try to only display the light map, not do the bilinear sampling, not do the srgb conversion, not rotate de source image...
Here I would make the assumption that there is a problem with the bilinear sampling of the lightmap (but I haven't run it so it's just a guess) as it looks like the border "gradient" is turned 90°. And since the tree is rotated about 90° it might be related to that.
On a side note, you project on github contains Handmade Hero assets (and maybe code, I didn't check) and I don't think it's ok with the handmade hero license.
Edited by Simon Anciaux
on
Reason: typo
Figures. (*sighs) I'm using vs2015 which explains that. I should also get rid of the stb stuff since I am not currently using it. Thanks for the advice though. I'll give it a shot.
There's also the possibility that many of the lighting effects are hand authored, multiple versions of each character frame for example. At least the drop shadows the characters casts on themselves would be quite tricky to do procedurally I think, also there's not a lot of that effect happening as well, and it doesn't seem to conflict with any other effects that might be generated.
So definitely important to consider which way would produce the result easiest. If there won't be a wide variety of lighting scenarios on your game then perhaps you could take shortcuts.
Although if it's your goal to create fully fledged lighting on sprites cause it's awesome and everything then I sure can endorse that.
From my past experiments I found that the result, if doing standard lambert/blinn-like shading, would look like plastic unless the effect was applied subtly or if there was no ambient lighting on the texture itself at all.
This could perhaps be solved by using a more toon-like shading model instead but thinking of the problems Casey had with mixing 2D and 3D for sorting, his conclusion that the problem had to be solved more semantically perhaps applies to this situation as well.
That could be a way to go about it anyway. Just throwing out some ideas.
So definitely important to consider which way would produce the result easiest. If there won't be a wide variety of lighting scenarios on your game then perhaps you could take shortcuts.
Although if it's your goal to create fully fledged lighting on sprites cause it's awesome and everything then I sure can endorse that.
From my past experiments I found that the result, if doing standard lambert/blinn-like shading, would look like plastic unless the effect was applied subtly or if there was no ambient lighting on the texture itself at all.
This could perhaps be solved by using a more toon-like shading model instead but thinking of the problems Casey had with mixing 2D and 3D for sorting, his conclusion that the problem had to be solved more semantically perhaps applies to this situation as well.
That could be a way to go about it anyway. Just throwing out some ideas.