248 lines
13 KiB
HTML
248 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
|
|
<html>
|
|
<head>
|
|
<title>Editing individual images</title>
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body background="images/back.gif">
|
|
<!--START-->
|
|
|
|
|
|
<h3>Editing individual images</h3>
|
|
|
|
<i>Game Maker</i> has a built-in image editor that can be used to edit
|
|
individual subimages of sprites and background images. To call the editor
|
|
for a subimage of a sprite, select the subimage in the sprite editor
|
|
and choose <b>Edit Image</b> from the <b>Image</b> menu (or double click on it).
|
|
To edit a background, open the background properties for and press the button
|
|
<b>Edit Background</b>.
|
|
|
|
<p>
|
|
The built-in image editor is pretty powerful and especially suited for creating
|
|
sprites and backgrounds for <i>Game Maker</i>. However, it does not have all
|
|
the features of full-blown paint and drawing packages. The buitl-in editor
|
|
is primarily meant for making changes to images, not for creating sprites and
|
|
backgrounds from scratch. For this you probably want to use a separate paint
|
|
program, save the images as PNG files, and load them into <i>Game Maker</i>.
|
|
You can also set an external image editor in the preferences.
|
|
|
|
<p>
|
|
When you start the image editor it will typically looks as follows:
|
|
|
|
<p>
|
|
<img src="images/form_image_editor.jpg">
|
|
|
|
<p>
|
|
The form shows the image in the middle and a number of drawing tools at
|
|
the left. Below there you can set certain properties of the drawing tools.
|
|
These will change depending on the tool you select (see below). In the middle
|
|
you see the current image. You can zoom in and out using the buttons on the
|
|
toolbar. At the right there is information about the colors with which the draw.
|
|
You can set a separate color for the left and the right mouse button. You can change
|
|
these by clicking with the left or right mouse button in the color selector images.
|
|
Also you can change them by clicking in the boxes at the top that repesent the colors.
|
|
Below the colors you see the Opacity. This indicates how opaque or transparent the color is.
|
|
When you set it to 255 the pixels your draw are fully opaque. When you set it to 0
|
|
they are fully transparent. Normally when you draw partially transparent pixels they
|
|
are blended with the current color. By setting the Color Mode to Replace, the pixels
|
|
will be replaced with the new color. Finally at the bottom of the form there is a
|
|
statusbar with some infomation about the current drawing tool, the position of the mouse,
|
|
the size of the image, and the amount of memory it requires.
|
|
|
|
<h3>Drawing tools</h3>
|
|
|
|
<p>
|
|
The following drawing tools are available (from left to right, top to bottom).
|
|
|
|
<ul>
|
|
<li><b>Paint.</b>
|
|
With this tool you can paint on the image. You can use the left or right mouse
|
|
button to paint in the different colors. You can select the size of the pen.
|
|
When holding <Shift> when starting to paint you only paint horizontal or
|
|
vertical lines. When holding the <Ctrl> key you can select a new paint color.</li>
|
|
<li><b>Spray.</b>
|
|
With this tool you can spray on the image. Spray is like paint except that you use a
|
|
brush that is partially transparent at the sides. You can use the left or right mouse
|
|
button to paint in the different colors. You can select the size of the brush. You can
|
|
also select the hardness of the brush. A soft brush will be more transparent near the sides.
|
|
When holding <Shift> when starting to spray you only paint horizontal or
|
|
vertical lines. When holding the <Ctrl> key you can select a new spray color.</li>
|
|
<li><b>Erase.</b>
|
|
With this tool you can erase part the image. It looks a lot like spray but you erase
|
|
what is below the mouse. How much you erase depends on the the Opacity. For a value of
|
|
255 you erase completely. For a smaller value you only make the image a bit more
|
|
transparent. You can set the hardness of the eraser.
|
|
When holding <Shift> when starting to spray you only paint horizontal or
|
|
vertical lines.</li>
|
|
<li><b>Color Picker.</b>
|
|
With this tool you can set the left or right mouse color to the color of a pixel in the
|
|
image. Note that also the opacity value is set.</li>
|
|
<li><b>Line.</b>
|
|
With this tool you can can draw straight lines.
|
|
When holding <Shift> you can draw horizontal, vertical, or diagonal lines.
|
|
You can set the width of the line and whether is should have arrows. By selecting <b>Anti-alias</b>
|
|
the line is drawn with partially transparent pixels on the side to make it more smooth.</li>
|
|
<li><b>Polygon.</b>
|
|
With this tool you can can draw a closed polygon. You click on the position of the first vertex.
|
|
Next you can either drag the next vertex or click on the position of the next vertex. In this way
|
|
you continue. You end the polygon with the <Esc> key.
|
|
When holding <Shift> you can draw horizontal, vertical, or diagonal lines.
|
|
You can set the width of the line and whether the polygon should be filled or not.
|
|
By selecting <b>Anti-alias</b>
|
|
the polygon is drawn with partially transparent pixels on the side to make it more smooth.</li>
|
|
<li><b>Rectangle.</b>
|
|
With this tool you can can draw a rectangle.
|
|
When holding <Shift> you can draw a square.
|
|
When holding <Ctrl> you draw the rectangle from the center.
|
|
You can set the width of the line and whether the rectangle should be filled or not.
|
|
By selecting <b>Anti-alias</b>
|
|
the rectangle is drawn with partially transparent pixels on the side to make it more smooth.</li>
|
|
<li><b>Ellipse.</b>
|
|
With this tool you can can draw an ellipse.
|
|
When holding <Shift> you can draw a circle.
|
|
When holding <Ctrl> you draw the ellipse from the center.
|
|
You can set the width of the line and whether the ellipse should be filled or not.
|
|
By selecting <b>Anti-alias</b>
|
|
the ellipse is drawn with partially transparent pixels on the side to make it more smooth.</li>
|
|
<li><b>Rounded Rectangle.</b>
|
|
With this tool you can can draw a rounded rectangle.
|
|
When holding <Shift> you can draw a square.
|
|
When holding <Ctrl> you draw the rounded rectangle from the center.
|
|
You can set the width of the line and whether the rounded rectangle should be filled or not.
|
|
By selecting <b>Anti-alias</b>
|
|
the rounded rectangle is drawn with partially transparent pixels on the side to make it more smooth.</li>
|
|
<li><b>Select Region.</b>
|
|
With this tool you can can select a rectangular region. You can extend the current selection by
|
|
holding the <Shift> key. Also you can remove parts by holding the <Ctrl> key.
|
|
Once you made a selection you can pick it up with the mouse and drag it to a new position. When you
|
|
use the right mouse button you make a copy. The selection can also be cut or copied to the
|
|
clipboard. It can be deleted with the <Del> key. You can end the selection using the
|
|
<Esc> key.</li>
|
|
<li><b>Select with Magic Wand.</b>
|
|
In this case you make the selection by clicking on a pixel. All connected pixels with the same
|
|
color will be selected. You can indicate the tolerance in color valu with which to select pixels
|
|
and whether only the color or also the transparency value should match. You can extend the current selection by
|
|
holding the <Shift> key. Also you can remove parts by holding the <Ctrl> key. You can
|
|
manipulate the selection as above.</li>
|
|
<li><b>Select by Spraying.</b>
|
|
In this case you make the selection by spraying with the mouse on the image. You can set the size
|
|
of the selector. For the rest the selection can be treated as above. Different selection types
|
|
can be combined.</li>
|
|
<li><b>Text.</b>
|
|
To add a text click on the image. A pop-up window appears in which you
|
|
can enter the text. Use the # symbol to insert a newline. Once you press
|
|
<B>OK</B> the text is put in the image, with a box around it. You can now move
|
|
the text by pressing with the mouse in the box and dragging the text. You can change
|
|
the text by clicking with the right mouse button in the box. You can set the Font of the text
|
|
and how the different lines should be alligned.</li>
|
|
<li><b>Fill.</b>
|
|
Click on a pixel in the image and all connected pixels with the same color will be turned
|
|
into the new pixel. You can set the tolerance with which the color should match. Also you can
|
|
set whether to only match on the color value or also take the transparency value into account.
|
|
Not that when the Color Mode is set to Blend the fill color is blended with the existing one. To
|
|
replace it, set the Color Mode to Replace.</li>
|
|
<li><b>Change Color.</b>
|
|
Click on a pixel in the image and all pixels in the image with the same color will be turned
|
|
into the new pixel. You can set the tolerance with which the color should match. Also you can
|
|
set whether to only match on the color value or also take the transparency value into account.
|
|
Not that when the Color Mode is set to Blend the new color is blended with the existing one. To
|
|
replace it, set the Color Mode to Replace.</li>
|
|
</ul>
|
|
|
|
|
|
<p>
|
|
<h3>Menus</h3>
|
|
|
|
A number of further commands is available through the menus. For some of these there is a corresponding
|
|
button on the tool bar.
|
|
|
|
<h4>File menu</h4>
|
|
|
|
<ul>
|
|
<li><b>New.</b>
|
|
Creates a new, empty image. You must indicate the size of the image. (When the image is part of
|
|
a sprite with multiple images you cannot set the size.)
|
|
(Remember, all images in a sprite must have the same size.)</li>
|
|
<li><b>Open.</b>
|
|
Open an image from a file. This menu item is not available when the image is part of
|
|
a sprite with multiple images.</li>
|
|
<li><b>Previous Image.</b>
|
|
Only available when the image is part of
|
|
a sprite with multiple images. Saves the changes and opens the previous subimage.</li>
|
|
<li><b>Next Image.</b>
|
|
Only available when the image is part of
|
|
a sprite with multiple images. Saves the changes and opens the next subimage.</li>
|
|
<li><b>Save as PNG File.</b>
|
|
Saves the image as a PNG file. No other file formats are supported.</li>
|
|
<li><b>Close Saving Changes.</b>
|
|
Closes the form, saving the changes made to the image. If you don't
|
|
want to save the changes, click on the close button of the form.</li>
|
|
</ul>
|
|
|
|
<h4>Edit menu</h4>
|
|
|
|
Here you find the usual commands to Undo the last change and Redo the last undo, to delete, cut, or
|
|
copy the current selection to the clipboard, to paste the image on the clipboard as a selection
|
|
in the image, and to select all. (Note that when using the clipboard, transparency information might
|
|
be lost.) Two additional commands require a bit more explanation.
|
|
|
|
<ul>
|
|
<li><b>Erase to Left Color.</b>
|
|
This erases the image and replaces it by the left color (and opacity setting).</li>
|
|
<li><b>Paste from File.</b>
|
|
You can select an image from a file. This image is then pasted into the current image
|
|
as a selection. You can then move that selection to the appropriate place.</li>
|
|
</ul>
|
|
|
|
<h4>View menu</h4>
|
|
|
|
<ul>
|
|
<li><b>Zoom Out.</b>
|
|
You can zoom out to see more of the image. You can also hold the <Ctrl> key
|
|
and move the mouse scroll wheel to zoom in or out.</li>
|
|
<li><b>No Zoom.</b>
|
|
Sets the image back to the normal size.</li>
|
|
<li><b>Zoom In.</b>
|
|
You can zoom in to more precisely draw in an area of the image.</li>
|
|
<li><b>Toggle Grid.</b>
|
|
You can toggle the grid on or off. Note that the grid is only shown when you
|
|
zoom in enough.</li>
|
|
<li><b>Grid Options.</b>
|
|
Here you can set the size of the grid and the color. You can indicate whether to use exclusive
|
|
or when drawing the grid (might make it more visible) and whether the drawing should be snapped
|
|
to the grid.</li>
|
|
<li><b>Show Preview.</b>
|
|
Show a preview of the image in the right bottom corner in the normal size. This is in particular
|
|
useful when you are zooming in a lot to make small changes. If the image is larger than the preview
|
|
are you can use the mouse to drag the part of the image you want to see. You can also double click
|
|
on the preview image to open a separate preview window in which you can see the complete image.</li>
|
|
<li><b>Set Tranparency Background.</b>
|
|
Here you can indicate how the transparent area of the image should be shown in the
|
|
sprite editor. You can either use the (default) block pattern, or a color that you can change
|
|
by clicking on the color box.</li>
|
|
</ul>
|
|
|
|
<h4>Transform menu</h4>
|
|
|
|
This menu contains the same transformation commands as in the sprite editor. You can read about
|
|
their function there. Note that <b>Resize Canvas</b>, <b>Stretch</b>, and <b>Crop</b> are not
|
|
available when the image is part of a sprite with multiple images, because in that case we
|
|
cannot change the size of the image.
|
|
|
|
<h4>Image menu</h4>
|
|
|
|
This menu contains the same commands as in the sprite editor. You can read about
|
|
their function there. Note that some commands are only available in the Pro Edition.
|
|
|
|
|
|
|
|
<!--END-->
|
|
</body>
|
|
</html>
|
|
|
|
<!-- KEYWORDS
|
|
image editor
|
|
image transformations
|
|
paint program
|
|
--> |