游戏震屏效果的实现-白红宇

游戏震屏效果的实现

阅读量：759 次

发布时间：2019-03-23

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

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

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

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

多方向震动的实现

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

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

var xo = aX * Math.cos(angle);var yo = aY * Math.sin(angle);

参数化实现

为了适应不同的应用场景，我们需要对震动效果进行参数化控制。主要参数包括：

振幅调整：通过设定不同幅度控制震动的大小

振动次数：通过设定震动次数控制震动重复次数

振动持续时间：通过设定持续时间控制震动时长

振动衰减方式：通过设定衰减方式控制震动衰减速率

具体实现如下：

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;}

可组件化实现

为了确保不同控件都能轻松支持震动效果，而不需要修改现有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;}