精华内容
下载资源
问答
  • 微信小游戏开发教程
    千次阅读
    2018-12-13 18:33:05

    微信小游戏开发教程-游戏实现1

    概述

    微信开发者工具官方提供一个飞机大战的游戏Demo,这里我们不再使用这个demo,我们以FlappyBird为例,为了让读者更加容易理解。

    源码

    https://github.com/onlynight/FlappyBird

    强烈建议读者根据教程自己实现一遍游戏,这让能让你更加熟悉开发的流程和代码的原理;在一些不清楚的地方可以参考源码实现的方法。

    游戏开发

    首先我们在 src 目录下新建一个 base 目录用于存放基类,然后创建一个基类 Sprite,这个类中会包含游戏的的一些通用功能,例如2d绘图,碰撞检测等。

    1. canvas#drawImage()

    这个方法是2D游戏的核心绘图函数,用于将图片绘制到canvas上。

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
    

    2. 碰撞检测

    碰撞检测对游戏体验影响比较大,有多种碰撞检测方法:

    a. 中心点检测法

    这种检测方法代码最简单,只需要判断中心点是否在目标矩形区域内即可:

    isCollideWith(target) {
    	let targetX = target.x + target.width / 2
    	let targetY = target.y + target.height / 2
    
    	return (targetX >= this.x &&
    	  targetX <= this.x + this.width &&
    	  targetY >= this.y &&
    	  targetY <= this.y + this.height)
    }
    

    b. 边缘碰撞检测法

    图片都是矩形,当两个矩形有任何一部分重合即视为碰撞:

    isClollideEdgeWith(target) {
    	return ((target.x >= this.x &&
    	    target.x <= this.x + this.width &&
    	    target.y >= this.y &&
    	    target.y <= this.y + this.height) || // top left
    
    	  (target.x + target.width >= this.x &&
    	    target.x + target.width <= this.x + this.width &&
    	    target.y >= this.y &&
    	    target.y <= this.y + this.height) || // top right
    
    	  (target.x >= this.x &&
    	    target.x <= this.x + this.width &&
    	    target.y + target.height >= this.y &&
    	    target.y + target.height <= this.y + this.height) || // bottom left
    
    	  (target.x + target.width >= this.x &&
    	    target.x + target.width <= this.x + this.width &&
    	    target.y + target.height >= this.y &&
    	    target.y + target.height <= this.y + this.height)) // bottom right
    }
    

    Sprite 完整代码源码如下:

    // @author: wyndam
    // @email: only.night@qq.com
    
    /**
     * 精灵类,包含绘图以及碰撞检测等
     */
    export default class Sprite {
    
      constructor(imgSrc, x, y, width, height) {
        // 当前对象的坐标以及尺寸
        this.x = x
        this.y = y
        this.width = width
        this.height = height
    
        // 当前对象显示的图片
        this.img = new Image()
        this.img.src = imgSrc
    
        // 标识当前对象是否显示
        this.visible = true
      }
    
      /**
       * 将图片绘制到 canvas 上
       * {@param ctx cancas context 对象}
       */
      drawToCanvas(ctx) {
        if (!this.visible) {
          return
        }
    
        ctx.drawImage(
          this.img,
          this.x,
          this.y,
          this.width,
          this.height
        )
      }
    
      /**
       * 中心点检测
       * {@param target 目标物体}
       */
      isCollideWith(target) {
        if (!this.visible || !target.visible) {
          return
        }
    
        let targetX = target.x + target.width / 2
        let targetY = target.y + target.height / 2
    
        return (targetX >= this.x &&
          targetX <= this.x + this.width &&
          targetY >= this.y &&
          targetY <= this.y + this.height)
      }
    
      /**
       * 严格边缘检测,会误判
       * {@param target 目标物体}
       */
      isClollideEdgeWith(target) {
        if (!this.visible || !target.visible) {
          return
        }
    
        return ((target.x >= this.x &&
            target.x <= this.x + this.width &&
            target.y >= this.y &&
            target.y <= this.y + this.height) || // top left
    
          (target.x + target.width >= this.x &&
            target.x + target.width <= this.x + this.width &&
            target.y >= this.y &&
            target.y <= this.y + this.height) || // top right
    
          (target.x >= this.x &&
            target.x <= this.x + this.width &&
            target.y + target.height >= this.y &&
            target.y + target.height <= this.y + this.height) || // bottom left
    
          (target.x + target.width >= this.x &&
            target.x + target.width <= this.x + this.width &&
            target.y + target.height >= this.y &&
            target.y + target.height <= this.y + this.height)) // bottom right
      }
    
    }
    

    创建渲染循环

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

    注意:若您想要在下次重绘时产生另一个动画画面,您的回调例程必须调用 requestAnimationFrame()。
    

    main.js中:

    我们创建一个 loop 函数,然后在 loop 函数中调用 requestAnimationFrame 方法,然后在初始化时再调用一次 requestAnimationFrame ,并且将 requestAnimationFrame 的执行指向 loop函数,这样就实现了循环。

    // @author: wyndam
    // @email: only.night@qq.com
    
    let ctx = canvas.getContext('2d')
    
    export default class Main {
    
      constructor() {
    
        this.onCreate()
        
      }
    
      onCreate(){
    
        this.bindLoop = this.loop.bind(this)
        window.cancelAnimationFrame(this.aniId);
    
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
      }
    
      loop(){
        
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
    
      }
    
    }
    

    绘制背景

    接下来我们绘制游戏的背景,先绘制一个静态的背景,然后我们再让背景动起来。

    1. 新建 runtime 包
    2. 新建一个 background.js 文件
    3. 新建一个 Background 类,然后将背景填入默认参数
    // @author: wyndam
    // @email: only.night@qq.com
    
    import Sprite from '../base/sprite.js'
    
    const BG_IMG_SRC = 'images/bg_day.png'
    const BG_IMG_WIDTH = 288
    const BG_IMG_HEIGHT = 512
    
    export default class Background extends Sprite {
    
      constructor() {
        super(BG_IMG_SRC, 0, 0, BG_IMG_WIDTH, BG_IMG_HEIGHT)
      }
    
    }
    

    以上静态背景类就创建好了,然后我们将它添加到绘制流程中去。

    1. main.js中添加一个新的属性 this.bg = new Background()
    2. loop函数中调用绘制函数即可 this.bg.drawToCanvas(),添加后的代码如下:
    // @author: wyndam
    // @email: only.night@qq.com
    
    import Background from './runtime/background.js'
    
    let ctx = canvas.getContext('2d')
    
    export default class Main {
    
      constructor() {
    
        this.onCreate()
        
      }
    
      onCreate(){
        this.bg = new Background()
    
        this.bindLoop = this.loop.bind(this)
        window.cancelAnimationFrame(this.aniId);
    
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
      }
    
      loop(){
    
        this.render()
        
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
    
      }
    
      render(){
        this.bg.drawToCanvas(ctx)
      }
    
    }
    

    这时候保存一下代码,你就可以看到背景图绘制到屏幕上了。

    接着我们让背景动起来,先在背景类的构造函数中添加一个位移变量:

    this.left = 0
    

    然后我们修改一下绘制函数,根据前面我们提到的无限循环背景原理,我们这里需要绘制两张背景图:

    drawToCanvas(ctx) {
    
    	ctx.drawImage(
    	  this.img,
    	  this.x + this.left,
    	  this.y,
    	  window.innerWidth,
    	  window.innerHeight
    	)
    
    	ctx.drawImage(
    	  this.img,
    	  this.x + window.innerWidth + this.left,
    	  this.y,
    	  window.innerWidth,
    	  window.innerHeight
    	)
    
    }
    

    接着,添加一个更新函数,动态修改 this.left的值,让背景动起来:

    update(){
    	this.left+=2
    }
    

    其中 this.left的增长率就是背景移动的速度,你可以自己修改一下这个值看下效果。

    最后在 main.jsloop函数中调用更新函数即可让背景动起来,修改后的代码如下:

    // main.js
    // @author: wyndam
    // @email: only.night@qq.com
    
    import Background from './runtime/background.js'
    
    let ctx = canvas.getContext('2d')
    
    export default class Main {
    
      constructor() {
    
        this.onCreate()
        
      }
    
      onCreate(){
        this.bg = new Background()
    
        this.bindLoop = this.loop.bind(this)
        window.cancelAnimationFrame(this.aniId);
    
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
      }
    
      loop(){
    
        this.update()
        this.render()
        
        this.aniId = window.requestAnimationFrame(
          this.bindLoop,
          canvas
        )
    
      }
    
      render(){
        this.bg.drawToCanvas(ctx)
      }
    
      update(){
        this.bg.update()
      }
    
    }
    
    更多相关内容
  • 微信小游戏开发教程文档之进阶教程.pdf微信小游戏开发教程文档之进阶教程.pdf微信小游戏开发教程文档之进阶教程.pdf微信小游戏开发教程文档之进阶教程.pdf微信小游戏开发教程文档之进阶教程.pdf微信小游戏开发教程...
  • 微信小游戏开发教程文档之进阶教程.docx微信小游戏开发教程文档之进阶教程.docx微信小游戏开发教程文档之进阶教程.docx微信小游戏开发教程文档之进阶教程.docx微信小游戏开发教程文档之进阶教程.docx微信小游戏开发...
  • 微信小游戏开发教程

    千次阅读 多人点赞 2018-12-13 18:40:18
    微信小游戏开发教程-前言 自18年年初对开发者开放小游戏接口以后小游戏越来越火热,本文就是对小游戏开发的入门教程,希望这篇文章能够帮到想要入门开发游戏的你。 微信小游戏开发者文档 ...这里是微信小游戏的官方开发...

    微信小游戏开发教程-前言

    自18年年初对开发者开放小游戏接口以后小游戏越来越火热,本文就是对小游戏开发的入门教程,希望这篇文章能够帮到想要入门开发游戏的你。

    哈哈哈,看到有人说我故意分成好几篇刷PV,改了一下删了两篇,我觉得文章写太长估计也没人能耐心看玩,还专门分了下页。如果你很直接想直接看实现的话可以去看实现的分析文章,也可以直接看源码。

    游戏实现:

    微信小游戏开发教程-游戏实现1
    微信小游戏开发教程-游戏实现2
    微信小游戏开发教程-游戏实现3
    微信小游戏开发教程-游戏实现4

    项目地址

    https://github.com/onlynight/FlappyBird

    先看下本教程最后实现的效果

    preview

    项目地址: https://github.com/onlynight/FlappyBird

    微信小游戏开发者文档

    https://developers.weixin.qq.com/miniprogram/dev/index.html

    这里是微信小游戏的官方开发教程,主要是说明以下几个问题:

    1. 注册小程序/小游戏 appId
    2. 安装开发工具,以及开发工具的使用
    3. 小游戏的项目结构
    4. 小游戏拥有的能力(小游戏能调用那些微信api)
    5. 小游戏的发布/运营

    以上这些官方文档已经相当詳細这里就不再赘述,本文主要是教你如何使用微信开发者工具从0开始开发一个小游戏。

    面向读者

    看这篇文章前需要你具备一定的能力,你最好是:

    1. Java开发
    2. 大前端开发(android/ios/web前端)

    你需要有阅读javascript代码的能力。

    微信小游戏开发教程-新建项目

    1. 新建小游戏项目

    在这里插入图片描述

    我们这回使用空项目,不要勾选使用模板创建。

    2. 添加小游戏必要文件

    项目创建好以后我们发现缺少一些必要的文件,我们手动添加即可:

    1. game.json

      这个文件是小游戏的配置文件,我们只做如下设置即可:

      {
        "deviceOrientation": "portrait",
        "showStatusBar": false
      }
      

      这个文件需要在项目根目录下;
      詳細的其他配置参数,请查看微信的官方文档。

    2. game.js

      这个是小游戏的入口文件,相当于main函数,这里我们先新建一个空文件放着这里,稍后添加必要代码。

    3. 导入必要的库

    为了让游戏引擎感知不到运行js的环境变化,微信提供了 weapp-adapter.js 用来适配微信内置浏览器不知道的 dom api。当然这个适配器不是必须的,你可以不适用这个适配器。

    1. 项目根目录下新建 src/libs文件夹;

    2. weapp-adapter.js文件复制到 src/libs目录下;

    3. 还有一个库,为了模拟 ES6 中的私有变量,可是可选添加,代码如下:

      // symbol.js
      
      /**
       * 对于ES6中Symbol的极简兼容
       * 方便模拟私有变量
       */
      
      let Symbol  = window.Symbol
      let idCounter = 0
      
      if (!Symbol) {
        Symbol = function Symbol(key) {
          return `__${key}_${Math.floor(Math.random() * 1e9)}_${++idCounter}__`
        }
      
        Symbol.iterator = Symbol('Symbol.iterator')
      }
      
      window.Symbol = Symbol
      
      
    4. game.js中导入这两个库

    // file: game.js
    import './src/libs/weapp-adapter'
    import './src/libs/symbol'
    

    4. 添加资源文件夹

    目录结构如下:

    ├─audio				// 方音频资源文件
    ├─images			// 方图片资源文件
    └─src				// 代码资源文件
        ├─base			// 基类
        ├─libs			// 库
        └─runtime		// 运行时组建
    

    在这里插入图片描述

    我们在 src 目录下添加代码资源入口文件 main.js,并创建一个类:

    // filename: main.js
    
    export default class Main {
    }
    

    在 game.js 中应用这个类,这样整个工程就算创建好啦。

    微信小游戏开发教程-2D游戏原理讲解

    原理

    为了更加形象的描述,这里先上一张图:

    在这里插入图片描述

    1. 背景

      a. 首先,我们看到背景好像是一张无限长的图片在向下移动。实际则不然,这是一张顶部和底部刚好重叠的图片。这是一种节省资源讨巧的做法,然后绘制的时候同时绘制两张刚好拼接在一起,下面我们画一张图来形象的说明。

      在这里插入图片描述

      b. 我们看到这张图片是首尾可以拼接到一起的一张图片,然后两张图拼一起一起是下面这样:

      在这里插入图片描述

      c. 下面红色的框代表屏幕显示的区域,就飞机大战的情况我们将背景图的初始状态设置如下:

      在这里插入图片描述

      d. 然后让图片逐渐往下移,我们看到中途的状态是这样:

      在这里插入图片描述

      e. 最后移动到最顶部的时候重置到最初的状态,这样就实现了背景图的无限循环。这是2D游戏中常用的背景图技巧。

      在这里插入图片描述

    2. 物体移动

      游戏中敌人的移动和子弹的移动还有玩家自身机体的移动我们统一称为物体的移动。

      先来看敌人和子弹的移动,这实际上就是一张图片在屏幕上竖直方向上移动。然后不断刷新位置,人眼看到就像是在移动一样。

    3. 边缘检测

      玩家操控的机体我们要控制它在屏幕内,超出屏幕外就会很奇怪,所以这里要做以下边缘检测,当玩家移动到屏幕外时限制到屏幕边缘无法往边缘外移动。

    4. 碰撞检测

      游戏中我们看到,子弹打中敌人的时候就代表了消灭敌人,什么情况下才是打中了敌人呢?当子弹和敌人机体碰撞的时候即代表打中了敌人。如何判断子弹打中了敌人?这里我们用一种较为简单的方法判断,旨在说明碰撞检测原理。

      我们假设敌人飞机在屏幕上是一个放快,子弹也是一个方块。这两个方块在屏幕上都有绝对坐标,当这两个方块的区域有重合的时候即发生了碰撞。这样碰撞检测就很容易做,即判断两个矩形的区域是否重合即可。以上就是所谓的碰撞检测。

    游戏实现:

    微信小游戏开发教程-游戏实现1
    微信小游戏开发教程-游戏实现2
    微信小游戏开发教程-游戏实现3
    微信小游戏开发教程-游戏实现4

    展开全文
  • 这是微信小游戏开发实战系列的第16篇。 本节内容主要包括对微信小游戏进行优化的几个着手点以及具体的优化方式。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出...

    这是微信小游戏开发实战系列的第16篇。

    本节内容主要包括对微信小游戏进行优化的几个着手点以及具体的优化方式。

    如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。

    优化这件事儿我以前很少会在意,因为一直做手机游戏,手机硬件的更新速度非常的快,更快的计算能力,更强的渲染能力,更大的内存。这就导致了如果你不是做一个大型游戏的话,几乎是不太用考虑优化的。

    直到我开始做微信小游戏,作为一个小游戏是有诸多的限制的,计算能力,渲染能力,尤其是对游戏大小的限制(不能超过4M),这些限制让我不得不重新的转变一些之前做游戏的想法。

    刚开始做完精致1010时,其实也没太在意游戏的优化,因为游戏本来就比较小,再加上使用简约的风格,素材资源比较少,所以整个游戏运行起来还是挺流畅的。但是,当我开始不停的为这个小游戏进行扩展增加更多的内容时,问题出现了。

     7月4号,我更新了一个新的游戏模式:闯关模式。相当于将原有的游戏扩充了一倍的内容。

    我们看一下下方的两张小游戏后台的数据统计图。这里有两项比较重要的数据:

    总耗时:是指从玩家点击游戏图标到正式进入到游戏中的时间。

    CPU: 是指游戏运行中所需要消耗的计算量。

    可以看到在增加了闯关模式之后,游戏的启动时间和 CPU 都开始上升。其中最严重的莫过于启动时间的提升,最高值达到 9 秒钟,想一个如果一个玩家打开一个小游戏需要等待 9 秒钟的时间才能进的去的话,很可能就不会再次打开它了。

    针对上述的问题,我开始着手对游戏进行优化,首先看了一下官方文档的优化建议。

    官方优化建议在这里:https://gamemaker.weixin.qq.com/doc/minigame/optimize.html

    内容相对较少,只有一些原则,缺少具体详细的指导。但是至少是有了一些方向了,于是我开始踏上了小游戏优化的旅程。

    下面记录的就是我针对一个已上线的微信小游戏的优化操作。

    精简游戏资源

    每一个被导入的游戏资源最终都会包含在游戏的包体中,在游戏开发的过程中会导入很多的资源,包含各种的图片,音效,数字等等,有些资源最终没有被用到,这时候要仔细的检查这些导入的资源,找到并删除那些没有用到的资源,以避免它们增加游戏的大小。

    游戏中的最多的资源类型就是图片,对于图片资源我们要坚持一个原则:尽可能以最小的图片达到预期的效果。

    比如说游戏中的对话框背景图,原来使用的是一张 380x580 的圆角矩形图片,在等比例的缩小一倍后,最终使用了 190x290 的图片。

    虽然边角和阴影有部分的细节损失,但是总体上是可接受的,这样原来的一张大图就缩减了一半的大小。

    对于图片资源的另一个原则就是:复用。只要能重复使用同一张图片的地方,那就一定要重复使用同一张图片。

    如图,在优化后的精致1010的首页中,8个按钮只使用了两种类型的图片,一个是长的圆角矩形(用于声音和震感按钮),一个是方的圆角矩形(用于剩余的所有按钮)。通过调整图片的大小和颜色,就可以做出不同的按钮了。

    这里我使用的是圆角矩形, 因为圆角矩形在大幅度的放大或者缩小后,圆角处会出问题,所以使用了两种类型的圆角矩形,如果使用方脚矩形的话,那么所有的按钮复用一张图片就可以搞定了。

    精简游戏逻辑

    游戏逻辑指的就是我们的积木块了。

    首先删除游戏中没有用到的积木。仔细检查游戏中的逻辑积木,删除无用的或闲置的游戏积木,平时对于无用的积木块要及时的删除,不要放在那里,养成好习惯。

    其次还是要坚持“复用”的原则,对于重复的逻辑通过使用“函数”或者“通知”进行复用,避免多次使用重复的积木块。

    使用函数来复用逻辑

    举个例子,在精致1010中拖拽的方块不满足放置要求是会退回到原位置的,因为包含多种不满足要求的情况,所以有很多的“如果,否则”积木块,对于所有不满足的情况其实都重复用到了相同的两块积木。

    对于这种情况,我们就可以将重复的积木制作成一个函数。

    可以看到这个函数中设置了多个参数,这样对于所有需要移动缩小功能的地方,就都可以使用这个函数了。

    最后使用函数来替换原来重复使用的积木块。

    使用通知来复用逻辑

    使用函数有一定的限制,尤其是对于局部变量来说, 将局部变量以参数的形式传递给函数时,在函数内对局部变量的修改不会被保存。比如说一个局部变量 10,当作参数传入函数中,在函数内对局部变量进行加倍处理,最终结果应该是 20,但是函数执行完毕后,这个局部变量的值依然是 10,所以对于函数内处理的变量只能够使用全局变量

    那么对于需要处理局部变量的重复积木,我们可以通过使用“通知”来进行复用。

    如图,这是更换主题中的部分逻辑代码,可以看到红框框出的代码是重复使用的,这里我们可以将重复的代码放到一个通知中处理。

    对于需要用到重复积木的地方,我们只需要向自己发送一个通知即可。这样原来的这部分代码就通过复用被精简了一半。

    这里有一点需要注意一下:当前的微信小游戏开发工具的积木块的数量是有上限的。

    这是我前些天在增加新内容时遇到的问题,项目无法进行保存了,咨询过开发团队,才知道是代码超出了限制。

    所以要好好斟酌每一个需要使用的积木块,尽可能的以最少的积木块实现想要的功能。

    另外有一点需要考虑的是,当前的代码限制决定了你将要开发的游戏的体量, 如果你想要通过微信小游戏开发工具做一个比较大的游戏,那么就需要提前考虑一下这个代码限制了。

    合理规划场景

    在增加闯关模式时我原来的方案是重新创建一个场景,专门用于闯关模式。这样经典模式和闯关模式两个场景就能够各自独立。在后续不论是针对哪个模式进行修改也好,扩展也好,只需要到其对应的场景中进行开发即可。

    多创建一个场景,就相当于多了非常多的资源, 两种游戏模式之间,其实有非常多的东西都是可以共用的。但是,由于很多的资源和积木逻辑无法跨场景共用, 所以很多的内容就只能通过复制粘贴再创建一份了,这就导致了游戏中包含大量的重复的代码和资源。

    在遇到了最大代码限制之后,我不得不重新考虑场景的规划,将这两个场景合二为一。

    如图, 我将原来的“经典模式”和“关卡模式”两个场景合并到了一个“游戏”场景。在合并之后,节省了大量的代码空间,后来才能够增加“编辑”场景,实现用户自定义关卡的功能。

    这里的一点提示就是不要不加节制的使用场景, 如果能使用一个场景搞定的事情,那就不要用更多场景了。

    减少游戏中的精灵数目

    游戏场景中的精灵的数量决定了渲染和计算需要的消耗量。总体上来讲,精灵的数目越多需要的渲染和计算的量就越多。所以为了提升总体的性能,就需要尽量的精简游戏中的精灵的数量。

    点击调试游戏,可以在“全局变量”选项中看到当前场景中的精灵数。

    如图,在优化之前,初始场景中的精灵数目是 325。虽然游戏的界面看似非常简单,但是精灵数目却非常的多。

    我们的目标就是在保证游戏效果的基础上尽量的精简游戏中的精灵数目,为此我做了如下的优化。

    原本游戏中的这个 10x10 的网格是使用单个格子拼出来的, 所以画出这样一张网格就需要 100 个精灵。 我更换了一种方式,直接导入一个画好的 10 x 10 的网格图片,这样一个展示网格只需要使用 1 个精灵就可以了,这样一下就缩减了 99 个精灵。

    另外游戏中的所有的形状原本都是使用单个方块拼成的,现在我直接将形状制作成一张图片,这样就又能够减少非常多的精灵。

    最终经过优化后,场景中的精灵数目减少了一百多,这还是在后续增加了新功能之后的精灵数目。

    同时从CPU的指标中可以明显看的出来,优化后,消耗大幅下降,因为更少的精灵数目,就意味着更少的CPU消耗。

    创建一个精简的初始场景

    “游戏启动时间”是小游戏中的一个非常重要的指标,它意味着从玩家打开到正式进入游戏需要多长时间,通常这个时间越短越好。

    决定这个时间长短的因素很多,包括游戏的大小,资源的多少,网络的状况,玩家手机的性能等等,其中大部分因素其实是不可控的,除了我们上述提到的各种优化方法之外,还有一个方式可以帮助我们提升游戏的启动速度,就是创建一个尽可能简单的启动场景。

    原来的启动场景。

    新增的精简的启动场景。

    如图我为游戏增加了一个非常简单的启动场景,只包含了一个小蚂蚁的图标和很少量的积木块。这样场景的打开速度就会比原来快很多,因为需要加载的资源和积木块都非常的少。

    另外,不要忘了在作品设置中选择资源在“切换场景时加载”。

    这样由于启动的场景资源非常的少,就可以很快的加载完毕并打开了,然后我们再从启动场景加载打开后面资源比较多的场景。

    最后,总结一下,对于微信小游戏的优化,我们可以从下列几个方面着手:

    • 精简游戏资源

    • 精简游戏逻辑

    • 合理规划场景

    • 减少游戏中的精灵数目

    • 创建一个精简的初始场景

    通过这些优化操作,我成功地将精致1010的启动时间和性能消耗都降了下来,希望这些优化操作也能够给你提供一些参考。

    优化是一件永无止境的事情,我认为最好的优化是应该在制作之前进行的,因为一个更优的想法,一个更合理的规划要胜过这些事后的补救措施。

    如果不是制作微信小游戏我大概很难体会到在各种限制之内做东西的感觉,想想当年的游戏开发者要把游戏做到 256k 的卡带上,虽然限制更大,但是依旧不影响很多经典游戏的诞生。所以,在一定的限制之内进行创作,是否更容易激发一些灵感呢? 


    我是会做游戏也会教你做游戏的小蚂蚁,欢迎关注微信公众号【小蚂蚁教你做游戏】,领取全网最全的游戏开发系列原创教程资料。也欢迎加小蚂蚁微信(xiaomayi6669),交个朋友。

    展开全文
  • 微信小游戏开发教程-2D游戏原理讲解 原理 为了更加形象的描述,这里先上一张图: 背景 a. 首先,我们看到背景好像是一张无限长的图片在向下移动。实际则不然,这是一张顶部和底部刚好重叠的图片。这是一种节省...

    微信小游戏开发教程-2D游戏原理讲解

    原理

    为了更加形象的描述,这里先上一张图:

    在这里插入图片描述

    1. 背景

      a. 首先,我们看到背景好像是一张无限长的图片在向下移动。实际则不然,这是一张顶部和底部刚好重叠的图片。这是一种节省资源讨巧的做法,然后绘制的时候同时绘制两张刚好拼接在一起,下面我们画一张图来形象的说明。

      在这里插入图片描述

      b. 我们看到这张图片是首尾可以拼接到一起的一张图片,然后两张图拼一起一起是下面这样:

      在这里插入图片描述

      c. 下面红色的框代表屏幕显示的区域,就飞机大战的情况我们将背景图的初始状态设置如下:

      在这里插入图片描述

      d. 然后让图片逐渐往下移,我们看到中途的状态是这样:

      在这里插入图片描述

      e. 最后移动到最顶部的时候重置到最初的状态,这样就实现了背景图的无限循环。这是2D游戏中常用的背景图技巧。

      在这里插入图片描述

    2. 物体移动

      游戏中敌人的移动和子弹的移动还有玩家自身机体的移动我们统一称为物体的移动。

      先来看敌人和子弹的移动,这实际上就是一张图片在屏幕上竖直方向上移动。然后不断刷新位置,人眼看到就像是在移动一样。

    3. 边缘检测

      玩家操控的机体我们要控制它在屏幕内,超出屏幕外就会很奇怪,所以这里要做以下边缘检测,当玩家移动到屏幕外时限制到屏幕边缘无法往边缘外移动。

    4. 碰撞检测

      游戏中我们看到,子弹打中敌人的时候就代表了消灭敌人,什么情况下才是打中了敌人呢?当子弹和敌人机体碰撞的时候即代表打中了敌人。如何判断子弹打中了敌人?这里我们用一种较为简单的方法判断,旨在说明碰撞检测原理。

      我们假设敌人飞机在屏幕上是一个放快,子弹也是一个方块。这两个方块在屏幕上都有绝对坐标,当这两个方块的区域有重合的时候即发生了碰撞。这样碰撞检测就很容易做,即判断两个矩形的区域是否重合即可。以上就是所谓的碰撞检测。

    展开全文
  • 微信小游戏开发教程-游戏实现4

    千次阅读 2018-12-13 18:36:30
    微信小游戏开发教程-游戏实现4 玩家 在游戏中玩家扮演一直傻鸟,玩家不点击屏幕时候它会自动下落,玩家每次点击屏幕都会给小鸟一个向上的速度,然后小鸟会向上冲。这里我们模拟实现重力加速度下物体的速度变化。 ...
  • 2017最新微信小程序和微信小游戏开发70G全套视频教程+近900套H5微信小程序
  • 终于到了真正动手做游戏的时刻,在这一节里,我会带你从头开始将我们的“太空保卫者”按照设计方案制作出来。这一节里的内容会非常的多,一遍消化不了,可以多读几遍。别着急,慢慢来。 首先,我们要准备好游戏中...
  • 制作微信小游戏大致流程与微信小程序、Web类似,不同的在于是组件的使用。我们此节需要完成的小游戏需求为: 小球触碰矩形块会跳跃或攀爬 小球触碰顶部或底部游戏结束 点击屏幕将会使小球朝着该方向移动 小球进行...
  • 保存每个用户的分数,需要调用微信的云存储API,将用户的分数持久化的存起来 . // 保存用户数据,注意限制单条数据容量不得超过1024字节, // 单个用户数据总条数不得超过128条 wx.setUserCloudStroage(Object)复制代码 ...
  • 本篇主要内容包括使用微信小游戏开发工具实现图形的拖拽功能。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。 在“精致1010”游戏中,我们...
  • 这是微信小游戏开发实战系列的第11篇。 本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手...
  • 这是一个面向绝对新手的游戏开发系列教程,你无需具备任何的游戏开发经验,就可以跟随着这个系列教程一步一步的学习,最终开发出自己的游戏(这里所说的游戏是指微信小游戏)。 这个系列教程的目标是:让每个想要做...
  • 利用Cocos Creator开发工具进行打地鼠游戏的实战开发,结合大概30个视频课程,带你实现该款打地鼠游戏的开发,并最后上传到微信开发者工具进行体验! 游戏开发初学者、相关计算机专业的学习人群等。
  • 本文通过开发一个简单的小游戏,来带领大家实操一下开发小游戏的基本流程。快来和博主一起操作吧!!!
  • 微信小游戏开发零基础教程(一)-CocosCreator

    万次阅读 多人点赞 2018-12-14 00:58:57
    微信小游戏零基础教程(一)-CocosCreator最终效果预览准备工作创建工程测试第一个场景 最终效果预览 本教程最后制作的游戏效果: 准备工作 下载 微信开发者工具 最新版-&amp;amp;gt;下载地址 下载 ...
  • 微信小程序开发-麻将骰子:附详细教程案例源码.zip
  • 微信小游戏开发入门(一)-基础知识

    万次阅读 2018-01-12 20:55:51
    微信小游戏是在微信小程序的基础上添加了游戏库 API。小游戏只能运行在小程序环境中,所以小游戏既不是原生游戏,也不完全等同于 HTML5 游戏。但实际上小游戏面向的就是 HTML5 游戏开发者,为了能够让 HTML5 游戏低...
  • 根据上篇教程微信小游戏实战--cocos creator实现wordle游戏(一)我们已经完成了开发环境的搭建并创建了一个项目,接下来就可以正式山寨,哦不对,应该是正式开发wordle这款小游戏了。 熟悉Cocos Creator ...
  • 微信小游戏开发教程-游戏实现2

    千次阅读 2018-12-13 18:34:17
    微信小游戏开发教程-游戏实现2 绘制地面 类似于绘制背景,读者自行完成代码。src/runtime/land.js 简易View系统 坐标布局对于复杂的页面来说维护相当困难,因此这里我们引入布局的概念。我们定义一个 Group类( base...
  • 通过使用列表来实现可以设置权重的随机功能,以及游戏中的随机生成形状功能的具体实现。
  • 微信小游戏如何快速开通流量主,以及如何在游戏中接入广告进行盈利。
  • 微信小程序开发语言 开发微信小程序用什么语言 1、微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言)、WXSS(WeiXin Style Sheet 微信...
  • 新手小白从零开始开发微信小游戏

    千次阅读 2021-06-20 19:22:47
    如果你想开发一款属于自己的微信小游戏,那么看这篇文章准没错;如果你是新手小白,没有编程基础,没有任何头绪,那么更适合看这篇文章。因为1年前我也是这样一种状态,我将自己这1年的经历ji'l ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,550
精华内容 4,620
热门标签
关键字:

微信小游戏开发教程

友情链接: Synovial.zip