H5游戏怎么制作小程序H5游戏制作小程序流程是什么

今天是我最喜欢的射击游戏!!話不多说直接进入正题吧~!

预览状态下,使用键盘上下左右按键可以让玩家上下左右行走点击鼠标左键玩家可以发射子弹;当玩家子彈射中怪物时,怪物会被消灭;当怪物碰撞到玩家玩家被消灭,游戏结束

首先,打开唤境点击欢迎页左上角的新建项目按钮。

在弹絀的项目设置中选择窗口尺寸为。命名为“俯角射击”

点击确定,即可进入我们新建的项目中

一个场景中可以包含多个图层组,您鈳以使用多个图层对对象实例进行分组把不同的对象实例放在不同的图层里面,这样您就能轻松地排列哪些对象实例出现在其他对象实唎之上并且可以隐藏、锁定图层组、应用视差效果等等。

为了方便我们制作小程序游戏时分层所以我们在制作小程序游戏前先建立两個图层组,分别是背景层角色层。

1). 双击场景进入指定场景中。

2). 场景下默认已经有一个图层组:“图层组0”右键图层组0可以修改图层組名字,将其修改为背景

3). 点击左上方的按钮,即可添加新图层组;添加完成后将新图层组的名字修改为“角色”。

至此我们已经做恏了实现俯视角射击游戏的准备工作,下面就可以开始添加素材了~

图层组建立好之后我们就可以往图层组中添加图像了。在唤境中图潒是通过精灵对象实现的;在我们的俯角射击游戏中,玩家、怪物、子弹、爆炸效果、背景这些都是精灵对象精灵对象可以是一张静态嘚图片(如背景图、玩家、怪物、子弹、爆炸效果等),也可以是一组图片做成动画的效果

首先我们需要先选中背景图层,左键点击图層选中时对应图层会加深背景颜色代表选中。

选中图层后点击菜单栏上的精灵图按钮,或直接将精灵图标拖拽至舞台

拖入舞台后,茬对象库右键重命名为背景双击对象库对应的精灵图标,进入图片编辑器

由于我们插入的是一张静态的背景图,所以只需要双击下方苐一个小精灵图标或点击打开文件(下图中红框的部分)即可打开本地文件添加你想要的图片。点击确认

修改背景图的位置,使其左仩角与舞台的左上角重合您可以直接在舞台上选中背景图拖拉蓝色边框修改位置或在舞台上选中背景图之后在右方属性中修改X、Y属性来修改。

我们选中角色图层左键点击角色图层。选中时对应图层会加深背景颜色代表选中

选中图层后,点击菜单栏上的精灵图按钮或矗接将精灵图标拖拽至舞台。

拖入舞台后双击对象库对应的精灵图标,进入图片编辑器上传玩家图。点击确认

修改玩家图的大小和位置,可以直接在舞台上选中背景图拖拉蓝色边框修改位置和大小或在舞台上选中背景图之后在右方属性中修改X、Y、W、H属性来修改

通过類似的步骤,在角色层添加怪物设置怪物位置和大小。

一般游戏中的怪物都会有多个所以这里我们回到舞台,选中怪物通过复制黏貼制作小程序更多的怪物。

2.4添加子弹、爆炸效果

通过类似的步骤在角色层添加玩家子弹,设置子弹的宽为30、高为12

通过类似的步骤,在角色层添加爆炸效果请注意,爆炸效果是有黑色底的;在编辑器中我们提供了混合模式这一选项,来处理各类元素叠加的问题选中爆炸元素后,在右侧属性栏中将它的混合模式设置为叠加就可以在游戏中消除其黑色底。更多关于混合模式的说明可以参看教程中的┅文。

能力是唤境中预先设置好的功能;通过为对象添加能力就可以让对象拥有某种功能。对象可以同时拥有多个能力通过不同能力嘚组合可以帮助我们更加快捷便利的制作小程序游戏。在我们的俯视角射击游戏中我们用到了八方向运动能力、边界限制能力、镜头跟隨能力、子弹能力、渐隐渐现能力。下面将为大家讲解能力的添加方式以及每种能力的作用。

3.1为玩家添加八方向运动能力

在对象库选中玩家在右方属性区域选择能力。为玩家添加八方向运动能力

八方向运动能力允许对象在上下左右方向和对角线上移动,默认情况下由箭头键控制通常适用于控制对象在场景中的移动。

这时候我们预览一下可以通过上下左右方向按键来控制玩家的移动。但是此时玩镓是可以走出场景外的;为了限制玩家不能走出场景之外,我们还需要另外一个能力那就是边界限制能力。

边界限制能力用于防止对象離开场景常用于可以自由移动但不能离开场景边缘的对象。边界的大小是根据场景的大小决定

在对象库选中玩家。在右方属性区域选擇能力为玩家添加边界限制能力。

这时候我们预览一下可以通过上下左右方向按键来控制玩家移动,并且这时候玩家不能走出场景之外了

但是我们希望玩家可以在背景图的范围内(如下图紫色框)自由走动,并且镜头跟随着我们的玩家移动(即玩家走到哪里镜头就箌哪里)

所以我们需要先修改场景大小为背景图大小,这样就可以在背景图范围内移动;然后为玩家添加镜头跟随能力这样玩家走到哪裏,就可以显示对应的背景图

选中场景,在右方场景属性中修改场景W、H属性为背景图的W、H。

在对象库选中玩家在右方属性区域选择能力。为玩家添加镜头跟随能力

镜头跟随能力会将视窗的中心置于该对象上,让镜头跟随着玩家移动

这时候我们预览一下,可以通过仩下左右方向按键来控制玩家移动并且这时候玩家不能走出场景之外了。但玩家可以在背景图的范围内自由走动并且镜头跟随着我们嘚玩家移动。

上面介绍了如何添加精灵和给对应的精灵添加能力。通过添加能力我们可以让对象拥有唤境中预先设置的功能例如边界限制,镜头跟随八方向移动等等。
接下来我们添加怪物和子弹对应的能力

在对象库选中怪物,为其添加子弹能力子弹能力会让对象歭续向前移动,运动方向为对象的角度

选中子弹,为其添加子弹能力及出场景销毁能力当拥有出场景消耗能力的对象离开场景区域时,会被自动销毁以减少性能上的负担。

爆炸效果通常来讲应该是有一个突然出现逐渐消失的过程的,因此我们可以为其添加渐隐渐现能力具有渐隐渐现能力的对象会有淡入淡出的过程,具体时间可以通过属性栏设置在本教程中,如下图设置即可

预览一下项目,玩镓可以通过上下左右方向按键控制玩家移动怪物也因为添加了子弹能力有了移动的效果。但我们如何让主角在我们点下鼠标时开***射击呢这就需要事件的加入了。

接下来我们使用唤境的可视化编程方法:事件系统来添加我们项目的游戏逻辑。

下面先简单介绍一下事件表:编辑器每一帧会检测一次事件表里的所有事件然后选中所有条件符合当前游戏状态的事件,执行该条事件的动作;然后更新游戏状態(包括内部逻辑及屏幕表现)事件表的执行顺序是从上到下,所以最上面的事件会优先执行

4.1设置玩家面向角度对着鼠标位置

玩家面姠角度永远是对着我们的鼠标位置。点击“+事件”按钮添加一条新的事件。

设置条件选中事件表上方系统按钮或在抽象对象库选中系統,右方切换系统(条件与动作框)双击选择“每帧执行”条件。

设置动作在舞台选中玩家或对象库选中玩家,右方切换玩家(条件與动作框)双击选择“按位置设置角度”动作。X设置鼠标位置.x,Y设置鼠标位置.y

点击完成编辑,这样我们第一个逻辑事件就完成了我们來预览看一下,玩家的面向方向会根据我们鼠标的位置发生改变

设置按下鼠标左键玩家发射子弹

当我们按下鼠标左键的时候,玩家会发射子弹点击“+事件”按钮,添加一条新的事件

设置条件,当鼠标左键按住时每0.1秒玩家发射一颗子弹,选择事件表上方的鼠标操作或茬抽象对象库选择鼠标操作右方切换到鼠标操作(条件与动作框),双击选择“按住时”条件鼠标按键选择左。

设置组合条件选择倳件表上方的系统或在抽象对象库选择系统,右方切换到系统(条件与动作框)双击选择“每隔X秒”条件,间隔时间设置0.1秒

设置动作,在玩家所在的位置创建子弹在舞台选中玩家或对象库选中玩家,双击选择“生成其他对象”动作对象选择玩家子弹,图层组设置“角色”定位点我们先设置0.

这时候我们预览看一下,当我们鼠标左键按住时子弹就会生成并且发射出去,但是子弹生成的点位置不对昰从玩家的头上生成的子弹,而正确的生成位置应该是在玩家图片的***口上

这是因为我们在上面一条“生成其他对象”的动作中,定位點设置为0(0即玩家的原点位置默认是精灵对象的中心原点),所以我们需要到玩家精灵的图片编辑器中设置一个绑定点在***口的位置茬对象库中双击玩家精灵进入玩家精灵图片编辑器。

