@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 tagged with: dev log

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 - 18 / 6:36 pm / stratoforce

Dev Log: Building Buildings

Dev Log: Building Buildings

I'm finally getting back to work on my main project which for now is called Stratoforce. Maybe StratoForce? Strato Force? I dunno, who cares for now.

A big part of the game is placing structures onto islands that you build, and for whatever reason I've been totally stuck in how I should be designing the structures. I had a couple of images in the game for the basic Power Generator and Power Node structures, but I hated how it looked over time. They looked too complex, so I decided to try to dial it back to something way simpler with big simple shapes.

Image

From left to right there's the Ammo Generator, the Power Node, and the Power Generator. I've been trying to find references for RTS structure and building design, but I found that a lot of them use 3d which is quite a bit different. I can see how this kind of thing would be waaay easier in 3d though. I do want to have my structures animate, and respond to things, and doing that in 2d is going to be a little challenging. I might be able to make something work with a bunch of tweens or something though... hopefully I'll be able to prototype some animation stuff for the structures soon!

No Comments

2014 - 8 - 19 / 5:30 pm / general

Dev Log: Game Jammin

Dev Log: Game Jammin

Over the weekend I went to a local game jam in Phoenix. I haven't jammed since November and this was another cool opportunity to put Otter to the test!

The game isn't quite ready for release, but here are a few screen shots of it for now:

Image

Image

Image

Image

And you can see some of it in motion right here.

This jam I decided that I wanted to really limit myself in terms of art so I could spend more time on more stuff in the game. I wanted to restrict myself to a game boy palette, so my first thought was to go for a shader. I ended up getting a shader up and running really quickly that emulates sort of a game boy look. Here's the shader code:

#version 130
uniform sampler2D texture;
uniform sampler2D palette;
uniform float shift;
uniform float offset;

float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

void main() {
vec2 pixpos = gl_TexCoord[0].xy;
vec4 pixcol = texture2D(texture, pixpos);

float gray = (pixcol.r + pixcol.g + pixcol.b) / 3;

gray = round(gray / 0.25) * 0.25;

gray += (rand(pixpos + offset) * 2 - 1) * 0.03;

pixcol = texture2D(palette, vec2(gray, shift));

gl_FragColor = pixcol * gl_Color;
}


The shader also does some extra stuff like randomly generates a very faint noise over the entire screen. I couldn't figure out how to make the noise scale with the screen though, so if you are playing with the screen scale at 2x or 4x or whatever the noise will still be every 1 pixel.

The shader also needs a palette to go with it that is passed in through the palette parameter. You can also shift the palette up and down on the texture. Here's the palette file I used:

Image

When the game starts it's using the palette from left to right on the very top of the image. The shift parameter in the shader can be used to read colors from anywhere on the y axis on the image, so if I want to make the game use the blue palette on the bottom I can set the shift to 1. (Texture coordinates are 0 to 1 in shader land.) The shader also reduces the amount of colors with some division and rounding.

The last thing I did to help out with the shader is add a full screen dither texture to the game. This is actually being rendered in the game and not in the shader. It's a very very faint texture of black and white pixels overlaid on the screen at an alpha of 10%. This will add a dithering look between all of the main colors of the palette. This idea was inspired by Dan Fessler's HD Index Painting tutorial. (Actually most of this shader was inspired by that tutorial!)

I think that covers everything with the shader. Hopefully soon I can release the game itself. Just need to fix some bugs and fix some sound issues first. I ended up getting awards in the technical, art, and design categories, and overall I got 2nd place at the jam which is pretty cool!

2 Comments

2014 - 7 - 8 / 3:54 pm / general

Dev Log: Enemy Wave HUD

Dev Log: Enemy Wave HUD

Here's something that has been on my task list since forever: showing incoming enemy waves on the HUD! Originally the bottom right spot was going to be something different, but for now the incoming wave information felt like it was more important than anything else that could be there.

Image

Now you can see how many enemies are going to be coming at you in the future. The little blips on the hud scroll from right to left as time marches on.

Image

The enemies are arranged vertically depending on which spawn point they're coming from. I'm not sure how much information will be available to the player from here, but for now you can tell the size of the enemy and how many are coming up. I feel like this took me way too long to figure out, and I'm still not 100% happy with how I implemented it, but hey it works!

No Comments

2014 - 7 - 5 / 3:56 pm / general

Dev Log: Overworlds

Dev Log: Overworlds

Getting back into the swing of game development has been a little tougher than I thought. Especially since July isn't exactly going to be a calm month for me to really dig into stuff. This 4th of July weekend is pretty busy, and I'm still right in the middle of it. After I'm heading up to EVO with a bunch of folk, and then I'm spending some time on the east coast after that. Traveling and getting work done doesn't really go hand in hand for me, so hopefully I can still salvage some time to get some game development in.

Anyway, my recent developments have lead me into making some sort of overworld map for my game. As I started to work on it, I quickly realized that I have no clue what I'm doing. I haven't really worked on anything like this before, and I'm slowly figuring out how to properly structure and manage it all.

Image

Basically the map screen is going to be some kind of turn based system that will determine what kind of encounter you go into next. The player will be able to choose where to go with their character, and there will also be enemy forces moving about in the area attacking things. The main issue I have right now is that I think I know how I want everything to work, but I have no idea how to code it.

I've never done any sort of turn based anything before, so I've been spending some time researching the internet for any leads. I found a few quick examples, but not really any sort of examples that come with source code to look at. I find it very difficult to go from an abstract concept to actual code, and a lot of times these examples or tutorials I find just explain the broad concepts of a system and don't really dig into the details which is where I always get lost... but hopefully with enough just messing around in a code window I can stumble onto the right answer.

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