Changes to the Paint Editor in Scratch 2.0

As many of you are aware Scratch 2.0 will move from providing a bitmap based paint editor to a vector based paint editor.

Why vector?
There are many differences between bitmap and vector based images, and pros and cons of each. One noticeable benefit of vector based images is in scaling.

Here is the same image in bitmap then vector format:



Now here they are scaled up:



You’ll notice the vector image maintains its quality while the bitmap becomes pixelated or ‘fuzzy’. With vector images, your projects can scale to full screen and still look good.

Other characteristics we saw as benefits of using vector based images are:

• -Vectors drawings can be easier to modify and remix - reshaping, changing colors, resizing, moving or rotating one part of the image.
  -They produce smaller file sizes
  -There currently aren’t that many simple and free vector editors out there whereas there are many simple and free bitmap editors.
  -Vector images produce a look that may be considered more modern.
  

That said, the debate between bitmap or vector ‘style’ has a long history which extends beyond the Scratch world. There are of course benefits to bitmaps that vectors don’t have - for example, pixel perfect editing or drawing. We want to support as best we can those of you that sit firmly in the bitmap camp. Though you can’t create bitmaps, we hope to make it easy to import bitmaps and do some basic editing.

We’re excited about the move to a vector based paint editor but building a good and easy to use vector editor is no easy task. We’ve been working on it for a long time - but there’s still work to be done. We’re releasing our work in progress because we’re interested in feedback from the community of testers.

Try it out and let us know what you think:

• -What tools are confusing?
  -What types of things are you finding difficult to draw?
  -If you draw something in the vector editor, please share it on the site!
  -(For now we don’t need bugs to be reported - since there are quite a few, and we’re likely aware of most of them. We’ll be asking for bug reports in a later release)
  

While you play with it remember that there are many features that have not yet been implemented. Don’t be alarmed…they’re on their way.


Some features still in the works:

• -Bitmap editing support: import bitmaps and edit them
  -Undo
  -Fill with gradients and a color wheel color picker
  -An eraser tool
  -A better paintbucket
  -A way to set center of rotation for a sprite
  -Better support for creating scenes
  -Tooltips
  - Zooming
  

Check back here for updates, bug fixes, and new releases of the paint editor.

Read more about the differences between bitmap and vector here.

nice info.

