Some samples of adding two different items to the same sprite at runtime.
Now, the sword and axe look fairly crappy, as once again I got so excited after I got it working, I forgot all about making it pretty before posting it here. You can tell I’m not a designer by nature.
Now to the beginning…
Last week, after figuring out how to draw items like swords and spears onto character sprites, I started off and did some by hand. Not happy. I found the process messy, tedious and error prone, so the odds of me doing this by hand often are zero to none.
So I spent the last few days writing a GUI tool to do it for me, and now its sort of finished and mostly works. I called it Gorgon, for no really good reason. Gorgon is written in Java Swing, as that’s the thick client stack I know best. This caused me some joy as I had not done much Java2D stuff before and I had to bone up on AffineTransforms and cleaning my graphics objects nicely and so on. This took some effort – “brain training” mission accomplished. It gave me a nice headache from all the freshly grown brain cells. It’s similar enough to HTML5 Canvas that I should be able port the drawing logic across.
Using Gorgon, I took my red runner sprite, added some hard points to his left hand, and then drew him running to the left with a sword. Then I did with a red axe.
Here are some screen shots of what Gorgon looks like.
Step -1 Load Character Sprite Sheet
In this screen, you load up the sprite sheet and tell it the number of frames. Clicking on the image creates a point and its added to list. Right clicking deletes a point. Also, the blue light-sabre thing is the angle the item will be drawn at. Press generate button to create the JSON spec (for use by Dart in the client side – TODO).
Step 2 – Load Axe Sprite Sheet
The item sheet currently only supports a single frame, but there is nothing in the future that would stop one from creating a glowing ‘Axe of Power’ and so on. Now for the fun part.
Step 3 – Test How it Looks
This is the screen where you can test what the sprite looks like at various sizes and even export it as an animated gif for your website’s background image. That’s how I made the GIFs at the top of the post. They are not actually used for animation in the browser, only in demo mode.
Step 4 – Create Hardpoint JSON Files
In real use, this is where you cut and paste the JSON into files into your web app so that the Dart code can find it and render it. That’s a job for me – I will do it next. I got distracted making my runner carry all sorts of silly things around, and the Dart code needs to be updated and expanded beyond my basic proof of concept.
I will make Gorgon available on this blog site over the next few days, as I want to package it all nicely in an installer.
I have always disliked installation instructions which read:
cd some/long/directory/path/I/will/never/remember/again tar xvf stuff.tar.gz > what_the_hell_went_wrong | I_hate_pipes cryptic_command -x -r -q -wtf > &$jump_now
So for any apps I put up on this site, I will write a nice basic installer. With a GUI and only two buttons.