博客
关于我
游戏震屏效果的实现
阅读量:759 次
发布时间:2019-03-23

本文共 2598 字,大约阅读时间需要 8 分钟。

如何实现震屏效果并美化文章结构:

本文介绍了在游戏开发中实现震屏效果的方法及实现原理。

传统上,开发者采用正弦函数处理场景位置偏移量来实现震屏效果。这种方法主要能够实现单一方向(上下、左右或对角线)的震动效果。经过深入分析,我们发现通过组合正弦函数和余弦函数分别处理垂直和水平方向的偏移量才能实现更加复杂的震动效果。

  • 多方向震动的实现
  • 要实现多方向震动,需要将位置偏移量区分为垂直和水平两个维度。具体来说,可以将垂直方向的偏移量用正弦函数处理,水平方向的偏移量用余弦函数处理。通过这种方式,我们可以实现诸如上下晃动、左右摇晃、甚至对角线震动等多种效果。

    著名UI摇晃器的实现代码如下:

    var xo = aX * Math.cos(angle);var yo = aY * Math.sin(angle);
    1. 参数化实现
    2. 为了适应不同的应用场景,我们需要对震动效果进行参数化控制。主要参数包括:

      • 振幅调整:通过设定不同幅度控制震动的大小
      • 振动次数:通过设定震动次数控制震动重复次数
      • 振动持续时间:通过设定持续时间控制震动时长
      • 振动衰减方式:通过设定衰减方式控制震动衰减速率

      具体实现如下:

      UIShaker.prototype.setAmplitudeX = function(value) {    this.amplitudeX = value;    return this;}UIShaker.prototype.setAmplitudeY = function(value) {    this.amplitudeY = value;    return this;}UIShaker.prototype.setDuration = function(value) {    this.duration = value;    return this;}UIShaker.prototype.setTimes = function(value) {    this.times = value;    return this;}UIShaker.prototype.setAmplitudeModifier = function(value) {    this.amplitudeModifier = value;    return this;}
      1. 可组件化实现
      2. 为了确保不同控件都能轻松支持震动效果,而不需要修改现有UI元素,我们采用了装饰模式。这种实现方式通过覆盖并重新定义组件的绘制方法来实现效果。

        代码大致如下:

        UIShaker.prototype.setEnable = function(enable) {    var parent = this.getParent();    if (!parent || this.enable == enable) {        return this;    }    if (!enable) {        this.enable = enable;        return this;    }    var me = this;    var aX = this.amplitudeX ? this.amplitudeX : 0;    var aY = this.amplitudeY ? this.amplitudeY : 0;    var n = this.times ? this.times : 1;    var duration = this.duration ? this.duration : 200;    var startTime = Date.now();    var oldPaintSelf = parent.paintSelf;    var range = n * 2 * Math.PI;    var am = this.amplitudeModifier;    parent.paintSelf = function(canvas) {        var dt = (Date.now() - startTime);        if (dt < duration) {            var factor = 1;            var percent = dt/duration;            var angle = range * percent;            var xo = aX * Math.cos(angle);            var yo = aY * Math.sin(angle);            if (am === "i") {                factor = percent;            } else if (am === "d") {                factor = (1-percent);            } else if (am === "i->d") {                factor = 2 * (percent < 0.5 ? percent : (1-percent));            }            xo *= factor;            yo *= factor;            canvas.translate(xo, yo);        } else {            parent.paintSelf = oldPaintSelf;            me.enable = false;        }        oldPaintSelf.call(parent, canvas);    }    return this;}
        1. 使用示例
        2. 在实际应用中,开发者只需将摇晃器组件拖入场景中即可。一旦需要触发震动效果,简单调用shake()方法即可。整个过程完全不需要手动调整代码,完成后系统会自动恢复原状。

          通过上述方法,我们成功实现了桌面或移动设备上的震屏效果,显著提升了用户体验。

          以上就是震屏效果的核心实现细节及应用方法。

    转载地址:http://fawkk.baihongyu.com/

    你可能感兴趣的文章
    Mysql8.0以上重置初始密码的方法
    查看>>
    mysql8.0新特性-自增变量的持久化
    查看>>
    Mysql8.0注意url变更写法
    查看>>
    Mysql8.0的特性
    查看>>
    MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
    查看>>
    MySQL8修改密码的方法
    查看>>
    Mysql8在Centos上安装后忘记root密码如何重新设置
    查看>>
    Mysql8在Windows上离线安装时忘记root密码
    查看>>
    MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
    查看>>
    mysql8的安装与卸载
    查看>>
    MySQL8,体验不一样的安装方式!
    查看>>
    MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
    查看>>
    Mysql: 对换(替换)两条记录的同一个字段值
    查看>>
    mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
    查看>>
    MYSQL:基础——3N范式的表结构设计
    查看>>
    MYSQL:基础——触发器
    查看>>
    Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
    查看>>
    mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
    查看>>
    mysqldump 参数--lock-tables浅析
    查看>>
    mysqldump 导出中文乱码
    查看>>