@netgrind noooo no no no no no no no (Today)

@psysal you'll never forget those udon noodles (Today)

RT @MANvsGAME: Ran into this double-knit character calling himself @kylepulver at the Indie Mega Booth. A kung-fu fight ensued. t.c… (Today)

@saint11 @amora_b oooo ooookaaaaaayyyyyy (Today)

@amora_b @saint11 yo come to the megabooth let's go get sushi (Today)

RT @rustym: Retro Game Crunch is 34% off on Steam!! t.co/vfOCUQ3xgw (Today)

@saint11 @amora_b sushi time (Today)

@psysal @AsherVo @Chris_Rock @NoelFB okay were on the 4th floor up escalators to the left (Yesterday)

@AsherVo @psysal @Chris_Rock @NoelFB one block out. Board games are in 204 (Yesterday)

@AsherVo @psysal @Chris_Rock @NoelFB I'm heading there soon. I'm like 10 15 mins away (Yesterday)

@AsherVo @psysal @Chris_Rock @NoelFB were wrapping up now not sure what we're up to next but yeeaaah let's rent and play board games at pax (Yesterday)

Greg t.co/19N3h8OvRJ (Yesterday)

@psysal @Chris_Rock @NoelFB lotus lounge 9th and madison (Yesterday)

@psysal @Chris_Rock @NoelFB oh wait were bailing on this place sorry. Meet up later (Yesterday)

@psysal @Chris_Rock @NoelFB were on Madison and 8th sushi kanpai (Yesterday)

@psysal @Chris_Rock @NoelFB you wanna meet at the convention center? We're going to get sushi right now. (Yesterday)

@psysal @NoelFB yo where you at (Yesterday)

@psysal @NoelFB hahah no they kick out everyone around 10 I think. It would be a pretty rad spot to sleep in though (Yesterday)

RT @unseven: great potential for fav female char so far *_* #Duelyst t.co/3woKILYKEs (Yesterday)

@egoraptor are you a member of the soko doko elite sign up today for our exclusive news letter (Yesterday)

follow
search
posts tagged with: dev log

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

2014 - 6 - 11 / 4:06 pm / general

Dev Log: Shader Follow Up

Dev Log: Shader Follow Up

My last post went over some of my recent shader developments with displacement maps, and using gradient maps to recolor portions of the screen. I had a couple of questions of what exactly was going on behind the scenes with the render textures that I was using to tell the shader how to actually manipulate the image, so I thought I would address that now!

Here's an example image from the game with a lot of explosions going on:

Image

Each explosion has a shockwave ripple coming out of it which distorts the area around it. The explosion also changes the color of the screen around to a gradient map with pink and yellow. This makes it look like an intense heat, or something.

For reference, here's the shader again (it's been slightly modified since yesterday.)

uniform sampler2D texture;
uniform sampler2D displacementMap;
uniform sampler2D paletteMap;
uniform sampler2D gradientMap;

void main() {
// Get the pixels off of the maps.
vec4 displacementPixel = texture2D(displacementMap, gl_TexCoord[0]);
vec4 palettePixel = texture2D(paletteMap, gl_TexCoord[0]);

// Read the pixel from the displaced position.
vec2 pos = gl_TexCoord[0];
pos.x += (displacementPixel.r * 2.0 - 1.0) * 0.025;
pos.y -= (displacementPixel.g * 2.0 - 1.0) * 0.025;

// Get the displaced pixel.
vec4 pixel = texture2D(texture, pos);

// Proper grayscale conversion.
float gray = dot(pixel.rgb, vec3(0.299, 0.587, 0.114));

// Get the color from the gradient.
float gradientPos = mod(gray + palettePixel.g, 1);

// Get the actual color from the gradient.
vec4 gradientMapPixel = texture2D(gradientMap, new vec2(gradientPos, palettePixel.r));

// Mix the gradient with the pixel color based on the palette pixel.
pixel = mix(pixel, gradientMapPixel, palettePixel.a);

// Apply the final color multiplied by the gl color.
gl_FragColor = pixel * gl_Color;
}

From this point on there's going to be a lot of images and some hefty animated gifs, so I'll hide the rest of this post behind the read more button! read more

3 Comments

2014 - 6 - 10 / 7:48 pm / general

Dev Log: Shaders All Day

Dev Log: Shaders All Day

I've been taking an extended vacation in shader town lately, and so far I've been having a lot of fun! One of the things I was figuring out was how to take an image and remap all the colors to a gradient based on their luminosity (well, a sloppy way of estimating the luminosity.) This seems like a pretty powerful effect that could be used to really spice up effects. Yeah, I'm always thinking about how to make explosions better.

