Tutorial 1.3: Drawing Complex Shapes

(資料圖)

This tutorial follows on the previous one, and teaches you how to draw more ?complex shapes. You can either continue with the project you created in Tutorial ?1.2, or you can open a file provided for you named “Tutorial 1.2”. This file can be ?found in the “Tutorials/1 - Basics” subfolder within your custom content folder. The file ?you’re starting this tutorial with should look something like the following:

本教程在上一教程的基礎(chǔ)上，教你如何繪制更復(fù)雜的形狀。 您可以繼續(xù)使用在教程 1.2 中創(chuàng)建的項(xiàng)目，也可以打開為您提供的名為“教程 1.2”的文件。 該文件可以在自定義內(nèi)容文件夾中的“Tutorials/1 - Basics”子文件夾中找到。 您開始本教程的文件應(yīng)如下所示：

Creating a New Layer

Click the New Layer button in the Layer window to create a new layer. In the popup ?menu that appears, choose “Vector”.

單擊“圖層”窗口中的“新建圖層”按鈕以創(chuàng)建新圖層。 在出現(xiàn)的彈出菜單中，選擇“矢量”。

You can assign the name “Clouds” to the new layer when you create it, or doubleclick this new layer and rename it “Clouds” in the Layer Settings dialog.

您可以在創(chuàng)建新圖層時(shí)為其指定名稱“云”，或者雙擊此新圖層并在“圖層設(shè)置”對話框中將其重命名為“云”。

Now select the Add Point tool. Click the Reset button in the Style panel to reset the colors to their default. ?Set the line width to 1.

現(xiàn)在選擇添加點(diǎn)工具。

單擊“樣式”面板中的“重置”按鈕將顏色重置為默認(rèn)值。 將線寬設(shè)置為 1。

Click to set the start point for a new line segment. Without releasing the mouse, drag ?the cursor and release the mouse to create the end of the segment. The finished ?segment is shown below.

單擊以設(shè)置新線段的起點(diǎn)。 在不釋放鼠標(biāo)的情況下，拖動(dòng)光標(biāo)并釋放鼠標(biāo)以創(chuàng)建段的結(jié)尾。完成的段如下所示。

Next, click on the end of the new line segment and drag to stretch the curve out like ?this:

接下來，單擊新線段的末端并拖動(dòng)以將曲線拉長，如下所示：

Do this a few more times until you have the curve below:

再做幾次，直到你得到下面的曲線：

The key point to remember is in order to extend a curve, you need to click on one ?of its endpoints and then drag the mouse to where you want the new point to be. ?Remember, if you make a mistake at any time, just choose the Edit > Undo menu ?command.?

Now we’re going to add a second puff to the cloud. Move your mouse to the point ?just before the end of the previous segment. The “Auto Weld” option for the Add ?Point tool should be turned on by default. When turned on, the node will turn green

要記住的關(guān)鍵點(diǎn)是為了延長曲線，您需要單擊其端點(diǎn)之一，然后將鼠標(biāo)拖動(dòng)到您希望新點(diǎn)所在的位置。 請記住，如果您在任何時(shí)候出錯(cuò)，只需選擇“編輯”>“撤消”菜單命令。

現(xiàn)在我們要向云中添加第二次粉撲。 將鼠標(biāo)移動(dòng)到上一段結(jié)束之前的點(diǎn)。 添加點(diǎn)工具的“自動(dòng)焊接”選項(xiàng)應(yīng)默認(rèn)打開。 開啟后，節(jié)點(diǎn)會變成綠色

when you can automatically weld the new segment to the existing one. When Auto ?Fill is turned on, the cloud will automatically fill with color when the shape is closed.

Click on the second to last point in the curve, and drag down and to the right, as ?shown below. When you use the Add Point tool on a point that is in the middle of a ?curve, what happens is that you start a new curve that is automatically welded to ?that point in the first curve. These two curves are permanently joined at that point, ?which becomes important when we get to filling the shape with color. Here’s what ?your project should look like after adding the new curve segment:

