FontSprite editor download
Community Forums/Showcase/FontSprite editor download
| ||
| After some work here is the download page for both osx and windows https://adamstrange.itch.io/fontsprite  I've added zooming and the ability to move the zoom around using the views. just click and drag in any of the vies for this. Live help is also integrated - this gives you basic info on whatever tool you are over and if there are any special keys to modify things. it is completely dynamic. left clicking (or ctrl) on the main grid will activate the trip-menu (shown). This gives immediate access to the null color (eraser), the selected color and 4 variations, plus brush, pencil and dropper tool (alt) I've overhauled the paint system so that shift clicking either pencil or brush will lock the current color. this means that ONLY that color will be changed when using. Sort of like a primitive mask function I've also included some fonsprites in the font folder for you to play with as well Let me know how you get on with it? |
| ||
| wow, I did not believe you would give this away, thanks adam :) |
| ||
| Wow, awesome piece of work you've got there. Thanks Adam :^) |
| ||
| nice, this is what I'm talking about. thanks for sharing Adam! |
| ||
| Let me know what you do with it and how you get on ;) I'll work on the palette editor next along with open file format and code next for you |
| ||
| Awesome work Adam! |
| ||
| What advantage do you see compared to default paint programmes (Paint.net, Gimp, Photoshop, Photoline...) or even pixel painters (Aseprite, Grafx2)? Is it "simplicity" (not to get slaught by overwhelming amounts of options/menu entries) ? Just asking as the "custom GUI" is what I see as a disadvantage. I prefer being able to move everything to wherever I want it to be (arrange my "desk"). Also a programme needs to follow conventions (ctrl+c, ctrl+v, ctrl+tab for next document/child-window). Also of importance is "Clipboard", I should be able to copy something as "BMP" (or whatever they use there) so I could copy paste to another programme if needed. What I wonder more is: you (Adam) surely wrote this for yourself, but I can imagine that you are very well known to Photoshop or another "powerful" painting programme. Enabling a grid there and you should be able to do there whatever you are doing here (dunno about "animation" as I use the old CS1 and never used it for GIF and Co). The big advantage compared to PS etc. is the concentration on pixel painting (the "Tri-menu", the limitation of brush-sizes regarding the small "sprite sizes"). PS: I did not check your software now - but add keyboard-shortcuts for the most tools: 1-2-3-4 for brush sizes x - to switch between the current and last color (like PS does) e - switch on "eraser" ctrl+s to save etc. cursor up down left right for the "arrow-icons" + to zoom in - to zoom out Convenience: C (hold) + "+" to increase brightness of the current color C (hold) + "-" to decrease brightness of the current color For the last shortcuts you might introduce a new pop-over if desired: hold down the mouse over the current color-"widget" (no click, but "mouse down") and on release show the popup. It includes the color in the center of a gradient. Alternatively "C (hold) + '+'" opens the Tri-Menu and moves up one step. Think at least "x" and "e" would be really useful. If you already added such shortcuts, just ignore the suggestions ;-) bye Ron |
| ||
| great points Derron. especially the shortcut c+- and x/e I use photoshop myself. but it can be a bit of a hog, especially when dealing with a set of icons, etc. This is where this editor comes in. it is designed especially for 256 grid of font/sprites - nothing more, nothing less. If you know pico-8 then you will immediately get what is going on. |
| ||
| I do not know pico-8. Another useful shortcut is "shift click" to create a line from the last drawn point (think this is possible in PS too). Maybe add some shapes too: circle: first click marks center, second click the radius rectangle: first click marks top left, second bottom right oval: first click marks center, second width, third height ... Once you got too many shapes, put them all in a drop down You might also need a gradient-flood-fill (even with a 10x10px sprite it saves on "adjust color, draw line, adjust color, draw line ...") If you remove 2px of the tool-button-area (they are "left top aligned", so there is 1-2px space on the right and bottom) you might be able to add another tool to the list. Also of importance: quick undo/redo via shortcuts (Ctrl+Z ... but use the localized keyboard, German keyboards have switched Z and Y keys), "ESC/abort"-ability when doing the circle/rect/oval/...shape-thing. Next to "save" you should have "save as". Once you saved it with a file name, "save" will just re-save. "Save as" will always ask for a name. If working space is rare, put them both in a "drop down menu" - holding the button is then opening the menue, a short click just executes the "last selected" of this drop down. Maybe "save as" is your "two disks"-icon, in that case I interpreted that icon as "save copy" (mysprite_copy1.dat, mysprite_copy2.dat, ...). Btw. saving that "copy" is something I liked from Blender: If you save your file and there exists already "that file" but with a previous state, then the older file is renamed to "myfile.blend1". The depth of this "backups" is adjustable via config. This saves some headaches if you by-accident overwrote a previous state with a now borked one. Dunno how much interest there is for doing this kind of "backup" even for "other files" with the same name (not just "previous revisions" of a file). Add the possiblity to animate these sprites (do this in a different "workspace" of the editor - so maybe mix your other "programmes" together to achieve that) Alpha: you have certain presets, maybe add a small sized "slider" below or on top to fine-grain the used alpha. Or - another idea - use a slider and on fixed portions (0, 25, 50, 75, 100) you add little buttons below for "fast selection". Preview: you seem to have fixed amount of "upscaled previous" - maybe limit it to "up to two" and give each a "zoom"-slider / dropdown. So you gain additonal space for other information / tool options ... Ahh... and while brainstorming with myself: What I like from Blender is the handling of numeric input. While eg. rotating you could always enter "90" (even accepting backspace for edits) and it rotates by 90° instead of what you have done with the mouse. Then moving the mouse overrides that 90 again. So how to use in your programme? Think again of the shapes: - you clicked for the center of the circle - - pressing "left" should now move the center to the left (similar for up right down) - - your next click would set the radius - - - so next to the cursor keys you also accept numeric input (+- 0-9) to set the radius by hand For rectangle and ovals of course multiple steps are needed. This allows for "mathematically exact" designs without having to count the pixels. I know for "10x10" this is not that hard, but imagine you are doing a "multi-sprite"-sprite (consisting of 4x5 sprites). When writing about multi-sprites I thought of the shapes being able to get started outside of a sprite - this needs: - a label on the screen showing the current coordinates (eg. "-100, -20") - the option to move the "click point" with the cursor keys for fine positioning (when zoomed too far out, it is hard to hit the right spot) - alternatively a "slider" to move the workspace by keeping current zoom factor What's the benefit? Imagine you want an "arc" to get drawn, you often need to have a radius bigger than the sprite - so you need to start "outside". Sorry if things start to get overly complicated with that ideas - no need to fulfill them (I do my pixel works with CS1 - and am used to it) bye Ron |
| ||
| This is really well put together, puts my own internal atari sprite editor to shame. Personally I use http://pyxeledit.com/ for my pixel\font needs but i'll probably consider this when I next need to play with a font. I have not had a chance to play with it so this feature might be in there but when you save the image to PNG are they options to add padding between each sprite? |
| ||
| when you save the image to PNG are they options to add padding between each sprite? nope. a character is a fixed size (you get 8x8 and 16x16 defaults in the font folder, but you can make your own as well). these are packed exactly as you see in the font. it is just a single png |
| ||
| Hi Adam The reason I asked is (I always had this issue in Monkey) is a tendence (due to point precision) of a neighbouring sprite in a tile sheet to bleed over e.g http://answers.unity3d.com/questions/889550/lines-appear-between-sprites-from-sprite-sheets.html the fix is to pad the edges of each sprite with a 1px border. I am not sure if this is an issue with small power of two images, probably not TBH. My solution (and I do this as a matter of course now) has been to duplicate the edge pixels out and also add a 1px transparent border, I just run my sprite sheets through a tool I made to do this after I export from pyxle, this does mean I also have my own image loading and rendering functions but I needed these anyway as I use atlas' built in Texture packer. |
| ||
| @coffeedotbean. That's very interesting. I know why it was bleeding and rewrote the display routines for monkey2 (the editor is monkey2) to fix this. I can let you have the display code for loading the font sprites and display without bleeding :) |
| ||
| I'll just run anything through the tool I use to pad the images. Might be handy to offer a "padded PNG export" option for use with other tools and engines, a check box or something so when you export it produces two image sets one as is and one called <your name>_font_1px_padded.png, some might appreciate that little extra. But as I said probably not a issue, as anyone who has this issue have probably come up with their own solutions. |
| ||
| Great little tool! You are very talented and prolific ;) I agree with coffee, I have had the 1 pixel issue as well in the past. Probably be handy to have as an option. |
| ||
| ok, the cause of the 1 pixel error is to do with incorrect texture mapping coordinates. in essence you need to have the coordinate a tiny bit smaller. Question for you both. What language and commands are you using to display? |
| ||
| Ultimately I use "drawimagerect" to draw an area of my image atlas, I make sure to caste any values as Int's but bleed can still happen, its more an issue of hardware and rending engine, forced AA or odd shader behaviour due to drivers, might looks fine on one combination but not others. It's fairly common to pad a sprite or tile sheet. |
| ||
| This looks interesting. Derron asked the question about other software. But a dedicated piece of software will always be better than a general purpose one. |
   |