Jump to content
IGNORED

My Sprite Editor


jchase1970

Recommended Posts

Here is my little 16x16 sprite editor. It is packed full of features.

 

You have the 16x16 drawing surface in the upper left corner, Left mouse button down to draw and right mouse button down to erase.

 

To the right of this you have 24 sprite sheets to work from. You can left click on any of them to use that sheet.

 

In the middle area is the functions,

Clear Sprite - clears the current sheet

Rotate Right and Rotate Left rotate 90 degrees

Mirror will flip the sprite horizontally, (please ignore the typo)

Flip will flip the sprite vertically

Copy To - use this to copy the current sheet to another sheet. left click on a new sheet after clicking your active sheet will move to the new target as well.

 

Shift Up,Down,Left,Right all shift the sprite by 1 space in the associated direction.

Set Shadow - Sets the sprite to use as a shadow. Left click on the sheet you wish to use for the shadow template.

Shadow ON/OFF turns the shadow feature on or off. if on a light shadow of the sheet set to shadow will appear in any sheet you are working with.

 

Copy Active Sprite - will copy the Char value for the active sprite sheet to the clipboard for pasting in another source(ie classic99).

Copy All Sprites is the same as above but will produce 24 char values (All the working sprites).

 

You can select the 15 color pallete of the TI by left clicking on any color, note each sprite can be a different color.

 

At the bottom you can see the Char value for the active sprite.

 

You can exit by clicking Exit or by pressing the Esc key.

 

New feature draw in 4 layers, 7-12-10.

 

I hope you can find this useful.

 

John

 

 

16X16 CHAR EDITOR.zip

 

http://www.youtube.com/watch?v=m_rxQjHOgzE

 

pc1s.jpg

pc2uh.jpg

pc3ns.jpg

pic2ef.jpg

Edited by jchase1970
Link to comment
Share on other sites

A few things.

 

This program is real inefficient, The whole button check routine needs to be redone, but it works well on my computer which is a acer runing at 1.6ghz dualcore with a gforce video card, vista operating stystm.

 

I have no idea what the minimum specs are for the program, I know I can optimize it and lower the requirement, but since it was just made for me I only needed it to wirk on my main system. I have a working copy that I have changed a few thing in and will continue to, If I add any new features I can release a update version. So please tell me anything that you would like to see in it.

 

I was going to build this into 1 program with a few other programs I have, but I needed the 16x16 editor for these competitions. The other programs I have are

 

1) a Extended Basic Charset editor that displays the 14 charsets for extended basic and lets you edit each of them as well as set the colors for each charset, it then will output the extended basic code to set the charset and colors, you just have to add line numbers. I had it give line numbers at one point but that was to limiting on where you put it in the main code.

 

2) a screen editing program that I first work in extended basic that let you layout the screen and then it would write to disk the code you could then merge into your main program. I've yet to finish this one, but when done it will be able to load the charsets produced by the program above and then you can edit the screen layout and copy then extended basic code to the clipboard for pasting in the main program.

 

If there is a desire for these other programs or for fixes/updates to the sprite editor, let me know and I'll see about adding them on here.

 

John

Link to comment
Share on other sites

Ha ha, it seems all developers like to roll their own tools! I made my own sprite and character editor as well, in Java. Here's a screenshot of the latest edition, I recently added sprite rotation to it.

 

post-25494-126861812212_thumb.png

 

I've also written a quick-and-dirty tool that lets me convert a black&white image into DATA statements. I wrote it to convert some old fonts of mine into XB format. It's a little tool call Charbroiler and I can release that if folks are interested as well.

 

Soon we'll have a utility collection on here that's second to none, at least TI-wise. :)

Link to comment
Share on other sites

I for some reason really enjoy writing game tools, I have several map editors that I have written, some pretty advanced. But it seems that the project I write a tool for never gets done. lol.

 

I took a bit to day and optimized the code for this editor and fixed a few things I didn't like, I am looking at adding some drawing tools now, like square, circle, line. If I do that this week I'll repost it. I have a busy week ahead though.

Link to comment
Share on other sites

Nice tool! I have not used it yet (lack of time really), but instead of adding "drawing tools" which are really not needed (I can draw a circle in 16x16 pixels), what would really need in a sprite editor is (IMHO):

 

* An actual size (1x), 2x, and 3x preview of the sprite being working on. You can't always tell how something is going to look when you are always zoomed in to the pixel level.

 

* Animation preview. This would cycle a designated range of 8x8 or 16x16 characters and display them as an animation in whatever preview size is selected (or all preview sizes at once).

 

* Quickly change all the "on" or "off" pixels from one color to another.

 

* Allow layering of a selected range of 8x8 or 16x16 character blocks to see a composite (for sprite laying)

 

Anyway, just some suggestions if you are looking for feedback and / or ideas.

 

Matthew

Link to comment
Share on other sites

Matthew, an animation preview is needed for sure. It does have on the fly color change for the foreground pixels. (My charset editor has fore and back ground settings for each charset.)

 