点击设置绑定点在玩家图片的***口位置双击,新增一个绑定点并设置绑定点名称為“发射位置”。(这里设置的名字会用于下方事件)

点击确认新的绑定点就设置成功了,然后我们双击玩家子弹生成的事件设置定位点为“发射位置”。

这时候我们在预览一下当我们按下鼠标左键发射子弹时,就是从玩家***口(即我们设置的发射位置点)发射子弹叻

但是我们发现,当玩家子弹碰撞到怪物的时候并没有发生任何的事情,这是因为我们还没有设置玩家子弹碰撞怪物的事件逻辑接丅来我们就制作小程序玩家子弹与怪物碰撞的事件。

4.2玩家子弹与怪物碰撞后消灭怪物

点击“+事件”添加一条新事件。

设置条件在舞台仩选择玩家子弹或对象库选择玩家子弹,右方切换玩家子弹(条件与动作框)双击选择“与其他对象碰撞时”条件,对象选择怪物

设置动作,在子弹与怪物碰撞位置创建爆炸效果并销毁怪物和玩家子弹1:选择玩家子弹,右方切换玩家子弹(条件与动作框)双击选择“生成其他对象”,对象选择爆炸效果图层组设置角色,定位点设置02:选择玩家子弹,双击选择“销毁”动作3:选择怪物,右方切換怪物(条件与动作框)双击选择 “销毁”动作。

整个俯角射击游戏的基本逻辑已经制作小程序好了但是为了让游戏更有趣,我们还鈳以优化一下怪物AI让游戏更加有趣。

首先我们需要优化的是怪物的AI属性因为怪物添加的子弹能力,所以怪物会根据对象的角度来确定運动方向所以我们增加一条事件,设置“场景开始时”条件设怪物的角度为随机角度。让怪物在场景初始化时运动的方向是随机的

5.1設置怪物初始运动方向随机角度

添加一条新事件,选择系统双击选择“场景开始时”条件。选择怪物双击选择“设置角度”动作,角喥设置random(360)选中事件,按住鼠标左键把这条事件拖动到事件白表最上方,因为我们希望案例开始时优先执行此事件。

怪物的初始运动方姠设置好了但怪物还是只会向初始设置的方向运动,运动到场景之外所以我们另外增加事件,当怪物运动到场景之外时我们设置怪粅的角度朝着玩家的角度移动。

5.2设置怪物出场景外后改变运动方向面向玩家

添加一条新事件选择怪物,双击选择“在场景外时”条件選择怪物,双击选择“按位置设置角度”动作X设置玩家.x,Y设置玩家.y。

5.3 设置怪物距离玩家小于1000像素时自动跟踪玩家位置运动

为了让怪物更加智能一点我们希望当怪物与玩家的距离少于1000像素的时候,设置怪物的角度转向玩家

添加一条新事件。设置条件选择系统,双击选择“遍历循环”条件对象选择怪物。选择系统双击选择通用下的“比较两值”条件,值1设置distance(玩家.X, 玩家.Y, 怪物.X, 怪物.Y)比较方式选择小于,值2設置1000
distance()函数作用是输入两个坐标位位置,即可获得两个坐标位置之间的距离

设置动作,选择怪物双击选择“朝某位置旋转”动作,角喥设置1X设置玩家.X,Y设置玩家.Y

5.4设置怪物与玩家碰撞时消灭玩家

添加一条新事件。设置条件选择怪物,双击选择“与其他对象碰撞时”條件对象选择玩家。设置动作选择玩家,双击选择“销毁”动作

5.5设置每3秒在场景右方随机生成怪物

添加一条新事件。设置条件选擇系统,双击选择“每隔X秒”条件间隔事件设置3。设置动作选择系统,双击选择“创建实例”动作

这样简单的俯角射击游戏就完成叻。大家可以使用工具来制作小程序自己的俯角射击游戏

1.如何制作小程序怪物血量,设置逻辑当怪物受到三次子弹攻击的时候才会被消滅

2.设置游戏得分,每消灭一只怪物增加100分

3.如何设置游戏难度,当越来越多的怪物被消灭时增加怪物的移动速度?

4.设置重新开始按钮当怪物碰撞到玩家时游戏结束,舞台弹出重新开始按钮点击则重新开始游戏?

案例简介:头脑王者小程序是一款微信小程序游戏每局比赛两人参与,五道题在不用道具的情况下,答对一道题最多可得200分答得越慢分越少,答错不得分得分高者獲胜。

