怎么制作游戏?我想做一个关于动作网页游戏的小网页...

当前位置: &
简单做好游戏中“攻击动作”的3个窍门
  随着手游市场的竞争日趋激烈,产品重度化的倾向也是越来越明显,而说到重度手游的话那就不得不提到“动作”。但由于市场发展的特殊性,国内的开发者大多精于数字方面的计算而不善于制作人物动作,这也是国内手游行业很少出现精品动作类手游的原因之一。
  最近看到一篇日本格斗游戏制作者分享的游戏制作心得,作者在文章中提到“人物与地面接触的意识”、“动作的纵深性”、“一个动作拆分成三个关键点”,这三个敲门能够帮助开发者简单地做好人物动作。下面是原文的编译:
  经过4年MUGEN(一款由美国的Elecbyte小组使用C语言与Allegro程序库开发的免费的2D格斗游戏引擎)角色制作之后我发现,在角色动作设计上有一些很实用的窍门,通过这些点你可以很简单地制作出非常棒的人物攻击动作。
  今天我要介绍的3个窍门分别是:
  1.要有人物与地面接触的意识
  2.人物动作要有纵深性
  3.一个动作中要包含三个小动作
  从设计层面来说这些都是很单纯的内容,在很多精于人物动作设计的人看来这些内容或许没有什么价值。但对于那些还没有意识到的、正在踌躇怎么样才能做好人物动作的设计者们来说,这些内容一定会对你有所帮助。
  要有人物与地面接触的意识
  人物的摇晃和位移是动作设计中常见两种问题,这类问题很多时候都是由于设计者将动作中心放在武器、手部、腿部这些攻击动作的主体上所导致的。
  解决这个问题最有效的方法是,将人物接触地面的部分固定下来,然后再来制作动作。
  上面这组动作中,左脚的脚跟是整个攻击动作的轴心,然后从轴心开始、结合身体各个部位的位置关系就能比较简单地制作出一套“下劈”动作了。
  实际操作中我们按照脚掌-膝盖-腰部-胸部这样顺序,从下半身开始制作的话就能在很大程度上减少甚至避免人物动作的偏移。
  人物动作要有纵深性
  看到“纵深性”这三个字,或许很多人脑海中浮现的都是三次元的立体感、充满跃动感的动作。
  当然,这些都是“动作”的魅力所在,如果能够画出这种效果的话那是再好不过。不过我想说的实际上是更简单的“纵深性”,我们来看看下面这组动作。
  我们可以看到,在上面这个动作中,人物的左边的手和脚(不是左手左脚)都隐藏到了另一边手脚的后面。而且重复使用这种方法也不是什么很费力的事,因为被遮挡的部位越多实际作画的面积就越少。
  我所要说的“纵深性”实际上就是这么个东西,这个“点”说穿了非常简单,而且实际动作设计中有大量动作都用到这个方法。现在请你回想一下,你所设计的人物动作是否因为执着于四肢的正面表现
  一个动作中要包含三个小动作
  在不考虑“寸劲”这种高级技巧的情况下,人的动作所产生的力量通常与力臂的长度成正比(绝大多数攻击是加速度动作,所以加速度的距离越长,速度也就越快,力量自然越大)。所以很多格斗游戏中轻攻击一般有启动快、收招快、攻击力低的特点,而重攻击则启动慢、收招慢、攻击力大(实际上现实生活中也是如此)。
  但如果只是在必要的部位和动作速度上进行调整的话,那人物动作就会显得非常无聊。这里我建议大家将一个动作拆解出三个小动作。
  摆架----发力----定格
  我们来看一下下面这组动作。
  如果只是为了张开双手的话,最初的交叉动作似乎没什么意义,但实际上人物正是通过第一个交叉动作来保证发力的距离。而且仔细观察你还可以发现,人物腿部的动作实际上要比手部的动作慢一拍。拆解开来的话,双手交叉=摆架、双手打开=发力、腿部动作=定格。第一个例子中“下劈”也采用相同的设计思路。
  虽然这个方法会在一定程度上增加动作的时间以及制作的成本,但以人物动作的表现力来说这种看似“舍近求远”的方法往往能够达到更好的表现效果。
