h5游戏开发实战项目|不写代码:教你如何快速制作h5独立小游戏(上篇)

2019-01-10 14:33:58 手机棋牌开发 87 views 手机棋牌开发
[导读]:本文(《不写代码:教你如何快速制作h5独立小游戏(上篇)》)由来自鹤壁的读者投稿,并经由本站(安逸软件)结合主题:h5游戏开发实战项目,收集整理了众多资料而成。主要记述了construct2,豌豆僵尸,关系逻辑,僵尸等方面的信息。相信从本文您一定可以获得自己所需要的!

作为游戏策划,最梦想的可能就是做一款完全自己设计的游戏,这也是独立游戏的魅力所在。现在市面很有很多游戏制作工具,construct2绝对是其中的佼佼者,它的拿手好戏就是“快”,上手快、开发快,“理论”上可以制作任何类型的2d游戏,支持导出html5也非常方便传播。

虽然用construct2制作大型商业游戏也是可以的,但在我看来它的最大价值就是可以实现游戏的”MVP”(minimum viable product,最小化可行产品),这个词在创业领域很流行,就是用最小的代价试验产品是否可行,得到验证之后再投入大量资源。如果有一个特别的游戏创意,可以先做一个小demo出来,小范围传播后看反响再进行一次次迭代,初期投入少,也可以慢慢积累种子用户,利用construct2的“快”的特性,可以胜任这个任务。

“不用写代码”我承认这个标题党了,其实construct2也是真的不需要你“写”代码,通过鼠标拖拽即可。但其游戏的内部逻辑,还是需要用代码的思维。construct2的好处就是,你不用特别额外时间去学习语法、记忆命令,即用即得,就像是搭积木一样,所有的积木已经摆在你面前了,需要的只是你去找到那一块合适的积木。如果你是程序员,估计更能用得更加得心应手。

说到做HTML5游戏,很多人第一个反应就是白鹭,而且大家打开软件一看,怎么界面这么像啊,其实呢……你就把construct2比作whatsapp,白鹭比作微信就懂了。

这次用的版本是Release 239(64-bit)免费版,有诸多限制,但不影响本次教学。学习完之后如果感兴趣想继续,建议购买个人版,里面的图层数量无限制、设置图层顺序等,都是非常好用和重要的功能。

(干货较多,请放心阅读)

1

  打开软件

New Project 新建工程 → 打开之后一张白纸。

New Project 新建工程 → 打开之后一张白纸。

Open Project 打开工程 → 打开之前已经保存过的工程文件,首次打开指向的是一堆官方的范例文件,很有用(后面会说到)。

pty project 新建空白工程,同上,建一张白纸。

New em

pty project 新建空白工程,同上,建一张白纸。

建议:如果已经想好想做的游戏的界面尺寸,可直接选用下面的模板,省不少时间。

此外,强烈建议!往下拉,就是官方的范例文件。这些都是已经做好的游戏,对新手来说有很高的借鉴价值,而且刚好想做同类型的游戏(比如说Flappy Bird),直接打开,替换一下图片,调整一下参数,微调部分代码,那就是自己的游戏了,多方便。

2

  界面介绍

  界面介绍

将主界面进行大致的区域分割,先不要关注具体细节。

A 最次要,设置好了基本不用管了。

B 重要,有很多时间会消耗在这里,下文会重点介绍。

C 最重要,大部分时间消耗在这里。

D 一般,本项目所有的项目元素(插件、图片、音效等等)列在此处(Projects)

E 一般,查看当前页面使用到的项目元素,列在此处(Objects),还有瓦片背景(Tilemap)

另外,个人版还有一个Z-layer,用过PS的应该清楚,就是图片的上下层关系,很重要的功能,免费版可通过调整D区域的Layers来解决。

3

  架构介绍

我们先暂停一下教程,了解一下construct2的架构。了解架构可以让大家心中先有一个整体的概念,知道C2是怎么运作的,对后面的设计工作很有帮助。

  • 上一章中说到,界面中最重要的就是C区,那C区有什么呢

除了一大块空白以外,左上角有一个标签:

另外,细心的朋友也会发现,D区也有类似的:

另外,细心的朋友也会发现,D区也有类似的:

