KDP - Keyboard driven pixel art editor made in löve

Show off your games, demos and other (playable) creations.
User avatar
veethree
Inner party member
Posts: 874
Joined: Sat Dec 10, 2011 7:18 pm

KDP - Keyboard driven pixel art editor made in löve

Post by veethree »

KDPScreenshot.png
KDPScreenshot.png (5.14 KiB) Viewed 13207 times
Hi! I've made an entirely keyboard driven pixel art editor in löve. Allow me to interview myself about it to explain myself.

What did you do that for?
For writing code, In the past year or so i've been using vscode with a vim emulator extension. This means my coding workflow is almost entirely keyboard driven, And i was curious if such a workflow might work for pixel art. So i threw together a little prototype, And that prototype has grown into something usable, At least in my opinion.

How does it work?
You have a cursor, Which you can move with the arrow keys.

Wait. I thought you said this was vim inspired, Why the arrow keys and not "hjkl"?
For whatever reason, The arrow keys felt more natural for this to me. All keybindings can be changed if you'd prefer using "hjkl".

You use 'd' to draw, 'f' to fill, 'x' to erase, 't' to pick the color under the cursor, 'u' to undo, 'y' to redo, 's' to enter select mode, 'g' / 'lshift g' to enter copy / cut mode, 'd' while in copy / cut mode to paste. Those are the basics. Beyond that there's a few helpful keystrokes you can deploy to speed up navigating around your image

'ww' followed by an arrow key, To warp the cursor to the corresponding edge.
'wc' followed by an arrow key, To warp to the corresponding edge of the current color, So like 'ww', But it stops when the color changes
'wd' followed by an arrow key, To warp to the corresponding edge, But filling in the pixels on the way.
'wc' followed by an arrow key, To warp to the corresponding edge of the current color, But filling in the pixels on the way.

There's also vertical & horizontal mirroring available, Accessible via 'mv' & `mh`. And `mm` to disable all mirroring.

There is a color palette system built in, To navigate the color palette, You use the arrow keys while holding down 'lctrl'. It can load color palettes from .png's, As long as they're in a 1x scale. It can technically load palettes in other scales, There will just be duplicates.

Well how does it handle saving and loading files if it's all keyboard driven?
It has a vscode inspired "command palette". It's way more basic, And actually kinda works completely different so its difficult to claim it's inspired by it. When you press "tab" a little textbox will float in from the top, And you can input various commands into it.

To create a new image you use 'new [width] [height]'. For example 'new 32 16' will create an image with the width of 32 & height of 16. If only one argument is provided, It will be used for both the width & height. If no argument is provided, It defaults to 16x16.

To save an image, You use 'save [filename]'. The filename can have spaces, And should not contain a file extension. All images are saved as .png. Example: 'save my awesome image' will save your awesome image as "my awesome image.png". Considering i've made this in löve, You can probably guess that the image is saved to KDP's save directory. In a sub folder called "save".

To easily access KDP's save directory, There's the "os" command. It takes no arguments, And just opens the save directory in your OS.

Well what if i want to share my awesome pixel art on twitter or something? Can KDP save it with a scaling factor?
Of course. For that there's the "export" command. It works exactly like the "save" command, With one key difference. If the last argument is a number, That number will be used as the scaling factor. Example: 'export my awesome image 32' will export your image with the scaling factor of 32. So if your image is 16x16, The exported image will be 512x512.

There's a few other less useful commands, "invert" will invert the color of your image, "grayscale" will turn your image into grayscale, "noise" will introduce a small amount of noise to your image, "shade" will slightly darken the currently selected color, "light" will slightly lighten the currently selected color and "q" will quit.

You mentioned before that keybindings can be changed, How does one do that?
You can change a lot more than the keybindings. Internally, There is a "config" table, Which controls all the keybindings, Colors, Fonts and a bunch of other stuff. That table is converted to a .ini file, Which you can change to your hearts content. Here's what it currently looks like

Code: Select all

[keys]
cursor_warp_color_left="wcleft"
cursor_line_right="wdright"
cursor_warp_left="wwleft"
redo="y"
cursor_warp_color_right="wcright"
undo="u"
cursor_warp_color_down="wcdown"
cursor_fill="f"
cursor_line_color_down="dcdown"
cursor_warp_right="wwright"
cursor_warp_up="wwup"
cursor_warp_down="wwdown"
cursor_line_color_left="dcleft"
toggle_fullscreen="f2"
select_mode="s"
cursor_erase="x"
cursor_right="right"
move_palette_cursor="lctrl"
cursor_line_left="wdleft"
vertical_mirror="mv"
cursor_left="left"
cursor_draw="d"
cursor_down="down"
select_palette_color="cc"
clear_mirror="mm"
cursor_line_up="wdup"
cursor_warp_color_up="wcup"
cursor_line_color_up="dcup"
toggle_grid="f1"
cursor_pick="t"
copy_mode="g"
cursor_up="up"
cursor_line_down="wddown"
horizontal_mirror="mh"
toggle_command_box="tab"
cursor_line_color_right="dcright"
cut_mode="lshiftg"
[color]
editor_cursor_color={20, 126, 255}
background_global={32, 32, 32}
debug_background={0, 0, 0, 100}
text_default={255, 255, 255}
background_alt={20, 20, 20}
debug_text={255, 0, 255}
text_alt={200, 200, 200}
selection={255, 0, 255}
mirror={91, 156, 222}
[palette]
default="src/palette/duel-1x.png"
[font]
file="src/font/monogram.ttf"
[settings]
command_timeout=0.3
max_palette_columns=8
show_grid=false
window_width=800
max_palette_rows=32
editor_border_width=4
window_resizable=true
window_height=600
max_undo_steps=100
debug=false
use_history=true
default_mode="drawMode"
window_fullscreen=false
empty_pixel={0, 0, 0, 0}
You'll undoubtedly notice that it looks like a disorganized mess, That's because internally it's a key value pair table, Which lua iterates over in whatever order it feels like when its saved to the file. I have some thoughts on how to ameliorate this. But for now it is what it is.

You mentioned that KDP is capable of loading color palettes from .png's. How do i load a palette into it?
It can only load color palettes from one directory, The "palettes" folder in it's save directory. So place your palette there. Then you can either go into the config.ini file, And replace the "default" value under the [palette] category to "palettes/your awesome palette.png", Or run the command "loadPalette your awesome palette".

Okay i think i've spent enough time talking to myself, You can get it on github, Where you'll also find a bit more proper documentation. I've also attached a .love below. If you find any bugs, Or have some feature ideas, Or you think this is the dumbest thing anyone has made, Or this has changed your life for the better, or anything, Let me know. :)
KDP.love
(24.14 KiB) Downloaded 365 times
User avatar
ReFreezed
Party member
Posts: 612
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: KDP - Keyboard driven pixel art editor made in löve

Post by ReFreezed »

I don't believe my eyes. xD

There should be a mode that instead of rendering the big pixels it should draw random ASCII characters assigned to the colors in the palette, like an ASCII art editor with color.
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
User avatar
knorke
Party member
Posts: 237
Joined: Wed Jul 14, 2010 7:06 pm
Contact:

Re: KDP - Keyboard driven pixel art editor made in löve

Post by knorke »

Nice.
It reminds me of similiar, more primitive, tools that I made in BASIC long ago. They were part paint-software and part level-editor.
This means my coding workflow is almost entirely keyboard driven, And i was curious if such a workflow might work for pixel art.
I guess it can kind of work but for some GUI stuff a mouse just has an advantage. For example color picking. Or moving the cursor longer distances, despite the various shortcuts.
User avatar
togFox
Party member
Posts: 764
Joined: Sat Jan 30, 2021 9:46 am
Location: Brisbane, Oztralia

Re: KDP - Keyboard driven pixel art editor made in löve