單擊曲線中倒數(shù)第二個(gè)點(diǎn)，然后向下向右拖動(dòng)，如下圖所示。 當(dāng)您在曲線中間的點(diǎn)上使用添加點(diǎn)工具時(shí)，您會開始一條新曲線，該曲線會自動(dòng)焊接到第一條曲線中的該點(diǎn)。 這兩條曲線在該點(diǎn)永久連接，當(dāng)我們用顏色填充形狀時(shí)，這變得很重要。 添加新曲線段后，您的項(xiàng)目應(yīng)如下所示：

Add some points to the end of this new curve to get the shape below. Remember, ?to add a point to the end of a curve, click just on the last point of that curve.

在這條新曲線的末端添加一些點(diǎn)以獲得下面的形狀。 請記住，要在曲線的末端添加一個(gè)點(diǎn)，只需單擊該曲線的最后一個(gè)點(diǎn)。

Finally, add two or three more points at the beginning of the original curve. When ?you add the last point, drag it over to the right and line it up with the next to last ?point of the second curve before letting go of the mouse. Moho will automatically ?weld those points together and fill the cloud with color to get the final shape below:

最后，在原始曲線的開頭再添加兩個(gè)或三個(gè)點(diǎn)。 添加最后一個(gè)點(diǎn)時(shí)，將其向右拖動(dòng)并與第二條曲線的倒數(shù)第二個(gè)點(diǎn)對齊，然后松開鼠標(biāo)。 Moho 會自動(dòng)將這些點(diǎn)焊接在一起，并用顏色填充云以獲得下面的最終形狀：

Sometimes it can be hard to follow this sequence of steps - let’s take a moment to ?watch a movie of the cloud being created in Moho. Pay special attention to where ?the mouse is clicked in order to weld the two curves together.

有時(shí)可能很難遵循這一系列步驟 - 讓我們花點(diǎn)時(shí)間觀看在 Moho 中創(chuàng)建的云的電影。 請?zhí)貏e注意單擊鼠標(biāo)的位置，以便將兩條曲線焊接在一起。

We will add a line effect to make the cloud a bit softer. In the Style window, check ?the Advanced button to display the advanced style options. Select ‘Soft Edge’ from ?the Stroke Effect pop-up menu. Accept the default settings and click OK.

我們將添加線條效果，使云更柔和一些。 在樣式窗口中，選中高級按鈕以顯示高級樣式選項(xiàng)。 從“描邊效果”彈出菜單中選擇“軟邊緣”。 接受默認(rèn)設(shè)置并單擊確定。

Now would be a good time to select the File > Preview command to see what your ?final result looks like:

現(xiàn)在是選擇“文件”>“預(yù)覽”命令來查看最終結(jié)果的好時(shí)機(jī)：

A Second Cloud

Let’s make another cloud. With the Clouds layer selected, choose Edit > ?Select All from the menu. Now choose Edit > Copy, followed by Edit > Paste. ?Next, pick the Transform Points tool from the toolbar. In the working area, click and drag to the right to move the new cloud away from ?the original. (When you paste an object from the clipboard, it is positioned directly ?on top of the original.)

讓我們再做一個(gè)云。 選擇云層后，從菜單中選擇編輯 > 全選。 現(xiàn)在選擇“編輯”>“復(fù)制”，然后選擇“編輯”>“粘貼”。 接下來，從工具欄中選擇變換點(diǎn)工具。

在工作區(qū)域中，單擊并向右拖動(dòng)以將新云從原來的位置移開。 （當(dāng)您從剪貼板粘貼對象時(shí)，它直接位于原始對象的頂部。）

Use the Transform Points tool to resize this new cloud, making it larger or ?smaller than the original, as preferred (here we make ours larger)

使用變換點(diǎn)工具調(diào)整這個(gè)新云的大小，使其比原來的更大或更小，根據(jù)喜好（這里我們讓我們的更大）

The Transform Points tool can resize an object both vertically and horizontally, and ?will scale whether or not the object is selected beforehand. In this case, we don’t ?really want to change the cloud’s shape like that. With the Transform Points tool ?active, click and drag one of the corner handles that appears around the cloud, ?thus making it smaller or larger without changing its overall shape. Continue using ?the Transform Points tool until you get the new cloud in a position you like.

變換點(diǎn)工具可以在垂直和水平方向調(diào)整對象的大小，并且無論對象是否被預(yù)先選擇都會縮放。 在這種情況下，我們真的不想像那樣改變云的形狀。 激活變換點(diǎn)工具后，單擊并拖動(dòng)出現(xiàn)在云周圍的角手柄之一，從而使其變小或變大而不改變其整體形狀。 繼續(xù)使用變換點(diǎn)工具，直到您將新云置于您喜歡的位置。

To deselect all of the points in the cloud, use the Edit > Select None command, or ?press the Enter key, or click outside the cloud to de-select the points.?

Now you can use the Transform Points tool to click and drag individual points to ?reshape the second cloud.?

In this case, since only one point is selected at a time, the Transform Points tool is ?used to re-shape the cloud, not move the entire object. Just re-shape a few points ?here and there so that the two clouds don’t look exactly the same

要取消選擇云中的所有點(diǎn)，請使用“編輯”>“選擇無”命令，或按 Enter 鍵，或單擊云外以取消選擇這些點(diǎn)。

現(xiàn)在您可以使用變換點(diǎn)工具單擊并拖動(dòng)各個(gè)點(diǎn)來重塑第二個(gè)云。

在這種情況下，由于一次只選擇一個(gè)點(diǎn)，因此使用變換點(diǎn)工具來重新塑造云，而不是移動(dòng)整個(gè)對象。 只需在這里和那里重新塑造幾個(gè)點(diǎn)，使兩朵云看起來不完全相同。

Plant a Tree

Good - we’re moving right along, but this scene needs some plant life. Add a new ?layer to the project by clicking the new layer button in the Layer window. Again, ?choose “Vector” from the popup menu. Name it “Tree”.

好 - 我們正在繼續(xù)前進(jìn)，但這個(gè)場景需要一些植物生命。 通過單擊圖層窗口中的新圖層按鈕，將新圖層添加到項(xiàng)目中。 再次，從彈出菜單中選擇“矢量”。 將其命名為“樹”。

Select a brown fill color from the Style panel. Set Stroke Width to 4, and set the effect ?to .

從“樣式”面板中選擇棕色填充顏色。 將 Stroke Width 設(shè)置為 4，并將效果設(shè)置為 。

Using the Add Point tool, along with the welding feature, draw a shape that ?resembles the trunk of a tree.?

Here are a few things to remember as you go: First, you can always use the Edit > ?Undo command to back up if you make a mistake.

Second, you can switch to using the Transform Points tool to reshape part of ?the object, even if you haven’t finished drawing the whole thing yet.?

Third, the Transform Points tool lets you pick individual points by clicking on them - if ?you want to get rid of a point, but it’s too far back to use undo, select it with the ?Transform Points tool and press the backspace or delete key on your keyboard.?

Feel free to be creative with your tree trunk, you don’t really have to stick to the ?sample below.

使用添加點(diǎn)工具和焊接功能，繪制一個(gè)類似于樹干的形狀。

這里有一些事情要記?。菏紫龋绻噶隋e(cuò)誤，您可以隨時(shí)使用編輯 > 撤消命令進(jìn)行備份。

其次，您可以切換到使用變換點(diǎn)工具來重塑對象的一部分，即使您還沒有完成整個(gè)物體的繪制。

第三，變換點(diǎn)工具允許您通過單擊它們來選擇單個(gè)點(diǎn) - 如果您想擺脫一個(gè)點(diǎn)，但它太遠(yuǎn)而無法使用撤消，請使用變換點(diǎn)工具選擇它并按下退格鍵或刪除鍵 你的鍵盤。

隨意對你的樹干進(jìn)行創(chuàng)意，你不必堅(jiān)持下面的示例。

There are a few tools that may be useful when building your tree that ?haven’t been introduced yet. The Pan Workspace and Zoom ?Workspace tools can be used to move around the workspace.

Note that these tools are not used to manipulate your drawing - they just let you ?move your view so that you can focus in on a particular area of interest. To reset ?your view to its original position, select the View > Reset command from the menu ?bar.?

