Cocos2D-X独立手游开发者必修之PS与Flash基础

一、前言

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

再强调:本文旨在向游戏程序员,特别是独立游戏开发读者朋友们,证明这样一个结论:PhotoShop和Flash并不难掌握——集中投入两个月左右的时间便可基本达到够用的目的。特别是PhotoShop,简直是独立手游开发者的必需。
在本系列文章中,我将分别介绍使用这两个软件手动绘制食人花卡通形象。通过这样的实例,我想向开发者朋友介绍在使用这两款软件时的常用技术难点与技巧。然后,结合本人以前开发过的一款Cocos2D-X上手学习游戏《拇指接龙》游戏预加载场景LoadingScene中所使用的动画制作过程,向读者展示Flash传统补间动画与DragonBone结合是目前制作复杂二维卡通动画特别是骨骼动画的推荐技术。
作为补充,对于图像编辑任务来说,熟悉开源软件的开发者也可以使用如下两款著名的开源图像编辑软件来代替PhotoShop:

  • GIMP for Windows 2.8.10
  • Pixia V6.00t官方免费版

    二、 PhotoShop CS 6鼠绘技巧与示例

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

    图1 PhotoShop鼠绘目标图形
    归纳来看,使用PhotoShop绘制类似于上面这样的卡通图形,需要把握如下一些绘制要点:
    ? 使用钢笔前先调整好画笔的属性(粗细、模式等)。
    ? 在绘制出第一条路径后,按住Alt键后单击第二个顶点,实现“挑选路径”目的—这样操作后接下来其它的第二条、第三条路径……的绘制都会与绘制第一条一样灵活。
    ? 调整某段曲线弯曲程度时,应当先确定哪是始点哪是终点,然后按住Alt键同时在始点处拖动即可。
    ? Spot描边画笔粗细为4像素,画出外部椭圆后删除路径—以方便再绘制内容子路径。
    ? 取消路径绘制的方法之一是:按住Ctrl后单击图形旁边区域。
    ? 绘制复杂路径的另一种方法是:先绘制出多边形路径,再切换到“转换点工具”并结合上面技巧(Alt键)调整曲线的弯曲程度。
    绘制上述图形,还要注意如下一些技巧:
    ? 叶子与树干的绘制过程非常类似,都是绘制两个路径,进行两次填充。
    ? 在本练习过程中,建议在绘制完一个路径并使用后立即扔掉这个路径—以免与下一个路径发生混淆。
    ? 路径转换为选区的快捷键是Ctrl+ENTER。
    ? 同一条路径可以多次描边。对于一个开放路径(甚至是一块组成路径的小曲线)也可以进行描边。
    ? 在PhotoShop中同一种色彩域可以使用另一种色彩进行填充,这是填充的一种简单情形—此时不需要选择这个色彩区域。但是,对于复杂色彩构成的区域需要先进行选择,然后再填充这个选择区域。

    三、Flash CS6鼠绘技巧与示例

    作为卡通图形制作,铅笔与画刷的使用是最基本要求,在此不作赘述。与Photoshop相类似,铅笔工具的熟练使用是掌握Flash绘制的重要且颇有难度的技术。下面,我们仍然以食人花的绘制为例来介绍钢笔工具的使用技巧。
    绘制过程中,当我们自觉对比这两款软件时,你会发现对于绘制简单的卡通形象而言,Flash CS6画图看起来更直观简单,不过仍然有不少细节值得引起注意。我们不妨先来预览一下Flash绘制食人花的结果图,如图所示。

    图2 Flash绘制食人花的结果图
    下面给出绘制操作的关键过程。
    (1)启动Flash CS6,选择“文件”-“新建”,在“新建文档”对话框中选择“ActionScript 3”类型文档,然后点击“确定”创建一个空白文档,并命名为eatflower.fla。
    (2)作为入门级教程,为了有兴趣的读者学习方法,建议读者事先选择菜单“文件”-“导入”-“导入到舞台...”,把一个通过Photoshop绘制好的食人花导入到Flash当前舞台上,然后通过锁图标锁定此图层,以便从新的透明图层上更直观地重绘食人花。如图3所示。

    图3把绘制好的食人花导入到Flash当前舞台并锁定之
    (3)如上图所示,新建一个图层,并使之位于食人花层的上面。注意:图层的概念与Photoshop中极其类似,大家可以自觉对比学习。
    在图层2中,你完全可以使用铅笔、钢笔或者画笔工具来把整个食人花描绘一遍。但是,为了确保通用性和重用性,Flash中引入了“元件”的概念。借助于元件,我们可以把绘制中的许多相类似的部件仅创建一个对应的元件,并放入元件库中。之后,你可以从元件库中多次拖出该元件到舞台中,并针对每一个舞台中的元件实例进行修改。这极其类似于高级语言中的由一个类创建多个对象的情形。
    在本例中,为了读者看起来清晰,我们还是先屏蔽掉食人花层(在该层中对应“眼睛”图标列,点击圆点,使之变成“X”号即可。从开始绘制一个元件,例如花左边叶子,请参考如下步骤。
    (4)本例中我们仍然选用钢笔工具。在画面左点点击一下,然后在右边点按画笔并拖动,以便调整曲线的形状,如图4所示。

    图4 Flash钢笔绘图要点1
    (5)类似于Photoshop操作,直接点击末端点(而Photoshop中是按住Alt键并点击末端点),去掉后面一段切线(当然,绘制高手可能不必如此),如图5所示。

    图5 Flash钢笔绘图要点2
    (6)再点击画布中另一处继续绘制出另一段曲线并调整曲率,如图6所示。

    图6 Flash钢笔绘图要点3
    (7)重复上面步骤(5)后,得到图7。

    图7 Flash钢笔绘图要点4
    (8)继续上面的步骤(6),(5),(6)......,最终绘制出如图8所示的效果。注意:最后绘制结束后可以双击画面旁边空白处或者按住Ctrl键并单击旁边空白处以结束绘制。

    图8 Flash钢笔绘图要点5
    (9)接下来,再在上图内部绘制一条曲线,实现阴影效果。结果如图9所示。

    图9绘制阴影线
    (10)分别填充上下区域的颜色后即完成叶子的绘制,如图10所示。

    图10简单着色后的叶子效果
    接下来,把上面绘制的叶子转换成元件,请遵循如下步骤。
    (11)框选出上面的叶子,点击F8键,弹出“转换成元件”对话框(如图11)。

    图11 “转换成元件”对话框
    把元件命名为leaf,并选取元件类型为图形(对于另外两种元件按钮和影片剪辑,在此不作讨论),最后点击“确定”把此元件保存到库中。
    类似于以上,你可以创建花径元件、口腔元件、牙齿元件、头上花斑元件、头元件等等。注意,命名时建议使用英文或者拼音方式,而尽量避免使用中文命名。
    创建完元件组后,你便可以从元件库中根据需要多次拖出元件到舞台上来创建相应元件的实例,并对实例进行调整。最终实现食人花的绘制,如图12所示。

    图12 最终食人花的绘制效果
    【提示】通过放大屏幕,认真观察,确保端点重合(从而确保路径的闭合性,以达到填充目的)。另外,上面绘制中我们并没有使用渐变效果实现绘制,借助于Flash渐变变形功能,你能够绘制出更丰富可爱的卡通形象。
    (12)导出并保存卡通形象。因为在Cocos2d-x主要使用透明png格式图像文件(或者导入到Cocos Studio中的图像也普遍使用透明png格式)。为此,点击菜单命令“文件”-“导出”-“导出图像...”保存文件到指定位置,同时进行恰当命名(同样,为确保导入到Cocos Studio中的便利操作,要求使用字母命名)。点击“保存”后弹出如图13对话框。

    图13“导出PNG”图像对话框选项
    上图中,我们建议选择透明的32位颜色,并选择包含区域为“最小图像区域”,这样可以略去绘制过程中外围的白色部分(变为透明)。至此,整个绘制过程完满结束。

四、小结

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

————————————————————————————————————————

[附]本人拙作,欢迎光临光顾

1. https://edu.51cto.com/course/1830.html

2.Scratch高级编程专栏

3.Scratch 3.6开发水果忍者小游戏

课程地址:https://study.163.com/course/courseMain.htm?courseId=1209821813&share=2&shareId=480000002203545

4.Scratch开发《老鼠过河》小游戏

课程地址:https://study.163.com/course/courseMain.htm?courseId=1209777873&share=2&shareId=480000002203545

原文地址:https://blog.51cto.com/zhuxianzhong/2482605

时间: 2024-11-10 15:46:59

Cocos2D-X独立手游开发者必修之PS与Flash基础的相关文章

给孤军奋战独立手游开发者的5条建议

爱盈利推荐: 随着手游市场的迅速增长,越来越多的独立开发者开始从事独立研发,这其中就包括很多一个人独自在家做项目的独立开发者们,最近,一名海外独立手游开发者总结了自己几个月的独立研发生活经验,并且提出了5条建议给同样孤军奋战的独立开发者们,希望能够有所帮助: 三个月之前,我辞掉了正式的工作,为的是可以专注于<TheLastTime>的研发,这是一款叙事性的冒险游戏.在这段时间里,我意识到自己形成了一些坏习惯,不仅影响了我自己,还让周围的人感觉很不好.在业内,已经有了很多文章写独立开发者如何做到

手游精品化的第三年,谁在窃取手游开发者的利益?

WeTest导读 手游市场从2015年开始渐渐趋于平稳,"精品化"概念已经成为手游重要的发展方向.国内手游行业存在着增速放缓.流量获取成本增高的情况.这种现状意味着,一旦手游质量发生闪失,同质产品会迅速涌入抢占市场.等手游开发者意识到质量问题并把问题解决后,市场已经落入竞品之手.因此,在如此市场格局之下,把控手游品质,似乎成为了手游突出重围,稳定增长的突破口. 一.这些问题正在侵害手游开发者的利益 1.游戏崩溃.闪退 兼容性问题是手游上线前最常见的问题,目前国内很多硬件厂商,对于And

手游开发者的6条经验

摘要:对于一个独立的手游开发者来说,开启一个项目并不难,但是暂且抛开资金不足的外部客观原因不说,由于很多开发者缺乏合理的规划,或者对这款游戏的过度“关心”,而无法做出恰当的取舍,当开发者的想法越多的时候,有时候收尾也变得遥遥无期了. 如何做到合理的规划,小编给几条建议~ 选择一个有潜力的项目 对开发者来说有三种项目的游戏类型最具吸引力 *你想做的:代表了你的初心和动力. *你希望做成的:一种决心的体现. *你擅长的:增加项目成功的几率和减少项目夭折的机会. 注:记得要保证有充足的时间和资源. 

手游开发者必看:手游屡遭外挂为哪般?

网游已走过十余年的历史,期间诞生了不少经典作,也有许多游戏黯淡离去,退出这个精彩的舞台.这些淡出视线的游戏有的是未被玩家所记住,有的却是经历过辉煌,而后"香消玉殒"的作品.有一个原因,我们不得不提起,那就是外挂. "外挂"是伴随中国游戏行业发展的一颗长期存在的毒瘤,不少国内外顶级游戏大作都折损在外挂这个损人利己的敌人面前.而随着手游市场的逐渐兴起与快速发展,外挂也不无例外的向手游伸出了魔爪. 网游遭外挂,手游遭外挂,究竟为哪般?爱 加 密 小编为手游开发者剖析下手游

手游开发者交流会议暨OGEngine新版发布

由OGEngine举办的第二次手游开发者交流会议以圆桌会议方式在深圳高新园举行.会议不仅吸引了手游开发者,也有海外支付商,国内外的手游发行商参加. 会议环绕三大主题展开讨论和交流.主题分别是:手游开发技术交流暨OGEngine新版本发布:国内手游支付和发行交流以及手游开发发行交流. 活动的开始是手游开发技术相关交流.在座的有来自游戏公司的技术人员,也有开发者群里的一些热心开发者.大家分享了下各自使用OGEngine开发手游的经历和经验:宜搜游戏部门的祝总分享了他们团队如何在短短的一个月内完成从选

【诚邀各位开发者参加】2014-10-25 深圳OGEngine手游开发者交流会议

[诚邀各位开发者参加]2014-10-25 深圳OGEngine手游开发者交流会议 OGEngine手游开发者交流会议 各位开发者,OGEngine将在10.25周六举行小型手游开发者交流会议:会议以圆桌讨论,随意发言交流形式举行,欢迎开发者参与! 时间:    2014.10.25   周六下午  2:00-5:00PM 地点:    伞友咖啡-深圳南山高新区南区虚拟大学园院校产业化大楼1楼(科苑地铁站D出口) 主题:    手游开发及发行 形式:    圆桌讨论.随意交流 环节:    手游

Testbird全国巡回手游测试训练营上海站完美落幕,真人体验测试成开发者焦点

9月18日下午,由TestBird主办.上海慧谷创业科技中心协办的TestBird手游测试训练营在上海火爆上演.来自TestBird的首席测试工程师许杰威.指游方寸战略合作副总裁徐丹妮.TestBird真人体验测试产品经理陈肖宇以及Ucloud的高级架构师赵飞都发表了热情的演讲,给开发者们分享了最新最全的业内信息并带来丰富的手游测试经验.开发者们热情似火,积极参与互动,使得活动现场又一次座无虚席.氛围不断高涨. 如何进行真机兼容性测试? 来自TestBird的首席测试工程师许杰威道出了众多测试员

建一座安全的“天空城” ——揭秘腾讯WeTest如何与祖龙共同挖掘手游安全漏洞

作者:腾讯WeTest手游安全测试团队商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 <九州天空城3D>上线至今,长期稳定在APP Store畅销排行的前五,本文将介绍腾讯WeTest手游安全团队在游戏上线前为<九州天空城3D>挖掘安全漏洞的全过程. <九州天空城3D>(下文简称<九州>)是祖龙娱乐的一款正版授权次世代3D飞行手游,在8月,正式向全平台开放.作为一个前身是端游研发工作室的研发商,祖龙娱乐在<九州>

工具分享:GameplayKit苹果手游开发工具简析

6月9日WWDC2015大会上,苹果宣布iOS 9将推出两个非常重要的手游开发工具GameplayKi和ReplayKit,这两个工具对于iOS手游开发者及欧美游戏视频相关领域可能会产生比较大的影响.GameplayKit开发工具极有可能成为今后iOS手游开发的主流工具,小爱在这里向大家简单介绍下这款工具,有兴趣的iOS开发者可以尽早get新技能. GameplayKit是什么? GameplayKit是一款帮助新手开发者们在OS X和iOS平台创作游戏的基础工具和技术框架,它能提供游戏资源.模