游戏制作：从图形到编程的全流程指南

### 游戏制作：从图形到编程的全流程指南 在学习了一系列技能后，你已经具备了制作真正游戏的能力。接下来，我们将逐步引导你使用已掌握的技术制作一款简单的视频游戏——对象收集游戏，玩家需要在 10 秒计时器结束前收集并拆除五颗炸弹。 #### 1. 所需游戏图形 游戏需要五张 PNG 图像，具体信息如下表所示： | 图像名称 | 宽度 | 高度 | | ---- | ---- | ---- | | character.png | 50px | 50px | | box.png | 50px | 50px | | bomb.png | 40px | 30px | | background.png | 550px | 400px | | gameOver.png | 300px | 150px | 你可以根据喜好设计这些 PNG 文件，只要名称和尺寸符合要求，就能与游戏程序兼容。这里我们将使用 Adobe Illustrator CS5.0 来制作这些图形，后续会逐步介绍具体方法。 #### 2. 熟悉 Adobe Illustrator 初次启动 Adobe Illustrator 时，你会发现它的工具和工作区与 Photoshop 相似，但实际上存在很大差异，如面板位置、概念和键盘快捷键等。不要将它与 Photoshop 混淆，应将其视为一个全新的程序，从头开始学习。 Illustrator 主要用于制作矢量图形，与基于像素的 Photoshop 不同。矢量图形由线条构成，可任意缩放而不损失分辨率。完成绘制后，你可以选择将图形保存为 PNG（基于像素）或 SWF（基于矢量）文件，二者均可用于 Flash 游戏。PNG 图形对 Flash Player 处理器的压力较小，而 SWF 图形可任意缩放且不失真，你可以根据个人喜好选择。 在这个项目中，我们使用像素作为单位。通过以下操作设置： - **Windows 系统**：选择“Edit” -> “Preferences” -> “Units”。 - **OS X 系统**：选择“Illustrator” -> “Preferences”，然后选择“Units”，将“General”选项改为“Pixels”。 #### 3. 设置工作区 启动 Illustrator 并创建一个名为“box”的新文档，具体参数设置如下： - **名称**：box - **宽度**：50 px - **高度**：50 px - **单位**：Pixels - **颜色模式**：RGB（若看不到该选项，点击“Advanced”按钮使其可见） 颜色模式选择 RGB 是因为它适用于投影光的媒体，如电脑显示器和电视屏幕，是游戏开发中常用的颜色模式。而 CMYK 主要用于印刷图像。 “Align New Objects to Pixel Grid”选项可将图形精确对齐到像素网格，对于小尺寸图像制作可能会有些繁琐，但对于追求像素级精确的图形非常重要，可根据需要选择。 点击“OK”后，会出现一个空白的绘图区域——画板，类似于 Photoshop 中的画布。你可以在画板周围的灰色区域进行技术或元素的实验，但这些内容不会出现在最终图像中。若需要更改画板大小或属性，可点击工具栏中的“Artboard Tool”，然后在控制面板中进行操作。Illustrator 还允许选择不同的工作区，默认工作区为“Essentials”，若面板布局混乱，可通过“Window” -> “Workspace”或点击控制面板右上角的“Essentials”按钮恢复默认布局。 #### 4. 选择颜色 选择合适的颜色可能会有困难，Illustrator 提供了预设的颜色样本供你选择。在工作区右侧的面板栏中找到“Swatches”面板，打开后可看到基本的样本。点击面板右上角的菜单按钮，选择“Open Swatch Library”，会出现多种颜色样本组合，你可以根据喜好选择。例如，为这个项目选择“Kids Stuff”，它包含适合视频游戏的明亮、欢快的颜色。 #### 5. 绘制外部形状 接下来，我们开始绘制游戏盒子的外部形状，这是一个带有内发光效果的绿色矩形，具体步骤如下： 1. 从工具栏中选择“Rectangle Tool”。 2. 点击工具栏中的前景色选择器，然后选择一个绿色样本。将描边（轮廓）颜色设置为无，点击工具栏中的描边颜色选择器，再点击带有红色条纹的小按钮，成功设置后描边颜色会显示红色条纹。 3. 同时按住鼠标左键和 Shift 键，从画板的左上角拖动到右下角，绘制一个实心绿色正方形，填充整个画板。按住 Shift 键使用矩形工具可绘制完美的正方形。 4. 确保矩形仍处于选中状态（若未选中，使用黑色箭头工具重新选择），选择“Effect” -> “Stylize” -> “Inner Glow”，打开内发光窗口。选中“Preview”选项，并设置以下参数： - **模式**：Normal - **不透明度**：80 - **模糊**：9px - **中心** 参数设置可根据个人喜好调整，直到达到满意的效果。若需要更改效果或其他视觉属性，可选中对象并打开“Appearance”面板进行修改。 #### 6. 绘制内部形状 内部形状是一个带有圆角的正方形，我们将用半透明渐变填充它，并添加投影效果，使其看起来悬浮在外部正方形上方，具体步骤如下： 1. 从工具栏中选择“Rounded Rectangle Tool”。 2. 点击工作区顶部控制面板中的“Preferences”按钮，将“Corner Radius”设置为 8px，然后点击“OK”。你也可以在绘制矩形时通过键盘上下箭头键交互式更改圆角半径。 3. 在第一个矩形上绘制一个任意大小的圆角矩形，填充颜色不限，但不要有描边颜色。 4. 确保新矩形仍处于选中状态，在控制面板的 X、Y、W（宽度）和 H（高度）字段中输入以下值： - **X**：25 - **Y**：25 - **W**：35 - **H**：35 这样可以精确设置正方形的大小并将其居中。此时画板上有两个绘图对象，若使用黑色箭头双击其中一个对象，Illustrator 会切换到隔离模式，方便你专注处理该对象，再次双击对象外部可退出隔离模式。 接下来，我们用半透明渐变填充新正方形： 1. 打开“Gradient”面板，将“Swatches”面板中的浅蓝色样本拖动到渐变预览左侧的颜色停止点，将黑色样本拖动到右侧的颜色停止点，将渐变中点滑块向右移动约 75%。