First I'll share the actual shader code that I'm working with right now. This is the shader that's being used for all of my full screen effects.

uniform sampler2D texture;
uniform sampler2D displacementMap;
uniform sampler2D paletteMap;
uniform sampler2D gradientMap;

void main() {
vec4 displacementPixel = texture2D(displacementMap, gl_TexCoord[0]);
vec4 palettePixel = texture2D(paletteMap, gl_TexCoord[0]);

vec2 pos = gl_TexCoord[0];
pos.x += (displacementPixel.r * 2.0 - 1.0) * 0.025 * displacementPixel.a;
pos.y -= (displacementPixel.g * 2.0 - 1.0) * 0.025 * displacementPixel.a;

// Get the displaced pixel.
vec4 pixel = texture2D(texture, pos);

// Proper grayscale conversion.
float gray = dot(pixel.rgb, vec3(0.299, 0.587, 0.114));

// Get the color from the gradient.
float gradientPos = mod(gray + palettePixel.g, 1);

vec4 gradientMapPixel = texture2D(gradientMap, new vec2(gradientPos, palettePixel.r));

// Mix the gradient with the pixel color based on the palette pixel.
pixel = mix(pixel, gradientMapPixel, palettePixel.a);

gl_FragColor = pixel * gl_Color;
}

Using Otter I can just apply this shader to the game's main Surface object and I'm ready to roll with special effects. This post is going to be image heavy, so I'll hide the rest of it behind the jump! read more

6 Comments

2014 - 6 - 2 / 4:09 pm / general

Dev Log: Shader Experiments

Dev Log: Shader Experiments

Since my break to work on the remaining bits of Otter I haven't really fallen back into the groove on working on my big game project yet. Yesterday I dedicated the day to playing around with shaders since I'm really interested in using them for all kinds of cool visual effects.

Image

This is what I ended up coming up with at the end of the day. First I was playing around with gradient maps for recoloring an image, and then I started to mess with displacement to make cool waves in the image. Finally I wanted to experiment with having a render texture that could be passed to the shader for dynamic effects.

Basically how this little program works is that there is the static image with a shader loaded. Then there's a Surface object that can be painted on with the mouse. The shader uses the texture from that Surface to affect the image in different ways.

Here's the full C# source:

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ShaderTesting {
class Program {
static void Main(string[] args) {
var image = new Image("pic.jpg");
var game = new Game("ShaderZ", image.Width, image.Height);

game.FirstScene = new TestScene();

game.Start();
}
}

class TestScene : Scene {

Image image = new Image("pic.jpg");
Image circle = new Image("circle.png");
Surface distortion;

public TestScene() {
AddGraphic(image);
distortion = new Surface(image.Width, image.Height);
circle.CenterOrigin();
circle.Blend = BlendMode.Add;
AddGraphic(distortion);
circle.Alpha = 0.1f;
distortion.Visible = false;
distortion.AutoClear = false;
}

public override void Update() {
base.Update();

if (Timer % 30 == 0) {
try {
image.Shader = new Shader("../../shader.frag");
}
catch(Exception e) {
Console.WriteLine("Shader error:");
Console.WriteLine(e.Message);
}
image.Shader.SetParameter("gradient", new Texture("gradient.png"));
}
if (Input.MouseButtonPressed(MouseButton.Right)) {
distortion.Clear();
}
image.Shader.SetParameter("time", Timer);
image.Shader.SetParameter("distortion", distortion.Texture);
image.Shader.SetParameter("offset", Util.SinScale(Timer, 0, 1));

if (Input.MouseButtonDown(MouseButton.Left)) {
Draw.SetTarget(distortion);
Draw.Graphic(circle, MouseX, image.Height - MouseY);
Draw.ResetTarget();
}
}

public override void Render() {
base.Render();

Draw.Circle(MouseX - 15, MouseY - 15, 30, Color.None, Color.Red, 2);
}
}
}


And the GLSL shader source:

sampler2D texture;
sampler2D gradient;
sampler2D distortion;
uniform float offset;
uniform float time;
uniform float mixfactor;

void main() {
vec2 pos = gl_TexCoord[0];
vec2 distortColor = texture2D(distortion, pos);
pos.x += distortColor.r * (sin(time * 0.1 + pos.x * 10) * 0.05);
pos.y -= distortColor.g * (cos(time * 0.1 + pos.y * 10) * 0.05);
vec4 color = texture2D(texture, pos);

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

vec4 gradientColor = texture2D(gradient, vec2(gray, offset));

gl_FragColor = mix(color, gradientColor, distortColor.r + distortColor.g);
}


You can download everything here. Note that you'll have to give it a reference to Otter to compile and run it yourself.

2 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