I moved to a new URL! Check it out!

posts filed under: general

Dev Log: More Explosions

Image


Been having a lot of fun with my workflow of animating in Flash, exporting to a SWF, and then using ShoeBox to convert to a sprite sheet. There are some hiccups in the pipeline still, but hopefully I can get them ironed out before I get any deeper in the art department.

I should really be working on the actual game part of this game, and probably all the systems that are going to be needed to be intertwined, but at this point I'm having way too much fun with particles. I've been bound by the word of Flash and ActionScript 3 for so long. Having 30 particles on the screen in Offspring Fling was a nightmare for performance, but now in the land of SFML, C#, and Otter, I can spawn hundreds of particles and the game doesn't hitch at all -- not even in debug mode!
gamedev dev log programming art yay!
Posted February 27th 2014 5:55 PM (General)
1 Comment

Dev Log: Explosions

Image


Been working on getting some particle effects going lately. At first I was trying out a workflow of animating in Graphics Gale since it's so easy to use for animating pixel art. The entire process was animating in Graphics Gale, upscaling in Image Resizer using an HQ 4x filter, then downscaling it and cleaning it up in Photoshop. Although this yielded some pretty decent results, the actual pipeline of getting it into the game from Graphics Gale was becoming a huge pain. Here's a sprite from this process:

Image


I did give Flash a try before this, and all I could find was this tutorial on how to export to a sprite sheet. I had a lot of issues with this process. First the entire SWF document couldn't be exported, only a symbol. Second is the fact that you pretty much have no control over the pixel size of a symbol, and therefore the size of the export. Thirdly the export to sprite sheet just didn't have enough options for my needs. This is why I passed on Flash initially.

Then I discovered that you can just export an entire swf has a .png sequence. Hooray! I can export a bunch of images of an animation, and since I can define the size of the swf, I can define the size of the png exports. Now all I need to do is somehow turn it into a sprite sheet.

That's where Shoebox comes in. This program is an Adobe AIR application that is sort of a swiss army knife for 2d game development. One of the features that I'm using in my current process is the frame sheet builder.

At first I was using the frame sheet builder with a sequence of png files, but then I discovered you can just use an exported swf file instead. So after all of that, my current pipeline for animating frame by frame stuff is Flash, export to SWF, use Shoebox to convert it into a sprite sheet, and then import it into the game. It's not a terrible workflow at all, but sometimes using Flash is a little infuriating.
dev log gamedev art flash
Posted February 24th 2014 2:19 PM (General)
No Comments

Screenshot Saturday

Image


Just a quick post for Screenshot Saturday. Working on getting a first pass of art in the game and hopefully have something to show by GDC time. I'm still figuring out the whole work flow with Spine, and also high res assets. For now it's looking like Flash is my best bet, at least for particles, but for other frame by frame stuff I'm still not sure what I'm going to do to achieve the look that Photoshop gives me...

I'll save those details for a future blog post though!
screen sat gamedev gaiaden
Posted February 22nd 2014 8:09 PM (General)
No Comments

Dev Log: Otter Spine Animations

Dev Log: Otter Spine Animations
Today is a very awesome day, for I finally got Spine animations running in Otter! I only have the super basic stuff right now, but I'm hoping to expand the support as I tinker around with Otter and my next game.

Image


This is a quick test of the test animation that comes with Spine. Right now a skeleton can be loaded up, and play its animations in the most simple way. The next steps will be getting all of the cool spine functionality in and running, like being able to manipulate bones and mix animations and all that kinda stuff.

This hasn't been pushed to Otter yet, and probably won't be for at least a few more days as I test it out and hopefully work out any show stopping bugs that might appear.

While making the Otter implementation of Spine I made great use of the Spine csharp runtime which I just dragged and dropped into Otter, and I also referenced the XNA runtime, along with C#Punk's implementation of a SpineAnimation graphic type.
otter dev log programming csharp
Posted February 18th 2014 8:57 PM (General)
4 Comments

Check out Threes!

Check out Threes!
My friends Asher, Greg, and Jimmy made an awesome game called Threes that's number 1 on the app store at the time of me writing this! Check out their awesome trailer:

Image

Not only is it a pretty sweet game for iOS, but it also features my voice for one of the characters. I got to voice the number 48 in the game, and Corey voiced number 24!

Threes is a super clean, well designed game with amazing artwork and great music. It's insane how talented these dudes are and they've totally earned that number 1 spot on the app store. It's pretty cool just to be a tiny tiny part of it! Being a voice in a number 1 selling game is totally going on my resume. (I don't actually have a resume.)
good times ios promotion
Posted February 7th 2014 8:34 AM (General)
No Comments

Dev Log: Cooldown Drawing

Dev Log: Cooldown Drawing
Been a little bit sickly feeling these last couple days so I haven't been too active on the dev side of things. It's been super tough because I've been laying down the ground work for these systems that I want to be part of the game, and since I have no idea what I'm doing progress is a little bit slower than I'd like it to be. Maybe I should start working on a platformer on the side so I can at least dip my toes into familiar space every once in awhile.

One of the tasks on my to do list was to figure out how to draw those cool spell cool down graphics you always see in action RPG, and a lot of RTS games. When you have a spell or ability represented as an icon on the screen, one of the most common ways to show it's cool down before you can use it again is an overlay that slowly erodes with a radial wipe.

Image


There are a lot of different ways to do this, but eventually I went with this simple method using a triangle fan. I had written down an idea of using geometry before, but this implementation is waaay simpler than the madness I wrote in my notebook with using four quads or a triangle fan with way too many points. Here's the entire implementation, also available right now to use in Otter as SquareClock.
public class SquareClock : Image {



    VertexArray vertices;



    /// <summary>

    /// Determines the fill of the clock.

    /// </summary>

    public float Fill {

        set {

            fill = Util.Clamp(value, 0, 1);

            NeedsUpdate = true;

        }

        get {

            return fill;

        }

    }

    float fill = 1;



    public SquareClock(int size, Color color) {

        Width = size;

        Height = size;



        Color = color;



        NeedsUpdate = true;

        UpdateClock();

    }



    void UpdateClock() {

        if (!NeedsUpdate) return;





        if (fill == 1) {

            //draw box

            vertices = new VertexArray(PrimitiveType.Quads);

            Append(vertices, 0, 0);

            Append(vertices, Width, 0);

            Append(vertices, Width, Height);

            Append(vertices, 0, Height);

        }

        else {



            vertices = new VertexArray(PrimitiveType.TrianglesFan);



            if (fill > 0) {

                //draw center

                Append(vertices, HalfWidth, HalfHeight);

                //draw middle top

                Append(vertices, HalfWidth, 0);

                if (fill >= 0.125f) {

                    //draw left top

                    Append(vertices, 0, 0); 

                }

                if (fill >= 0.375f) {

                    //draw left bottom

                    Append(vertices, 0, Height);

                }

                if (fill >= 0.625f) {

                    //draw right bottom

                    Append(vertices, Width, Height);

                }

                if (fill >= 0.875f) {

                    //draw right top

                    Append(vertices, Width, 0);

                }



                // get vector of angle

                var v = new Vector2(Util.PolarX(FillAngle, HalfWidth), Util.PolarY(FillAngle, HalfHeight));

                // adjust length of vector to meet square

                var l = (float)Math.Max(Math.Abs(v.X), Math.Abs(v.Y));

                if (l <= HalfWidth) {

                    v.X /= l;

                    v.Y /= l;

                }

                // append the vector

                Append(vertices, HalfWidth + (float)v.X * HalfWidth, HalfHeight + (float)v.Y * HalfHeight);



            }

        }



        DrawableSource = vertices;



        NeedsUpdate = false;

    }



    public float FillAngle {

        get { return (fill * 360) + 90; }

    }



    void Append(VertexArray v, float x, float y) {

        v.Append(x, y, Color);



    }

    public override void Update() {

        base.Update();

        UpdateClock();

    }



}
The downside with this implementation is that I'm pretty limited as to where I can draw the original angle from. Since I've made this into a Graphic type in Otter I can actually flip it, scale it, and rotate it in any way I want, but I won't be able to change where the start and ending angle end up. That's okay for now since I won't be needing that functionality myself, but maybe if I have some time I can implement a more advanced version of it soon.
otter programming csharp dev log
Posted February 5th 2014 12:36 PM (General)
No Comments
« newer posts
older posts »