前言:微信小游戏源码是基于HTML5和微信小程序库开发的网页小游戏,其具有运行速度快、互动性好和平台移植容易等特点。
全套小游戏源码及演示:y.wxlbyx.icu
微信小游戏源码所包含的库:
●一个相位-小游戏模板,准备使用;
●《Flappy Bird》的一一个完整的迷你游戏演示;
●微信小游戏指南;
●完全集成了phaser 2.9 + pixiJs + p5重力引擎(来源ittlee /微信小游戏phaser);
●基于es6的可扩展代码结构(基于导入/导出特性);
●游戏功能使用:
。基于JSON的精灵动画;
。导入和缓存资产系统;
。动画;
。一个重力系统;
。碰撞系统;
。基于Leancloud的社交排行榜系统。
代码结构:
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
微信小程序游戏开发指南:
1.微信小游戏源码是如何运作的?
2.我是否可以编写自己的小游戏?什么时候发布?
3.限制是什么?就表现而言,可接受的期望是什么?
4.网页-迷你游戏和迷你游戏→网页转换是否可行?
5.开始
- IDE和调试工具演示
7.让你的小游戏具有社交性可用的api
8.开始的资源和链接
9.在你开始之前,给你一些建议
1)微信小游戏源码是如何运作的?
整体架构:就像网页游戏
微信小程序游戏是基于网页技术,主要使用的语言是Javascript。这个系统与网络上的类似:canvas元素是可访问的,我们可以在每一帧上绘制。我们可以访问WebGL API,因此能够使用GPU使用Shaders (GLSL语言)进行计算。
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
但是实施上有一些不同
然而,WebGL和Canvas API实现不同于你可以在大多数web浏览器上找到的本地web实现。小游戏的运行环境在iOS上是JavaScriptCore,在Android上是V8。它们都运行在没有BOM和DOM的环境中。没有全局文档,也没有窗口对象。因此,如果你想使用DOM API来创建像Canvas和Image这样的元素,它会抛出一个错误。更多官方小游戏文件(中文)。
Web Libraries可以适应小游戏环境
为了在网页和小游戏之间架起桥梁,微信小游戏团队一直在开发一个特殊的库,武器适配器。我们的目标是让网页库与迷你游戏兼容。然而,该库的当前实现仍然不完善,而且经常需要额外的工作来修复您打算使用的每个第三方库。
2)我是否能够编写自己的小游戏?什么时候发布?
我是否可以编写自己的小游戏?是的,你已经可以编写自己的小游戏了!你所需要的一切,从文档到开发工具,都是公开的。
有什么限制?就表现而言,可接受的期望是什么?
游戏图像风格:2D和3D都是可能的。
多亏了WebGL,我们还可以显示3D游戏,这将是GPU加速的。
性能:比Web游戏稍微优化的系统
这个系统还很年轻,处于beta测试阶段,但我们已经看到它的性能与网页游戏非常相似。就目前而言,一个很好的经验法则是,不要期望网页游戏能做的更多。
规模仍然是主要限制因素。
迷你游戏的最大限制之一是它的大小。微信目前只允许最多4mb的游戏包。你的游戏可能能够从外部服务器下载额外的资产,但要考虑到这些资产必须在每次游戏启动时获取。所以,就资产而言,游戏应该是相当轻的,3D游戏应该使用低多边形3D对象和低质量纹理。
4)网页游戏→微信迷你游戏转换是否可行?微信小游戏→网页游戏的转换如何?
网页→迷你游戏转换:主要取决于底层代码库
将网页游戏转换成迷你游戏是可能的。然而,根据所使用的特定库和游戏引擎,这个过程可能需要数天甚至数月的开发时间。事先审核游戏源代码是必要的,以估计具体的调整需要多少时间。
迷你游戏→网页转换:非常快!
如果使用标准的网页游戏框架进行迷你游戏开发,如Phaser,你的代码将基本兼容网页,所以无需太多调整就可以在浏览器上运行。
以官方迷你游戏为例
a、下载微信miniapp和迷你游戏IDE;
b、按照以下步骤运行腾讯示例代码;
c、你现在可以在你的手机上通过点击Eye按钮和扫描QRcode预览迷你游戏样本。
6)IDE和调试工具演示
IDE和调试工具与迷你应用程序相同。不过,这些都是纯中文的。总的来说,调试经验是非常好的,尽管它可能有一些bug,因为它的年轻。
为了清晰起见,这里将整个界面翻译成英文。
7)让你的小游戏具有社交性:可用微信api
迷你游戏的核心趣味之一是无缝接入微信平台内的社交功能,这增加了它们的活力和用户粘性。下面介绍主要机制以及如何使用它们。
获取当前用户信息
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
你得到什么:
。用户名;
。城市;
。语言;
。性别;
。照片URL;
●你还不能得到的:
。openID(但这可能是因为迷你游戏还没有绑定到官方账号,尽管openID很快就可以访问;
●你永远不会得到的:
。电话号码;
。真实姓名;
。任何其他个人资料资料。
你可以获得的其他个人信息:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
获取玩游戏的好友数据列表
wx.getFriendCloudStorage()
从用户的好友列表获取每个用户的数据;;
这些数据可以被修改和写入;
有利于好友排行榜和游戏中的好友状态提示;
获取Group-who-played-the-game数据列表
wx.getGroupCloudStorage()
从共享小游戏的群组中获取每个用户的数据;
这些数据可以被修改和写入;
适合群体游戏;
8)开始的资源和链接
迷你游戏
●文档
。迷你游戏官方文档
●代码存储库
。Phaser +小游戏模板,准备用户littlelee /微信小游戏Phaser。Threejs +小游戏端口
●IDE
移相器游戏库
●移相器的网站
●Phaser:创建你的第一 个游戏教程
●移相器的例子
●2.6移相器文档
9)在你开始之前给你一些建议
不要相信预览,一定要在真实设备上进行测试。
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
这是在模拟器上工作的一段代码,但不是在真实设备上:
限制第三方库的使用,因为经常需要额外的工作
像lodash这样的图书馆并不是现成的。您经常需要进入源代码,并根据DOM/BOM api修改部件,以真正实现加载它们。在Lodash上,您可以通过逐个添加特定的模块来解决问题,而不是一次性添加整个库。但这并不总是那么容易!
npm install --save lodash.forEach
NOT
npm install --save lodash
将代码分成更小的文件,使调试更容易
当前的IDE调试系统的工作方式与Chrome和Firefox上的调试系统不同。我遇到过的最大的挫折之一是,许多问题最终都会抛出一个非常模糊的、非特定的错误消息,除了失败的文件之外,没有任何关于问题来自哪里的信息。因此,将代码划分为更小的块是非常重要的,因为在1000行文件中寻找一个拼写错误,而没有任何提示,比在50行文件中找到一个拼写错误要困难得多。
- 海报