微信号:Gad-GameDev

介绍:专业的游戏人社区(GAD.QQ.COM):为游戏开发者提供学习指导、问题解决、队员招募、游戏孵化等服务.免费组件下载、专业知识学习、组队游戏制作、项目孵化渠道.

【越策划】不写代码——教你如何快速制作h5独立小游戏(下篇)

2017-01-12 17:41 野驴酥


上一篇不写代码:教你如何快速制作h5独立小游戏(上篇)中,我们制作的html5,最后终于让可爱的小僵尸能缓缓地向右走动了。那在小僵尸能行走后,我们要怎样继续再进一步完善我们的小游戏呢?


1
  设置左右移动


要实现这个目标,我们要实现这两种效果:一,让僵尸“知道”自己现在朝向哪里;二,让僵尸碰到屏幕边界后转身返回。


现在我们要在僵尸身上添加一个变量,标注它现在是“向左”还是“向右”。


选中僵尸,在B区属性内点击Instance variables添加局部变量。



设置Name为direction(当然也可以自己设喜欢的变量名),Type选择Text(文本),Initial value设置为right(当然也可以用符号表示向左或向右,自己看得懂就好)。



设置好变量之后,僵尸就“知道”自己应该是向左还是向右了,另外还要在代码中添加对僵尸目前状态的判断。


我们要对原有的代码进行修改,右键点击2号代码,选择Add,选择Addsub-event



选择僵尸,选择Compareinstance variable



大家可以看到,系统已经自动检测到局部变量了,大家只需要保证comparison的值是=equal to,value的值是”right”(一定要有英文引号,注意!)。



同样的操作,同样步骤再建立一个sub-event,只是最后的value的值为”left”。 最终的效果为一个一分为二的分支:



看到这里,一些聪明的朋友就应该能够猜到,我们只要分别在”right”和”left”后面分别对应让僵尸向右走、向左走就可以了。


之前有做好的,将其拉拽到”right”后面即可,然后同样的方式再创建一个,control改成left即可。



光是这样还不够,因为僵尸的动画素材是向右走的,如果向左走的话,就会出现“僵尸版月球漫步”倒着走了,所以我们要在进行一些相关设置。


点击Addaction,添加僵尸的事件:



选择Setmirrored,设置镜像:



因为我选择的是在“right”下创建的,所以要选择not mirrored,不进行镜像。



同样操作,在“left”下创建同样的action,但最后state选择mirrored,进行镜像。



好了,我们已经完成了第一步,另外还要让僵尸“自己”转身。我们先点击界面任意处添加一个sprite,不用任何图片,填上你喜欢的颜色,作为界面边界。


建议创建sprite时命一个名字,例如“leftBorder”。选择油漆桶工具,涂上喜欢的颜色:



拖动调整其大小,放置在界面左边(不要放在舞台内),作为左边的边界。同样的操作新创建一个sprite,命名为rightBorder,作为右边的边界。



之后,在代码区内,点击Add event,新增一条leftBorder的事件:



选择On collisionwith another object,意为碰触到某个其他物件。



然后就是选择碰触的目标物件,当然就是僵尸啦。



然后,在这条事件后,点击Add action,创建对应的执行事件。

由于之前的准备工作做得很充分,所以我们只要设置僵尸的局部变量direction为“right”即可。(撞到左边的墙后当然是继续往右走啦。)



将变量设为“right”(注意一定不能忘了引号)。



同样的操作,将rightBorder的事件也创建起来,注意direction为“left”。



完整之后,按F5预览,僵尸能够正常行走了,而且走到边界会自动转身徘徊了!



2
  子弹击中效果


先把击中效果的动画加进来,双击舞台创建Sprite,命名为explosion。



设置动画参数,speed设为15,注意loop要保持NO,因为此动画只播放一次,不需要循环。



然后代码内,增加击中相关的事件。Add event,选择豌豆子弹,选择上一节新接触到的On collision withanother object事件,目标设置为僵尸:



点击Addaction,继续添加执行事件。选择执行豌豆的事件,spawn another object事件



选择目标为击中动画explosion,默认layer1,锚点0



在下面还要继续添加一个action:



依然是豌豆的事件,选择Destroy。因为子弹击中敌人之后,就“打到肉里面”了,所以要设置为击中后消失。



还有一条重要的代码,将explosion动画清理掉,不然随着击中次数越多,游戏会变得越来越卡。


新增一条事件Addevent,选中explosion,选中On finished(在Animations下)



填入动画的名称,由于我们用的是默认名,所以填入“Default”(注意引号)。



后面继续Addaction,增加explosion事件,选择destory。



按F5试试吧,点击屏幕射击,子弹飞到僵尸身上,很有打击感吧。


3
  设置多个敌人


要放置多个僵尸,就要用到系统的刷新机制,新增一条事件Add event,选择system(系统),选择Every X seconds事件。



设置每隔多少秒触发,1.0表示1秒。当然也可以使用ramdom函数,每隔1-3秒进行,不定时刷新更具趣味性。



