Innen: Hungarian Scratch-Wiki

SandCastleIcon.png Ez a cikk tartalmaz linkeket külső weboldalakra vagy programokra mutatva, amikben nem bízik meg feltétlen a Scratch, vagy nem a Wikipédialapok egyike. Ne feledkezz el az internet biztonságos használatáról, tekintve, hogy mi nem tudunk garanciát vállalni az ezen oldalakon való böngészésért.

Sablon:Other version

Építkezés.png Ez a cikk még befejezetlen. Kérlek ne változtass rajta, míg ezt a jelzést a szerző el nem távolítja.


Icon translate.png Ez a szócikk még nagymértékben fordítás alatt áll. Akadhatnak benne más nyelvű szövegek is.


A Vektor szerkesztő.
A Bitmap szerkesztő.

A Kinézetszerkesztő a Scratch egyik beépített Jelmez- és Háttérszerkesztője. Számos Scratcher készíti saját Szereplőit, Háttereit ennek használatával. Ezek a képek számtalan módon lehetnek felhasználva. ez az a funkció, ami a Scratch-et elkülöníti a többi programozó eszköztől/oldaltól, mert a legtöbb -Scratch-en kívüli- oldalnak nincs ilyen beépített funkciója.

Képtípusok

A Kinézetszerkesztő kétfajta grafikai (képi) típust használ: vektor és bitmap (raster) grafika.

Vektor grafika

Főcikk: Vektor grafika
A különbség a vektoros és a bitmap típusú képek között, szemléltetve két karikával.

A vektoros grafika objektumokat vagy matematikai görbéket tárol a pixelek helyett. Ez teszi lehetővé azt, hogy sokkal simábban néznek ki, mert a végtelenségig lehet rájuk úgy nagyítani, hogy minőségük ne romoljon - ne legyenek pixelesek. Azonban képeket nem tudnak túl jól tárolni.

Bitmap grafika

Főcikk: Bitmap grafika

A bitmap grafika, másnéven a raster grafika, rácsszerkezetes Pixeltömbökben tárolja a képeket. Ez könnyebb szerkeszthetőséget biztosít, ellenben ránagyításkor elmosódott, pixeles lehet.

Jelmezsáv

A jelmezsáv.
Főcikk: Jelmezsáv

A legbaloldalibb része a kinézetszerkesztőnek a jelmezsáv. Ez azokból a gombokból áll, amelyekkel új jelmezeket lehet létrehozni. Itt található még az összes jelmez ikonja, sorszámmal és névvel együtt. A jelmezsávban egy szereplő minden egyes létező jelmeze ki van listázva. Ahhoz, hogy egy jelmezt szerkeszteni tudj, egyszerűen csak kattints rá. Asávot lehet fel-le görgetni, ha megtelik a látható lista.

Új jelmezek létrehozása

A jelmezsáv legalján van egy kék cica ikon. lebegtesd a kurzort felé, amelynek hatására felugrik egy négylehetőséges menü. Itt a lehetőségeid, hogy a Könyvtárakból You can choose a sprite from the library, draw your own, upload an image file from your computer, take a picture, or choose a "surprise costume", which picks a random costume from the costumes library.

Switching Costumes

In the costume pane, the currently selected costume is surrounded by a blue box with an "x" button, instead of a gray box with no button. The canvas of the paint editor only displays the currently selected costume. To access the different costumes of a sprite, click on the thumbnail of the desired costume from the costume pane. Then, the canvas will display the newly selected costume and allow for its modification.

Paint Editor Conversion

At the bottom-left of the paint editor is the option to switch to the other (Bitmap or Vector) editor. When converting the images to the new editor, or new format, the program has to manipulate them.

Bitmap to Vector

The option to convert to the vector editor.

When converting a bitmap image to the vector editor, the entire bitmap image becomes one united, single object in the vector editor. It contains its bitmap appearance, but the difference is when resizing the converted bitmap image. The vector editor resizes all objects differently than the bitmap editor, often more accurately to the original display. Any shapes converted from bitmap to vector do not transform into a vector shape or obtain splines; the program reads it as before.

Vector to Bitmap

The option to convert to the bitmap editor.

When converting a vector image to bitmap, any objects that extend off the canvas will no longer be included; only a 480x360 resolution image can be created at maximum in the bitmap editor. Unlike from bitmap to vector, vector graphics lose the properties that are unique to them. Specifically, anti-aliasing is removed. Therefore, a smooth vector object may become very jagged and pixelated in appearance. Sablon:Caution

Common Options

These are all located above the costume. All of these are common to both the vector and bitmap editors.

Picking Colors

Sablon:Main

The three sliders to change the selected color

The Scratch paint editor has a color dropdown that has three sliders that can be used to select colors: color, saturation, and brightness. It is found in the middle-left side of the editor.

Gradients

Above the three sliders, there are four options. These allow you to blend an area between the two selected colors. If you click one of the options other than the solid color option, two selected colors are shown. Click on each one to edit it separately. Choose the white box with a red line in the middle for nothing, which will create a fade effect. If you fill in an area using one of these options, it is called a gradient. Selecting "Swap" between the two colors switches their order.

Color

Changing the color slider changes the hue of the color (for example, from red to blue). This tool is used often, as it can make a large difference between colors.

Saturation

The saturation of a color is how strong it is for a color with its brightness: 100 saturation is the color selected, 50 saturation is a lighter color, and 0 saturation is just a shade of white or gray.

Brightness

This option changes how light or dark the color is. The left is completely black, while the right is the selected color.

No Colour

In the bottom left of the palette, there is a white box with a diagonal red line in it. When clicked, the colour will become invisible. Uses of this include giving something no outline, giving something no fill and making transparent colours.

The No Colour option can be used to make transparent colours. When used with the horizontal or vertical gradient, the colour in the middle of the shape will be transparent. The edges of the shape can be rubbed out with the eraser tool, leaving only the centre left. The transparent object can then be reshaped and resized using the reshape tool.

Picking Up a Color

At the bottom right, there is an icon that allows you to pick up a color from the costume, sometimes called the "eyedropper".[1][2] It will magnify the the area the mouse-pointer is near. On the outside is the color you are hovering over. Click to select it.

Changing Pen Size

In the middle of the paint editor is the pen size bar. It is marked by a paintbrush icon. There is an input to select the pen size. Type in the size or use the arrows on the side to change it. The higher the number is, the thicker the Brush, Line, and outlined Ellipse and Rectangle tools will draw.

Naming Costumes

To name a costume, just click on the text bar at the top-left of the paint editor and enter the new name. The name of the costume is important for organization and also in programming the project at times. It is best not to name costumes as just numbers without any other characters because it causes confusion with the costume blocks; this is due to each costume having both a name and numerical order value in the costumes pane, so switching to costume "2" could mess up if the third costume was named "2".

Copying and Pasting

To the right of the outlines there are two options: copy and paste. The copy option copies the region that is selected, while the paste puts it somewhere else. This is especially useful when one needs to duplicate an item. You can use Sablon:Kp to copy as well and Sablon:Kp to paste. When a selection is copied and pasted, the position of the copy is offset, compared to the original selection. To paste content in place (with the same position as the original): (1) copy a selection, (2) switch to a different costume, (3) switch back to the original costume, (4) paste the copy, before making any other modifications.

Undo and Redo

To the right of the costume name are two buttons called undo and redo. These buttons allow you to make it as if the last action never happened and repeat the undone action respectively. The redo button cannot be used unless the undo button has been used. If no actions have been taken, neither button can be used. If you change from the costume editor to something else, your actions will be permanent and can only be undo manually. The keyboard shortcut for undo is Sablon:Kp.

Vector Options

These options are unique to the vector editor and are not found in the bitmap editor.

Precise Object Movement

In the vector editor when an object is selected, the arrow keys can be used to move it one pixel, divided by the current zoom factor. If shift is pressed while the arrow keys are pressed, the distance moved is multiplied by 15. In the bitmap editor, a section grabbed with the select tool can also be moved with the arrow keys. This can be useful for making exact, precise measurements or aligning objects in an organized, structural pattern.

Outlines

To the right of the color dropdown, there is a dropdown that changes the outlines of objects. It also has the three sliders; however, you cannot blend two colors in currently. To the right of that dropdown is an input to select the thickness of the outline. You can type in a number or use the arrows to change it.

In September 2020, it became possible to make a gradient outline.[3]

Layers

The layering of Giga in front of Nano.

The paint editor also includes the feature of layering objects in the vector editor. Layering objects is placing them in front or behind one another. At the top-right will be four buttons which allow you to layer objects in front or behind another. On the left side, Forward and Backward move objects one layer at a time, while Front and Back move them to the very front or back, in front of or behind all other objects in that costume. Sablon:Note

Grouping

When there are many objects that you need to move at once, it can be useful to group them. Use the select tool to select a specific region of the costume, and click group. These objects are now one object and can be moved together. The ungroup button does the opposite; one grouped item selected can be broken up into smaller portions. Sablon:Note

Horizontal and Vertical Flipping

From left to right, top to bottom: No flip, horizontal flip, vertical flip, horizontal and vertical flip.

When you select an object, there is the option to horizontally and/or vertically flip it. Flipping an object reverses it. In advanced terms, when an object is flipped, it takes each pixel and sets it in the opposite location of a center with the origin of (0,0). At the top of the editor, there is a set of tools that look like two arrows pointing to a dotted line. The one on the left flips the selected object horizontally, and the one on the right vertically.

Curved/Pointed

When using the reshape tool, there are two options to the right of the outlines that makes the splines either curved, like an oval, or pointed, like a rectangle. This is useful when creating shapes with both curved and pointed edges. If more than one point is selected (hold the Sablon:Kp key and click more than one), all selected will apply the specified change.

Vector Tools

Vector tools, unlike bitmap, create splines instead of an array of pixels to store costumes and backdrops. Many of the tools, though, work in a very similar style. They are found to the left of the costume.

Select

The first tool, the mouse-pointer tool, is used for modifying the location of an object, stretching or compressing it, or rotating it. When an object is selected with this tool by a mouse-click, a blue box will appear around it and the object can be moved by grabbing the center and moving the mouse. Rotation is accomplished by dragging the two small arrows below the box. The object rotates in relation from the object's center to the rotation circle's position. Lastly, objects can be stretched and compressed with the measurement boxes that appear on the outer edge of the selection box. Sablon:Note

Reshape Tool

An image, edited with the reshape tool.

This tool is used for bending or changing the shapes of a spline in the editor by grabbing the points with the mouse and moving them around. In Scratch 2.0 and earlier, there was a "Smooth" button that removed some splines.

  • Click on a spline without moving it to remove it.
  • Hold Sablon:Kp while selecting splines to select multiple.
  • If you have a closed shape that is filled in, if you break the shape (open the polygon) the fill color will go away.
  • You can remove the spline you are editing with the delete key or backspace key.
  • Click on a line or border of a shape where there is no point to add one.
  • When a spline is clicked, two options will show above on the tab: curved and pointed. These change the spline to be either curved or pointed.
  • When a spline is clicked, a blue line with diamonds at each end will show up. Pull this to affect the line on either side of the spline.

Spline Tool (Drawing)

The spline tool acts as the paint brush tool for the vector editor. However, instead of creating pen marks on the canvas like in bitmap, it creates splines, mathematically calculated and stored shapes, which will not become pixelated and can be modified using the reshape tool. To draw, hold down the mouse on the canvas. Drawing from an existing point on an existing spline will automatically match the size and color to the existing spline and also connect the splines together.

Eraser

The eraser pushes splines within its range outside of the circled area. This tool was first introduced in Scratch 3.0. It is different than the bitmap eraser tool because it leaves the same outline as the spline it erased had.

Paint Bucket

The paint bucket tool can often be confusing because instead of filling in a region it only fills in vector objects. For example, you cannot fill in the blank background of a costume or backdrop with the paint bucket in vector because it is not an object. When the paint bucket is selected, click on any object's interior or outline to manipulate the color to the currently selected one. Sablon:Note In bitmap, any region, closed or unclosed to the background, or the borders themselves, may be filled, but in the vector editor the splines must be connected into a uniform, closed-in object. The paint bucket cannot be used to fill in outlines, as it could in previous versions.

Text Tool

The fonts in the vector editor.

The text tool is used to type characters onto the canvas, which can be resized after completion. To type text, click anywhere on the canvas; when a cursor appears, begin typing. One can set the horizontal and vertical boundaries of text by moving the resolution boxes that appear around the text box. Click on a blank area to exit the text editor once finished. To resize the text afterward, select it with the mouse-pointer and drag the measurement boxes to have the text reach the desired size. Text can be edited after exiting the text editor by clicking on existing text with the text tool.

The Text Tool has nine available fonts available in the bottom-left of the paint editor to select from: Sans Serif (Noto Sans in most circumstances), Serif (the default serif font chosen in the browser settings), Handwriting (Handlee), Marker (Knewave), Curly (Griffy), Pixel (Grand9K Pixel), 中文 (Chinese), 日本語 (Japanese), and 한국어 (Korean). More fonts can be obtained using Google Drawings by making a drawing, typing the desired text in, choosing the font, downloading the image, then importing the image into the desired sprite in Scratch and resizing or moving the text to fit one's need. They can also be made using external editors like Inkscape which have a text-to-path feature. Sablon:Note

Line Tool

The line tool is used for drawing straight lines in the vector editor. A line consists of two points of the spline: one in the beginning and one at the end. To draw a line, click and hold the mouse, and release to draw the line from the starting point of the mouse-click to the release point. Sablon:Note

Oval Tool (Circle)

The circle tool is used to draw ovals or perfect circles. This can be done by clicking and holding the mouse on the canvas. Then, an oval will form in relation to the mouse's starting and ending coordinates. To draw a perfect circle, hold the Sablon:Kp key while drawing with the oval tool.

Rectangle Tool (Square)

The rectangle tool is used to create a geometric rectangle (4-sided with right-angle corners). When the tool is selected, the rectangle can be drawn clicking and holding down the mouse-pointer, then releasing. The rectangle has four points on it, each at a corner. To draw a perfect square, hold the Sablon:Kp key while drawing with the rectangle tool.

Bitmap Tools

The bitmap editor's tools are similar to the vector editor's, but instead use a grid of pixels on a region instead of spline creation. All the bitmap tool icons are pixelated. Due to not using splines, these images are pixelated and do not have as many tools available.

Paint Brush

The paint brush is a tool simply for drawing wherever the mouse-pointer is clicked. The color and size modify the display of the paint brush's pen marks. To change the brush's size, simply go to the input box next to the color menu and change it to your desired size.

Line Tool

The line tool is used for drawing straight lines. Prior to Scratch 3.0, holding Sablon:Kp would make the line perfectly horizontal or vertical. There was a bug with the Sablon:Kp feature where the line actually ended up where the mouse-pointer was, not perfectly straight. Currently, holding Sablon:Kp allows you to make lines at perfect benchmark angles (such as 90 degrees, -180 degrees, or -45 degrees).

Oval Tool (Circle)

The oval tool, commonly known as the "circle" or "ellipse" tool, is used for creating ovals of any shape and size. Just like the rectangle tool, when the oval tool is selected there will be two buttons in the bottom-left of the paint editor. The first is used to create an oval with a hollow center, and the adjacent one is used to create a solid, filled-in oval. The oval tool can also create perfect circles by holding down the Sablon:Kp key while drawing. Sablon:Note

Rectangle Tool (Square)

The rectangle tool, commonly known as the "square tool", is used for drawing rectangles (4-sided, geometric shape with all right angles). These rectangles can either be solid or transparent in the center. When the tool is selected, to the right of the color selection will be two buttons, one consisting of an outlined rectangle, and one consisting of a filled one. By default, the filled one is selected. This means that any drawn rectangle will be one solid mass. If the button consisting of the outline rectangle is selected, the shape drawn will have an open, see-through center.

Text Tool

The nine usable fonts

The text tool is used for typing text into a costume or backdrop. When the tool is selected, click anywhere on the canvas for a cursor to appear. Then, you can type in a desired text. To modify the size of the text, you must drag the small size buttons (tiny squares) to the desired measurement. You can also, with these buttons, stretch and compress your text, but this can only be done after finishing typing. However, you can only resize the text once. When typing, the text appears just like vector, but when the text is deselected, the words become pixelated. There are nine different fonts available to the right of the color selectors.

In Scratch 1.4 and before, fonts were loaded from the computer, which meant that the user could choose to use any font they please. However, this was removed in Scratch 2.0, as it included an online editor that could not load the fonts from the computer.

Paint Bucket

The paint bucket is used to fill in any closed region of a consistent color with one solid color. This can be accomplished by clicking in the desired area on the canvas. The color spreads everywhere that has the same color on it. Sablon:Caution

Eraser

The eraser tool is used to remove (or erase) a clicked area on the canvas. The colors that are erased are replaced with no color, meaning that area is see-through. Unlike the vector eraser, it does not leave an outline.

Select

The select tool (formerly the screen region grabber) is used to grab an area on the canvas and relocate, stretch and compress, or modify it in some way. This can be done by clicking and dragging around the desired area. Then, a blue box will appear around that area. If you grab the center of the dotted box with the mouse, you can move the section around. Also, you can stretch and compress it with the measurement boxes that appear around the outside. Rotate the section with the blue arrows located below the selected region.

The vector editor tools

