posts dated from: february 2015

Otter Updates

Otter Updates
I finally merged in all of my pending changes into the main branch of Otter! If you've been using the dev branch for the past few months not much has changed, but things finally stabilized enough to the point where I felt comfortable updating the main branch.

Afterwards I've done some minor adjustments and fixes:

* Using Game.EnableAltF4 now checks for either Alt key on the keyboard.

* The RandomElement() function in NaturalLanguage now uses Otter's Rand class to ensure consistency if you're using a preset random seed.

* Added Snake.AddAllVertebraeToScene()

* Axis and Button keys, joysticks, mousebuttons, etc, are now public accessible.

* Renamed Button.AddButton to AddJoyButton.

* Axis and Buttons can now add keys, buttons, etc, from other Axes and Buttons. Useful if you want to copy a button or axis.

* GridCounter now has MoveUp(), MoveDown(), MoveLeft(), and MoveRight()

Slowly and surely moving towards a 1.0 version!

Doodle Post

Image

Dev Log: Menus n More

Dev Log: Menus n More
I've been jamming on Super Sky Sisters a lot these past few days getting it ready to show off during Game Developers Conference! I also had a good deadline for tonight which was our monthly Phoenix IGDA meeting. It's always a blast to see two people play the game together, especially if they don't know each other and if both of them have never played before.

I put in a bunch of new menu screens last minute, but so far they're turning out pretty well.

Image


Image


Image


I also added a better title screen that rotates screen shots of the game so that people kind of have an idea of what to expect before they push start.

Image


I should note that a lot of these menus are built for demo builds in public venues. I have some ideas of how I want to make the final menus that involves some more polish and artwork, but for now I'm just making the bare minimum I need for showing off the game.

Every time I code up a menu I always think "I should really look into using some sort of UI framework, or make a generic reusable UI framework!" but then I never end up doing either of those things. Otter does have some remnants of a UI system that I was working on, but that's so old and clunky now compared to my current style of coding.

I can never decide if it's worth coding with a UI framework or system especially for UIs that are all controller and keyboard based. Whenever I look into using some sort of framework it always seems like it's way too much for what I'm looking for, and a lot of it seems to be based on mouse interaction which is not what I'm usually doing in my games. If I ever end up with something cool though I'll definitely add it to Otter for other people to (try to) use as well.

Doodle Post

Image

Doodle Post

Image

Pretty Skies through Shaders

Pretty Skies through Shaders
For the full version of Super Sky Sisters I wanted to spend some time making a really cool looking sky backdrop for the action to take place on. The original prototype has a decent looking sky, but I think I whipped it up in under an hour and looking back at it now it looks like crap.

Image


So I turned to my old friend Photoshop for some advice. I played around with various ways of making a cool looking sky, and I eventually I came back around to using a Gradient Map to manage the colors of a black and white image. If you didn't know, I'm a huge fan of using gradient maps. When it comes to high resolution art I tend to have a lot of trouble with choosing palettes and maintaining that palette through the painting. It's really easy to muddy up the colors if I start eye dropping the wrong parts of the image, and working in high res really makes me miss the amount of control I have over my palette when working with pixel art... but gradient maps are a good band aid for this!

I feel like a broken record with gradient maps so I won't go into too much detail for this post on what they are. To put it simply an image's colors can be remapped to a new set of colors based on lightness. Here's a quick example of what that means.

Image


So how can I use this for painting skies? By using a gradient map to take care of all the colors all I have to do is paint up something in grayscale first...

Image


And then I can spend a little time making a nice sky colored gradient...

Image


Then I can apply that to the image as a gradient map and like some kind of magic my image has awesome colors!

Image


My idea for the sky at this point was to have one static sky image, and then decorate it with a bunch of varied cloud sprites. The total amount of assets I use for rendering the sky are as follows:

Image


Image


Image


My first thought at this point was to just apply the gradient map to the asset directly and export it with the blue colors baked in. If I did it that way then I wouldn't need to worry about using any shaders in the game, and I thought that would be the best bet, but I quickly ran into an issue with the color.

It turns out baking a gradient map into an image with alpha has pretty undesirable results. Check out how one of the clouds look when the gradient map is baked in.

Image


When using these sprites on top of an already baked in sky background I end up getting some colors that are less than ideal. Some parts come out grey and white and black which can look pretty ugly. So I ended up scrapping the whole baked in gradient map idea.

Instead I just exported all of my assets in grayscale and also exported the gradient. I then applied a relatively simple shader just to apply that gradient map to the image. In Otter I'm using a Surface to render the entire sky to. That surface then has the shader along with the gradient texture. The result looks like this:

Image


It looks incredibly cool in motion, but unfortunately it's tough to show it without a full video recording. There's too many colors going on for a gif to really show how cool it looks.

A cool side effect of using a shader with a real time gradient map application is that I can switch to a different gradient and the sky can be totally different. For example I can take a gradient that looks like this:

Image


And the sky then looks like this:

Image