继续添加Add action,选择system,添加Create object



创建的目标当然就是僵尸,Layer是1,另外要注意的是坐标(X,Y),表示的是在屏幕左边界外面刷新(凭空出现比较违和),随机位置(不要设置太高僵尸脑袋在外面,或位置太低豌豆射手都打不到了)。



同样操作,再创建一条同样的事件,只是坐标X轴改为500,是在屏幕的右边界外。这样做有个好处,僵尸是左边右边都有出,而不是单单从左边出来,略显单调。


按F5查看效果,发现一会儿就满屏幕僵尸了



4
  设置数值


拍脑袋定一下,僵尸的血量为15,豌豆的攻击力为2-5。


点选僵尸,B区点击Instance variables,增加一个局部变量HP,类型为Number,数值为15。



另外,在子弹击中僵尸的事件下,再添加一个事件,用于削减僵尸的HP。



选中僵尸,选择subtractfrom(减少局部变量的数值)



设置减少的量为随机2-5.



然后需要设定僵尸的血量小于或等于0的事件(当然是死亡啦)。


在这之前,我们要先把僵尸死亡的动画加进来。双击舞台添加Sprite,导入dead文件夹的素材,步骤参考11节 设置敌人部分的内容(别忘了设置锚点)。


设置动画参数,Speed设为10,loop设为NO(默认)。设置好后将其拖出舞台(别让玩家看到)。



新增事件Addevent,选中僵尸:



再选择Compareinstance variable,监控局部变量数值:



设置当HP的数值小于或等于0时,执行命令:(注意Instance variable对应的是HP)



继续在此事件后添加执行事件Add action。选中僵尸,选择spawn another object事件,目标为僵尸死亡的动画,Layout为1,锚点为0。


跟着下方再添加一条事件,将死亡后的僵尸清除掉Destory。



就如同13节子弹击中效果 中讲到的,我们要将播放结束的僵尸死亡动画清除掉,所以我们要添加类似的事件。


同样,选中僵尸死亡动画,选中On finished(在Animations下),然后让其Destroy掉。



就这样就OK了吗,还不对,因为僵尸还有向左(也就是mirrored状态),所以,对应的死亡动画也要mirrored。


首先我们创建一条和10号代码一样的一条代码(用复制粘贴大法)。



右键点击事件条件,选择Add,选择Addanother condition。这里有点类似12节设置左右移动中的sub-event。


这里我们添加的,叫复合条件,也就是说,需要两条条件同时满足,才会执行后面的事件。



我们创建的复合条件就是,当僵尸处于mirrored状态下,执行事件。


先选中僵尸




选择is mirrored




大家可以看到,复合条件创建好后的样子



之后继续添加执行事件Add action,选择僵尸死亡动画,然后将其镜像(使用set mirrored)。



最后,最重要的一点,将刚刚创建的12号代码拖拽放在原来的代码前面!因为当前代码的条件比之前的代码条件苛刻,如果放在后面的话,会造成这条代码永远不会执行!



好了,按F5试玩,点击屏幕发射子弹,可以正常击杀僵尸,已经基本是个可玩的游戏了。


5
  设置记分系统


游戏就这么茫无目的地打着未免有些单调,所以我们要设置一个记分系统。有三个数据要实时显示:1 杀死的僵尸个数2 豌豆射手开炮次数 3 游戏时间。


首先我们要再建立一个图层,用于放置UI相关的内容,D区Layers里面点击加号添加:



选中layers 2,拖入三张图片kills.png、times.png、bean.png(注意和之前用过的不一样),作为记分数字栏的图标,将其放在合适的位置。


我们可以发现,将图片直接拖入,系统会自动将其创建为Sprite,注意要在Layer 2 图层下(后面所有涉及UI的都要放在Layer 2下,否则会图层错误)



然后双击舞台,添加插件textbox,同样的操作创建三个,分别命名为kills_text、times_text、bean_text。



调整大小至合适位置,并放置在相应的图标旁边(用于显示分数数值)。



选中文本框,在B区进行设置,Placeholder里面分别设置文字为kills: 、beans: 、time:



要记得三个文本框的名字,之后代码中需要用到:



转到代码部分,右键点击任意空白处,选择Add global variable,创建全局变量,用于存储杀死的僵尸数、打出的豌豆数、游戏时间(秒)



自己命名(任意文本,自己能看懂就行),保证类型是number就可以,怕忘记可以在Description里面写上注释(支持中文)



三个全局变量建好了,置顶显示在代码窗口中:



首先,将僵尸死亡的计数加上去。在僵尸死亡动画结束的代码下增加一条:



选择system事件,选择Add to,增加变量值



选择Variable变量名为kills,value变量值为1,也就是僵尸死亡1只,分数加1。



然后要将这个变量值显示出来,新增事件Add event,选择system系统事件。



选择Every tick,我们在第5节逻辑代码 中介绍过tick的概念,由于分数的变化每时每刻都有可能变化,所以需要系统对其进行每时每刻的更新。



继续添加action,选择文本框kills_text。



