pixi.js开发微信小游戏 |
您所在的位置：网站首页 › 躲避障碍物的小游戏 › pixi.js开发微信小游戏 |
pixi.js开发微信小游戏
|
第一个微信小游戏。哈哈又是第一个。因为此次疫情，宅在家里，不再找点事来做就真的快发霉了，所以就有了这个小游戏。 开源github地址：github.com/CB-ysx/bear… 说明：只开源第一版代码。 何为第一版，就是用webpack+babel打包的版本。 这个是参考JetLua提供的pixi开发框架以及colloc微信小游戏的版本。 colloc源码地址：github.com/JetLua/coll… 感谢作者分享的pixi.js开发微信小游戏。 因为都是使用webpack+babel打包，导致打包后文件里npm第三方包代码一样，重复率太高，微信小游戏识别为抄袭。。。解释了也没用，一直不给审核通过，还扣了信用分。。。 所以这一版仅供参考。 后来我就重构了一版，去掉了webpack打包。 微信小游戏码
游戏部分截图
游戏玩法
点击屏幕左右两边，控制小熊躲避障碍物向上左右两边跳，跳越多层得分越高，踩到星星道具可直接加10分。 源码介绍github地址：github.com/CB-ysx/bear… 框架使用webpack+babel打包，采用JetLua提供的pixi开发框架。 目录结构说明： readmeimg目录不用管，这是我在github显示部分游戏截图存放的图片。 源码主要是src目录下game.json和project.config.json是微信小游戏必须的文件，可直接通过开发者工具创建项目后复制过来，当然为了配合本项目结构，需要修改game.json的内容。当然也可以直接使用本项目的game.json文件即可。 static目录存放一些静态资源，当然如果资源太大，可以选择存放在cdn之类的。 cloud目录存放的是云函数，本项目没有额外开发后端项目，直接使用小游戏提供的云开发。 game目录是游戏主域的源码 openDataContext目录是游戏子域的源码 主域：可理解为玩家可见的绘制域 子域：绘制的canvas对玩家不可见，需要在主域获取子域的canvas绘制出去，子域主要用来绘制一些敏感数据，比如用户的好友数据、群组数据等，该类数据微信不直接提供给开发者使用，只能从子域获取。 使用的主要的npm包本游戏使用pixi.js开发，由于微信小游戏是没有dom，只有canvas，直接使用pixi.js会有一些问题，需要加多个adapter来做兼容，这里就直接使用JetLua提供的。 @iro/wechat-adapter // 适配器 popmotion // 做动画 pixi @pixi/unsafe-eval 如何使用pixi.js开发主要看src/game/core/core.js文件 const ticker = PIXI.Ticker.shared; const loader = PIXI.Loader.shared; // 用于加载图片 const stage = new PIXI.Container(); // 舞台，之后所有的场景都是放在该舞台上显示出来 const monitor = new PIXI.utils.EventEmitter(); const pixelRatio = Math.min(2, devicePixelRatio); const renderer = new PIXI.Renderer({ // 使用webgl view: canvas, // canvas在window上，直接使用 antialias: true, backgroundColor: 0x171a24, width: width * pixelRatio, height: height * pixelRatio }); const zoom = { mix: [ renderer.screen.width / design.width, renderer.screen.height / design.height ], get max() { return Math.max(...this.mix); }, get min() { return Math.min(...this.mix); } }; renderer.plugins.accessibility.destroy(); renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => { // 适配点击事件 point.set(x * pixelRatio, y * pixelRatio); }; ticker.add(() => renderer.render(stage)); // 渲染 入口app.js 引入core.js等文件，然后做一些监听（页面显示，路由跳转等） 这里提下音乐播放相关问题，小游戏挂起（回到微信页面等）会触发暂停播放音乐，然而再次打开小游戏时，音乐并不会继续播放。查了下可使用微信的接口来监听阻断音乐播放事件。 wx.onAudioInterruptionBegin(()=> { // 阻断音乐播放 console.log('onAudioInterruptionBegin'); }); wx.onAudioInterruptionEnd(()=> { console.log('onAudioInterruptionEnd'); // 此时回到游戏页面了，发布该事件 monitor.emit('wx:onAudioInterruptionEnd'); }); ... monitor.on('wx:onAudioInterruptionEnd', ()=> { // 监听该事件，播放音乐 // 这里填空的话，会自动获取最后一次播放的音乐 wx.$audio.playBgm('', true); }).on('muted:bgm', (muted)=> { wx.$audio.muteBgm(muted); }).on('muted:sound', (muted)=> { wx.$audio.mute(muted); }); 路由监听 monitor .on('scene:go', (name, opt = {}) => { switch (name) { case 'preload': {// 跳转到加载页 pointer = preload; preload.show(opt); break; } case 'home': {// 游戏首页 pointer = home; home.show(opt); break; } case 'game': {// 游戏页 pointer = game; game.show(opt); break; } } }); // 刚进来，先去加载页 monitor.emit('scene:go', 'preload'); 游戏开发其他不做多介绍了，可自行查看源码了解。 这里介绍下游戏开发逻辑。 分解考虑到后续的功能增加，这里先拆分游戏组件，分离出可复用可扩展的元素。 因为本游戏是控制小熊在方块上跳，小熊和障碍物都是出于各个方块上，因此，方块可拆分出来。 Block类 所有方块的基类（也是空方块） 方块内有自己的container，用于存放道具，当然方块背景也是存放在container内，在游戏中就直接把container添加进游戏场景中即可，不需要知道方块的属性等。 class Block { constructor(bg) { this.uid = wx.$util.uuid(); // 每个方块都有属于自己的id this.type = BLOCK_TYPE.EMPTY; // 方块的类型 this.sw = 0; // 方块的大小 this.sh = 0; this._scale = 1; this.container = new PIXI.Container(); this.bg = pixiUitl.genSprite(bg); // 方块图片 this.sw = this.bg.width; this.sh = this.bg.height; this.container.addChild(this.bg); this.container.width = this.sw; this.container.height = this.sh; } ...... }接着是具备道具功能的方块，继承与Block /** * 有障碍物的方块 */ class BarrireBlock extends Block { constructor(bg) { super(bg); this.type = BLOCK_TYPE.BARRIER; // 在方块上放置障碍物 this.barrier = new PIXI.Sprite(); this.barrier.anchor.set(0.5, 0.5); this.barrier.x = this.container.width / 2; this.barrier.y = 18; this.container.addChild(this.barrier); } setBarrier(name) { // 设置障碍物图片 this.barrier.texture = pixiUitl.getTexture(name); return this; } hideBarrier() { // 清空障碍物 this.barrier.texture = null; } } /** * 假的方块（踩上去0.5秒后就会掉落） */ class FakeBlock extends Block { constructor(bg) { super(bg); this.type = BLOCK_TYPE.FAKE; this.waitToFall = false; } init() { this.waitToFall = false; } startToFall() { this.waitToFall = false; } fall() { // 假的方块，被踩中后会自动掉落 return new Promise(resolve=> { if (this.waitToFall) { tween({ from: { y: this.y, alpha: 1 }, to: { y: screen.height, alpha: 0 }, ease: easing.easeIn, duration: 200, }).start({ update: v => { this.y = v.y; this.alpha = v.alpha; }, complete: resolve }); } else { resolve(); } }); } }线 有了方块，还需要一个统一管理每一行的方块的类，因为每一行的方块都是同时出现，超过一定行数后是同时消失。 所以做多一个Line类来管理。 池 因为该游戏会频繁生成方块，所以做多一个方块池来管理，每次创建都从该池中获取方块，如果不存在，则再新建。方块消失时自动放回池里待用。 熊 熊也跟方块类似，需要一个container，因为熊身上可能会有一些道具效果（比如保护圈）。 方块生成规则好了，拆分好了这些类，接下来就是如何生成方块（如何放置障碍物等，不能出现必死的道路） 这里是从底部往上，一行一行的生成，前几行固定生成没有任何功能的方块。 前几行的方块数量由listData控制 const lineData = [1, 2, 3, 4, 3, 4, 3, 4, 3, 4, 3, 4]; 之后的就每一行比上一行随机+-一个方块。 接下来就是重点，如何保证不会出现必死的道路。 需要通过上一行的方块功能来判断，可能比较复杂，讲不清晰，我自己能脑补画面，懒得画图了。。。 1、如果当前方块的前一个方块是障碍物，则该位置也不允许出现障碍物。 2、如果上一行比当前行数量多 2.1、上一行于当前方块相邻的两个方块如果都不是障碍物，那么该位置就可以随机出现障碍物，否则当前方块不允许出现障碍物。 2.2、当前方块是当前行的最后一个，且上一行的最后一个是障碍物，那该位置也可以是随机出现障碍物。 3、如果上一行比当前行数量少 3.1、当前行第一个和最后一个都可以是随机出现障碍物，最后一个可出现的前提是前一个非障碍物。 3.2、上一行相同下标位置是障碍物，那该行该下标的方块也可以是随机出现障碍物。 控制障碍物的数量，随着行数增加而增加： Math.random() < (0.4 + this.lineNum * 0.005) 小熊跳跃小熊跳跃如何获取下一个方块，全局存放一个小熊所在方块在所在行的下标index。如果向左跳，则获取下一行的index-1位置的方块，否则获取index+1位置的方块。 如果方块不存在或者是障碍物，则判断游戏失败。 否则根据该方块的xy坐标计算小熊需要跳跃的位置。这里需要注意的是，没跳跃一层，所有方块就会下降一层，所以最终小熊跳跃停止后的y值是不变的。 子域绘制需要注意的是，在子域绘制完排行榜等数据后，在主域绘制方法如下： ticker.add(this.update, this); update() { if (this.showEnding) { // 显示结束分数 canvas = wx.$open.getCanvas(); this.endSprite.texture = PIXI.Texture.from(canvas); this.endSprite.texture.update(); } } 最后大概就分享这么多。 原文地址codebear.cn/article?id=… |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |