AuthorTopic: Pixel.tools editor allows artists to pixel together on the same image/animation.  (Read 39784 times)

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW
Check it out at https://prominentdetail.github.io/Pixel.Tools/
Pixel.Tools is also on Github https://github.com/prominentdetail/Pixel.Tools


I developed this pixel-art editor for the pixel community, it's free to use.
It has many features you'd expect from an editor geared towards pixel-art.
The main feature is its ability to allow artists to connect together and work on the same projects, useful for things like gamejams, mentoring, or just having fun collaborating.
  • create animations
  • export/import gifs & spritesheets
  • tile window for previewing tiles
  • layers/frames
  • selection tools, rotating, resizing
  • History
  • shortcut keys similar to photoshop
  • wacom tablet support (firefox only)
  • Your entire process is recorded and you can play it back step by step
  • You can export the entire process to a gif
  • Colordex system
The Colordex system I created when I was inspired by the hd index painting technique. It allows you do draw in the same way that the hd index painting works, but without the hassle of setting it up. Plus it allows you to mix multiple color ramps together!

Here's a gif showing me scribbling with the Colordex system:

Plus there's a lot more you can do..
I used the editor to create all the graphics in my recently released game Quasi
http://prominent.itch.io/quasi
and is a good example of what can be made with Pixel.Tools



Here's an old screenshot of the editor:


Edit: here's a video demonstration of how to use the Colordex system:
http://youtu.be/QGLg-N9RT44
Here's a quick run-through of some features:
http://youtu.be/0io_Dl8yKmM

If you have any question as to how to use it, etc, I'll be happy to help clear anything up.
« Last Edit: September 10, 2016, 01:00:47 am by AlexHW »

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog
Very cool man.
I'll put some time in later and let you know what happens.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline Son of Bryce

  • 0001
  • *
  • Posts: 7
  • Karma: +0/-0
  • I think I make games?
    • View Profile
    • Sokay.net
This is friggin sweet. Any insight into how you developed this?

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW
thanks,
looking forward to your feedback Piledriver.
Bryce, do you have anything specific about the development you'd want to know? There was a lot involved. I had done previous experiments with html5 canvas element and drawing to it, but this time around I focused everything around the ability to connect between painters and pixel on the same project. There were a lot of challenges related to ensuring that the images on everyone's end match 100% with everyone else's image. Everyone connected has their own history state as well, which must be synced up with everyone else's. Everything has to work in unison.
I also wanted to implement everything I would normally use in my workflow, plus useful things I didn't have.

Offline tim

  • 0010
  • *
  • Posts: 240
  • Karma: +2/-0
  • Founder of Odd Tales - Art Director
    • View Profile
    • Tim Soret - Showreel
It seems like a very nice piece of software !
Some kind of video tour / tutorial would be great to jump quickly into it.
« Last Edit: July 29, 2014, 08:14:38 pm by tim »
Founder of Odd Tales
Art Director - Game Director - Game designer - Motion designer

Offline Son of Bryce

  • 0001
  • *
  • Posts: 7
  • Karma: +0/-0
  • I think I make games?
    • View Profile
    • Sokay.net
Thanks for the reply Alex, were there any HTML tools you used that made it easier to make the GUI? Or was it done from scratch? And what are you using to make it multi-user?

And I agree with tim, a short video that would outline how it works and shows which features it has would be awesome.

It seems like Frames double as Layers. Is there anyway to playback the animation in the window?

I also want to reiterate how cool I think this thing is. Have you posted it on reddit.com/r/gamedev/ ?

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW
Yea, I need to create a video that demonstrates everything. One of my molar teeth is shifting trying to come through, causing my jaw to swell. So it's difficult to be productive at the moment with the pain. I'll sort out some video once I can focus better.

I used Jquery UI, which helped with the styling of everything which made the process a bit easier. There were various things I had to modify or things I had to do my own way though to get stuff to look the way I wanted.
I used PeerJS which allows users to connect to each other in a browser and send data between them.

Yes, frames double as layers. Since I had been using photoshop in the past I modeled this off that.
Layers/frames towards the bottom of the Frame list are underneath layers/frames that are towards the top of the list. You can click and drag their handle to reorder them. You can  select multiple frames by dragging their thumbnail or ctrl clicking their thumbnail.

To play the animation, just click the Play button in the header of the Frames window, and click again to stop it.
 
You can link together frames if you want multiple frames to be combined into one frame cell. There is an icon between each frame thumbnail that looks like two lines, click it to link the frames. They'll be combined when you play the animation or export it.
Invisible frames will be skipped in an animation(frames that have their visibility set off by clicking the eye icon). If you want a blank frame in an animation, you can just create a frame and leave it blank.

You can set the frame intervals by clicking the number in the lower right of each thumbnail. Select multiple frames to change more than one at a time.

I haven't posted to reddit.. I've never used it and I'm actually not sure how it works.. but I'll look into doing that when everything is documented..

glad you're enjoying it! My goal is to make this my primary tool for pixel-art.



Edit: I've added a video link to the original post.
« Last Edit: July 31, 2014, 09:28:04 pm by AlexHW »

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW
Just fixed a major bug with the Colordex!
So if anyone experienced unexpected color shifts with it, it should now be fixed.
I had noticed that creating complicated combinations of color ramps caused unexpected black colors to be drawn.. Part of the reason was related to how the canvas data was being managed when it processes the colors. I also realized from this that the control over the magic eraser tool wasn't selecting the correct colors in certain circumstances, so I sorted that out.
Now color mixing works super great and everything adjusts in a predictable manner!
I also felt like saving the previous version in-case people playback any old files, they should still playback accurately to how they were made (this is something I need to manage as I change core functionality to ensure old files remain true to their creation)..

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile
Doesn't seem to work for me. I select the pencil tool and click -- I make a short green mark (the result is short, my click isn't). Subsequent clicks have no effect.

I can interact with non-canvas elements okay (eg. choose tool and color) but cannot interact with the canvas, though items are added to the undo history, so perhaps the clicks are processed correctly but the canvas is not updated. Adjusting zoom level also has no effect that I can tell.

Creating a new image does not effect the canvas (ie. the image remains the same size, with the same green mark in the same place).

I'm running Firefox 31.0 on Arch Linux 64bit.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW
If you open up firefox's console, are there any errors showing?


edit: btw, I've added extra options under Edit menu for manually cutting,copying,pasting,clearing selections made with selection tool for those who may be confused with how to use the selection tool.
Also added one Undo for crop/image resize/canvas resize operations. Any more would cause complications when multiple users connected together. These operations clear the History, and if you make more than one, you can only undo the last one, so you still have to be careful..
Fixed an issue with using the paint bucket on 1x1 pixel sized areas.
« Last Edit: August 03, 2014, 12:00:00 am by AlexHW »