选择set text事件,设置文本内容。



填入文本内容,"Kills:  "&kills,前面引号内的就是文本,&是连接符号,kills是你之前设置好的变量名(如果之前已经设好了的话,系统会自动提示,很方便)



同样的操作,在后面继续增加times_text、bean_text的实时更新。



在touch事件下增加纪录子弹发射的相关代码:



此时可以按F5试试,看看豌豆计数和僵尸死亡计数是否正常计算。


不过大家可能会发现,一开始什么都没打,击杀次数就自动变成1了。那是因为我们放置在舞台外面的死亡动画播放结束后增加的,解决方式很简单,给死亡动画加一个DestroyOutsideLayout的behavior,这样在游戏一开始屏幕外的死亡动画就被清除了,也就没有碰触到加分事件了。



6
  设置游戏时间


我们先设定一局游戏时间为30秒,游戏结束后弹出结算框显示分数,并可以再次一局游戏。


首先把结算框面板score.png加入进来,然后添加text插件,命名为score_num



在B区设置text的属性,text设为000(这个任意),Initialvisibility设为Invisible(不可见,记得同样把结算框面板score也设为不可见),字号为24,颜色白色。



将其放置在合适的位置,作为结算框面板的数字。


最后,将restart.png重新开始按钮,放入,也设为invisible,将其放在合适的位置。



将全局变量,将times设置为30。



新建一个事件Add event,选择system系统事件,选择Evey X seconds,X设置为0.01。



点击Add ation,选择system系统事件,选择subtract from,数值设置为0.01。



再添加一条时间,用于检测时间是否走完。添加system系统事件,选择compare variable,variable变量名选择times,小于或等于0。



接着Add action,选择score面板,选择set visible,设置为visible(可见)。



同样的操作,将score_num、restart都设为可见。



最后很重要的,将击杀的分数显示在面板上,找到之前写的Every tick的代码,下方添加一条,选择score_num,选择set text,值为全局变量kills。



好了,按F5我们试试吧,系统自动倒计时30秒,结束后弹出结算框。呃……好像不对啊,这个时候怎么还能打?游戏应该结束了才对啊。我们需要设置一个游戏开始结束的“开关”才行,下一节继续讲。


7
  控制结束和开始


我们先创建一个全局变量switch,作为开关,类型为number,数值为1,0表示关闭,1表示开始。(最好是写上注释)



当switch为关时,僵尸应该不能继续刷新了、豌豆不能继续发子弹,游戏时间不能减少。我们可以用到之前学到的“复合条件”,将这些相关的代码位置加上限制。


豌豆发射子弹部分:



僵尸刷新部分:



游戏时间减少部分:



另外,游戏结束的标志——时间小于或等于0的部分,要添加上相关的收尾工作,首先要用destory将场上的所有僵尸清理干净,另外将switch设为0。



现在可以按F5试试,时间走完之后游戏是否结束。


测试成功后,还要添加重新开始游戏的相关代码,基本上和游戏结束的“反”过来。


新增事件Add event,选择touch,选择on tap object,目标为restart按钮。



后面接着Add action,设置score、score_num、restart为invisible(不可见),将switch设为1(打开开关),还有一个 新增的将全局变量times重新恢复为30秒,还有相关的计数kills、beans也都要设为0。



8
  结语


至此,本教程的所有内容都已结束。大家可以导出为html文件,将其部署在网站上,将链接发给朋友,打开就能玩(微信内也可以打开哦)。个人版提供了多种导出方式,包括iOS和安卓。也可以去官方网站(scirra),将游戏部署在官网的应用商店里(速度较慢,需翻墙)。


如果想深入研究,可以去GAD官网向各位高手们咨询,还有一些高手自制的很多很给力的插件,前文也说到了,当你想实现某种效果不知道如何下手时,很可能一个插件就搞定了。


祝大家都能做出自己想要的游戏。



点击一下
立即阅读近期热文


游戏策划进阶二三事——娱乐价值篇

游戏策划进阶的二三事——美学价值篇

游戏策划进阶的二三事-形成自己的方法论

游戏策划进阶的二三事-形成自己的方法论

不写代码:教你如何快速制作h5独立小游戏(上篇)

......

 

添加小编微信,发送“策划

即可直接加入GAD行业精英策划汪聚集地

获取行业干货资讯,观看大牛分享直播

↓长按添加小编GAD-沫沫




 
Gad-腾讯游戏开发者平台 更多文章 【美术圈】如何绘画一副有着赛博朋克风的营地 【程序猿】手把手教你做3D扫雷:完结篇 策划资料库 | 17G精选文章\/课程视频\/行业报告全套资料下载 策划资料库 | 17G精选文章\/课程视频\/行业报告全套资料下载 【越策划】绝对干货的游戏运营分享:做网游不是开宝箱
猜您喜欢 我给所有新手程序员的建议 首届 Appium Girl 活动回顾 如果公有云故障不可避免,那云上高可用架构该如何设计? 我眼中的flash cache oc-排序算法