@Kim_Soal

Прелоадер в канвас игре — как фактически понять, что все канвас обьекты отрисованы?

Пытаюсь сделать простую но полноценную игру с уровнями и т.д.
Хочу сделать прелоадер, после которого без задержек показался бы нарисованный холст.
А есть несколько очень больших подгружаемый изображений.
Схема подразумевает, что часть, которая отвечает за рисовку не начнет рисовать, если к примеру imagesReady === false;
все подгружаемые картинки я добавляю в массив обьектов, и пытаюсь проверить их готовность и быть отрисоваными вот таким образом
loadResourches(){
        let t = setInterval(()=>{
            let isLoad = this.gameObjects.toLoadResourches.every(item=>{
                return item.object.complete != 0
                    || item.object.naturalHeight != 0;
            });
            if(isLoad){
                this.canvas.go();
                clearInterval(t);
            }
        }, 50);
    }

Картинки вроде как подгружаются, но особенно на слабом компе заметил что после успешного события, на сколько я понимаю, картинок в кэш браузера, все-равно есть задержка в отрисовке, т.к. нужно потратить время на саму рисовку.
Как мне понять, когда канвас уже готов быстро отрисовать первый фрейм ( ведь все последующие фреймы нормально работают на большом фпс ) и убрать прелоадер, есть ли у кого опыт
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT
Front-end разработчик
У картинок же есть событие onload, оно как раз вызывается, когда картинка готова. Пишите код, который создает массив промисов, которые загружают картинку, слушают onload своей картинки, и в нем вызывают resolve. Теперь этот массив промисов можно скормить в Promise.all, который возвращает опять же промис, который будет вызван уже когда все картинки загрузятся, вот тут и можно начинать рисовать канву. Можно без промисов, просто на каждый запрос на получение картинки прибавлять к какой-то переменной activeDownloads единицу, и на onload убавлять единицу и сразу сравнивать, если activeDownloads равно нулю, значит все картинки загрузились.
Ответ написан
@0ffff0
За меня пишут дрессированный енот и котейка
вот неплохой вариант вроде:
// Subclass the default loader
MyLoader = ig.Loader.extend({

    draw: function() {
        // Add your drawing code here

        // This one clears the screen and draws the 
        // percentage loaded as text
        var w = ig.system.realWidth;
        var h = ig.system.realHeight;
        ig.system.context.fillStyle = '#000000';
        ig.system.context.fillRect( 0, 0, w, h );

        var percentage = (this.status * 100).round() + '%';
        ig.system.context.fillStyle = '#ffffff';
        ig.system.context.fillText( percentage, w/2,  h/2 );
    }
});

// Call ig.main() with your custom Loader class
ig.main('#canvas', MyGame, 60, 320, 240, 2, MyLoader);

нагуглено с https://impactjs.com/documentation/class-reference...
UDP: ОНИ ТАМ ГУГОЛ АНАЛИТИКУ СМОТРЯТ, ВСЯКИЕ ТАМ ['_trackPageview']
И ПО НЕЙ ОПРЕДЕЛЯЮТ БЫЛА-ЛИ ЗАГРУЗКА
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Duotek Москва
от 150 000 до 190 000 руб.
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
Digital Sharks Казань
от 60 000 до 65 000 руб.
22 янв. 2019, в 23:42
500 руб./за проект
22 янв. 2019, в 21:11
800 руб./в час
22 янв. 2019, в 20:53
6006 руб./за проект