[Toolbox Jam] Pixel Canvas

SUGBOERIE

I've recently been diving into Unity editor scripting to build tools for Squeeze Me. I'm having a lot of fun developing them. I've decided to do the toolbox jam as more of an exercise to learn more about Unity editor scripting. If there any tips and tricks you know of please let me know. I've found that the documentation isn't the best and tutorials are really hard to find apart from the basics.

I've decided to make a pixel editor in Unity.



If they're features you think I should think about adding please let me know.

BASIC FEATURES
Drawing & Editing
- Color Picker
- Brush Size (Square)
- Eraser
- Undo - Redo

File Operations
- New Canvas
- Choose Size
- Open Existing Sprite
- Save Sprite

Navigation
- Zooming in /out with shortcuts
- Panning with shortcuts

UI/UX Design
- Icons
- When closing Unity make sure user has saved (prompt to save)
- Tool Tips
- Border around drawing canvas
- Shortcut to change brush size


STRETCH GOALS
Drawing & Editing
- Primary Secondary colors
- Rectangular Marquee
- Shift pixels
- Create Palette
- Fill tool
- Different style brushes

File Operations
- Save Pixel Canvas project
- Open Pixel Canvas project

Layers
- Re-order layers
- Merge layers
- Add layer
- Remove layer

SUPER STRETCH GOALS
Animation System

EvanGreenwood

I'd love this feature. But it would need most of the pixel art abilities of Photoshop to entice artists to use it (so colour pickers, erasers, varying mouse cursors, shortcut keys, point rendering, being able to select rectangular marquees and shift pixels around, being able to select pixels and copy and paste them).

I'd also like animation frames, and an easy way to add frames and preview animations (this could definitely be better than Photoshop's features in this field, though other pixel drawing programs handle animation better than Photoshop)

Does no tool like this exist for Unity already? It seems like a super useful plugin (if done well enough to replace Photoshop).

(This tool looks like it does some of this, though I don't know how well)

SUGBOERIE

Thanks @EvanGreenwood. I've updated the OP to show the features I'm planning on doing. The basic feature list is what I'd like to accomplish by the end of the jam. Depending on how I progress through the month. I may get to the initial stretch goals. Animation is something that'd be great to touch on but I feel that would only depend on how much "fun", I'm having by the end of the initial stretch goals and time, of course.

Plus I’m not sure how’d want animation to work. Especially on a workflow / pipeline level. I hated my experience in Pyxel Edit, Gimp was terrible too and both have different way they do animation.
Gimp uses layers thus you can’t use different layers per frame. Pixel Edit doesn’t make it easy to add frames in between other frames because of their sprite sheet system. I’ve never used Photoshop, Aseprite, or GraphicsGale. If I get this far I should really look into how they do animations. Basically do some research with some artists at this point.

Hadn't even seen RagePixel, it's free too. So, I'll be looking through how they accomplished stuff. Thanks for that. I did find Pixel Draw.

SUGBOERIE

Updated the OP with the features I've done.

I thought I was going to build a whole undo stack system but there's a whole Undo class in Unity.
Learn't about blending colors
Panning and zooming took me longer than I thought

Here some gifs

SUGBOERIE

Done a bunch of stuff this weekend. Trying to finish the Basic features. I've updated the OP with what's kinda left to be done. File operations were a bit trickier than I thought. Biggest problem I was having was if Unity is closed while my window was open and then reopened Unity would keep primitive types but complex types would disappear. So, based on the way I was handling menus and dialog boxes a lot of errors kept popping up.

The gif kinda shows how the UI looks now. Was really interesting the iterations I went through because I totally forgot that Unity come in 2 different skins and at first my icon toggle buttons looked great in pro version but not personal. I also didn't want to make my own GUISkin and found a work around using the standard GUISkin.

Oh, while I was fixing a bug to fix an issue I had with not being able to make smooth drawing because I would only paint every frame and that means if the mouse had been moved too quickly they'd be gaps. Fixing that helped me developed a tool that was in my stretch goals, the line tool. As shown below.

Hoping to have this done by end of the coming week and "release" a bare bone pixel editor. :)

Pomb

@EvanGreenwood I used rage pixel before and found it horribly limited in its functionality. The coolest program I've found so far for doing pixel artwork is promotion. Index painting allows you to change your pallet after all frames are completed, ie, change a red shirt to green in all your already painted frames. The copy pixel tool is equally rad as is the dither pattern tools.
@Sugborie you should check it out when you get to your animation features.

SUGBOERIE

@Pomb, I felt the same way about Rage Pixel. I think it focused more on animation but did that poorly too. Thanks for the reference. I've been looking at Gimp, Pyxel Edit, and Aesprite as reference. Graphics Gale doesn't have a mac version. So, can't see that.

Here's one thing that popped up this weekend that I found worked differently between the three.

When you click down and start painting, if you go over the same pixel again without releasing the the mouse button what should happen? (assuming this is a color with some transparency)

A) You blend in the pixel again ( every time you go over the pixel it should get darker and darker)
B) Nothing happens. Only once you click again do you blend in the color. (So, keep clicking to get darker and darker)

Gimp and Aesprite chose B
Pyxel Edit chose A
I went with what the majority chose, although I feel like A makes more sense.

What does Photoshop do?
What would you like?

Elyaradine

Photoshop's got both, but it gives it two different names: "flow" and "opacity".

Opacity is the maximum amount of change you can make to a pixel per stroke. Flow is how much is changed per time-you-go-over-a-pixel. So you could use them simultaneously if you wanted to, to make a brush that gradually builds up as you repaint the same spot in the same stroke, but only up to a certain opacity.

I usually use single strokes to paint, so I'm unlikely to paint over a spot in the same stroke, making the difference negligible in my case.

[edit] I see some of these in your stretch goals, but just listing some stuff I'm likely to use regularly:
- Selection tools. Being able to drag a rect marquee, shift drag multiple rects in the same selection, and move/rotate my selection. I find that the vast majority of pixel art animation starts off this way. Even though the rotation often looks crap, it's a base on which I can fix things rather than drawing everything over again from scratch.
- Selection based on colour, and then either being able to HSV shift them or fill them with another colour for quick colour changes.
- If there's animation, then onion skinning.

SUGBOERIE

I'm done! It's released! And you guys can see all my code on github too. Learnt a lot doing this. Planning on doing some post mortem thing. Will I get to those stretch goals? Maybe, one day. Swamped with so much other work. Just had to get it out the door. Hope there are no bugs.