脚本实现【图片移动】的简单探索

夏虫沉默

在用纯脚本模拟重装机兵.金属探测仪的效果时，发现了几个问题：

JAVASCRIPT 代码复制

let x=$gamePlayer.screenX(), y=$gamePlayer.screenY();//获取玩家的画面xy位置
        let xTemp=x-24,yTemp=y-48;//设置绘制图案起点是玩家所在方格左上角
        $gameScreen.showPicture("1","$探测图2",0,xTemp,yTemp,100,100,255,0);
        var picture = $gameScreen.picture(1);//获取图片id为1的对象
        picture.move(0,xTemp,yTemp+48,100,100,255,0,30);//向下移动48pix距离
        this.wait(30);//等待0.5秒
        picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30);//向右移动48pix距离

let x=$gamePlayer.screenX(), y=$gamePlayer.screenY();//获取玩家的画面xy位置


        let xTemp=x-24,yTemp=y-48;//设置绘制图案起点是玩家所在方格左上角


        $gameScreen.showPicture("1","$探测图2",0,xTemp,yTemp,100,100,255,0);


        var picture = $gameScreen.picture(1);//获取图片id为1的对象


        picture.move(0,xTemp,yTemp+48,100,100,255,0,30);//向下移动48pix距离


        this.wait(30);//等待0.5秒


        picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30);//向右移动48pix距离

上述代码的this.wait()方法可以用在事件插入的脚本里，但是封装成方法后，此时this.wait()就提示找不到wait方法的异常。
通过百度后，我找到一个解决办法，JS的一个setTimeout方法（延时执行函数），那么理论上只要在规定的时间之后运行图片移动的方法也可以实现效果了，然后就可以写出类似下面的代码。

JAVASCRIPT 代码复制

function detectorTest(){
        let x=$gamePlayer.screenX(), y=$gamePlayer.screenY();//获取玩家的画面xy位置
        let xTemp=x-24,yTemp=y-48;//设置绘制图案起点是玩家所在方格左上角
        $gameScreen.showPicture("1","$探测图2",0,xTemp,yTemp,100,100,255,0);
        var picture = $gameScreen.picture(1);
        picture.move(0,xTemp,yTemp+48,100,100,255,0,30);//图片向下移动一个单位长度
        setTimeout(picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30),500);//0.5秒后图片向右移动一个单位长度，参数500也就是0.5秒
}

function detectorTest(){


        let x=$gamePlayer.screenX(), y=$gamePlayer.screenY();//获取玩家的画面xy位置


        let xTemp=x-24,yTemp=y-48;//设置绘制图案起点是玩家所在方格左上角


        $gameScreen.showPicture("1","$探测图2",0,xTemp,yTemp,100,100,255,0);


        var picture = $gameScreen.picture(1);


        picture.move(0,xTemp,yTemp+48,100,100,255,0,30);//图片向下移动一个单位长度


        setTimeout(picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30),500);//0.5秒后图片向右移动一个单位长度，参数500也就是0.5秒


}

然后测试一下，你就会发现图像是直接向右下方移动48√￣2的距离，而且图片的移动并没有等待0.5秒，如图1；

通过进一步的学习，https://www.w3school.com.cn/js/js_asynchronous.asp，原来setTimeOut方法的第一个参数是不能加括号()的，那么一个有需要参数的方法要怎么作为参数代入给延时执行函数setTimeout呢？
结合回调函数的特性https://www.cnblogs.com/minshia/p/5935951.html

js代码会至上而下一条线执行下去，但是有时候我们需要等到一个操作结束之后再进行下一个操作，这时候就需要用到回调函数。

可以把上一段代码的第7行修改为

JAVASCRIPT 代码复制

setTimeout(()=>{picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30);},500)

setTimeout(()=>{picture.move(0,xTemp+48,yTemp+48,100,100,255,0,30);},500)

也可以这样写

JAVASCRIPT 代码复制

setTimeout(picture.move.bind(picture,0,xTemp+48,yTemp+48,100,100,255,0,30),500);