发送邮件至【第一手游网新闻邮箱 】,精彩手游资讯尽在掌握
相关阅读:
新闻头条:
下载第一手游APP
抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活 &&《健康游戏忠告》热门游戏:
当前位置: >
> 六大基本功教你如何做一个牛逼的媒介
六大基本功教你如何做一个牛逼的媒介
来源:游戏陀螺&&&&日期: 16:34:54
摘要:那手游媒介的工作职责是什么呢?对此,我自己也尝试着总结了手游媒介的六大基本功,只有这六项基本功你 都一一攻克了,我想,此时的你便是一个绝对够格的媒介!
首先,我想问下大家,什么是手游媒介呢?经过我多方考察学术资料,含义大概是这样。手游圈的媒介:从字面上的意思看,是充分了解游戏媒体的运作规律
及编辑需求,并在传播策划的基础上,将自己公司信息或者游戏产品信息准确的传递给媒体,最终将事先策划好的信息变成媒体的新闻、攻略、评测、礼包、发号、
专区、专访、论坛活动等传播形式,我们称这种工作的人为手游媒介。
那手游媒介的工作职责是什么呢?纵观各大手游企业的招聘信息,我们可以总结出这样的规律:1.根据公司游戏产品制定媒介执行计划;2.发布公司游戏
产品新闻、预约媒体重点位置;3.监测媒体效果,括新闻回链收集、软性配合、专区活动等;4.了解手游媒体,并拥有丰富的媒体资源及良好的关系;5.负责
公司品牌宣传,有危机处理能力等。了解了“手游媒介职责”,这也清晰了本文的思路,对此,我自己也尝试着总结了手游媒介的六大基本功,只有这六项基本功你
都一一攻克了,我想,此时的你便是一个绝对够格的媒介!
手游媒介基本功一:挑战自己
媒介,本身就是沟通多的工作种类,不像文案、不像研发,顾好自己便可全盘交差!对于新媒介来说,挑战自己是需首要攻克的难题,万丈高楼起于平地,靠
得是坚实的地基,手游媒介也是如此,挑战自己就如同地基一样,地基打不好,日子一长终究会被无形的压力压垮,就像本文开头介绍的妹子。在挑战自己的过程
中,多数人还没尝到甜头就放弃了,所以此章节又分为两小项“提高心里素质”及“掌握行业知识”分别介绍,手游媒介如何挑战自己!
提高心里素质
很多新入行的媒介或者做了几年的媒介,有时联系媒体都会有一种莫名其妙的恐惧感,生怕打搅人家的工作生活、生怕被媒体拒绝。如果你不主动,你便会错
过一个又一个的机会,也会觉着媒体离你越来越远!如果你想成为一名优秀的手游媒介,这时候,请你放下身架,放下你的小情绪与敏感,勇敢的走出去,与媒体进
行广泛的沟通。挑战自己,就是挑战自己的心里,这是你媒介工作的一个初步的台阶瓶颈,只有不断在行业里日积月累,你才会发现当初的恐惧与懦弱是多么的可
掌握行业知识
知识好比自己的底气,知识越多底气越足!而手游媒介对基础知识的了解尤其重要,这便是媒介妹子与媒体沟通的话题、沟通的资本。媒介妹子可以多到行业
媒体学习干货。当然精力充沛的话,可以自己整理一份行业名词,无论是渠道的、投放的、媒体的、市场的、产品的,都可以整理出来,保存在手机里,这样你就可
以随时随地的充电学习!挑战自己,从基础学起,点点滴滴,日积月累,相信不用三月你便是媒介小达人!
手游媒介基本功二:了解媒体
对手游媒体的了解程度,直接影响媒介妹子的工作质量,那到底是不是呢?从媒体诞生之日起,媒体就深深了落下了自己的属性,过去对于媒体的分类大致为
电视媒体、广播媒体、平面媒体、网络媒体,但随着互联网时代的崛起,网络媒体的地位愈发凸显,所以针对手游媒介来说,往往日常工作基本都是与手游行业的网
络媒体打交道。对媒体了解越深,你就越有把握利用每个媒体的优势,充分宣传自家的手游产品,这就是了解媒体的重要性!
了解媒体属性
媒体的属性,其实就是媒体的定位。手游圈媒体一共就那么多家,但凡哪家能发展壮大,那么必然有它的特色所在,了解媒体特色就是了解媒体属性!从大类
来说,手游媒体分为TOC媒体及TOB媒体,TOC媒体受众是广泛的手游玩家,TOB媒体受众是手游圈的从业者,所以在推广游戏产品时,你需要与TOC的
媒体合作;在包装公司发行实力、技术实力时,你需要与TOB媒体合作。对于TOC媒体,你需要去了解每家的特色、例如每家媒体的UV、PV是多少?每家媒
体投放广告的效果?每家媒体礼包发放效果?每家论坛活动的效果?每家微信发布的效果等,这只能通过你的媒介实施计划一步步去验证,相信了解了媒体的属性,
你的媒介工作就已经到了一个层次!
了解媒体功能
如果说,手游媒体的属性是自身的特色,那媒体的功能就是它核心的卖点!新闻、评测、攻略、入库、发号是现阶段TOC媒体基本功能,以此基础上,又延
展出视频解说、视频攻略、视频介绍、游戏专题、论坛专区、游戏推荐、美图欣赏等,所以了解TOC媒体功能,你就能知道与媒体合作点及推广方式!那对于
TOB媒体来说,除了常规的游戏圈新闻、资讯、专访外,很多媒体又开展了各有特色功能,例如开放日活动、沙龙活动、产品demo秀、产品投资引荐、行业招
聘等,这些细分也让你在包装公司品牌的时有的放矢!
手游媒介基本功三:建设媒体
手游媒介前两基本功都是为后续的基本功做铺垫的,所以媒介妹子们,请先戒骄戒躁,按照自己的职业规划一步步的去实施!建设媒体,作为媒介的专属职能,如何有效的开拓媒体资源,如何维护媒体关系是本节的重点!
开拓媒体资源
新入行的媒介妹子,总是有时候哭着喊着向你问道:XX家的主编有联系方式有木有,还附带个委屈的表情!这其实就是开拓媒体资源的一种方式,那如何高
效的开拓呢?根据我的经验可分为:1.根据媒体网站寻找联系方式,无论是哪家媒体,必定会在自己的网站上留有***或者QQ,只要你细心绝对可以找到关键人
物!2.行业人打听,手游圈总有比你资源多的前辈,多虚心打听,这必定是极好的方式!3.行业媒体名录,手游圈的小伙伴,通常会分享给你她制作的媒体名
录,这时候你不要窃喜,因为名录毕竟只是个名录,距离成为你的资源还很远!
维护媒体关系
开拓媒体只是为了后续合作,那合作的顺畅与否、免费与否还得看媒介妹子与媒体哥哥们的关系,当然最重要的是,看你是否了解每家媒体的利益点!维护媒
体第一层是保姆式,意思是甘愿做媒体的厂商小助理,媒体需要啥你就提供啥,目的只有一个为了获得媒体的信任与好感!第二层是销售式,到达第二层面的媒介,
一般都是很了解媒体的规律与特色,媒体有困难媒介会用各种方式去帮助,利用空档期去请客吃饭喝酒,节日会送出代表公司的小礼物等!第三层为朋友式,媒介与
媒体到了朋友地步,基本上是无话不谈,从价值观、爱好、乡情方面找到共鸣,以保持与媒体私下密切的沟通,这时候媒体与媒介双方互助,或形影不离!第四层为
策略式,到了这个层面的媒介,一般都是总监以上的级别了,媒介们熟悉手游市场推广的流程,可与媒体站在公司与公司的层面上进行合作交流,对于媒体来说,企
业是新闻来源,对于企业来说,媒体是新闻传播途径。
手游媒介基本功四:媒介计划
我之前碰到过做媒介很多年的人,一直很努力的在做执行,竟然连媒介计划都不知道,更不知道如何去策划!其实这个现场很普遍也和合情合理,对于企业来
说媒介计划一般都不会单独策划,是放在年度市场计划中一起策划出来的,因为媒介作为个体是无法单独完成手游的市场推广工作的!那今天正好在这里分享下手游
媒介如何制定媒介计划?
确定媒介目标
手游媒介制定准确的目标,方才能有的放矢,例如利用手游媒体你要达到一个什么样的宣传效果,通过媒介工作,游戏达到一个什么样的指标,这个是媒介目标!
制定媒介策略
媒介策略包括确定目标人群,根据目标人群确定手游媒体的选择,根据手游媒体选择确定与媒体合作的方式,是专区、是发包、是论坛活动、还是什么,这些
策略需要根据你对媒体的理解与产品的特性的理解来制订,如何利用这些媒体资源最大化的宣传你家游戏产品,这个是需要你去考虑的!
制定执行方案
根据媒介策略来撰写执行方案,从时间点出发,以天为单位进行规划媒介执行的事情!制定执行方案可直接使用数据图标,使执行人员对在某一期内所需要处理的工作有一个全面的了解!
手游媒介基本功五:媒介推广
无论是了解媒体、还是开拓媒体、还是制定媒介计划,无非都是为了推广产品或包装公司品牌形象做准备,以便更顺利的开展工作,那今天我就根据媒介日常
工作,会碰到的具体事项进行解读,因为大多数公司媒介工作,既肩负着产品营销的工作还要肩负着公司品牌建设的工作,所以本小节分为游戏产品推广及公司品牌
游戏产品推广
●游戏收录:收录通常是手游媒介工作的第一步,大致做法是媒体为该款手游制作主题站,其中包含游戏新闻、攻略、介绍、截图、公告、礼包、下载等,以
便让用户更为全面的了解该款游戏,但作为条件,媒体一般会要求在该游戏官网加入友情链接,游戏企业提供必要的素材,以支撑媒体收录!
●游戏新闻:手游的市场推广中,新闻营销绝对是必不可少的重要一环,游戏新闻也称之为游戏软文,是由手游企业市场部撰写的“文字广告”,主要目的是
在潜移默化中宣传自家游戏产品,赢得口碑或导入更多用户。新闻种类分为新闻、介绍、评测、攻略、心得、更新、公告、开服、礼包、活动等形式,具体可参考我
博客中之前撰写的《手游文案指南----手游新闻类型知多少?》一文!
●游戏发号:手游发号,其实是沿用端游营销的方式,通常是游戏企业给到媒体通用的或者独家的激活码、新手礼包、节日礼包等形式的序列号,以拉动玩家注册。发号一般都是配合新闻炒作同时进行的,数量可多可少,可根据运营活动单独定制!
●预约重点:手游媒介在发布新闻的时候,通常会和媒体编辑预约重点新闻,意思是媒体将妹子家的新闻推荐到首页焦点图或者置顶加亮,多数媒体会要求新闻质量,目前来说手游媒体预约重点新闻会有固定的时间,这个需要媒介去实践操作!
●游戏活动:游戏厂商通常会联系媒体,一起举办评测活动、互动活动、运营活动、节日活动、庆祝活动等。由游戏企业提供礼品或者资源,由媒体提供举办活动场所,例如论坛、专区等,目的是活跃玩家、媒体炒作,通常也是需要提前预约!
公司品牌推广
●企业新闻:企业包装通常离不开新闻曝光,新闻可以说企业的活动新闻、企业会议新闻、企业领导专访新闻、企业战略新闻、企业声明新闻、企业营销新闻等,目的都是包装企业品牌,提升手游企业的知名度,彰显企业技术示例,为渠道合作、游戏推广、争抢研发游戏、争抢IP做准备!
●企业参展:每年手游圈的各种大会确实不少,例如上方网大会、GMGC大会、chinajoy大会、媒体开发日、手游沙龙等,一家新手游企业如果想迅速出名,最好的做法是参加手游行业大会,并且邀请企业领导人做干货演讲,相信圈里知名度会迅速提高!
手游媒介基本功六:为人处事
●切忌傲慢不逊 目空一切:大公司的手游媒介,很可能会傲慢不逊,似乎常理的对小媒体爱搭不理,给媒体造成严重的心里落差,其实大可不必,手游圈子就这么大,风雨飘荡,几年后说不定他就是你的领导,所以多为自己积德,放下身段,怀着一颗平常心去交流!
●穿着举止谈吐到位:手游媒介是游戏公司对外宣传的接口人,时时刻刻代表着公司的品牌形象,所以时刻需要注意自己的言谈举止,嘴要甜,平常不要吝惜
你的喝彩声。好的夸奖,会让人产生愉悦感,但不要过头到令人反感!而媒介穿着好坏直接影响公司品牌形象,不求华丽高端只求朴素整洁!
●居安思危 奋进好学:手游媒介,尤其是有过2-3年经验的老同事,总觉得这几年一路顺风顺水,这时候你要多家小心了,时刻保持一颗清醒的心态,保持奋进好学的态度,这样你才不会在人才的涛涛江海中被淘汰!
●宽宏大方 友爱互助:做手游媒介,免不了经常聚会,大方一点,不会大方就学大方一点,如果大方真的让你很心痛,那就装大方一点;把媒体当作朋友,一方有难八方支援,友爱互助,只有这样,媒介妹子才能走的更长更久!
●信守承诺 手高眼低:我见过很多媒介妹子特别的浮躁,觉得做了2年的媒介,似乎可以顶上一个市场总监,其实不然,做事踏踏实实,要手高眼低,对于承诺的一定要努力做到,当然不要把别人对你的承诺一直记在心上并信以为真。
●空杯心态 善待人事:手游媒介和人交流多了,什么事情烦事、烂事都可能遇到,更应该怀有一颗平常心,没什么大不了的,好事要往坏处想,坏事要往好处想,做到待上以敬,待下以宽。
●严己律人
善于分享:手游媒介做到一定级别,会管理一个团队,对自己更应该严格要求,以做表率。在总结工作时要把错误都揽在自己身上,把功劳都记在下属身上。当上司
和下属同时在场时要记得及时表扬你的下属,批评一定要在只有你们两个人的情况下才能进行。要时刻保持分享的态度,与同事或下属分享你的成功果实及经验,不
要吝惜,因为帮助同事成长是一件最大的福利善事!
相信媒介妹子们看了手游媒介的六大基本功,也会有所顿悟,此时的我想起几年前在我的博客写的一段话,作为结尾送给大家:人生最重要的并不是努力,而
是方向,是在充满诱惑和迷茫的路途中,还能保持清醒的自己。压力并不是有人比你有钱、比你努力,而是比你牛B几倍的人依然比你努力。即使迷茫的你看不到希望、看不到未来,也不要随波逐流,安逸享乐的过完一生。因为第二天叫醒我的不止是闹钟,还有我的梦想!
将此文分享给好友
相关阅读:
由于欧盟委员会即将对发起反垄断指控,因此该公司将面临..
虽然玩手游的人在增加是现实,靠手游提高收益的公司也存..
虽然页游有着五年的黄金时期,但自从手游出现之后,在后..
记者日前从国家新闻出版广电总局数字出版司召开的网络游..
“任天堂不做手机游戏!”在数月之前,任天堂的社长岩田..
很多家长将电子游戏视为洪水猛兽,认为玩儿游戏会耽误青..
近日,成立刚满三年的UCloud正式对外宣布,已经完..
“主机游戏没落论”想必大家也不是第一次听到了,最近日..
约翰?范尼斯(Yoan Fanise)为全球知名游戏..
离职对于我来说是预料之中的,好像是我计划了的,但又不..快速上手:制作第一个游戏
快速上手:制作第一个游戏
您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程,但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法,这一章将满足您的好奇心。完成本章教程之后,您应该能获得足够上手制作游戏的信息,不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。
接下来就让我们开始吧,跟随教程我们将会制作一款名叫摘星星的坑爹小游戏。这款游戏的玩家要操作一个反应迟钝却蹦跳不停的小怪物来碰触不断出现的星星,难以驾驭的加速度将给玩家带来很大挑战,和您的小伙伴比比谁能拿到更多星星吧!
可以在这里感受一下这款游戏的完成形态:
准备项目和资源
我们已经为您准备好了制作这款游戏需要的全部资源,下载初始项目后,解压到您希望的位置,之后我们就可以开始了:
您也可以下载最终完成的项目,跟随教程制作过程中有任何不明白的地方都可以打开完成版的项目作为参考:
打开初始项目
如果您还不了解如何获取和启动 Cocos Creator,请阅读一节。
我们首先启动 Cocos Creator,然后选择打开其他项目
在弹出的文件夹选择对话框中,选中我们刚下载并解压完成的 start_project,点击打开按钮
Cocos Creator 编辑器主窗口会打开,我们将看到如下的项目状态
检查游戏资源
我们的初始项目中已经包含了所有需要的游戏资源,因此您不需要再导入任何其他资源。如果希望了解导入资源的方法,可以阅读的相关内容。
下面我们先来了解一下项目中都有哪些资源,请关注名为资源管理器的面板,这里显示的是项目中的所有资源树状结构。
可以看到,项目资源的根目录名叫assets,对应我们解压之后初始项目中的 assets 目录,只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。
资源管理器可以显示任意层次的目录结构,我们可以看到这样的图标就代表一个文件夹,点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后,资源管理器中就会呈现如下图的状态。
每个资源都是一个文件,导入项目后根据扩展名的不同而被识别为不同的资源类型,其图标也会有所区别,下面我们来看看项目中的资源各自的类型和作用:
声音文件,一般为 mp3 文件,我们将在主角跳跃和得分时播放名为jump和score的声音文件。
位图字体,由 fnt 文件和同名的 png 图片文件共同组成。位图字体(Bitmap Font)是一种游戏开发中常用的字体资源,详情请阅读
各式各样的缩略图标,这些都是图像资源,一般是 png 或 jpg 文件。图片文件导入项目后会经过简单的处理成为texture类型的资源。之后就可以将这些资源拖拽到场景或组件属性中去使用了。
创建游戏场景
在 Cocos Creator 中,游戏场景(Scene)是开发时组织游戏内容的中心,也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容:
场景图像和文字(Sprite,Label)
以组件形式附加在场景节点上的游戏逻辑脚本
当玩家运行游戏时,就会载入游戏场景,游戏场景加载后就会自动运行所包含组件的游戏脚本,实现各种各样开发者设置的逻辑功能。所以除了资源以外,游戏场景是一切内容创作的基础,让我们现在就新建一个场景。
在资源管理器中点击选中assets目录,确保我们的场景会被创建在这个目录下
点击资源管理器左上角的加号按钮,在弹出的菜单中选择Scene
我们创建了一个名叫New Scene的场景文件,右键点击它并选择重命名,将它改名为game。
双击game,就会在场景编辑器和层级编辑器中打开这个场景。
了解Canvas
打开场景后,层级管理器中会显示当前场景中的所有节点和他们的层级关系。我们刚刚新建的场景中只有一个名叫Canvas的节点,Canvas可以被称为画布节点或渲染根节点,点击选中Canvas,可以在属性检查器中看到他的属性。
这里的Design Resolution属性规定了游戏的设计分辨率,Fit Height和Fit Width规定了在不同尺寸的屏幕上运行时,我们将如何缩放Canvas以适配不同的分辨率。
由于提供了多分辨率适配的功能,我们一般会将场景中的所有负责图像显示的节点都放在Canvas下面。这样当Canvas的scale(缩放)属性改变时,所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。
更详细的信息请阅读。目前我们只要知道接下来添加的场景图像都会放在Canvas节点下面就可以了。
设置场景图像
首先在资源管理器里按照assets/textures/background的路径找到我们的背景图像资源,点击并拖拽这个资源到层级编辑器中的Canvas节点上,直到Canvas节点显示橙色高亮,表示将会添加一个以background为贴图资源的子节点。
这时就可以松开鼠标按键,可以看到Canvas下面添加了一个名叫background的节点。当我们使用拖拽资源的方式添加节点时,节点会自动以贴图资源的文件名来命名。
我们在对场景进行编辑修改时,可以通过主菜单文件-&保存场景来及时保存我们的修改。也可以使用快捷键Ctrl+S(Windows)或Cmd + S(Mac)来保存。
修改背景尺寸
在 场景编辑器 中,可以看到我们刚刚添加的背景图像,下面我们将修改背景图像的尺寸,来让他覆盖整个屏幕。
首先选中background节点,然后点击主窗口左上角工具栏第四个 矩形变换工具:
使用这个工具我们可以方便的修改图像节点的尺寸,将鼠标移动到 场景编辑器 中 background 的左边,按住并向左拖拽直到 background 的左边超出表示设计分辨率的蓝色线框。然后再用同样的方法将 background 的右边向右拖拽。
之后需要拖拽上下两边,使背景图的大小能够填满设计分辨率的线框。
在使用 矩形变换工具 修改背景图尺寸时,可以在 属性检查器 中看到 Node (节点)中的 Size 属性也在随之变化,完成后我们的背景图尺寸大概是 ()。您也可以直接在 Size 属性的输入框中输入数值,和使用 矩形变换工具 可以达到同样效果。这样大小的背景图在市面流行的手机上都可以覆盖整个屏幕,不会出现穿帮情况。
我们的主角需要一个可以在上面跳跃的地面,我们马上来添加一个。用和添加背景图相同的方式,拖拽 资源管理器 中 assets/textures/ground 资源到 层级管理器 的 Canvas 上。这次在拖拽时我们还可以选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到 background 节点的下方,直到在 Canvas 上显示橙色高亮框,并同时在 background 下方显示表示插入位置的绿色线条,然后松开鼠标,这样 ground 在场景层级中就被放在了 background 下方,同时也是 Canvas 的一个子节点。
在层级管理器中,显示在下方的节点的渲染顺序会在上方节点的后面,我们可以看到位于最下的ground物体在场景编辑器中显示在了最前。另外子节点也会永远显示在父节点之前,我们可以随时调整节点的层级顺序和关系来控制他们的显示顺序。
按照修改背景的方法,我们也可以使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候,如果拖拽节点顶点和四边之外的部分,就可以更改节点的位置。下图是我们设置好的地面节点状态:
除了矩形变换工具之外,我们还可以使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽,就可以一次改变节点在单个坐标轴上的位置。
我们在设置背景和地面的位置和尺寸时不需要很精确的数值,可以凭感觉拖拽。如果您偏好比较完整的数字,也可以按照截图直接输入position和size的数值。
接下来我们的主角小怪兽要登场了,从资源管理器拖拽assets/texture/PurpleMonster到层级管理器中Canvas的下面,并确保他的位置在ground下面,这样我们的主角会显示在最前面。
为了让主角的光环在场景节点中非常醒目,我们右键点击刚刚添加的PurpleMonster节点,选择重命名之后将其改名为Player。
接下来我们要对主角的属性进行一些设置,首先是改变锚点(Anchor)的位置。默认状态下,任何节点的锚点都会在节点的中心,也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果,所以现在我们需要把主角的锚点设置在脚下。在属性检查器里找到Anchor属性,把其中的y值设为0,可以看到场景编辑器中,表示主角位置的移动工具的箭头出现在了主角脚下。
接下来场景编辑器中拖拽Player,把他放在地面上,效果如下图:
这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。
编写主角脚本
Cocos Creator 开发游戏的一个核心理念就是让内容生产和功能开发可以流畅的并行协作,我们在上个部分着重于处理美术内容,而接下来就是通过编写脚本来开发功能的流程,之后我们还会看到写好的程序脚本可以很容易的被内容生产者使用。
如果您从没写过程序也不用担心,我们会在教程中提供所有需要的代码,只要复制粘贴到正确的位置就可以了,之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。
首先在资源管理器中右键点击assets文件夹,选择新建-&文件夹
右键点击New Folder,选择重命名,将其改名为scripts,之后我们所有的脚本都会存放在这里。
右键点击scripts文件夹,选择新建-&JavaScript,创建一个JavaScript脚本
将新建脚本的名字改为Player。双击这个脚本,打开代码编辑器。
注意: Cocos Creator 中脚本名称就是组件的名称,这个命名是大小写敏感的!如果组件名称的大小写不正确,将无法正确通过名称使用组件!
编写组件属性
打开的脚本里已经有了预先设置好的一些代码块,这些代码就是编写一个组件脚本所需的结构。具有这样结构的脚本就是 Cocos Creator 中的组件(Component),他们能够挂载到场景中的节点上,提供控制节点的各种功能。我们先来设置一些属性,然后看看怎样在场景中调整他们。
在代码编辑器中找到Player脚本里 properties部分,将其改为以下内容并按Ctrl + S(Windows)或Cmd + S(Mac)保存:
properties: {
jumpHeight: 0,
jumpDuration: 0,
maxMoveSpeed: 0,
这些新增的属性将规定主角的移动方式,在代码中我们不需要关心这些数值是多少,因为我们之后会直接在属性检查器中设置这些数值。
现在我们可以把 Player 组件添加到主角节点上。在 层级编辑器 中选中 Player 节点,然后在 属性检查器 中点击 添加组件 按钮,选择 添加用户脚本组件-&Player,为主角节点添加 Player 组件。
现在我们可以在 属性检查器 中(需要选中 Player 节点)看到刚添加的 Player 组件了,按照下图将主角跳跃和移动的相关属性设置好:
这些数值除了 jumpDuration 的单位是秒之外,其他的数值都是以像素为单位的,根据我们现在对 Player 组件的设置:我们的主角将能够跳跃 200 像素的高度,起跳到最高点所需的时间是 0.3 秒,最大水平方向移动速度是 400 像素每秒,水平加速度是 350 像素每秒。
这些数值都是建议,一会等游戏运行起来,您完全可以按照自己的喜好随时在属性检查器中修改这些数值,不需要改动任何代码,很方便吧!
编写跳跃和移动代码
下面我们添加一个方法,来让主角跳跃起来,在 properties: {...},代码块的下面,添加叫做setJumpAction的方法:
properties: {
setJumpAction: function () {
var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
},这里用到了一些 Cocos2d-js 引擎中的 Action 来实现主角的跳跃动画,详情可以查询.
接下来在onLoad方法里调用刚添加的setJumpAction方法,然后执行runAction来开始动作:
onLoad: function () {
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
},onLoad方法会在场景加载后立刻执行,所以我们会把初始化相关的操作和逻辑都放在这里面。
保存脚本,然后我们就可以开始第一次运行游戏了!
点击 Cocos Creator 编辑器上方正中的预览游戏按钮,Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏,现在应该可以看到我们的主角----紫色小怪兽在场景中间活泼的蹦个不停了。
只能在原地傻蹦的主角可没前途,让我们为主角添加键盘输入,用A和D来控制他的跳跃方向。在setJumpAction方法的下面添加setInputControl方法:
setJumpAction: function () {
setInputControl: function () {
var self = this;
cc.eventManager.addListener({
event: cc.EventListener.KEYBOARD,
onKeyPressed: function(keyCode, event) {
switch(keyCode) {
case cc.KEY.a:
self.accLeft = true;
self.accRight = false;
case cc.KEY.d:
self.accLeft = false;
self.accRight = true;
onKeyReleased: function(keyCode, event) {
switch(keyCode) {
case cc.KEY.a:
self.accLeft = false;
case cc.KEY.d:
self.accRight = false;
}, self.node);
},然后修改onLoad方法,在其中加入向左和向右加速的开关,以及主角当前在水平方向的速度,最后再调用我们刚添加的setInputControl方法,在场景加载后就开始***键盘输入:
onLoad: function () {
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
this.accLeft = false;
this.accRight = false;
this.xSpeed = 0;
this.setInputControl();
},最后修改update方法的内容,添加加速度、速度和主角当前位置的设置:
update: function (dt) {
if (this.accLeft) {
this.xSpeed -= this.accel *
} else if (this.accRight) {
this.xSpeed += this.accel *
if ( Math.abs(this.xSpeed) & this.maxMoveSpeed ) {
this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
this.node.x += this.xSpeed *
},update在场景加载后就会每帧调用一次,我们一般把需要经常计算或及时更新的逻辑内容放在这里。在我们的游戏中,根据键盘输入获得加速度方向后,就需要每帧在update中计算主角的速度和位置。
保存脚本后,下面就可以去泡杯茶,点击预览游戏来看看我们最新的成果。在浏览器打开预览后,用鼠标点击一下游戏画面(这是浏览器的限制,要点击游戏画面才能接受键盘输入),然后就可以按A和D键来控制主角左右移动了!
感觉移动起来有点迟缓?主角跳的不够高?希望跳跃时间长一些?没问题,这些都可以随时调整。只要为Player组件设置不同的属性值,就可以按照您的想法调整游戏。这里有一组设置可供参考:
Jump Height: 150
Jump Duration: 0.3
Max Move Speed: 400
Accel: 1000这组属性设置会让主角变得灵活无比,至于如何选择,就看您想做一个什么风格的游戏了。
主角现在可以跳来跳去了,我们要给玩家一个目标,也就是会不断出现在场景中的星星,玩家需要引导小怪兽碰触星星来收集分数。被主角碰到的星星会消失,然后马上在随机位置重新生成一个。
制作Prefab
对于需要重复生成的节点,我们可以将他保存成Prefab(预制)资源,作为我们动态生成节点时使用的模板。关于Prefab的更多信息,请阅读。
首先从资源管理器中拖拽assets/textures/star资源到场景中,位置随意,我们只是需要借助场景作为我们制作 Prefab 的工作台,制作完成后会我们把这个节点从场景中删除。
我们不需要修改星星的位置或渲染属性,但要让星星能够被主角碰触后消失,我们需要为星星也添加一个专门的组件。按照和添加Player脚本相同的方法,添加名叫Star的JavaScript脚本到assets/scripts/中。
接下来双击这个脚本开始编辑,星星组件只需要一个属性用来规定主角距离星星多近时就可以完成收集,修改properties,加入以下内容:
properties: {
pickRadius: 0
},保存脚本后,将这个脚本添加到刚创建的star节点上。然后在属性检查器中把Pick Radius属性值设为60:
Star Prefab 需要的设置就完成了,现在从层级管理器中将star节点拖拽到资源管理器中的assets文件夹下,就生成了名叫star的 Prefab 资源。
现在可以从场景中删除star节点了,我们会在脚本中动态使用星星的 Prefab 资源生成星星。
添加游戏控制脚本
星星的生成是游戏主逻辑的一部分,所以我们要添加一个叫做Game的脚本作为游戏主逻辑脚本,这个脚本之后还会添加计分、游戏失败和重新开始的相关逻辑。
添加Game脚本到assets/scripts文件夹下,双击打开脚本。首先添加生成星星需要的属性:
properties: {
starPrefab: {
default: null,
type: cc.Prefab
maxStarDuration: 0,
minStarDuration: 0,
default: null,
type: cc.Node
default: null,
type: cc.Node
},保存脚本后将Game组件添加到层级编辑器中的Canvas节点上(选中Canvas节点后,拖拽脚本到 属性检查器 上,或点击 属性检查器 的 添加组件 按钮,并从 用户自定义脚本 中选择 Game,接下来从资源管理器中拖拽star Prefab 资源到Game组件的Star Prefab属性中。这是我们第一次为属性设置引用,只有在属性声明时规定type为引用类型时(比如我们这里写的cc.Prefab类型),才能够将资源或节点拖拽到该属性上。
接下来从层级编辑器中拖拽ground和Player 节点到组件中相同名字的属性上,完成节点引用。
然后设置Min Star Duration和Max Star Duration属性的值为3和5,之后我们生成星星时,会在这两个之间随机取值,就是星星消失前经过的时间。
在随机位置生成星星
接下来我们继续修改Game脚本,在onLoad方法后面添加生成星星的逻辑:
onLoad: function () {
this.groundY = this.ground.y + this.ground.height/2;
this.spawnNewStar();
spawnNewStar: function() {
var newStar = cc.instantiate(this.starPrefab);
this.node.addChild(newStar);
newStar.setPosition(this.getNewStarPosition());
getNewStarPosition: function () {
var randX = 0;
var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
var maxX = this.node.width/2;
randX = cc.randomMinus1To1() * maxX;
return cc.p(randX, randY);
}保存脚本以后点击预览游戏按钮,在浏览器中可以看到,游戏开始后动态生成了一颗星星!用同样的方法,您可以在游戏中动态生成任何预先设置好的以 Prefab 为模板的节点。
添加主角碰触收集星星的行为
现在要添加主角收集星星的行为逻辑了,这里的重点在于,星星要随时可以获得主角节点的位置,才能判断他们之间的距离是否小于可收集距离,如何获得主角节点的引用呢?别忘了我们前面做过的两件事:
Game组件中有个名叫player的属性,保存了主角节点的引用。
每个星星都是在Game脚本中动态生成的。
所以我们只要在Game脚本生成Star节点实例时,将Game组件的实例传入星星并保存起来就好了,之后我们可以随时通过game.player来访问到主角节点。让我们打开Game脚本,在spawnNewStar方法最后面添加这样一句:
spawnNewStar: function() {
newStar.getComponent('Star').game = this;
},保存后打开Star脚本,现在我们可以利用Game组件中引用的player节点来判断距离了,在onLoad方法后面添加名为getPlayerDistance和onPicked的方法:
getPlayerDistance: function () {
var playerPos = this.game.player.getPosition();
var dist = cc.pDistance(this.node.position, playerPos);
onPicked: function() {
this.game.spawnNewStar();
this.node.destroy();
},然后在update方法中添加每帧判断距离,如果距离小于pickRadius属性规定的收集距离,就执行收集行为:
update: function (dt) {
if (this.getPlayerDistance() & this.pickRadius) {
this.onPicked();
},保存脚本,然后再次预览测试,可以看到控制主角靠近星星时,星星就会消失掉,然后在随机位置生成了新的星星!
小怪兽辛辛苦苦的收集星星,没有奖励怎么行,让我们现在就在收集星星时添加得分奖励的逻辑和显示。
添加分数文字(Label)
游戏开始时得分从0开始,每收集一个星星分数就会加1。要显示得分,首先要创建一个 Label 节点。在层级管理器中选中Canvas节点,右键点击并选择菜单中的创建新节点-&创建渲染节点-&Label(文字),一个新的 Label 节点会被创建在Canvas下面,而且顺序在最下面。接下来我们要用如下的步骤配置这个 Label 节点:
将该节点名字改为score
将score节点的位置(position属性)设为(0, 180)。
选中该节点,编辑Label组件的string属性,填入Score: 0的文字。
将Label组件的Font Size属性设为50。
从资源管理器中拖拽assets/mikado_outline_shadow位图字体资源(注意图标是)到Label组件的Font属性中,将文字的字体替换成我们项目资源中的位图字体。
完成后效果如下图所示:
在 Game 脚本中添加得分逻辑
我们将会把计分和更新分数显示的逻辑放在Game脚本里,打开Game脚本开始编辑,首先在properties区块的最后添加分数显示 Label 的引用属性:
properties: {
scoreDisplay: {
default: null,
type: cc.Label
},接下来在onLoad方法里添加计分用的变量的初始化:
onLoad: function () {
this.score = 0;
},然后在update方法后面添加名叫gainScore的新方法:
gainScore: function () {
this.score += 1;
this.scoreDisplay.string = 'Score: ' + this.score.toString();
},保存 Game 脚本后,回到 层级管理器,选中 Canvas 节点,然后把前面添加好的 score 节点拖拽到 属性检查器 里 Game 组件的 Score Display 属性中。
在 Star 脚本中调用 Game 中的得分逻辑
下面打开Star脚本,在onPicked方法中加入gainScore的调用:
onPicked: function() {
this.game.spawnNewStar();
this.game.gainScore();
this.node.destroy();
},保存后预览,可以看到现在收集星星时屏幕正上方显示的分数会增加了!
失败判定和重新开始
现在我们的游戏已经初具规模,但得分再多,不可能失败的游戏也不会给人成就感。现在让我们加入星星定时消失的行为,而且让星星消失时就判定为游戏失败。也就是说,玩家需要在每颗星星消失之前完成收集,并不断重复这个过程完成玩法的循环。
为星星加入计时消失的逻辑
打开Game脚本,在onLoad方法的spawnNewStar调用之前加入计时需要的变量声明:
onLoad: function () {
this.timer = 0;
this.starDuration = 0;
this.spawnNewStar();
this.score = 0;
},然后在spawnNewStar方法最后加入重置计时器的逻辑,其中this.minStarDuration和this.maxStarDuration是我们一开始声明的Game组件属性,用来规定星星消失时间的随机范围:
spawnNewStar: function() {
this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
this.timer = 0;
},在update方法中加入计时器更新和判断超过时限的逻辑:
update: function (dt) {
if (this.timer & this.starDuration) {
this.gameOver();
this.timer +=
},最后加入gameOver方法,游戏失败时重新加载场景。
gameOver: function () {
this.player.stopAllActions();
cc.director.loadScene('game');
}对Game脚本的修改就完成了,保存脚本,然后打开Star脚本,我们需要为即将消失的星星加入简单的视觉提示效果,在update方法最后加入以下代码:
update: function() {
var opacityRatio = 1 - this.game.timer/this.game.starD
var minOpacity = 50;
this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
}保存Star脚本,我们的游戏玩法逻辑就全部完成了!现在点击预览游戏按钮,我们在浏览器看到的就是一个有核心玩法、激励机制、失败机制的合格游戏了。
尽管很多人玩手游的时候会无视声音,我们为了教程展示的工作流程尽量完整,还是要补全加入音效的任务。
首先加入跳跃音效,打开Player脚本,添加引用声音文件资源的jumpAudio属性:
properties: {
jumpAudio: {
default: null,
url: cc.AudioClip
},然后改写setJumpAction方法,插入播放音效的回调,并通过添加playJumpSound方法来播放声音:
setJumpAction: function () {
var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
var callback = cc.callFunc(this.playJumpSound, this);
return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
playJumpSound: function () {
cc.audioEngine.playEffect(this.jumpAudio, false);
},得分音效
保存Player脚本以后打开Game脚本,来添加得分音效,首先仍然是在properties中添加一个属性来引用声音文件资源:
properties: {
scoreAudio: {
default: null,
url: cc.AudioClip
},然后在gainScore方法里插入播放声音的代码:
gainScore: function () {
this.score += 1;
this.scoreDisplay.string = 'Score: ' + this.score.toString();
cc.audioEngine.playEffect(this.scoreAudio, false);
},保存脚本,回到层级编辑器,选中Player节点,然后从资源管理器里拖拽assets/audio/jump资源到Player组件的Jump Audio属性上。
然后选中Canvas节点,把assets/audio/score资源拖拽到Game组件的Score Audio属性上。
这样就大功告成了!完成形态的场景层级和各个关键组件的属性如下:
现在我们可以尽情享受刚制作完成的游戏了,您能打到多少分呢?别忘了您可以随时修改Player和Game组件里的移动控制和星星持续时间等游戏参数,来快速调节游戏的难度。修改组件属性之后需要保存场景,修改后的数值才会被记录下来。
恭喜您完成了用 Cocos Creator 制作的第一个游戏!希望这篇快速入门教程能帮助您了解 Cocos Creator 游戏开发流程中的基本概念和工作流程。如果您对编写和学习脚本编程不感兴趣,也可以直接从完成版的项目中把写好的脚本复制过来使用。
接下来您还可以继续完善游戏的各方各面,以下是一些推荐的改进方向:
加入简单的开始菜单界面,在游戏运行的一开始显示开始按钮,点击按钮后才会开始游戏
为游戏失败加入简单的菜单界面,游戏失败后点击按钮才会重新开始
限制主角的移动不能超过视窗边界
为主角的跳跃动作加入更细腻的动画表现
为星星消失的状态加入计时进度条
收集星星时加入更华丽的效果
为触屏设备加入输入控制
以上这些方向都得到改善的游戏版本可以下载 来参考和学习,这里就不再赘述了。
此外如果希望将完成的游戏发布到服务器上分享给好友玩耍,可以阅读一节的内容。
今天的教程就到这里了,您可以立刻开始制作您的第二款 Cocos Creator 游戏,或者继续阅读本手册。关于本快速开始教程的任何问题,都可以在提交反馈。
说明文档。
沪ICP备号-5

参考资料

 

随机推荐