The editor looks good so far! One major feature that is lacking (which I don't see on your list) is an “undo” button - although luckily I figured out that you could delete objects with the delete and backspace keys, which is convenient.

When trying to decide the colors of the fill and outline of my shapes, I found the interface quite intuitive - with the bucket to represent the fill, and pencil to represent the outline. that you can create squares or circles by holding shift while drawing the shape. The slider to change the outline thickness is nice, since you can see a visual representation of how it will look - however I would still like to have a way way to see a number of what the thickness is (even if it only appears if you hover-over the slider, for example). A way to choose specific colors would be nice, but I can see you have that listed already as a planned feature. Also, the color picker tool seems to work well.

While experimenting with the line tool, I found a few problems. Firstly, the lines don't stay if you only click or your line is simply too short. Also, not all of the line will appear if you shift-click while drawing the line (to make it straight) - about one third of it (starting on the side where I first click) is removed. (However this bug doesn't occur if I let go of shift before I let go of my mouse. But apart from that, it seemed to work well.

The tool which allows you to change the points on a line is really easy to use! I like that there's a specific tool for it, rather than having to see all of the dots automatically when you normally choose a shape. Also I could deleting/adding points relatively easy.

The clone tool also seems to work pretty well - it looks nice with the half-transparent version of the clone hovering with your mouse until you click to place it.

BTW, I found a few bugs with the resize feature - but since it sounds like you're not interested in bugs yet, I'll just leave it out for now. Also, I couldn't figure out how to move items behind or in front of each other.

In conclusion though, I think this re-done paint editor is really well made - I can tell a lot of thought was put into making it!

Here's a project of the stuff I made with it so far. (link)

The transition to vector is really nice and Flash is a good opportunity to make this step. However I feel like it will take some time to adapt to a new style of painting in Scratch, especially since some standards of vector editors have been missed out:

When (in the future) a non-vector image is imported, how will one be able to edit it, since there is no erase tool?

Also, clicking on the transparent background will the arrow should clear the selection of any item.

The pen icon is cool, but a hollow circle for larger pen sizes would really help. The same goes for a precision pointer when inserting shapes.

The icons are also pretty ambiguous (especially those that appear on a selection), so tooltips would help.

The shift clicking to change the behaviour of a tool is a great idea, but should be made more obvious (I had a hard time finding lines). There are also bugs with that, but I won't go into them.

And then. How does one change the colour of the background?

Thanks for all the detailed feedback - I hope it keeps coming, it's very useful. We appreciate it.

Some responses to your feedback:

@Lucario621
- You're right, Undo is missing, and it is definitely on our list - I forgot to add it, but will put that in.


@LS97
- There will actually be an eraser tool for bitmap images (ideally we'll be able to get something working on vectors too - but that might not be right away). Basic bitmap editing is still in the works.
- Tooltips are also on our list - I agree, having them will help make some tools more clear.

I found something that would've made things easier to edit missing. Zooming in and out. I really enjoy that feature and hope you guys will put it in

i also noticed that text doesn't work

I'll try vector sizing out once the paint editor becomes usable. In the meantime, anyone know any vector-compatible Paint.NET plugins?

jji7skyline
i also noticed that text doesn't work

It kind of works for me…

NeilWest
I'll try vector sizing out once the paint editor becomes usable. In the meantime, anyone know any vector-compatible Paint.NET plugins?

Just use Inkscape for now. Free and open source.

NeilWest
I'll try vector sizing out once the paint editor becomes usable. In the meantime, anyone know any vector-compatible Paint.NET plugins?

When I searched your question , the websites say they don't know or it's impossible so sry. Otherwise try inkscape, as scimonster said

Saca312
I found something that would've made things easier to edit missing. Zooming in and out. I really enjoy that feature and hope you guys will put it in

Yes - Zooming is definitely on our list and is a big one. I've added it to my original post.

Try Inkscape, it's free and awesome.

Good stuff! I spent most of my time working with the pen tool, making shapes - modifying them - filling them and so on. I was able to make some nice shapes and the auto-smoothing worked well. I found it easy to move points within shapes using the modify tool (if that's what it's called). Adding new points worked most of the time but had difficulty at other times. Deleting points was not intuitive - but I had read in this forum that shift click was the way to go so I tried that and it worked.

One issue I see, though, is that of making more complex shapes. In most vector editors, you can group entities together to make a set of primitives act as a unit. Sometimes you can even group splines together to share a common fill boundary. I'm curious if we are going to have features like that here? I often find that I want to start with a simple curve, perhaps duplicate it, mirror it, then join it to the first curve to make a symmetrical closed shape, then fill it How can I do that here?

I have found that when I fill an open shape, it leaves the boundary line off the open segment - and I think that's good. Because then, I can overlap a couple of open shapes (filled with the same color) and kind of mimic a more complicated fill. But, unfortunately, if I use the modify tool to adjust any of the points of the filled open shape - it automatically gets closed. That may be helpful in some circumstances - but is not a help in the case I just described. Perhaps there should be an option to close an open shape rather than have it close whenever it is edited.

I can see good progress here - and I am encouraged by what I see. It's still going to be a tough job balancing functionality with simplicity. Maybe there could be advanced functionality available off of a context sensitive alt-menu, similar to how things work in the script editor? Things like “Close”,“Mirror”,“Group”,“Move to Layer” and so on.

Paddle2See
Good stuff! I spent most of my time working with the pen tool, making shapes - modifying them - filling them and so on. I was able to make some nice shapes and the auto-smoothing worked well. I found it easy to move points within shapes using the modify tool (if that's what it's called). Adding new points worked most of the time but had difficulty at other times. Deleting points was not intuitive - but I had read in this forum that shift click was the way to go so I tried that and it worked.

Thanks for taking the time to try it out and write up your feedback. Points can actually be deleted just by clicking on them - we're hoping to add a variety of cursor helpers and other hints to make some of these things more obvious.

Paddle2See
One issue I see, though, is that of making more complex shapes. In most vector editors, you can group entities together to make a set of primitives act as a unit. Sometimes you can even group splines together to share a common fill boundary. I'm curious if we are going to have features like that here? I often find that I want to start with a simple curve, perhaps duplicate it, mirror it, then join it to the first curve to make a symmetrical closed shape, then fill it How can I do that here?

This one is challenging. We've spent some time thinking about it here as well and we have improvements to the paint bucket and the path tool in the works.

Paddle2See
I have found that when I fill an open shape, it leaves the boundary line off the open segment - and I think that's good. Because then, I can overlap a couple of open shapes (filled with the same color) and kind of mimic a more complicated fill. But, unfortunately, if I use the modify tool to adjust any of the points of the filled open shape - it automatically gets closed. That may be helpful in some circumstances - but is not a help in the case I just described. Perhaps there should be an option to close an open shape rather than have it close whenever it is edited.

This is actually a bug - it shouldn't do that.

Paddle2See
I can see good progress here - and I am encouraged by what I see. It's still going to be a tough job balancing functionality with simplicity. Maybe there could be advanced functionality available off of a context sensitive alt-menu, similar to how things work in the script editor? Things like “Close”,“Mirror”,“Group”,“Move to Layer” and so on.

We currently have Group and Layer and Mirror implemented, Close needs some improvement:

Group/ Ungroup: To group objects together select the set of objects you want to group and you should see a group tool appear at the bottom of the tool palette. To ungroup, select the group and you'll see an ungroup icon appear.

Layer up/ Layer down: Select the object and you'll see the layer up/ layer down icons appear - of course these push them all the way to the bottom layer or all the way to the top layer.

Mirror: Select the object with the arrow tool and then drag the left or right control point over to the opposite side, or drag the top or bottom control points in a similar way.

Close: currently, if you select a path with the reshape/ modify tool and then drag the end point over to the start point you can close it, the start point will vibrate a bit to show you you're making a connection. Pulling the start to the end currently doesn't work …but will.

Champ99
Points can actually be deleted just by clicking on them - we're hoping to add a variety of cursor helpers and other hints to make some of these things more obvious.

Oh, cool, let me give that a try *click* Yep! It's gone.

Champ99
Group/ Ungroup: To group objects together select the set of objects you want to group and you should see a group tool appear at the bottom of the tool palette. To ungroup, select the group and you'll see an ungroup icon appear.

Nice! I see I can either select multiple objects by dragging over multiple objects or by using Shift-click. I love the “energy pulse” that sweeps through the group members when they become ungrouped. However, when ungrouping, the individual members remain selected so if you go to move one, they still move as a group. I found that confusing - maybe the individual items should be deselected after the ungroup. Hopefully there will be undo/redo functionality at some point so an erroneous ungrouping can be corrected.

I know you're not really looking for bugs yet - but I'll just let you know that I had some issues with the Shift-click method of selecting multiple members. Sometimes the bounding box would do strange things.

Champ99
Layer up/ Layer down: Select the object and you'll see the layer up/ layer down icons appear - of course these push them all the way to the bottom layer or all the way to the top layer.

Okay, I found the functions you are refering to very helpful (I think of them as the Go-to-Back and the Go-to-Front tools) - but that's not what I meant by a “layer”. I was thinking of a “layer” as a larger groups of drawing objects that you can use to more fully control your drawing. These layer groups can be made selectable/unselectable, visible/translucent/invisible, and arranged in order to affect rendering. I use this kind of layer quite a bit in other bitmap/vector editors that I use outside of Scratch.

Probably the thing I use them for most often is to “fix” a portion of the drawing in place so that it can no longer be selected so that I can work on another section on top of it or move other pieces in place without accidentally moving parts that I'm happy with.

However, a full-blown layer system does add a lot of complexity to an editor and might be frustrating to a beginner if they try to select objects that are on a layer that is not currently selectable (for example). Maybe there are simpler ways we can achieve some of the same functionality - such as a transparent “tape” tool that would visually show that an object was temporarily unselectable. The user could then “tape” down sections of the drawing that were complete. Drag selects would not work on a taped object and the the user would have to click on them and select the “untape” option before anything else could be done. The user could use this approach to build up a more complicated drawing. It wouldn't have the power of a true layer - but it might let you do some of the same kind of things.

My latest creation with it - a kayak (of course)

Okay, so I had some chances to play around with the vector editor. Here's one that I did (the one on the left was made in one of the older paint editor editions).

http://alpha.scratch.mit.edu/projects/10001942

During the drawing process, there one basic tool that I felt was missing: a bezier/line tool. If it's currently not on the list of features to be added, I have to highly insist that it should be added. I usually use the line tool very heavily in the Scratch 1.4 paint editor - my drawing tutorial here shows how I use the line tool over freeform pen in a raster editor; given that I've gotten a lot of positive feedback on that tutorial I think having a bezier tool (or at least a tool that allows users to pre-determine the position of the nodes) is necessary.

I think the most difficult thing I encountered using the vector editor is trying to simply color something. Some people prefer doing line art first and then use the (raster) fill bucket to color things in. The vector fill bucket doesn't work this way, and to a certain degree, this makes the coloring issue difficult and more lengthy: I either have to learn to draw using closed objects that are colored beforehand, or I have to create separate color shapes to conform to the lineart. (I'm not sure if I explained myself well, but I think the best way to explain is by challenging others to remix my project and color the image on the right).

One thing I haven't seen yet is the ability to copy costume images. Is that feature missing, or is it hidden somewhere and I can't figure it out?

I love the new version of the paint editor. I find it quite intuitive to use, but I have used vector editors before, so I might not be a good indication. I really like the automatic line smoothing, especially since the curves I draw on raster editors with my mouse don't tend to be so nice and smooth looking. However, sometimes my lines smoothed more or less than I wanted them too. Small curves, for example, tended to turn into straight lines. If I remember correctly, Inkscape has a way to set the level of smoothing. Would this be a possibility?

NeilWest
I'll try vector sizing out once the paint editor becomes usable. In the meantime, anyone know any vector-compatible Paint.NET plugins?

Paint.NET is a raster editor, not a vector editor.

For a free vector editor, try Inkscape.