Another useful tool is the Curvature tool. Using this tool, you can click and ?drag on a point to adjust how round or pointy the curve is as it passes ?through that point.

在構(gòu)建樹時(shí)，有一些工具可能有用，但尚未介紹。 平移工作區(qū)和縮放工作區(qū)工具可用于在工作區(qū)中移動(dòng)。

請注意，這些工具不用于操作您的繪圖 - 它們只是讓您移動(dòng)您的視圖，以便您可以專注于特定的感興趣區(qū)域。 要將視圖重置為其原始位置，請從菜單欄中選擇視圖 > 重置命令。

另一個(gè)有用的工具是曲率工具。 使用此工具，您可以單擊并拖動(dòng)一個(gè)點(diǎn)來調(diào)整曲線通過該點(diǎn)時(shí)的圓度或尖度。

The last thing we’ll add in this tutorial is some greenery to the top of the tree. The ?shape for the treetop will be similar to the clouds, so follow similar steps to create it, ?but there is one tricky part. Because the treetop overlaps the trunk of the tree, it can?be easy to click on the wrong part and add a new point to the trunk instead of the ?treetop.

我們將在本教程中添加的最后一件事是樹頂?shù)囊恍┚G色植物。 樹梢的形狀將類似于云，因此請按照類似的步驟來創(chuàng)建它，但有一個(gè)棘手的部分。 因?yàn)闃渖遗c樹干重疊，所以很容易點(diǎn)擊錯(cuò)誤的部分并在樹干上而不是樹梢上添加一個(gè)新點(diǎn)。

有兩種方法可以避免這個(gè)問題。

?一，使用平移和縮放工具靠近樹的頂部移動(dòng)，這樣更容易避免點(diǎn)擊錯(cuò)誤的東西。

? 第二種方法是將樹梢拉到有足夠空間的一側(cè)。 然后，當(dāng)樹頂完成后，將其拖回樹頂?shù)奈恢谩?/p>

? 對于第二種方法，當(dāng)您準(zhǔn)備好將其移回原位時(shí)，使用變換點(diǎn)工具并單擊以選擇樹頂上的一個(gè)點(diǎn)。 然后使用 Edit > Select Connected 命令選擇樹梢的其余部分。 最后，將樹梢拖動(dòng)到位，如有必要，使用變換點(diǎn)工具調(diào)整其大小。

在樣式面板中選擇一個(gè)漂亮的綠葉填充顏色。 將線寬設(shè)置為 4，稍后您會看到原因。

Use the Add Point tool to draw your treetop. Here’s the kind of look we’re going for:?

使用添加點(diǎn)工具繪制樹梢。 這是我們想要的外觀：

選擇“文件”>“預(yù)覽”以查看樹梢的外觀。 注意線段的末端看起來是怎樣的方形和塊狀。 我們將使用 Moho 的可變線寬功能來解決這個(gè)問題。

退出渲染窗口并按 Enter 取消選擇樹頂中的所有點(diǎn)。

現(xiàn)在，使用線寬工具，單擊線段末端的樹梢上的每個(gè)點(diǎn)。 線寬工具影響的區(qū)域由一個(gè)半透明的紅色圓圈表示。 默認(rèn)寬度為 0.5，相當(dāng)大。 將寬度減小到 0.1 左右或更小，以便更好地控制要影響的區(qū)域。

Choose File > Preview again, and notice how the endpoints are now nicely tapered. This feature isn’t limited to endpoints - experiment with using it on other points along a curve. Also, try dragging the Line Width tool back and forth to make lines thinner or thicker.

再次選擇“文件”>“預(yù)覽”，注意端點(diǎn)現(xiàn)在是如何逐漸變細(xì)的。 此功能不僅限于端點(diǎn) - 嘗試在曲線上的其他點(diǎn)上使用它。 此外，嘗試來回拖動(dòng)線寬工具以使線條變細(xì)或變粗。

第 28 頁的“教程 1.4：骨骼設(shè)置”將介紹使用骨骼來控制角色，您將學(xué)習(xí)如何設(shè)置一些動(dòng)畫控件來使物體移動(dòng)。