游戏震屏效果的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/absurd/article/details/48844105

震屏效果在游戏里使用相当广泛的,特别在被物体撞击的时候,震屏效果能大大提高游戏的真实感。我开始以为实现震屏效果很简单,通过正弦函数去设置场景位置偏移量即可,但真正去做时发现还是有一点点挑战。

1.通过正弦函数去设置场景位置偏移量,只能实现单独的上下/左右/斜线震动,怎么也无法实现其它游戏里那种效果。仔细分析之后才知道,垂直和水平方向分别分别用正弦函数和余弦函数计算偏移量。

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

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

3.我希望可以让任何一个控件都可以支持震动效果,而不光是整个场景才能震动,同时又不想修改基类UIElement。当然装饰模式是比较好的选择,不过在JS不需要那么麻烦。UIShaker去重载它所在容器的paintSelf函数就行了,UIShaker放到任何一个控件里面,启用UIShaker时就会让这个控件震动,震动完成后自动恢复原状。

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

TangIDE里使用震屏控件非常方便,拖动一个震屏控件到场景中,在特定事件发生时启用它即可,整个过程不需要写一行代码。

震屏控件的完整实现请参考CanTK的源码。

展开阅读全文

没有更多推荐了,返回首页