• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:微信小游戏源码是基于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.开始

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序原生开发简介发布时间:2022-07-18
下一篇:
egret白鹭游戏引擎打包成头条小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap