GDR Forum Index
Podcast Podcast
Dev Dev Logs
Search Search
RSS RSS
Register Register
Log in Log in
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - a pixel editor thing Page 1, 2, 3  Next
View previous topic :: View next topic  
Author Message
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Jul 04, 2014 11:57 am    Post subject: Development Log - a pixel editor thing Reply with quote

To celebrate the 4th of july, I've decided to open up more about what I'm developing.
I've been developing a tool to create pixel-art.
You can use it at http://www.pixel.tools/


I'll post more about it, but you can make stuff like this (these gifs were also made with the tool):




Here's a quick run-through of some features:
http://youtu.be/0io_Dl8yKmM
I'll make a better one with audio when my jaw heals and I'm able to talk clear.


Edited by Alex on Thu Jul 31, 2014 1:34 pm; edited 3 times
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9330
Location: Not Finland
PostPosted: Fri Jul 04, 2014 3:33 pm    Post subject: Reply with quote

Oh, coolness. Now there's something I can get into :)
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sat Jul 05, 2014 8:57 am    Post subject: Reply with quote

thanks. I've actually been surprised at the progress I've been able to make.

All the tools you see in the image are operational.. everything you see actually, and it all works how you'd expect it to.
The frames can be used as either layers or for cells in an animation. Their transparency can be adjusted, timedelay, or you can turn their visibility completely off (which makes them get skipped in an animation).
You can output gifs, png(layered image, separate image per frame, or spritesheet)..
There's a history for undos/redos, self explanatory..
There are hotkeys for all the tools and their functions, similar to how you'd use them in photoshop.
For example holding spacebar and click and dragging the canvas will move the view around. Ctrl+ -,= will zoom out,in..
You can flip selections, copy paste selections, rotate 90 degrees, resize selections or canvas/image, crop ,expand canvas, add frames, remove frames, rearrange frame order.. grid with grid snapping, settings, plus other stuff..
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9330
Location: Not Finland
PostPosted: Sat Jul 05, 2014 10:52 am    Post subject: Reply with quote

The little features are a lot of busy work but they come together fast. I liked that part because it felt like I was getting somewhere. I've been meaning to get Moai where it'll edit animated GIFs, but I've been really, really lazy this year ;)

I would like to have the ability to draw something and save an animation of it being created.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sat Jul 05, 2014 11:30 am    Post subject: Reply with quote

For the gif stuff, I basically am using a lib I found online to handle it. I don't think I'd have been able to manage coding that myself. There's also some issue with transparency not choosing the correct value because it does some averaging to find the nearest index or something like that.. I'm not sure how to fix that.
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9330
Location: Not Finland
PostPosted: Sat Jul 05, 2014 11:52 am    Post subject: Reply with quote

Oh yeah, most image formats are a total PITA to encode/decode manually :(

Right... so in GIFs index 0 is always treated as the mask color; most of the time if you run your frames through any type of quantification algo it'll b0rk that. What you could try doing is substitute your mask color at index 0 for something that is far from your other colors ("magic pink" usually works) before you start encoding. Once you're done, edit the palette entry and replace index 0 with whatever it normally would be.

But again, this assumes you have some control over the process. If the lib is handling everything, that may be harder. Still, I think the palette is stored right after the header of the GIF, so at worst you could open the finished file and byte-edit the palette.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sat Jul 05, 2014 4:06 pm    Post subject: Reply with quote

hm, after looking at it some more, I think it only becomes an issue if you choose a color that isn't in the image. As long as you specify a color being used, then it should use that one.

I realized I hadn't implement the ability to import a spritesheet. I had the ability to export a spritesheet though. So I went and added that in. Small stuff, but it adds up and makes things feel a lot more complete, like you said.
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10587
Location: Canadia
PostPosted: Sat Jul 05, 2014 6:34 pm    Post subject: Reply with quote

One of the chunks can change the mask color index. I used to do this often. ;)

But whatever. GIFs are really mainly for animations these days.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9330
Location: Not Finland
PostPosted: Sun Jul 06, 2014 5:59 am    Post subject: Reply with quote

PoV wrote:
One of the chunks can change the mask color index. I used to do this often. ;)

But whatever. GIFs are really mainly for animations these days.


I forgot about that. But I don't think that's safe to rely on, because many program implementations assume index 0 is your mask.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10587
Location: Canadia
PostPosted: Sun Jul 06, 2014 8:15 am    Post subject: Reply with quote

It always worked in web browsers, so it was reliable enough for me. :)
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 06, 2014 9:22 am    Post subject: Reply with quote

I don't know if you people have seen the HD indexing technique for photoshop , but I've implemented my own version of it in my editor. You can basically have a procedural effect to choosing colors while you draw so that pixeling becomes quicker (a softened brush will utilize the color ramp you create to create a softened effect). It also can connect color ramps together as you can see in the screenshot in that little palette box.

View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10587
Location: Canadia
PostPosted: Sun Jul 06, 2014 10:32 am    Post subject: Reply with quote

Heh, I want to make an sprite editor/animator for android now. :) I just tried a few out, and I hate them all.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 06, 2014 11:04 am    Post subject: Reply with quote

:P yea.. most of the drawing apps I've seen are pretty rudimentary and don't offer much flexibility. Also, they usually aren't designed with pixel-art in mind, so they tend to use the path method of drawing to canvas which incorporates anti-aliasing..
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 06, 2014 6:22 pm    Post subject: Reply with quote

Fixed a couple things today..
Holding shift and clicking allows you to draw straight lines. There was an issue with it drawing from the wrong position, but that's fixed. You can also hold shift and drag to draw horizontal or vertical lines.
Fixed an issue with resize handles displaying at wrong positions after moving a selected part of the image.

Also added the ability to link together frames in-case you want an animation cell to consist of more than one. This way you can keep multiple frames/layers separate and have them all combined into one cell during animating. Gif export handles these as well.
View user's profile Send private message Visit poster's website
Adam C. Clifton
Contributor

Joined: 04 Nov 2005
Posts: 221

PostPosted: Mon Jul 07, 2014 3:17 am    Post subject: Reply with quote

I thought you said you couldn't code. That's pretty badass.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Mon Jul 07, 2014 10:43 am    Post subject: Reply with quote

Thanks :) I feel like an amateur most of the time. It's basically a hobby of mine and don't know how to compare myself with people that do it for a living.

Today I've been working on more file saving related stuff since I've implemented the frame linking yesterday, and also frame opacity recently- I have to make sure that gets saved so that when you load up a file it's all accurate.
View user's profile Send private message Visit poster's website
sonrisu
Moderator

Joined: 31 Aug 2005
Posts: 4955
Location: Silicon Valley!
PostPosted: Mon Jul 07, 2014 5:42 pm    Post subject: Reply with quote

This is really cool. :]

Is it going to offer something above what other editors have? Aside from the gifinator, that is.
_________________
loomsoft :]
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Mon Jul 07, 2014 8:06 pm    Post subject: Reply with quote

Well, I'm focused towards making it a tool that, if I had to choose between mine or someone elses, that I would choose mine. It's built for pixel-art, and I feel like I have a good grasp on what is necessary to include and exclude for the process of making pixel-art to go smoothly.
There are some things that it will do that no other pixel editor does currently that I know of.
Most of it will be things you're already familiar with- but hopefully mine will package it all in a better way.
I'm not sure where it'll all lead. Most of my programming ventures lead to dead ends or they don't really result in anything useful. So for this project I'm keeping my expectations low, being more open with things, and focusing on what is useful to me or that I am at least interested in or invested in, etc. It's cool to imagine that perhaps I'd be able to help others with their pixel-art by providing a tool that allows them to create it. But even if nobody uses it, I probably will. :)
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Tue Jul 08, 2014 7:10 pm    Post subject: Reply with quote

Fixed a couple bugs related to some buttons not getting clicked when you click them. The issue was due to the text of the button being within a separate element, and it clicking the text instead of the button.

Also made the brushing tool function more intuitively. The brush tool is used for the "hd-indexing" effect.. But there was a specific way you had to set it up if you wanted to be able to erase towards transparent canvas. Now it requires less tweaking when you draw/erase.

Also added some more controls for gif creation.

edit: found a bug while I was animating:
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Wed Jul 09, 2014 11:32 am    Post subject: Reply with quote

fixed the bug..
also finished up the simple animation.
Helped me find some other issues that need sorting, but I managed to fix some of them already.
It's pretty cool being able to create an animated sprite in the editor.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Jul 11, 2014 4:16 pm    Post subject: Reply with quote

been sick so I haven't made much progress, but I'm attempting to implement a rotation algorithm. It should be better than the standard nearest-neighbor way so that it doesn't get as much artifacting.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Jul 11, 2014 8:28 pm    Post subject: Reply with quote

Okay here's what I have so far.. looks like it does a pretty good job.. now I need to figure out if I can speed it up
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Sun Jul 13, 2014 6:45 pm    Post subject: Reply with quote

Okay.. I have rotation for arbitrary angles fully implemented (Though I could probably fine tune the cleanup process).
I also sped up my flood-fill and magic-wand tools because those would timeout the browser if too large- they were doing some unnecessary work, so now it doesn't timeout. yay!
I'm feeling pretty good considering I didn't plan to implement arbitrary angle rotations.
View user's profile Send private message Visit poster's website
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Tue Jul 15, 2014 11:32 am    Post subject: Reply with quote

There was actually an issue with the resizing that would reset the rotation if you had a selection rotated and went to resize it at the same time. I managed to make it more user friendly, and now it maintains the rotation while resizing. In the process I implemented the ability to resize from the center by holding alt key down(it will resize while keeping it centered). Resizing a rotated selection will always center it since I'm not using any sort of special math stuff, and the handles don't line up with the rotated corners(they maintain a rectangular organization). So you resize it like you'd be resizing an unrotated version, but you end up seeing it rotated. Making the handles align and resize in a rotated space is probably doable, but I need to think about it some more. I'd probably have to translate the mouse position based on rotation, get offsets, and.. idk, that might be all it needs?.. I'll have to think about it some more.
View user's profile Send private message Visit poster's website
Gil
Developer

Joined: 14 Nov 2005
Posts: 2341
Location: Belgium
PostPosted: Wed Jul 16, 2014 7:18 am    Post subject: Reply with quote

Heh, I'm doing some similar stuff in Javascript right now to make image zooming in Chrome non-blurry :)

Looks good man, can't wait to poke at it :)
_________________
PoV: I had to wear pants today. Fo shame!
View user's profile Send private message Visit poster's website
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - a pixel editor thing Page 1, 2, 3  Next

Use this link to get a Sign-On Bonus when you get started!

All trademarks and copyrights on this page are owned by their respective owners. All comments owned by their respective posters.
phpBB code © 2001, 2005 phpBB Group. Other message board code © Kevin Reems.