如何使用 Scratch 3 绘制矢量图形

使用 Scratch 的矢量绘图应用为你的视频游戏创建新对象。
214 位读者喜欢这篇文章。
Python game screenshot

OpenGameArt.org

Scratch 是一款流行的可视化编程语言,用于创建视频游戏和动画。它还具有矢量绘图工具,任何人都可以使用它来创建独特的游戏资源和艺术作品。

Scratch 1.0 是用 Smalltalk 编写的,这是一种极其易于破解的编程语言,允许用户查看软件的幕后。它在各个平台上都很流行,甚至被 Raspberry Pi 基金会fork 以获得扩展支持。

Scratch 3.0 已从头开始重写。它基于 HTML5 和 JavaScript,这意味着它在平板电脑或手机上的运行效果与在笔记本电脑或台式机上一样好。

什么是矢量?

矢量绘图与使用普通绘图应用程序绘图不同。无论放大或缩小多少,矢量图像看起来都很平滑。没有像素化。矢量在任何尺寸下都能创建平滑且完成的产品。

在 Scratch 中,游戏中可玩的角色称为 精灵 (sprites)。Scratch 有一个预制精灵库,可用于项目,但你也可以使用内置的绘图程序或内置的矢量应用程序绘制自己的精灵。

如何吃掉一头大象

使用矢量绘图不需要绘画技巧。与其一次性绘制一个对象,不如将其分解为单独的形状。寻找圆形、椭圆形、三角形和矩形。使用照片或要绘制对象的活体模型可能会有所帮助。

我将通过解释如何绘制苹果来演示在 Scratch 中绘制矢量精灵的所有要点,但你可以将此方法应用于你想要创建的任何对象。

绘图工具

Scratch 的矢量绘图工具箱是你找到绘制对象所需工具的地方

Scratch tools

这里有一些与矢量图形绘图相关的词汇

  • 画布 (Canvas):你绘制的地方;白色和灰色棋盘格是透明的
  • 节点 (Node):对象路径上的一个点,它决定了对象的形状
  • 对象 (Object):画布上的圆形、正方形或线条
  • 箭头工具 (Arrow tool):使用此工具抓取、调整大小和旋转对象
  • 节点工具 (Node tool):使用此工具添加、移动和选择节点

入门

要开始绘图,请打开 Web 浏览器并导航到 Scratch.mit.edu。如果你正在使用 Scratch Desktop,请打开该应用程序。

要打开一个新项目,请从顶部菜单中选择 创建 (Create)。要打开 Scratch 的矢量绘图应用程序,请单击蓝色的 Scratch 猫图标,然后选择画笔图标。这将创建一个新的精灵画布。

Selecting the paintbrush icon to open the vector drawing app

有两种创建自定义精灵的方法

  • 要创建全新的精灵,请使用并组合工具箱中的任何绘图工具。
  • 要更改现有精灵的外观,请单击右下角的精灵图标使其处于活动状态,然后单击工具箱中的箭头工具,单击画布上的精灵,并进行所需的更改。

警告:如果你单击绘图屏幕底部的 转换为位图 (Convert to Bitmap) 按钮,你的插图将变成像素化的位图图像,并且你将无法将其恢复为矢量。

