Imitating the Canvas Engine (4): The Frame Effect
Previous Post:
Imitating the Canvas Engine (3): The Canvas Effect - Memories of Melon Pan
Now that we've got what color the pixel's supposed to be, we can do the little uncolored border effect that Valkyria Chronicles uses. This brings us to our second texture.
Pretty nondescript, right? This is actually the image as seen when you're editing it in GIMP, though I also outlined it in green so that it would be easy to see. The checkered portion there is where it's transparent without color, or where there's a zero alpha value. The alpha value is actually the only value we care about here. Anywhere where there's alpha is where the screen border is. If it doesn't have any alpha, then it's the main colored portion of the screen. If it does, it's in the bordered frame of uncolored, plain canvas. We'll call it the frame mask, and it can be fractional if you want a partial blend of color and plain canvas.
For the texture of the frame itself, I'm actually reusing the pencil texture I used for the scene.
You could substitute another texture if you wanted to, but all you have to do is get the color at the pixel you're working on. From there, it's really simple - get the color of the scene rendered up to this point (with the canvas effect applied), get the color of the frame texture (I'm reusing the canvas texture for this), and then lerp it with the frame mask at that pixel (which is that alpha value).
C = (Cf * M) + (Cs * (1 - M))
For the variables:
Since I'm reusing the canvas texture, and it looks darker than I'd like, I do some modifications to its color to make it brighter before I do any interpolation.
Like the frame texture, I'm outlining the picture in green, so that it's easy to see the white outside frame.
The other thing about Valkyria Chronicles is that if you move the camera, the canvas texture will also move. This can be handled with an offset as input to the canvas and frame textures.
float4 CanvasColor = tex2D(CanvasSampler, TexCoord + CanvasOffset);
float4 FrameColor = tex2D(FrameSampler, TexCoord + CanvasOffset);
Next Post:
Imitating the Canvas Engine (5): Basic Edge Detection - Memories of Melon Pan