I'm not sure I understand what you mean by the layering for a composite view?

 

The line and circle function while not really needed are something that I am always wanting when I am using it.

 

 

 

The Codex, How did you do you function to convert the image to the Hex values? Mine is stored in a 2d array and that is converted to a binary string, which I can convert to a hex value. My first version I had it read each set of bit of the 4 column row build a binary string and then change that string to a hex and repeat for 16 times for the char value. It worked and I was please I figured it out until it dawned on me that I could just make a 64 bit binary value and change it to hex. Has got to be about 20 times simpler, lol.

 

 

Opry99er, each of my map editors have been for a specific game. I've always wanted to do a multipurpose editor and I have started on one and it is being written using a windows gui interface, which I hate programming for, but I am getting better. This is my first one written in Blitz Max too, my others for the last few years were written in Blitz Plus. B+ was a great language to use and I knew it well, But Blitz Max is on a whole new level. I can multi compile for Windows, Mac OS, or Linux and it is open gl based so I can do realtime rotation and scaling and color blending. Really loving it. Anyway my latest mapeditor has the ability to use RPG Maker autotiles, which are 3x4 tile sheets that are used to create 128 possible tiles. And then do realtime processing on the map as you lay the tile. Like if you are laying grass on water, It will auto edge the grass to the water in any possible combination. It took me some time to code the process from slicing and dicing the autotile, to knowing what to do to make the seemless boarders. I have a demo of it I will include here so you can see, but it is very handy because you can search the web for autotiles and find hundreds of patterns to use.

 

uh, scratch that demo for the time being. {Blushing}, I think it is on the compute that I loaned a friend. You can youtube rpgmaker autotiles to see a demo if you don't know what I am talking about.

 

I can show you some more stuff when I get more done on the new map editor.

Link to comment
Share on other sites

The Codex, How did you do you function to convert the image to the Hex values?

 

I'm pretty much assembling the bytes by hand and then casting them into a hex string. Not the most elegant way at the moment, but I'm reusing code from another app I wrote and it saves me time. The same function handles both characters and sprites, and it also reverse engineers the array from the same string. That function gets a lot of use in my TI font editor, which I'll post later today probably.

Link to comment
Share on other sites

I'm not sure I understand what you mean by the layering for a composite view?

 

Since we can only have 1 color for a sprite, sometimes an animator will stack 2 or 3 sprites on top of one another, each with a different color, to get a desired effect. It would be nice to indicate x number of sprites (8x8 or 16x16) and have them drawn on top of each other as the preview.

 

Matthew

Link to comment
Share on other sites

The Codex, How did you do you function to convert the image to the Hex values? Mine is stored in a 2d array and that is converted to a binary string, which I can convert to a hex value. My first version I had it read each set of bit of the 4 column row build a binary string and then change that string to a hex and repeat for 16 times for the char value. It worked and I was please I figured it out until it dawned on me that I could just make a 64 bit binary value and change it to hex. Has got to be about 20 times simpler, lol.

 

Sitting here I've come up with a few ways to do this. It really all depends on how you need the data internally. Personally I try to keep data in a format that makes it easy to deal with and modify it for a specific output (document-view model if you are used to Microsoft's ways, or MVC (model, view, controller) if you are into buzz-word acronyms.) For example, an array of 8-bit values would be a good way to store the image data since you can modify that easily into the image being displayed, as well as the HEX output needed for the export routine. Binary to HEX is most easily done (and fastest) using a lookup table based on 4-bit values (for each HEX digit), or if on a modern computer where a 256 byte array is no big deal, you can easily make a lookup table for 8-bit values.

 

If you are going to support the assembly language programmers, then providing output like this would be very nice:

DATA >3C42,>A581,>A599>,>423C

 

I don't use BlitzMax any more (been a few years), but I can whip up examples in C if you are interested (or I suppose 9900 assembly too :-) )

 

Matthew

Link to comment
Share on other sites

An easy pseudo-code algorithm for doing this is :

1. set holder value = 0

2. for each char...

3. for top to bottom

3. from left to right....

4. holder value = holder value * 2

5. Add 1 for the bit

6. convert holder value to hex.

 

My sprite editor (Java) lays out the bit field programmatically and lays them out into a grid and places references to them in an array... That way I can loop through the array and easily check the values.

 

My source is "open"... and you are welcome to take a look. Yours has some very nice features I'm never likely to include - overlays, etc.

 

Source:

http://f1.grp.yahoofs.com/v1/4I6fS0t6kaRuPX7_qSKGLbkSt0ovz_XOE1uvTLl2L-emmNbuMJs0v7pxYxhtk-im0KedfyQMRBXRJ29tb7EXMJGNMIY/Howie%27s%20Stuff/GraphiCV-source.zip

Binary:

http://f1.grp.yahoofs.com/v1/4I6fS6jQTPBuPX7_57W21trfIkTsmsQZKEFEBftdsD0ofWU6BTK5sE4oYeb4vXzPl4jRN1HZh1lncEf36qQXdnTQNW0/Howie%27s%20Stuff/GraphiCV.zip

 

-H

 

The Codex, How did you do you function to convert the image to the Hex values?

 

I'm pretty much assembling the bytes by hand and then casting them into a hex string. Not the most elegant way at the moment, but I'm reusing code from another app I wrote and it saves me time. The same function handles both characters and sprites, and it also reverse engineers the array from the same string. That function gets a lot of use in my TI font editor, which I'll post later today probably.

Link to comment
Share on other sites

I'm not sure I understand what you mean by the layering for a composite view?

 

Since we can only have 1 color for a sprite, sometimes an animator will stack 2 or 3 sprites on top of one another, each with a different color, to get a desired effect. It would be nice to indicate x number of sprites (8x8 or 16x16) and have them drawn on top of each other as the preview.

 

Matthew

 

ah now I understand I have used that layering in some programs to get more colors in a sprite before. That would be a handy item. I'll just have to figure out a way to present it in the editor.

John

Link to comment
Share on other sites

The Codex, How did you do you function to convert the image to the Hex values? Mine is stored in a 2d array and that is converted to a binary string, which I can convert to a hex value. My first version I had it read each set of bit of the 4 column row build a binary string and then change that string to a hex and repeat for 16 times for the char value. It worked and I was please I figured it out until it dawned on me that I could just make a 64 bit binary value and change it to hex. Has got to be about 20 times simpler, lol.

 

Sitting here I've come up with a few ways to do this. It really all depends on how you need the data internally. Personally I try to keep data in a format that makes it easy to deal with and modify it for a specific output (document-view model if you are used to Microsoft's ways, or MVC (model, view, controller) if you are into buzz-word acronyms.) For example, an array of 8-bit values would be a good way to store the image data since you can modify that easily into the image being displayed, as well as the HEX output needed for the export routine. Binary to HEX is most easily done (and fastest) using a lookup table based on 4-bit values (for each HEX digit), or if on a modern computer where a 256 byte array is no big deal, you can easily make a lookup table for 8-bit values.

 

If you are going to support the assembly language programmers, then providing output like this would be very nice:

DATA >3C42,>A581,>A599>,>423C

 

I don't use BlitzMax any more (been a few years), but I can whip up examples in C if you are interested (or I suppose 9900 assembly too :-) )

 

Matthew

 

 

It's not really a big deal, I was just wonder how other people have done it.

John

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Thank you for providing your sprite editor! I used it yesterday and today to design 2 images for my SSGC entry "SSGC racer".

 

What would come handy to me is if you could load in the images from other formats, for instance black/white bitmaps. I did one logo (that appears in the upper left of my title screen), and I even had a 16x16 version of it to work with, but it was not monochrome, but in several colors. However, with Paint I converted it to a b/w BMP file, but then I had to draw it off from the image as shown in Paint by hand because there is no way to import it into your sprite editor.

 

What also would be nice is if a picture could be loaded into the background and displayed anywhere the pixel value is 0 (or 1, ideally selectable), but overlayed with a raster so that you can see which area of the picture would correspond to one pixel of the sprite in order to decide if that pixel should be on or off.

Link to comment
Share on other sites

1st time on in over 3 weeks, have not had a chance to do any programming lately. Kurt I will look into adding what you suggested in a future update. I'll try to get something coming in a couple of weeks now that things have calmed down here.

 

I see about posting the charset editor later too. The code to that is in blitz plus and the program is ugly to say the least as I got it to do what I needed and never finished it as I didn't think it would be useful to anyone. I would like to redo it in blitz max but have never got around to starting that project either.

Link to comment
Share on other sites

  • 2 months later...

Can't sleep tonight. So I added layer support to the sprite editor if anyone is using it.

 

You can have 4 layers now, the only way to delete a layer currently is to add a blank sprite image to that layer. Pretty much self explanatory, but if you have any questions please ask.

 

watch the video for a demo.

 

 

http://www.youtube.com/watch?v=m_rxQjHOgzE

Link to comment
Share on other sites

THIS IS THE ABSOLUTE WORST REPRESENTATION OF SPONGEBOB EVER CREATED!!!!! sometimes99er's single pixel Spongebob looks better... but I thought I'd give your program a spin. =) It's very nice... I could suggest a few things for improvement... if you're interested. =)

 

spongebob.png

Link to comment
Share on other sites

THIS IS THE ABSOLUTE WORST REPRESENTATION OF SPONGEBOB EVER CREATED!!!!! sometimes99er's single pixel Spongebob looks better... but I thought I'd give your program a spin. =) It's very nice... I could suggest a few things for improvement... if you're interested. =)

 

spongebob.png

 

I don't know Owen, I think he's cute :)

 

suggest away, no promises when I revisit it. I'ld like to add a detached toolbar with all the function buttons in it.

Edited by jchase1970
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...