专栏首页Sign微信小游戏开发技巧

微信小游戏开发技巧

之前有幸收到掘金邀请去分享小游戏开发相关的技术主题,正好公众号一直也没有比较全面的和大家聊如何从技术层面做游戏,这里整理一下之前的分享ppt。

这篇文章会稍微不那么随便点。

啊,上面那部分可以删掉。


在一些时间以前,比如2012年之前,做web游戏的人还不是很多(就是用javascript写游戏的人)。

当时也没想那么多,就是为了制作一个「不需要下载,点开就能玩的游戏」,所以就投入到web游戏制作的大海中。

但那时很多人都说,「你这些东西(web游戏)看着蛮好玩的,但感觉没什么用啊」。

其实我不是很理解「没什么用」是什么概念,「好玩」难道不够吗?

然后时间来到2018年,微信推出了小游戏。于是web游戏制作技术忽然从一个「没什么用的技术」一跃变成了时下最潮流的技术。

自我介绍的部分

其实我只喜欢一个title,游戏制作人。但因为一直没有一款具有代表性的游戏,所以我一直不知道怎么做自我介绍。

真希望哪天可以自豪的介绍:我是 xx 游戏的制作人。

我所在团队是腾讯互娱的TGideas,会议上稍微吹了会,感兴趣的同学自行搜索。

接下来是正题:

主题分为4个部分(忽略旁边那个表情包):

  1. 基础概念
  2. 架构设计
  3. 部分算法
  4. 微信API

游戏的驱动由开发编写游戏逻辑,然后在渲染器中实时渲染到画布上。

微信小游戏和传统web游戏(canvas类)最大的区别在于API。

小游戏的表现既可以像跳一跳那样休闲,也可以像街机的格斗游戏一样热血,不要被想象力所限制,认为「小游戏就应该有小游戏的样子」。

当然,一般会有「小游戏就该是什么样」的想法的人,多少是对游戏有所了解的人才会发出的感慨,因为我们需要戴上名为「现实」的技术枷锁。

这种想法并没有错,反而比那些没有套上枷锁,而要求他人根据手机壳的颜色改变手机背景颜色的人要好很多。

但是,在戴上了技术枷锁以后还能保持天马行空的想象力,那才是最难能可贵的。

微信小游戏的文件结构

game.js以及game.json分别是小游戏的入口文件及配置文件。

res是游戏资源,也是游戏占用体积最大的地方。

adapter是利用微信API模拟浏览器API的库。

而src部分就是本次分享的重点内容。

我个人制作的小游戏目前画风都比较奔放,所以分享时借用团队制作的小游戏来介绍了。

游戏结构分为3个大的模块:

Base 模块管理脚本,用来组织起整个游戏的部分。负责游戏的开始,暂停,决定游戏该调用哪个场景。

Scene 场景模块,类似于不同的关卡,每个关卡里需要载入什么样的角色,什么样的敌人,播放什么样的音乐都由场景模块决定。

Role 角色模块,游戏逻辑中最重要的一个部分。不论是主角还是敌人,甚至场景里的一个宝箱,一颗子弹,都属于角色。

剩下的模块都是对不同游戏进行补完,因为一个格斗游戏和一个棋牌游戏所需要的模块差别是非常大的。

角色模块可以大致分为4个部分:属性、动画、指令、行为。

属性:我们可以把一个object叫做实体,这个实体里的属性就是角色的属性,比如坐标,hp,speed等等。

动画:角色的动画一般有属性动画,序列帧动画,骨骼动画这几种,这些动画中部分还有2d和3d的区别。

动画这一部分属于「跨领域」作业,因为要把一些「感性」的图像转化成「理性」的代码。这部分的介绍以后会陆续放出。

指令:指令是玩家输入手段的一种封装。

例如,「水果忍者」的滑动切水果的指令就是通过「触控」的API进行实现,而一些「连续技」,「虚拟摇杆」也需要对应的API组合来实现。

行为:角色的行为就是通过调整角色的属性而产生的一种结果。

如移动就是坐标x+=speed;sprite.play(move);

角色行为是游戏逻辑中最重要的一环,而角色之间的行为交互又伴随着大量的算法。

每种游戏所需要的算法都不相同,但是游戏里运行算法的计算方式是一致的。

如加速度方程,在代码中的实现实际上如就是

v+=a;

s+=v;

了解游戏算法的基本机制后,可以稍微扩展下,比如碰撞算法:

基本上每个算法的推导过程都可以单独作为一篇文章来讲了,感兴趣的同学可以自行搜索算法名称。

另外一些比较常用的游戏算法也可以了解下,比如:状态机,字典树,寻路,排序……

当然,游戏基于专业的游戏引擎去制作,可以达到事半功倍的效果。了解游戏运行机制可以帮你更快速的上手游戏引擎。

微信小游戏与传统web游戏最大的区别在于API。

微信小游戏有一部分与微信小程序不一样的API。

其中最特别的就是「开放数据」。

主域可以传数据到微信后台,但是却无法从微信后台获取数据。而开放数据域可以从微信后台获取数据,但是却无法现实以及将数据传入主域。

所以主域想要显示微信后台数据,必须在开放数据域绘制好数据,然后将开放数据域的sharedCanvas当作image通过drawImage函数绘制到主域的canvas中。

开放数据的一些注意事项

  1. sharedCanvas 只能被绘制到上屏 canvas 上。
  2. 上屏 canvas 不能调用 toDataURL,其 context 不能调用 getImageData。
  3. sharedCanvas 不能调用 toDataURL 和 getContext。
  4. 不能将上屏 canvas 和 sharedCanvas 以任意形式绘制到其他 canvas 上,包括 drawImage、createPattern、texImage2D、texSubImage2D。
  5. sharedCanvas 的宽高只能在主域设置

其中第5条常常容易被忽略,然后出现各种适配问题。


最后总结一下小游戏的运行机制。

  • 游戏从入口文件进入以后,开始执行渲染器。
  • 然后游戏的主逻辑会调用游戏下一步需要的场景模块。
  • 场景模块中调用当前场景所需要的角色模块。
  • 角色模块在接收到不同的指令后会产生不同的行为。
  • 角色行为之间通过大量算法进行交互,最终产生完整的游戏效果。

本文分享自微信公众号 - Sign(SignACG),作者:沙因

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 怎样开始制作一款微信小游戏?

    至于这个游戏是什么类型?竞技?休闲?益智?管它的,我连这个小游戏该叫什么名字都不知道。

    沙因Sign
  • 微信小游戏数据分享2

    小卜目前每天的新进在逐步上升,昨天的新进大概4k左右,留存掉到10%,大概和玩家年龄层发生变化有关。

    沙因Sign
  • 2个小时制作一款微信小游戏

    游戏是这个 基于cocos creator做的 Dolo的朋友们:Boo的冒险 ? 扫描菊花码进行游戏。 不想扫描的同学看动图。 ? 对,就是这样一个『蹦一蹦』...

    沙因Sign
  • 竞争红海下,游戏开发者如何突围终极指南

    内容来源:2018 年 09 月 08 日,Cocos CEO王哲在“2018 RTC 实时互联网大会”进行《Cocos 引擎助力游戏开发者突围》的演讲分享。I...

    IT大咖说
  • 我在微信跳一跳蝉联榜首,总结出上瘾的原因

    这是智先生的第68篇原创文章 2018.1 1 说起我的游戏生涯,那大概有十几年历史了。 从早期的红白机、MD、Game Boy到PS2、3DS和Xbox on...

    企鹅号小编
  • 微信又出新功能啦!

    2017年的尾巴,微信来了一记重磅! ? ? 在玩之前,你需要把微信更新到最新版本,iOS用户可以在App Store下拉刷新,安卓用户按照“我-设置-关于微信...

    企鹅号小编
  • 微信小程序游戏其实一般,我也就站在寒风里玩了一个小时

    NAUGHTY Tech —2018,祝大家狗年大吉吧— 2017 年 12 月 28 日火了一个游戏。你需要做的,就是通过按住屏幕的时间长短来控制一枚跳棋从一...

    企鹅号小编
  • 微信发布重磅更新!上线小游戏,小程序间可快速切换

    12月28日,微信官方通过给用户推送的“小程序功能升级”的内容中提到:“为了帮助用户更便捷地使用小程序,微信在主界面新增了小程序任务栏的功能。小程序菜单进行了升...

    企鹅号小编
  • 想开发微信小游戏,先看看腾讯是如何制定规则的

    关键时刻,第一时间送达! ? 作者 | 凌华彬、王哲 责编 | 徐威龙 一、前言 在第一篇文章《微信小游戏开发上手》中,我们给大家介绍了上手微信小游戏开发所需要...

    企鹅号小编
  • 关于微信跳一跳,读这篇文章就够了

    微信跳一跳,让这个元旦小长假格外热闹。一时间,朋友圈,微信群都被这款小游戏刷爆,网上已经有不少关于这款小游戏的文章,大多是上分攻略,外挂程序,今天笔者也尝试从个...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券