#supersprite

1986 Frogeye Supersprite

My tumblr-blogs:

So, the other day I felt like making a video, and I'd promised to make another showing the updates on SuperSprite in motion. Here it is:

It goes over what I mentioned at the end of the long SuperSprite post I made, but it's nice to see it in motion I guess.

I'm actually working on SuperSprite right now, which is what reminded me to post about the video. I'm currently working on adding a file selection menu for importing! Here's the design I whipped up in 5 minutes of Photoshop action:

SuperSprite is a program I've been working on for the last few months when I got a bit of time to blow, which allows users to draw sprites, and save them with ease.

SuperSprite got started with me simply playing with Love2D's image and file-system libraries, where I'd been messing about and made a function that draws 1 pixel as a big pixel, like it had been zoomed in. This sparked an idea in my head to create a little editor that allowed you to draw sprites then change how zoomed in they were. This is what that editor looked like:

The program at this stage had basic functionality and did what I wanted it to do. You could draw, erase, and export the image with the settings like zoom, which was the original plan. This was cool, but upon showing some people it they requested more features, and this made me want to add them. However, with me still learning how stuff is done I found that my code was ending up messy and this didn't make me want to add the new features. So I started again.

One thing I'd found while building the previous version was that there was no space for any of the requested features, so I started up Photoshop and started designing a few ideas of what I wanted the program to look like. This was the end result:

Much better, right? I was happy with the design but I didn't get too excited because I had to actually get this design into the program, which I wasn't sure I could do while keeping the quality of the design together. However, I got this done, and I got it done so it looked identical to the design!

So with that done, and having programmed everything I had previously except in a much cleaner way, I began adding the requested features. As you can see in the screenshot the first of these was symmetry opens. This turned out to be really easy to add, and had it done in about half an hour working perfectly.

The next feature requested though was not so easy: Animation & Spritesheets

I started off with adding frames to the program which could be switched back and forth to with 2 buttons, with each frame allowing a unique drawing. You could also add additional frames and remove frames. This navigation to say the least was extremely poor and would be difficult if you were to have any more than 5 frames. I shrugged it off at this point though, because I still didn't have exporting sprite-sheets done. After a few hours I finished this too, and it worked perfectly. This is an example:

At this point I gave the program the name "SuperSprite", and I made a few videos showing it off. However, I still wanted to improve the navigation for animating editing, and this is where I gave myself a challenge, and surprised myself. I had in my head the exact way that I wanted to be able to browse animations, but I thought it'd be too hard for me to do. Regardless of this though I opened up Photoshop and drew what I seen in my head:

Each box represents a frame, and it displays the contents of the frame in a small view. Clicking on a box would take you to that frame, and hovering your mouse of the left and right arrows would move the frames along in that direction. Even with all the problems I ran into with this, I still got it added into the program and it works. I wanted to add the ability to drag frames to reorganize them, but at the time it was too much of a challenge and I gave up.

Next feature I added wasn't requested, but I felt that without it the program was missing something vital, and at the time of writing this I'm still not finished with it. This feature is importing.

Now, importing would have been in much earlier, except Love2D doesn't make it easy for the users to do such a thing, as it restricts you to only being able to see files inside your applications folder. Because of this it took me a while to think of how to make this as easy as possible for the user.

Currently the feature is in the program, but it only works with images that haven't been zoomed in. (I haven't had time to make it compatible with zoomed images). Here's an image of it in action with Minecraft's texture spritesheet: