p5.j​​s与setup()相比,在preload()中加载大量图像会降低性能

时间:2018-12-25 22:42:31

标签: javascript p5.js

我正在制作侧面滚动器,并尝试为我的精灵的各种状态(运行/跳跃/闲置等)加载所有不同的图像。

这是我要运行的代码:

function create_animation_dict(){
    /*
    Loads all sprites and puts them into a dictionary of arrays of p5.js images
    */
    let img_dict = {};
    let state_counts = {'Dead': 17, 'Idle': 16, 'Jump': 16, 'Run': 11, 'Slide': 11, 'Walk': 13};
    let dir_prefix = './assets/santa/'

    for(key in state_counts){
        img_dict[key] = [];
        for(let i = 0; i < state_counts[key]; i++){
            const img_loc = dir_prefix + key + ' (' + (i + 1) + ').png';
            img_dict[key].push(loadImage(img_loc));
        }
    }
    console.log(img_dict);
    return img_dict;

}

代码摘要:

文件以以下格式命名:path/to/santa/Run (1).png,字典state_counts表示每种精灵状态有多少个图像。

我遍历state_counts字典以在所有这些字典上调用loadImage() p5.js函数。

问题

当我在preload()的{​​{1}}函数中运行此代码时,我的程序运行非常缓慢。当我将此代码移至sketch.js时,一切运行正常。除了在setup()preload()之间移动之外,我没有其他更改。是什么原因造成的??

数字问题

setup

Sketch.js版本1中的代码

# Produced by consonle.log(frameRate());
sketch.js:84 0.3703017959588576
sketch.js:84 1.1664528170186537
sketch.js:84 4.191114836855708
sketch.js:84 4.154549230995268
sketch.js:84 4.537205081853747
sketch.js:84 4.618937644759058
sketch.js:84 3.9093041432105173
sketch.js:84 4.844961241099279
sketch.js:84 4.859086491831907
sketch.js:84 3.8314176245415803
sketch.js:84 4.192872116770066
sketch.js:84 1.159151501104072
sketch.js:84 38.46153852904557 #THIS IS WHEN I CHANGE TABS AND COME BACK
sketch.js:84 82.64462775185976
sketch.js:84 48.543689346504706
sketch.js:84 16.207455439478935
sketch.js:84 58.47953197391736
sketch.js:84 59.523809583865045
sketch.js:84 51.813471541844784
sketch.js:84 71.9424459400119
sketch.js:84 59.523809583865045
sketch.js:84 57.47126432967235
sketch.js:84 64.51612911754046
sketch.js:84 59.17159767585282
sketch.js:84 54.644808754849514
sketch.js:84 62.111801211336854
sketch.js:84 63.69426756050796

Sketch.js版本2中的代码

let santa_images = {};
function preload(){
    santa_images = create_animation_dict();
}

附加说明

  1. 在Google Chrome上进行本地测试
  2. 如果我更改选项卡然后再返回,则它可以正常运行,而不是页面加载后停留在同一选项卡上
  3. 非常令人惊讶的是,它在Microsoft Edge上运行良好

不用说,我很困惑,也不知道为什么这个小小的改变会有所作为。

0 个答案:

没有答案