其实就是最重要的界面层和逻辑层。

其实就是最重要的界面层和逻辑层。

其实就是最重要的界面层和逻辑层。

一个图片层对应一个逻辑层,图片层就是放置我们游戏界面上的主角、坏人、机枪子弹等元素的,逻辑层就是控制这些主角坏人等元素的逻辑的,也就是传说中的代码。

图片层下面只能有一个逻辑层,或者没有逻辑层。

逻辑层上面必定只有一个图片层,不能没有图片曾。

我们可以把自己当成这个游戏的上帝,那么图片层就是天地,逻辑层就是这天地间运作的规律。

  • 有了天地,那还要有丰富多彩的世界,让我们把主角、坏人、枪支、子弹、地板等加入到这个世界中,这个就是插件(plugins)。

双击任意空白处,弹出插入插件的窗口:

双击任意空白处,弹出插入插件的窗口:

第一次看到吓死了,这么多插件啊。实际上我们90%的情况下用到的就只有Sprite插件。

就这货

回到上帝模式,我们要创世,首先要造出落脚的地板。用到的是Tiled Backgroud插件,也就是传说中的瓦片,把一张图片无限重复铺满整个画面。

所以,我们可以看到,青色的地板加上了,三角形的小人(项目元素大部分都是Sprite)快乐地生活在上面。

  项目元素属性

4

  项目元素属性

和人一样,每个项目元素(插件)也有高矮胖瘦,拥有各自的属性,可以调整它们的位置、大小、颜色、透明度等等基础属性,B区域中就可以进行调整。

既然有基础属性,当然也有特殊属性,下面就介绍一下特殊属性四大天王:

1

变量(instancevariable)

附着在插件上的变量,可以存储数字和文本,并进行运算和增减。和你说一个词你就懂了,HP,就是血量,就是一个变量,将它附着在某个敌人上,数字小于或等于零,敌人就死啦。

2

行为特性(behaviors)

如果说插件(plugins)是C2中第一重要的话,那么行为特性(behaviors)就是第二重要。

行为特性就相当于是将若干相关或常用的属性打包,变成属性包,比如说有个“子弹”(bullet)行为特性,带有自动飞行的属性、可以设置移动速度、加速度、减速度等等。将其挂载在某个插件上,这个插件就带有了子弹的全部所有属性。

那我们先看看behaviors的列表:

那我们先看看behaviors的列表:

这也是一坨一坨的好多呀。但这不用一个个去记,可以用一个学一个。

其实学习construct2有点像学英语,插件(plugins)、行为特性(behaviors)就像是英文单词,掌握得越多越能写出好文章(做出好游戏)。而且不仅限官方自带的插件,非官方的爱好者也会写一些非常非常好用的插件,有时候自己费尽脑汁想做的效果,一个插件就搞定了。

3

特效(Effects)

也是附着在插件上的特性,视觉效果,比如雾化、液态、噪点等。

h5游戏开发实战项目|不写代码:教你如何快速制作h5独立小游戏(上篇)

这个功能免费版不支持,而且需要浏览器支持WebGl,在手机上可能由于一些兼容问题会出现一些奇怪的效果。所以新手用的不是很多,有兴趣可以自己研究。

不过,有些特效真的很漂亮呀。(颜控必入)

4

容器(Container)

这个也属于高级功能,但免费版也能用,作用是把一个插件装入另一个插件。具体怎么应用呢,比如说要做一个魂斗罗一样的射击游戏,主角就是一个插件,手上的枪也是一个插件,把枪“装在”主角身上,用到就是这个功能。

继续回到上帝模式,这个世界上的每一小人,高矮胖瘦都不一样,并带有自己的脾气特性。

每个点代表一个行为特性

每个点代表一个行为特性

5

  逻辑代码

看完了图片层,再看看逻辑层。每个逻辑层只能对应一个图片层,就如同一个世界只能拥有一套自然规律。(看到这里就想到了三体,一个世界有多套自然规律)

逻辑层,其实就是代码。Construct2号称不用写代码,实际上还是要写的哈,只是它的代码结构非常简单,优点是好学,缺点是代码量大了就像搅面条,维护起来特别麻烦。所以construct2适合做创意小游戏,高效快速,大型的商业游戏还是交给专业的游戏开发引擎吧。

我们先来看C2的代码窗口

我们先来看C2的代码窗口

1、上方的绿色的放置的是游戏中用到的全局变量,例如游戏时间、分数等等放置在此

2、下方的每个数字,代表一条代码,学过BASIC的就知道,这就是行号,程序运行时按照这个顺序一条一条地运行代码。

说到这里,要普及一个概念,什么叫tick。比如说有200条代码,系统从第1条开始检查并运行到第200条后结束,算是一个tick(当然不是200条代码全部运行,中间肯定有一些跳转和条件判断)。一般一秒钟运行20 tick,这张程序表一秒钟要运行20次。这有点类似“帧”的概念,一秒20帧的动画,就是一秒钟播放20张图片。

人的反应能力0.1秒左右,所以理论上来说系统运算速度高于一秒10 tick就够了。当然tick不是越高越好,手机等设备对运算的强度非常敏感,太高就会导致耗电、卡顿等等问题。

3、细心的朋友可以发现某些代码前面有个小标记。带有绿色小箭头

的表示是个触发事件,比如这条tick内检测到手指触摸,则运行该条代码。带有绿色旋转箭头

的表示的是遍历事件,比如说,检查所有人的HP情况,如果发现有人HP少于或等于0,则执行“处死”事件。

4、单条代码的结构非常简单,看这个表就懂了

判断条件

判断事件

项目元素

什么条件

项目元素

做什么事情

这部分后面实战部分会详细讲解,目前只要先做了解。

6

  准备开工吧

好了,到此,作为使用C2创造世界的上帝,手上的工具已经全都准备好了。当然了,作为一个完整的游戏,仅仅只有“一个世界”是不够的,比方说:

图片

是不是有种“大千世界”的感觉?其实我们所说的“世界”就是场景,一款完整的游戏需要多个场景。

为了本次教学方便,范例游戏只做一个场景。有兴趣的朋友可以自己创建多个场景,只要右键点击D区域的Layouts文件夹,选择Add layout即可。

h5游戏开发实战项目|不写代码:教你如何快速制作h5独立小游戏(上篇)

另外别忘记同样在Event Sheets文件夹创建layout对应的Event sheet,不然你的世界就“动”不起来哦。

7

  游戏构思

相信大家都玩过《植物大战僵尸》吧。我们可以自己控制豌豆射手,变成一个射击游戏,配合触摸,做一个适合手机上玩的小游戏。

大家可以先看看最终效果图:

需要的素材也准备好了,附件里下载:

需要的素材也准备好了,附件里下载:

shooter

豌豆射手头部

×1

Pot

花盆底部

×1

Boom

黄瓜炸弹

×1

Bean

豌豆子弹

×1

Zombie

僵尸行走动画

×31

Explosion

爆炸动画

×6

Dead

僵尸死亡动画

×20

TiledBackground

草地地板

×1

kills

僵尸头图标

×1

times

时钟图标

×1

score

结算框面板

×1

restart

重新开始按钮

×1

8

  瓦片地板

在铺设地板之前,我们先设置一下“房间”的大小。

先移目到D区,选中Newproject

再移目到B区,设置WindowsSize为480,640

设置好project的尺寸后,还要设置layout的尺寸

选中后,B区内设置LayoutSize、Margins都是480,640

大家可能会奇怪,为什么我设置好了project的尺寸,还要设置layout呢。同时,细心的朋友也能发现,实际上设置project的,是一个虚线框。

其实,虚线框就是我们屏幕的尺寸,俗话说的“镜头”。卷轴类的游戏,例如Flappy Bird,镜头就小于背景,这样才能形成背景滚动的效果。但我们这款不用滚动卷轴,所以全都设置成一样。

设置好之后,可以正式铺设瓦片了。双击C区域的任意空白处,弹出Insert New Object,选中Tiled Background插件后选择insert:

选择load an image from a file:

选中素材文件夹里的地板:

如果图片的尺寸不是2的指数形式,会提醒你。

这里就要提一下,制作图片素材的时候,尽量将图片尺寸裁剪成32、64、128等2的指数的形式,图片量多之后对性能有很大的影响,特别是移动设备上。不过暂时做不到也关系,为了教程顺利进行,先凑活着用吧。