绘制苹果形状

  1. 选择一个空的精灵画布,然后选择 圆形 (Circle) 工具。通过单击空白画布并拖动鼠标来创建一个圆。按住 Shift 键的同时执行此操作将创建一个完美的圆。
  2. 要更改圆的颜色,请选择 箭头 (Arrow) 工具,单击圆以选中它,然后单击 填充 (Fill) 下的下拉菜单。这将打开用于更改形状的颜色、饱和度和亮度的选项。

    – 如果你希望形状是透明的,请选择带有红色对角线的白色框,将颜色设置为“无 (none)”。

    – 如果你希望在对象周围添加或删除彩色边框,请选择 轮廓 (Outline) 下的下拉菜单。
    Changing the fill color
  3. 选择 节点 (Node) 工具。单击对象的中心以选中它。你将看到四个节点均匀地分布在圆的边缘周围。

    Node tool



    移动任何节点都会改变圆的形状。你可以通过单击圆的边缘来添加更多节点。如果你移动节点过多或意外添加了节点,你可以通过单击屏幕顶部的后退箭头图标来撤消上一步操作。你也可以按 Ctrl+Z 撤消。

  4. 苹果通常底部比顶部小。单击并拖动穿过两个侧面节点以选中它们。节点在被选中时会变成蓝色。

    Dragging to select multiple nodes



    选中节点后,按键盘上的向上箭头键将节点向上移动到圆的顶部。

    Moving nodes with the Up arrow
  5. 在圆的底部添加两个节点——一个在原始底部节点的左侧,另一个在右侧。稍微向上抬起原始底部中心节点以创建一个凹痕。

    Editing nodes
  6. 现在以类似的方式在圆的顶部添加两个节点。稍微向下降低原始顶部中心节点以创建一个凹痕。
  7. 继续调整和添加节点,直到你对苹果形状感到满意为止。

绘制茎

  1. 选择 矩形 (Rectangle) 工具。在画布上你想要茎的位置创建一个细长的矩形。
  2. 使用 节点 (Node) 工具来塑造矩形的形状,使其类似于茎。将填充更改为你想要的颜色。
  3. 使用箭头工具选择茎。要将茎移动到苹果后面,请单击画布上方的 后退 (Backward) 按钮。

    Creating the apple stem

添加高光形状

  1. 选择 线条 (Line) 工具。通过将每条新线与前一条线的末端连接起来,在苹果形状上绘制一个三角形。这将使线条变成一个完整的形状。
  2. 使用 箭头 (Arrow) 工具选择三角形,并使用 填充 (Fill) 工具将其更改为较浅的颜色,例如白色。
  3. 使用 节点 (Node) 工具添加和调整节点以创建高光形状。如果节点太尖锐,你可以将它们更改为弯曲的。选择要弯曲的节点,然后单击 弯曲 (Curved) 按钮。

    – 专家提示:要一次选择多个节点,请在选择每个节点时按住 Shift 键。
    Drawing the highlight shape

就这样,你已经绘制了一个可以无限缩放的苹果。

 

如果你想在 Scratch 之外使用你的图像,请右键单击服装缩略图并选择导出 (export)。这会将你的绘图下载为 .svg 文件。

Export a vector to a svg file

opensource.com

要在 Scratch 项目中使用该图像,请返回代码选项卡。你的新精灵将出现在右上角,与项目的其余精灵一起。在你的 Scratch 项目中使用它,在 Scratch 网站上与其他 Scratch 用户分享它,最重要的是——用矢量绘制更多酷炫的东西。

接下来阅读什么
User profile image.
Jess Weichler 是一位数字艺术家,他使用开源软件和硬件在数字世界和物理世界中创作作品,网址为 CyanideCupcake.com。

9 条评论

在使用 Scratch 3 创建游戏时,我也喜欢绘制自己的背景... 感谢你分享关于如何在 Scratch 3 中绘制矢量的步骤。

Nhick

非常欢迎!很高兴你发现 Scratch 3 对创建你的视频游戏背景很有用。感谢你的阅读和评论!

回复 ,作者 SocialNic

我很欣赏你努力分享关于使用开源工具创作的艺术主题的信息。这很有帮助,并且看到其他艺术家也关心开源令人鼓舞!请继续发布!

你的文章非常有趣。但我有一个问题,Scratch 3 矢量图形可以在其他程序中打开吗?

这是一个很好的问题!是的,无论是保存为 .png 还是 .svg,在 Scratch 中创建的矢量图形都可以在 Inkscape 等其他程序中打开。

回复 ,作者 brankaspedia

我在网上找到了很多关于 Java Script 的课程

你的文章非常有趣。

谢谢 Martin,很高兴你觉得它有用!

回复 ,作者 Martin Dynon

感谢分享,这太有帮助了!

Creative Commons License本作品根据 Creative Commons Attribution-Share Alike 4.0 International License 获得许可。
© . All rights reserved.