场景特征:其他|知识竞赛

小程序分类:游戏小程序、答题小程序

小程序用户对象:所有喜欢玩智力游戏的微信用户

小程序入口:微信矗接搜索“头脑王者”或者扫描头脑王者小程序码进入小程序

头脑王者小程序是一款微信小程序游戏每局比赛两人参与,五道题在不鼡道具的情况下,答对一道题最多可得200分答得越慢分越少,答错不得分得分高者获胜。头脑王者小程序是一款益智答题类小程序头腦王者小程序主打对战PK,用户进入头脑王者小程序游戏后头脑王者小程序会随机匹配在线的用户前来对战,如果要提前结束战斗还会损夨一定金额的金币数

头脑王者小程序游戏玩法

头脑王者每局比赛两人参与,五道题在不用道具的情况下,答对一道题最多可得200分答得越慢分越少,答错不得分有十秒时间限制,如果在第一秒答对得200分,如果用了一秒(即还剩9秒)则得180分,剩8秒则得160分以此类嶊,最后一道题得分双倍

头脑王者小程序是一款问答类智力对战游戏,头脑王者小程序致力于挖掘头脑潜力在头脑王者小程序中玩家能够挑战全球高手排位,比拼世界排行头脑王者小程序也可以邀请好友轻松对战。头脑王者小程序超级巨大的题库储备量对每个人都是超级挑战!

1、强调对战:和单机闯关类答题产品不同“头脑王者”小程序更强调“对战PK”,用户进入游戏后会随机匹配在线的用户前來对战,如果要提前结束战斗还会损失一定金额的金币数,提升对战的仪式感和互动的乐趣。

2、强调礼物:用户每次登陆头脑王者小程序都会显示“每日登陆奖励”的提示页面。头脑王者小程序里面的礼物对对用户闯关都有非常大的帮助头脑王者小程序和很多游戏產品需要买装备才能过关非常相似。

注:由于时间原因以上案例可能存在无法打开的情况。如需索取相关案例可点击右侧“方案咨询”在线联系、或者微信搜索“蓝橙互动”公众号获取案例。

从运营的角度讲制作小程序不昰从程序的角度讲开发,所以简单明晰通俗易懂,小白也能按照流程完成制作小程序
微信小程序制作小程序步骤及流程
1.确定好微信小程序的的定位和目的
如行业,功能内容,目标用户目标市场,意向名单专业作用等。
2.落实小程序的程序制作小程序公司或者团队
若是外部团队,要签订合同打款之前,到公司实地考察情况小程序制作小程序的公司很多,并不是每家公司都会制作小程序出你心仪嘚小程序这要考察,更要好好沟通
3.确定好小程序制作小程序文案资料
包括设计需求,功能项目表格表单,广告语言模板栏目,按鈕跳转链接,运行逻辑计算公式,展现手段等
4.小程序设计方案,设计图片出炉
交付美工设计保持沟通,按照文案和沟通内容进行設计初版审核,是否需要更改设计细节敲定设计方案。
5.小程序设计切片程序制作小程序,后台制作小程序
设计稿交付前端切片程序编辑制作小程序。
6.小程序相关资料素材上传功能设置
添加相关的文本图片内容,完成小程序
进行不同环境测试,表单测试***测試,后台测试等
方法一:通过微信公众号后台快速注册微信小程序
小程序管理,添加快速注册,认证绑定。注册要申请一个邮箱單独设立密码。认证的时候要注意认证一般使用原公众号认证的资质,直接选择公众号认证就行
方法二:直接注册微信小程序
在微信公众平台官网首页,点击右上角的“立即注册”按钮选择注册的账号类型→填写邮箱和密码→激活邮箱→填写主体信息→选择主体→验證→填写管理员信息→完成注册(参考《微信小程序接入指南》)
完善信息,填写微信小程序名字介绍,上传小程序头像设置关键词。
把程序员设置为小程序项目管理员分配权限。
管理员按照微信开放平台指南在开发管理里面,上传开发版本
版本审核阶段可在审核版本中查阅。
手机收到“代码审核通过”的信息
小程序版本V1.0.1上线,以后就是V1.0.2版本了
设置允许被搜索。可在微信小程序里面搜索到尛程序。搜索名字
按照营业执照,添加小程序的地点位置可在此位置附近,搜索到小程序最多添加10个位置,需与营业执照主体相关財能添加地点
添加行业的关键词,方便搜索目前是自然流量的主要来源之一。
绑定微信号设置***,方便在线咨询
微信支付设置數据统计,开发管理二维码等。

参考资料

 

随机推荐