关闭编辑窗口后,瓦片会自动根据大小铺设,将其铺设成界面尺寸一样大即可。

可以拖动移动并控制大小

直接设置参数更准确方便

界面D区,切换至Layers标签,点击锁图标,将Layer 0锁定。

另外,再此界面,点击加号图标,增加一个图层Layer 1并选中。

解释一下:我们将瓦片地板放在Layer 0并锁定,因为瓦片不会变化,可以方便之后的操作。我们新建一个Layer 1,将其他元素(大多数都是动态的)放置在这里。

PS:再啰嗦一下,大家也可以自己斟酌,将确定不会变动的元素放在Layer 0,可以方便管理和之后的操作。

9

  放置豌豆射手

双击舞台,插入一个Sprite,最好能够下方命名处命一个名方便管理。

选择花盆底座,将其放置在界面下方位置。

同样操作,将豌豆射手也添加进入,但是图片的炮口是转向右边的,看起来像是得了歪脖子病,所以我们在B区设置一下角度让它朝上。

看起来还不错:

为什么要弄一张“歪脖子”的素材呢,因为CT2规定图片的默认是朝向45°的(可能因为它默认自己是一款制作横版卷轴游戏的工具吧)

我们要通过触摸控制炮口的转向,首先要加一个touch的插件。

接下来要写代码了,转向Event sheet 1,点击Add event,选择豌豆射手

选择on anytouch start

细心的朋友应该会发现,能表达触摸的时间很多,那为什么要选择这个事件呢?

如果实际用手指操作看看就能发现问题,如果是on any touch end或是on tap,他们完成触发的条件是“手指松开”,所以必须完成手指的“点击”再“松开”,才能完成一次转向。而on any touch start只要手指“点击”即可,手感会好很多,设置可以在屏幕上滑动进行转向。有兴趣的朋友可以试试用on anytouch end或是on tap,感受一下最终在手机上的表现效果。

以上只是条件,接下来点击Add action创建事件。

选中豌豆射手

选中set angletoward position,设置朝那个方向转向:

输入touch.X和touch.Y,表示朝着手指触摸的位置转向。

按F5,查看一下效果。

现在豌豆射手已经“指哪儿朝哪儿”了。但是还有一个小问题,因为小射手的脑袋是圆圆的,好像转向没有完全沿着圆脑袋转,有点偏。

这问题就需要我们设置一个锚点,转向的时候以它为圆心。

双击豌豆射手打开图片设置,选择锚点,设置锚点位置在射手的脑袋中间即可。(注意:设置锚点位置要用键盘的上下左右键移动)

然后稍微调整一下射手在花盆上的位置,让锚点和花盆的中心重合,这样转起来看就像是射手在花盆上转着脑袋的样子,比较自然。

完成之后F5看一下效果,看起来就比较完美了。

10

  发射子弹

首先我们要将子弹素材加入进来。双击舞台插入一个Sprite,使用素材bean,创建成功后放置在任意位置,选中后在B区设置其属性,点击Behaviors添加一个行为特性。

选择Bullet并添加(就是子弹……)

添加好之后发现Behaviors里已有Bullet属性了,关闭窗口。

此时再选中豌豆,就会发现有B区已经有Bullet相关的参数设置了。

对Bullet参数进行相应的设置,设置Speed值为600(当然也可以根据自己喜好设置成别的值)

另外几个参数,Acceleration是加速度,设置了之后子弹会越飞越快。Gravity是重力,设置了之后自动会向下落,数值越高下落越快。建议这两个值都设为0。

另外,还要在豌豆射手身上,再增加一个锚点。因为我们设置子弹从射手嘴里射出,需要将具体位置给指定出来,就是这个新加的锚点位置。

双击打开豌豆射手,新增一个锚点:

转到代码区,在原有的touch条件下,增加一个事件

依然是豌豆射手发生的事件

选择Spawn another object事件,意思就是生成另外一个物件。

有三个项目需要填写,分别是object(生成的物件)、layer(图层)、锚点(Image point)。