Post by togFox »

Neat. Can it load png's including png's made by the tool?
Current project:
https://togfox.itch.io/backyard-gridiron-manager
American football manager/sim game - build and manage a roster and win season after season
User avatar
veethree
Inner party member
Posts: 874
Joined: Sat Dec 10, 2011 7:18 pm

Re: KDP - Keyboard driven pixel art editor made in löve

Post by veethree »

togFox wrote: Wed Oct 20, 2021 1:19 pm Neat. Can it load png's including png's made by the tool?
It can load any png. Even huge ones that will cause it to lag massively. In the latest version (on github, the .löve above is outdated) if you drag and drop a png into the canvas area, it’s loaded as an image, and if you drop it on the palette section, it’s loaded as a palette.
User avatar
togFox
Party member
Posts: 764
Joined: Sat Jan 30, 2021 9:46 am
Location: Brisbane, Oztralia

Re: KDP - Keyboard driven pixel art editor made in löve

Post by togFox »

I'm using the version on github and looking at the readme.md. Is there an option to "select colour under cursor"?
Current project:
https://togfox.itch.io/backyard-gridiron-manager
American football manager/sim game - build and manage a roster and win season after season
User avatar
veethree
Inner party member
Posts: 874
Joined: Sat Dec 10, 2011 7:18 pm

Re: KDP - Keyboard driven pixel art editor made in löve

Post by veethree »

togFox wrote: Tue Nov 02, 2021 1:20 pm I'm using the version on github and looking at the readme.md. Is there an option to "select colour under cursor"?
Yes. You press "t" to select the color under the cursor. The wiki has slightly more information than the readme file.
Giovifav
Prole
Posts: 8
Joined: Tue Jul 14, 2020 10:18 am

Re: KDP - Keyboard driven pixel art editor made in löve

Post by Giovifav »

Hi,
your editor is pretty good and neat!
i'm developing a small, free and personal fantasy console and your editor fit nicely as a sprite editor. But in the wiki i wasn't able to find the license. So the question is, which type of license the code have?
thank's
User avatar
veethree
Inner party member
Posts: 874
Joined: Sat Dec 10, 2011 7:18 pm

Re: KDP - Keyboard driven pixel art editor made in löve

Post by veethree »

Giovifav wrote: Tue Nov 16, 2021 4:50 pm Hi,
your editor is pretty good and neat!
i'm developing a small, free and personal fantasy console and your editor fit nicely as a sprite editor. But in the wiki i wasn't able to find the license. So the question is, which type of license the code have?
thank's
Haven't gotten around to that, but it's MIT. So feel free to use it.
User avatar
Hugues Ross
Citizen
Posts: 85
Joined: Fri Oct 22, 2021 9:18 pm
Location: Quebec
Contact:

Re: KDP - Keyboard driven pixel art editor made in löve

Post by Hugues Ross »

So I decided to test a use-case you may not have thought of--hands-free drawing:


While don't really think KDP is great for regular art, I figured it could be an interesting accessibility tool if it were hooked up to a voice-control system like Dragonfly, so I gave it a shot. I realize this project is not being actively developed and this was not the original intent, but I thought I'd put down some thoughts from the experiment:
  • Overall, it feels a little like controlling an etch-a-sketch due to being restricted to 1px straight lines. This makes good organic forms really hard and fiddly to produce, though it's a hard problem to solve. I suspect having line/curve/shape tools like most art programs would help a fair bit with that though.
  • Adjusting colors was difficult, though it's a really important part of making pixel art. Palette editing or a color replacement fill tool (both pretty common in pixel art software) would probably solve that
  • One last thing that would've probably helped is a way to view the canvas at 1x zoom. This is something I've seen some folks making pixel art software overlook, but it's extremely useful for getting forms and detailing right because the chunky pixels mask those things up-close.
Anyway, this was neat and thanks for making it. Not sure if I'll keep messing with it or not, but I figured you might find this mildly interesting to hear about.
Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests