@ChevyRay Man it's been like a million years and aligning things vertically with html + css is still a nightmare (Today)

Stayed up all night making this 2d skeleton system in Otter that should let me make multi part enemies yaayyy t.co/r7GAku0wxh (Today)

RT @CapForeverRemix: Captain Forever Remix pre-alpha trailer is GO: t.co/VmmIykCn4a (Today)

This is it. This is the best thing available to me on the internet. t.co/vW9p6k3t6A (2 days ago)

@TommyRefenes @TomFulp back when you had to run a WinNuke protection program whenever you went online (3 days ago)

@rabbit_nabokov its no problem just take water and add gravity (3 days ago)

@floatvoid da fuek is that all about. I guess I don't notice this happening when I use render textures as maps for displacement? (3 days ago)

When using a render texture to control my color grading shader... it interprets the texture upside down? So I'll just use ScaleY = -1 #magic (3 days ago)

@infinite_ammo Did you know that 1 out of 10 cameras will reset your game data? (4 days ago)

@Silvanis_s play with math formulas until you finally google the right thing to find out someone already figured it out in a much better way (4 days ago)

@DrewFitz whaaaaa what is that? :O (4 days ago)

@Silvanis_s it's magic even when writing shaders (4 days ago)

good times with a color grading shader t.co/e43rKm0WTU yahoooo (4 days ago)

Making a game engine/framework is actually not too bad until you get to TEXT RENDERING AAUGHuihaisgha (4 days ago)

@celsiusgs @hippiemanx @TeaRascal that is the sound of a nostalgia bomb going off in the distance (4 days ago)

@celsiusgs @TeaRascal if you say ridge racer, riiiiiiidge racer 5 times while in front of a mirror kaz hirai appears (4 days ago)

@celsiusgs Submitted for the approval of the midnight society... I call this story... we're getting old. (4 days ago)

@MANvsGAME Did you show up for the first day of filming and forget your pants? (4 days ago)

@celsiusgs aauaghguiaghh shuuuuuut uuuuuupp (4 days ago)

@Demruth I love how they can't sell these pictures anymore because everyone just cell phone photos them from the screens. (4 days ago)

follow
search
posts filed under: general

2014 - 10 - 15 / 4:25 pm / general

Dev Log: Color Grading Shader

Dev Log: Color Grading Shader

I love post processing shaders! I think they're one of my favorite things to mess with now that I have a cool C# game making framework to play around with. One of my latest experiments was implementing color grading into Stratoforce, and by extension all of my future games built with Otter.

What's color grading? Basically you have a texture that contains every single color possible on it. This texture is usually referred to as a Look Up Table, or LUT. When your texture, or your game, or whatever goes to render itself, the shader can remap all of its colors to the colors on the LUT texture.

Check out these links for more details:
* Unreal Engine Color Grading
* Simple Color Grading for Games
* Color Grading: Another cool rendering trick

So here's what Stratoforce looks like with a normal color table:

Image

And here's a quick test on color grading:

Image

Whoa look at how different all the colors are! The effect is really powerful as it allows you to apply any sort of color corrections to the whole game in real time.

Here is my work flow for creating a color table and using it to alter the colors of the game:

* I downloaded a standard LUT texture from Epic: RGBTable16x1.png

* I took a screenshot of my game with the RGBTable superimposed on the top left corner of the screen.

* I brought the screenshot into Photoshop and played around with some adjustment layers: Hue/Saturation, Color Balance, Curves, etc.

* I then copy merged the RGBTable image from that document and exported it as a new png file.

* I used that png file as the LUT table for the color correction in the shader.

So the standard RGB table looks like this:

Image

And the modified version from the Photoshop file comes out looking like this:

Image

Now the LUT texture gets loaded into a shader as a 3d texture. Whoa a 3d texture! I didn't even know that a 3d texture could exist until yesterday. Basically imagine a cube that is composed of every color possible. The x y z of the cube is actually r g b! That's why the look up table texture looks like a series of squares. Notice how its 16 x 16 x 16 pixels. Crazy, right?

So here's what I had to do for my GLSL shader in Otter:

// Apply the color grading
//pixel is input color, colorGrade is sampler2D of LUT.
vec4 gradedPixel = sampleAs3DTexture(colorGrade, pixel.rgb, 16);
gradedPixel.a = pixel.a;
pixel = gradedPixel;


Since SFML by default only binds textures as 2D textures in OpenGL, I had to find a work around for loading a 2d texture as a 3d one. I found a work around here and used it in my shader.

vec4 sampleAs3DTexture(sampler2D texture, vec3 uv, float width) {
float sliceSize = 1.0 / width; // space of 1 slice
float slicePixelSize = sliceSize / width; // space of 1 pixel
float sliceInnerSize = slicePixelSize * (width - 1.0); // space of width pixels
float zSlice0 = min(floor(uv.z * width), width - 1.0);
float zSlice1 = min(zSlice0 + 1.0, width - 1.0);
float xOffset = slicePixelSize * 0.5 + uv.x * sliceInnerSize;
float s0 = xOffset + (zSlice0 * sliceSize);
float s1 = xOffset + (zSlice1 * sliceSize);
vec4 slice0Color = texture2D(texture, vec2(s0, uv.y));
vec4 slice1Color = texture2D(texture, vec2(s1, uv.y));
float zOffset = mod(uv.z * width, 1.0);
vec4 result = mix(slice0Color, slice1Color, zOffset);
return result;
}


It seems like the real magic is using this dynamically in a game. Interpolating between various LUT textures for different effects seems like it could be really interesting! I'm excited to play around with this kind of stuff more while procrastinating on solving the hard problems of working on this game.

3 Comments

2014 - 10 - 10 / 5:21 pm / general

Dev Log: Bezier Curves

Dev Log: Bezier Curves

This week has kinda sucked for game development stuff. I'm not really sure why, but I just haven't really felt super inspired to work on anything lately, and when I do try to work on things I feel like everything I make is just terrible so I procrastinate. It's a vicious cycle! So I tried to think of maybe something I can add to Otter because that should be easy enough.

I decided to try and just learn about bezier curves in more detail. I've never used them in a game, but it seems like they would be handy in a lot of aspects of game development. I found this quick tutorial and got started with recreating the example code in Otter.

Image

Although... I'm not sure if this is looking quite right. I'm pretty sure I'm doing the same exact code in the example, but for some reason every curve on my bezier path has sharp end points with the next curve on the path... so for now I'm going to have to look into this further, but the current source is in the Util class in Otter's dev branch if anyone wants to give it a look!

3 Comments

2014 - 9 - 24 / 2:51 pm / general

Platforming Nudging Assistance

Platforming Nudging Assistance

Making a solid feeling platformer isn't as simple as setting up horizontal movement, jumping, and gravity. There are a lot of tricks and behind the scenes magic involved in making something feel good to the player. In the past I've talked about ledge forgiveness, and input buffering, and now I'm going to add nudging assistance to the list!

Ledge forgiveness, input buffering are two tricks that let the player execute their intended action even if they screw it up slightly. Nudging assistance also falls into that category.

The Problem
My latest small game Starforger II is all about roaming around procedural levels. A lot of times the levels have one tile openings in walls that the player wants to navigate into. Take a look at what happens with just a typical platforming physics system when a player tries to navigate into a small tunnel like this.

Image

Even though the player really wants to slide into that hole as they fly by they simply cant because there is no frame in which the player is able to actually navigate into that tile. If their vertical speed is too great they will miss the hole every time even though they are holding down input that would make it seem like they should be able to squeeze into there.

Image

Image read more

4 Comments

2014 - 9 - 18 / 4:08 pm / general

Game Jam Procedural Generation Part IV

Game Jam Procedural Generation Part IV

The final part of this series about procedural generation for Starforger II will conclude with the last of the level generation code. In the last episode I talked about some of the details in generating rooms, tunnels, and other details in the level. In this final part I'll wrap it up by talking about how I place enemies, breakable blocks, and some final touches on the treasure room.

Image

The next thing in the generation of the level is the breakable blocks. These are blocks that the player can blow up using their bombs. I added these sort of at the last minute of the jam just to give some more interaction with the world, and it felt kinda fun to forge your own path through a big section of breakable blocks.

// put breakable blocks in random places I dunno
for (var yy = 10; yy < grid.TileRows; yy++) {
for (var xx = 0; xx < grid.TileColumns; xx++) {
if (CheckRect(xx, yy, 2, 2)) {
continue;
}
if (Rand.Chance(config.BreakableChance)) {
if (breakables < breakablesMax) {
Scene.Add(new BreakableBlock(xx * 16, yy * 16));
gridBreakable.SetRect(xx, yy, 2, 2);
breakables++;
}
if (config.Width > 1500) {
xx++;
}
if (config.Width > 1000) {
xx++;
}
}
}
}