Object对应就是豌豆子弹,layer是1(还记得之前创建图层后面的编号了吗),Image point是1(翻回去看看后面的编号)。

按F5看看,点击屏幕,发现豌豆射手可以射击了!突突突机关枪一样。

不过,好像有个小瑕疵,怎么一开始屏幕会有个豌豆子弹飞出去啊?(如果一开始你将子弹放置在舞台内的话)

解决的方式也很简单,把子弹拖出舞台就可以了。

另外,还要选中子弹,在Behaviors里面增加一个DestroyOutsideLayout,意思就是这个物件不在屏幕中的时候,就被系统清除掉。这点非常重要,因为物件放置在屏幕外,依然占据着内存,一旦数量多了之后,就会造成内存泄漏事故,游戏会越来越卡。

11

  设置敌人

同样,双击舞台插入Sprite,注意下方的Animation frames功能框,右键点击选择Import frames –From files…

打开素材文件夹,选中所有的僵尸行走图

默认自带的第一帧没有用,删除掉

右边Animations功能框内,我们可以右键点击动画,选择Preview,查看动画预览效果。

看了实际效果后发现,虽然僵尸以行动迟缓著称,但这动画也太慢了,所以我们还要对这个动画的参数进行一些调整。

选中动画,在B区,调整动画的参数Speed为10,Loop为YES。Loop就是无限循环播放的意思,因为僵尸行走是永不停息的捏哈哈哈哈……

还有一个小瑕疵,就是僵尸看着像是会“飘”,这是因为动画文件引起的,所以我们要设置一个锚点让僵尸“贴”住地面。

点击锚点图片,弹出Image points窗口,右键点击,选择Quick assign,选择Bottom。这样,我们就可以设置当前图片的锚点放置在下方居中位置。

光有一张图片设置还不够,还要将设置普及到动画的每一帧图片内。

右键点击锚点,选择Apply to whole animation。

但这只是让僵尸在原地踏步,还要让僵尸真正能够前进,就要在Behavior添加特性让它“走”起来。

大家可以依旧选中之前用过的bullet,但这里有一个更好的选择Platform

Platform支持的可设置参数更多,可以实现更好的控制,一般用于横版游戏的主角、敌人的设计,完成各种复杂的动作。

另外还要加上DestroyOutsideLayout。随着大家做游戏的技能越来越熟练,是能够培养这种感敏性的,那种类似“无限生成”、“自动生成”的物件,都要有相应的垃圾处理机制,及时清除掉,对游戏的效率提升有非常大的好处。

然后对Platform的部分参数进行设置。

Maxspeed是僵尸移动的速度(当然就是很慢很慢啦)。

Gravity是重力,大于0就会下落,等于0是保持浮空。(也可以试试小于0,你懂的)

Defaultcontrols是默认控制角色,一般用于横版游戏主角的控制,如果代码中加入玩家控制左右移动事件的话,就能直接控制该角色的移动。此时我们选择NO。

光有这些僵尸还“动”不起来,需要在代码中控制它“向前走”。

这回是添加System事件

添加ForEach事件

选择执行的目标物件——僵尸,点击Done完成创建。

这段代码什么作用呢,For Each字面的意思就是“为每一个”,聪明的朋友可能就已经能想到,“为每一个”就说明不只有一个,可能会有很多个。作为敌人,僵尸的数量肯定不止一个,如果僵尸有多个实体,那一条代码就能对每一个实体做出控制,很方便吧。

选择僵尸

大家可以看到,一旦加入了某个Behavior,就会增加对应的动作选项,很方便吧,这次我们选中Simulatecontrol,意思就是系统对该对象进行控制。

控制可以选择僵尸向左走、向右走、跳跃,我们先选择Right向右走。

可能有朋友要问了,僵尸一直向左走,不会太单调了吗。别急,下篇我们就会讲到这个内容,现在我们可以先按F5,看到屏幕中的僵尸就可以缓缓地向右走动了。

h5游戏开发实战项目视频

5.Android 四大核心组件之Service(1) -《4个android安卓项目开发实战实例经典入门视频教程从环境搭建开始-极客学院》课程 - 极客学院

拓展阅读

H5到底是什么,它有什么作用呢?:https://baijiahao.baidu.com/s?id=1613619264144869147&wfr=spider&for=pc

