欢迎光临
我们一直在努力

微信小游戏源码|微信答题小程序游戏源码支持H5及手机WAP

前言:微信小游戏源码是基于HTML5和微信小程序库开发的网页小游戏,其具有运行速度快、互动性好和平台移植容易等特点。

全套小游戏源码及演示:y.wxlbyx.icu

微信小游戏源码所包含的库:

●一个相位-小游戏模板,准备使用;

●《Flappy Bird》的一一个完整的迷你游戏演示;

●微信小游戏指南;

●完全集成了phaser 2.9 + pixiJs + p5重力引擎(来源ittlee /微信小游戏phaser);

●基于es6的可扩展代码结构(基于导入/导出特性);

●游戏功能使用:
微信小游戏源码|微信答题小程序游戏源码支持H5及手机WAP

。基于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.开始

  1. IDE和调试工具演示

7.让你的小游戏具有社交性可用的api

8.开始的资源和链接

9.在你开始之前,给你一些建议
微信小游戏源码|微信答题小程序游戏源码支持H5及手机WAP

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行文件中找到一个拼写错误要困难得多。

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《微信小游戏源码|微信答题小程序游戏源码支持H5及手机WAP》
文章链接:https://www.456zj.com/40915.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址