I actually use a separate grid "gridBreakable" to keep track of where I've already placed blocks. This is less expensive in Otter. The alternative would be to do a collision check against all other breakable blocks which would take longer and longer if there are more breakable blocks being added. Whenever a block is added I add a 2 x 2 rectangle to the gridBreakable grid, and the function CheckRect() will check against the breakable grid and the ground grid, so I can't accidentally place a breakable block in the ground, or overlapping another breakable block. read more

No Comments

2014 - 9 - 16 / 6:06 pm / general

Otter Updates

Otter Updates

Another quick round of updates to Otter this week. All of these changes are currently happening in the dev branch and will be moved to the default branch once I get some more documentation and testing done.

* Platforming Movement now supports jump through platforms
The PlatformingMovement component can jump through platforms now.

Image

The set up for this requires adding tags to the component that are to be used as jump through. The next step is adding a collider to the Entity that will act as the jump through platform detector. This collider should be only 1 pixel tall, and should be placed on the very bottom of the entity, and probably be the same width as the collider being used for the rest of the collisions. The component also allows for the player to push down + jump in order to drop through a platform.

* Tiny music changes
The Music class now keeps track of all of the created music objects in order to update them when the global volume is changed. Previously I was using the EventRouter but if the user ever decides to clear all of the event router subscriptions the music object would break.

* QuitKey has become QuitButton
The QuitKey has been replaced with a Button object. The default to quit is still the Escape key on the keyboard, but now it can be set to any key, mouse button, or joystick button.

* AutoTiling example
An example project has been added in the Examples folder which should show the basics on how to use the auto tiling system in Otter.

* Collider double-add bug fix
There was a bug in the Collider system that allowed a collider to be added to the internal collider list twice. If an Entity used AddCollider or SetCollider in its Added method those colliders would be added to the Scene twice. If one of those double-added colliders are then removed at some point then bad things would happen. This has been fixed by only allowing colliders to be added to the scene once.

No Comments

2014 - 9 - 12 / 12:49 pm / general

Game Jam Procedural Generation Part III

Game Jam Procedural Generation Part III

In the last episode of Game Jam Procedural Generation I talked a lot about generating the base of the platforming level in Starforger II, and carving out rooms into the ground of the level.

Image

So now we have a basic level that with a bunch of empty rooms below the ground. The next step is going to be connecting those rooms together. To do this I built a quick class called a TunnelSnake (tunnel snakes rule) to dig tunnels from any point on the map to any other point. Here's the full source of that class:

class TunnelSnake {
public int X;
public int Y;
public int Width = 1;
public int Height = 2;

public int EndX;
public int EndY;

int verticalSteps;
int verticalStepMax = 4;
int forceHorizontal = 0;
int forceHDirection = 1;

public TunnelSnake(int x, int y, int endX, int endY) {
X = x;
Y = y;
EndX = endX;
EndY = endY;
}

public void Dig(GridCollider grid) {
while (X != EndX || Y != EndY) {
grid.SetRect(X, Y, Width, Height, false);

if (Rand.Chance(50) || forceHorizontal > 0) {

if (forceHorizontal > 0) {
X += forceHDirection;
Height = 2;
X = (int)Util.Clamp(X, 2, grid.TileColumns - 2);
}
else {
X += Math.Sign(EndX - X);
}

forceHorizontal--;
if (forceHorizontal == 0) {
verticalSteps = 0;
}
}
else {
verticalSteps++;

Y += Math.Sign(EndY - Y);

if (verticalSteps == verticalStepMax) {
forceHorizontal = Rand.Int(3, 15);
forceHDirection = Rand.Sign;
}
}

if (Rand.Chance(50)) {
if (Rand.Chance(50)) {
Width += Rand.Sign;
Width = (int)Util.Clamp(Width, 1, 5);
}
if (Rand.Chance(50)) {
Height += Rand.Sign;
Height = (int)Util.Clamp(Height, 2, 6);
}
}
}
}
}

read more

No Comments

about

About

Hi there, my name is Kyle, and I'm a 27 year old kid with adult powers. I'm making video games and living the indie game developer life in Tempe, Arizona. Here you will find my thoughts, games, websites, doodles, and other stuff like that. I worked on Snapshot, Offspring Fling, and a whole bunch of other games. I also created and maintain Otter, a 2d game making framework. If you want to get a hold of me use the form on the bottom of the page, leave a comment, or just tweet at me. I try to post three times a week. Thanks for stoppin' by! You're the coolest.

facebook

videos

Do you want to make a Let's Play of one of my games, or a just a video featuring footage of my games? You have my full permission to do so! Even if you are monetizing your videos, you still have my full permission to use any footage from any of my games. Go for it!

contact

Your message has been sent! Thanks :)
SEND MESSAGE