Tips and Hints

  • The dimensions (width by height in pixels) of your costumes and backdrops are shown underneath the costume names in the costume pane.
  • The scroll bar can be used to quickly pan around an image in the paint editor. It typically will pan vertically, but if the Sablon:Kp key is held down, the scroll bar will pan about the image horizontally.
  • Costumes and backdrops can be renamed at the top by typing in the text box.
  • To zoom in or out, click on the magnifying glass tools in the bottom-right. The one with the "+" zooms in and the one with "–" zooms out. The button between them sets the zoom to 100%. Zooming in when drawing can help to create smoother lines than when zoomed out.
  • If a mistake is made, click the undo or redo button at the top.
  • To resize a sprite from the center, hold Sablon:Key press on the keyboard and resize by dragging from a corner.
  • To delete a costume, click on the "x" located at the top-right of the icon, or right-click or shift-click on the costume's icon in the costume pane and select "delete".
  • To duplicate a costume, right-click the desired costume thumbnail. From the pop-up menu, select "Duplicate".
  • To place costumes and backdrops in a desired order, drag their icons to another location in the costume pane.
  • To fill in the background of a costume or backdrop in the vector editor, create a large rectangle around the borders of the editor, and then fill the space and edges in with the desired color using the paint bucket tool.
  • Objects and pixels can be placed or drawn outside of the canvas in vector mode, although they may be cut off, as in backdrops, on the stage.
  • To break the stage edges in Scratch 2.0, meaning for a sprite to move freely past the borders, four vector shapes would be created, which are to be filled transparent, then dragged to each outermost edge of the canvas. Doing so would not physically allow the sprite to move at an infinite location off the stage but far enough to remain unseen, portraying the same sense.
  • To center your object perfectly, drag it to the center, and Scratch will align it for you.
  • Holding the shift key will create perfect circles and squares.

[4]

History

Sablon:See also The following table provides a list of publicly announced updates to the paint editor mainly on the forums. There are many other edits unspecified directly by the Scratch Team.

Year Month Day Update(s)
2020 May 18 Paint editor can now be zoomed out beyond the canvas and more of the paint editor can now be seen on different browser sizes
2020 February 13 Aligning costumes to the canvas center can now be done more precisely
2019 January 2 Paint editor updated to Scratch 3.0. The information on this page is about this version. All previous information can be found at Paint Editor (2.0).
2015 September 28 Improved color collision and undo and redo features.
2015 March 5 Added crop tool to Bitmap editor.
2013 March 27 Top button row and bottom area now adapt to size changes, paint editor fits on a 1024-wide screen, gradient on brightness slider, costume center button replaced to be in top row next to flip buttons, displays two color swatches that swap when clicked, background checker-board pattern has smaller squares like in Scratch 1.4, fixed bug where large imported costumes were not being centered correctly (the "oreo cookie" bug).
2013 March 13 Vector editor updates; added key bindings for undo (Sablon:Key press) and redo (Sablon:Key press), fixed bug where stroke would be invisible on new shapes, added Sablon:Key press / Sablon:Key press to copy and paste selections within or between costumes, added costume inserting via drag and drop from backpack into the image editor, and more miscellanous bug fixes.
2013 March 7 Vector editor updates; added a continuous color picker, added the ability to draw solid or hollow shapes, removed the eraser tool (shift-clicking on a point with reshape tool will cut a shape), moved tools to the right side, "zoom" zooms in on the currently selected/reshaped object, replaced "paint bucket" icon with "paint-brush" to differentiate behaviour of color set tool, added ablity to cut open paths by shift-clicking on path anchor points.
2013 February 21 Added ability to edit paths that are within groups, the clear button is no longer disabled when one first opens Scratch Cat, and more miscellanous bug fixes.
2013 February 9 The default stroke width was updated to 2 instead of 4, fixed bug which caused stroke width and fill attributes from one element to be erroneously applied to others while being selected, fixed bug where you could erase backdrop background strokes, fixed bug where the "clear" button would completely clear backdrops, fixed bug where you couldn't use a selection rectangle while editing a backdrop, changed the eraser icon, fixed minor bug with bisecting the backdrop background, pencil tool smooths as one draws.

Code

The Scratch Paint Editor can be used on any web browser without logging in or clicking the create button on the main site using the link from the official Scratch Github paint project. The source code for the Paint Editor can also be found on the Scratch Github repository.

See Also

References

Cookies help us deliver our services. By using our services, you agree to our use of cookies.