setTimeout(picture.move.bind(picture,0,xTemp+48,yTemp+48,100,100,255,0,30),500);

两种写法运行的效果是一样的，我们可以看到图像是分步移动，先往下走，再往右走，如图2；

任小雪

大佬大佬，为什么写插件时，thiswait有时用不了，还有音乐怎么才能一首一首轮着播放

任小雪

大佬试过封装后连续多次等待和执行某些操作是否可行吗？

然后，关于this，我找到了一些资料，但我只能给大佬研究
，因为我暂时理解不了

https://blog.csdn.net/Lixam/article/details/12493245

任小雪

自问自答的我又来了，写插件用的等待可能用的是以下格式来实现等待
this._waitCount = 500;
五百可能就是五百帧，我没完全实测，正在实验

任小雪

setTimeout好像不能在插件里用，我猜测可能是function套function再套function太多次不行的问题

夏虫沉默

任小雪 发表于 2021-12-13 14:36
setTimeout好像不能在插件里用，我猜测可能是function套function再套function太多次不行的问题 ...

rpg_core.js文件里8124行有一个seek方法

JAVASCRIPT 代码复制

WebAudio.prototype.seek = function() {
    if (WebAudio._context) {
        var pos = (WebAudio._context.currentTime - this._startTime) * this._pitch;//pitch是音频的声调，这里可以看出声调会影响播放的速度
        if (this._loopLength > 0) {
            while (pos >= this._loopStart + this._loopLength) {
                pos -= this._loopLength;
            }
        }
        return pos;
    } else {
        return 0;
    }
};

WebAudio.prototype.seek = function() {


    if (WebAudio._context) {


        var pos = (WebAudio._context.currentTime - this._startTime) * this._pitch;//pitch是音频的声调，这里可以看出声调会影响播放的速度


        if (this._loopLength > 0) {


            while (pos >= this._loopStart + this._loopLength) {


                pos -= this._loopLength;


            }


        }


        return pos;


    } else {


        return 0;


    }


};

8051行的play方法

JAVASCRIPT 代码复制

WebAudio.prototype.play = function(loop, offset);//loop控制是否循环播放，offset控制音频从几秒开始播放

WebAudio.prototype.play = function(loop, offset);//loop控制是否循环播放，offset控制音频从几秒开始播放

8269行的_createEndTimer方法

JAVASCRIPT 代码复制

WebAudio.prototype._createEndTimer = function() {//这个方法涉及到setTimeout和计时器timer
    if (this._sourceNode && !this._sourceNode.loop) {
        var endTime = this._startTime + this._totalTime / this._pitch;
        var delay =  endTime - WebAudio._context.currentTime;
        this._endTimer = setTimeout(function() {
            this.stop();
        }.bind(this), delay * 1000);
    }
};
 
WebAudio.prototype._removeEndTimer = function() {
    if (this._endTimer) {
        clearTimeout(this._endTimer);
        this._endTimer = null;
    }
};

WebAudio.prototype._createEndTimer = function() {//这个方法涉及到setTimeout和计时器timer


    if (this._sourceNode && !this._sourceNode.loop) {


        var endTime = this._startTime + this._totalTime / this._pitch;


        var delay =  endTime - WebAudio._context.currentTime;


        this._endTimer = setTimeout(function() {


            this.stop();


        }.bind(this), delay * 1000);


    }


};


 


WebAudio.prototype._removeEndTimer = function() {


    if (this._endTimer) {


        clearTimeout(this._endTimer);


        this._endTimer = null;


    }


};

这些都是WebAudio类的方法

任小雪

https://www.w3school.com.cn/js/js_asynchronous.asp
有一个等待间隔的东西，不过没实操过。
然后有一个等待文件的东西，不知道是不是就是等待音乐和对话，以实现轮着播放的(我还不想研究，就分享一下而已)

夏虫沉默

方法和函数是同一概念，其实只用setTimeOut方法也可以实现间隔执行的效果，在一个方法里使用setTimeOut方法，参数是这个方法的名称，这种写法类型叫递归。（说得太复杂了，还是循序渐进吧，欲速不达也）

haosama

厉害！不愧是你！