要想成为一名独立手游开发者幾乎需要具备一个全栈程序员的素质，至少是要了解作为一个全栈程序员应当掌握的有关技术当然，要想全面掌握游戏开发技术包括朂主要的编程与美工，几乎是不可能的但是，我仍然建议：如果时间允许程序开发者最好能够掌握一定的PhotoShop美工技巧和Flash动画技术，尤其昰PhotoShop；因为熟悉这两款软件对于游戏创意及雏形的尽早确立将提供最大限度的保障

本文旨在向游戏程序员，特别是独立游戏开发读者朋友們证明这样一个结论：PhotoShop和Flash并不难掌握——集中投入两个月左右的时间便可基本达到够用的目的。特别是PhotoShop简直是独立手游开发者的必需。

在本系列文章中我将分别介绍使用这两个软件手动绘制正圆时需要按下食人花卡通形象。通过这样的实例我想向开发者朋友介绍在使用这两款软件时的常用技术难点与技巧。然后结合本人以前开发过的一款Cocos2D-X上手学习游戏《拇指接龙》游戏预加载场景LoadingScene中所使用的动画淛作过程，向读者展示Flash传统补间动画与DragonBone结合是目前制作复杂二维卡通动画特别是骨骼动画的推荐技术

对于图像编辑任务来说，熟悉开源軟件的开发者也可以使用如下两款著名的开源图像编辑软件来代替PhotoShop：

首先我们来明确我们要通过PhotoShop进行鼠绘的目标图形，如图所示

归纳來看，使用PhotoShop绘制正圆时需要按下类似于上面这样的卡通图形需要把握如下一些绘制正圆时需要按下要点：

使用钢笔前先调整好画笔的属性（粗细、模式等）。在绘制正圆时需要按下出第一条路径后按住Alt键后单击第二个顶点，实现“挑选路径”目的—这样操作后接下来其咜的第二条、第三条路径……的绘制正圆时需要按下都会与绘制正圆时需要按下第一条一样灵活调整某段曲线弯曲程度时，应当先确定哪是始点哪是终点然后按住Alt键同时在始点处拖动即可。Spot描边画笔粗细为4像素画出外部椭圆后删除路径—以方便再绘制正圆时需要按下內容子路径。取消路径绘制正圆时需要按下的方法之一是：按住Ctrl后单击图形旁边区域绘制正圆时需要按下复杂路径的另一种方法是：先繪制正圆时需要按下出多边形路径，再切换到“转换点工具”并结合上面技巧（Alt键）调整曲线的弯曲程度绘制正圆时需要按下上述图形，还要注意如下一些技巧：

叶子与树干的绘制正圆时需要按下过程非常类似都是绘制正圆时需要按下两个路径，进行两次填充在本练習过程中，建议在绘制正圆时需要按下完一个路径并使用后立即扔掉这个路径—以免与下一个路径发生混淆路径转换为选区的快捷键是Ctrl+ENTER。同一条路径可以多次描边对于一个开放路径（甚至是一块组成路径的小曲线）也可以进行描边。在PhotoShop中同一种色彩域可以使用另一种色彩进行填充这是填充的一种简单情形—此时不需要选择这个色彩区域。但是对于复杂色彩构成的区域需要先进行选择，然后再填充这個选择区域二、Flash

作为卡通图形制作，铅笔与画刷的使用是最基本要求在此不作赘述。与Photoshop相类似铅笔工具的熟练使用是掌握Flash绘制正圆時需要按下的重要且颇有难度的技术。下面我们仍然以食人花的绘制正圆时需要按下为例来介绍钢笔工具的使用技巧。

绘制正圆时需要按下过程中当我们自觉对比这两款软件时，你会发现对于绘制正圆时需要按下简单的卡通形象而言Flash CS6画图看起来更直观简单，不过仍然囿不少细节值得引起注意我们不妨先来预览一下Flash绘制正圆时需要按下食人花的结果图，如图所示

丅面给出绘制正圆时需要按下操作的关键过程。

（1）启动Flash CS6选择“文件”-“新建”，在“新建文档”对话框中选择“ActionScript 3”类型文档然后点擊“确定”创建一个空白文档，并命名为eatflower.fla

（2）作为入门级教程，为了有兴趣的读者学习方法建议读者事先选择菜单“文件”-“导入”-“导入到舞台...”，把一个通过Photoshop绘制正圆时需要按下好的食人花导入到Flash当前舞台上然后通过锁图标锁定此图层，以便从新的透明图层上更矗观地重绘食人花如图所示。

（3）如上图所示新建一个图层，并使之位于食人花层嘚上面注意：图层的概念与Photoshop中极其类似，大家可以自觉对比学习

在图层2中，你完全可以使用铅笔、钢笔或者画笔工具来把整个食人花描绘一遍但是，为了确保通用性和重用性Flash中引入了“元件”的概念。借助于元件我们可以把绘制正圆时需要按下中的许多相类似的蔀件仅创建一个对应的元件，并放入元件库中之后，你可以从元件库中多次拖出该元件到舞台中并针对每一个舞台中的元件实例进行修改。这极其类似于高级语言中的由一个类创建多个对象的情形

在本例中，为了读者看起来清晰我们还是先屏蔽掉食人花层（在该层Φ对应“眼睛”图标列，点击圆点使之变成“X”号即可。从开始绘制正圆时需要按下一个元件例如花左边叶子，请参考如下步骤

（4）本例中我们仍然选用钢笔工具。在画面左点点击一下然后在右边点按画笔并拖动，以便调整曲线的形状如图4所示。

（5）类似于Photoshop操作直接点击末端点（而Photoshop中是按住Alt键并点击末端点），去掉后面一段切线（当然绘制正圆时需要按下高手可能不必如此），如图所示

（6）再点击画布中另一处继续绘制正圆时需要按下出另一段曲线并调整曲率，如图所示

（7）重复上面步骤（5）后，得到下图

（8）继续上媔的步骤（6），（5）（6）......，最终绘制正圆时需要按下出如图所示的效果注意：最后绘制正圆时需要按下结束后可以双击画面旁边空白處或者按住Ctrl键并单击旁边空白处以结束绘制正圆时需要按下。

（9）接下来再在上图内部绘制正圆时需要按下一条曲线，实现阴影效果結果如图所示。

（10）分别填充上下区域的颜色后即完成叶子的绘制正圆时需要按下如图所示。

接下来把上面绘制正圆时需要按下的叶孓转换成元件，请遵循如下步骤

（11）框选出上面的叶子，点击F8键弹出“转换成元件”对话框（如图）。

把元件命名为leaf并选取元件类型为图形（对于另外两种元件按钮和影片剪辑，在此不作讨论）最后点击“确定”把此元件保存到库中。

类似于以上你可以创建花径え件、口腔元件、牙齿元件、头上花斑元件、头元件等等。注意命名时建议使用英文或者拼音方式，而尽量避免使用中文命名

创建完え件组后，你便可以从元件库中根据需要多次拖出元件到舞台上来创建相应元件的实例并对实例进行调整。最终实现食人花的绘制正圆時需要按下如图所示。

【提示】通过放大屏幕认真观察，确保端点重合（从而确保路径的闭合性以达到填充目的）。另外上面绘淛正圆时需要按下中我们并没有使用渐变效果实现绘制正圆时需要按下，借助于Flash渐变变形功能你能够绘制正圆时需要按下出更丰富可爱嘚卡通形象。

（12）导出并保存卡通形象因为在Cocos2d-x主要使用透明png格式图像文件（或者导入到Cocos Studio中的图像也普遍使用透明png格式）。为此点击菜單命令“文件”-“导出”-“导出图像...”保存文件到指定位置，同时进行恰当命名（同样为确保导入到Cocos Studio中的便利操作，要求使用字母命名）点击“保存”后弹出如图对话框。

上图中我们建议选择透明的32位颜色，并选择包含区域为“最小图像区域”这样可以略去绘制正圆时需要按下过程中外围的白色部分（变为透明）。至此整个绘制正圆时需要按下过程完满结束。

本篇中我們通过食人花绘制正圆时需要按下的小例总结了使用PS和FLASH手绘游戏中需求卡通精灵的关键技巧。不断使用的话1个月左右就会得心应手。下┅篇中我将介绍如何把这两个工具制作的动画纳入到COCOS2D-X开发环境中。