博客
关于我
游戏震屏效果的实现
阅读量: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/

    你可能感兴趣的文章
    Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
    查看>>
    mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
    查看>>
    mysqldump 参数--lock-tables浅析
    查看>>
    mysqldump 导出中文乱码
    查看>>
    mysqldump 导出数据库中每张表的前n条
    查看>>
    mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
    查看>>
    Mysqldump参数大全(参数来源于mysql5.5.19源码)
    查看>>
    mysqldump备份时忽略某些表
    查看>>
    mysqldump实现数据备份及灾难恢复
    查看>>
    mysqldump数据库备份无法进行操作只能查询 --single-transaction
    查看>>
    mysqldump的一些用法
    查看>>
    mysqli
    查看>>
    MySQLIntegrityConstraintViolationException异常处理
    查看>>
    mysqlreport分析工具详解
    查看>>
    MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
    查看>>
    Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
    查看>>
    mysql_real_connect 参数注意
    查看>>
    mysql_secure_installation初始化数据库报Access denied
    查看>>
    MySQL_西安11月销售昨日未上架的产品_20161212
    查看>>
    Mysql——深入浅出InnoDB底层原理
    查看>>