相关问答

问:html5前端培训课程中包括游戏开发等项目吗?

答:课程设置中都有项目实战,
第一阶段移动前端制作基础(HTML5+CSS3基础)
第二阶段移动前端交互基础(JS+JQ+Ajax)
第三阶段移动前端综合开发(H5+C3+jQ Mobile+bootstrap+zepto)
第四阶段项目实训
课程的安排和讲课老师占很大部门的。


问:html5前端培训课程中包括游戏开发等项目吗?

答:课程设置中都有项目实战,
第一阶段移动前端制作基础(HTML5+CSS3基础)
第二阶段移动前端交互基础(JS+JQ+Ajax)
第三阶段移动前端综合开发(H5+C3+jQ Mobile+bootstrap+zepto)
第四阶段项目实训
课程的安排和讲课老师占很大部门的。
这是千锋课程设置。项目会开发一些html5小游戏。


问:H5游戏+小程序开发有实现的可能性吗

答:现在微信上的小游戏用的就是H5好吧。。而且现在开发H5游戏并不难,因为前后端都有引擎可以直接用,自己实际上要写的代码量不多,比前端的有白鹭Egret,后端的话有Matchvs。


问:H5游戏开发需要多少钱呢

答:注意H5游戏必须考虑android手机,只关注用pc浏览器开发和苹果手机测试没问题,是不明智的,也是对公司的不负责任。开发的时候可以用pc浏览器调试,但是发布之前必须在android手机的微信里面,打开游戏看是否有兼容性问题,同时确认流畅度。随着系统的增加,资源文件也越来越多,对第一次玩游戏的玩家来说,因为浏览器没有缓冲,需要全部加载,在wifi环境都需要等待1分钟以上,这会导致大量的新玩家流失。价格价位根据不同需求都是不一样的,没有固定的价格,大概的区间也是几千到几万之间吧


问:关于H5游戏开发如何入门

答:建议去找专门的机构吧 专门去学 这样学习氛围会很好 也学的进去 不懂得还能去问别人。关于培训机构 建议上网搜搜看 找有创办历史的 然后师资力量好的


问:开发H5游戏需要哪些技术

答:总结了下:HTML5教程 主要学习HTML标签、属性和事件。 2. CSS教程 主要学习使用CSS来控制网页的样式和布局。 3. JavaScript教程 做HTML5开发,主要使用JS语言。所以要学习JS语言。必要时还要学习一些JS库,方便开发。 4. HTML5其它的核心技术 以上只是基础,做HTML5开发,可能会用到下面的技术。 1)WebWorker 可以在浏览器中运行多个JS脚本。可以用于需要后台执行某种耗时工作的场合。2)WebSocket 浏览器可以与服务器间双向通信。Socket方式能够大大提高浏览器与服务器间的通信效率。可以用于浏览器与服务器间通信频繁的场合,比如实时聊天。3)Canvas2D 浏览器中画图。可以用于游戏开发等等场合。


标签:

发表评论

爱家

关于这个问题楼上其实已经答得很全了,现在开发H5游戏的门槛还是比较低的,比较已经有很多相当成熟的工具可以用了,比如WebSocket实现的通信联网,就可以用类似Matchvs这种工具来做,开发效率会高很多。

2019-02-08 20:52:42
Janrey Feng

可以的,如果你想画面美观的话建议你不要盲目去做,最好找个单位参考,不如未来应用,秒度科技都可以。

2019-01-14 13:46:15
宋井科+18395585912

Cocos的话还是比较容易上手的,适合有一定基础的开发人员,另外如果你想做支持联网对战功能话还可以接入Matchvs,不冲突,借助这些工具相信可以帮助到你顺利开发出一款H5游戏。

2019-01-11 13:05:07

课程设置中都有项目实战,
第一阶段移动前端制作基础(HTML5+CSS3基础)
第二阶段移动前端交互基础(JS+JQ+Ajax)
第三阶段移动前端综合开发(H5+C3+jQ Mobile+bootstrap+zepto)
第四阶段项目实训
课程的安排和讲课老师占很大部门的。

2019-01-11 09:50:08

发表评论:

PHONE