Загрузка ресурсов

Данила, ай нид хелп!

в общем такое дело. игра весит 19 мегабайт. это много. в итоге локально она загружается 12 секунд, а с удаленного сервера - вообще 35. в целях того, чтобы не оказалось так, что человек например начал играть, а спрайт монстра еще не прогрузился, я сделал первым циклом такой

Код:

game.newLoopFromConstructor('loading', function(){
  this.update = function(){
    game.clear();
    brush.drawText({
      x: width/2,
      y: height/2,
      size: 20,
      color: '#fff',
      text: pjs.resources.getProgress()+'%',
    });
    if(pjs.resources.isLoaded()){
      game.setLoop('menu');
    }
  }
});

то есть пока все ресурсы не подгрузились - не показываем меню, а показываем проценты загрузки. но косяк в том, что Point JS мой экран загрузки начинает показывать только тогда, когда почти все ресурсы уже загрузились. в итоге пользователь видит белый экран, думает, что ничего не работает и закрывает игру нахрен.

внимание вопрос: как можно организовать постепенную загрузку ресурсов? например сначала грузим только меню, в меню подгружаем ресурсы первого уровня, в каждом уровне подгружаем ресурсы следующего уровня и так далее. а музыку например подгружаем только если уже подгружать нечего. как такое можно организовать? честно говоря вообще мыслей нету. уже чтобы быстрее грузилось отрубил почти всю музыку с горя

если есть мысли - не обязательно на Point JS - просто на JS - как такое сделать можно?

и еще вопрос: все картинки, где нет прозрачности перевел из png в jpeg. размер файлов уменьшился почти в 2 раза. а время загрузки возросло. может такое быть? или меня глючит?

у меня туман в голове. Я даже вопроса не понял.

Данила это кто-то из наших?

Данила - это из фильма

Код:


 var height = game.getWH().h;
 var width = game.getWH().w;

var fon1 = game.newImageObject({
 x:0, y:0,
 file: "back.jpg",
 h: height,
 onload : function () {
   fon2.x = fon1.x+fon1.w;
   fon3.x = fon2.x+fon1.w;

 }
});

не знаю поможет или нет, но вот так сканер подгружал сразу все свои фоны заднего плана в игре
и далее фоны переднего плана

Код:

var ground1 = game.newImageObject({
   x:0, y:0,
   file: "ground.png",
   w: width,
   onload : function () {
      ground1.y = height-ground1.h;
      ground2.y = height-ground1.h;
   }
});

нет, не поможет

сделай из индексного файла страницу предзагрузки с блоком анимации лоадера и скажем имени загружаемого файла и допиши туда свой прелоадер, типа

Код:


map_objects = [
  'img1.png'
  'img2.png'
]

pth = '/images'

for (idx in map_objects) {
  name = map_objects[idx];
  images.push({
    name: name,
    path: pth + '/' + name
  });
}

isReady = false;

dots = '';

dotInt = setInterval(function() {
  dots = dots.length > 4 ? '.' : dots + '.';
  return document.getElementById('pre-progress').innerHTML = dots;
}, 1000);

preloadImage = function(idx) { // рекурсивная загрузка изображений
  var _img;
  document.getElementById('pre-percent').innerHTML = (idx + 1) + ' / ' + images.length;
  document.getElementById('pre-filename').innerHTML = images[idx].name;
  _img = new Image();
  _img.src = images[idx].path;
  idx++;
  return _img.onload = function() {
    dots = '.';
    if (idx < images.length) {
      return preloadImage(idx);
    } else {
      clearInterval(dotInt);
      return isReady = true;
    }
  };
};

preloadImage(0); // запускаем рекурсию


копипастил из проекта, но думаю разберешся
ну а когда уже поинт обратится по урлу к картинке, то браузер должен выдать ее из своего кеша

P.s. есстественно эта страница должна состоять и голой верстки и анимации прелоада на пару килобайт

колхозник пишет:прошу прощения за кофескрипт

Люди за кофескрипт уже извиняются))

доплнил код, нехватало , докопипастил
donInt это указатель на интервал, который типа рисует точечки от одной до трех создавая видимость процесса

p.s. не за кофе извинился, а за лень на js переводить
p.s.s. скопипастил из сборки, теперь на js

ну а там где у меня return isReady=true надо вставить колбек который затрет верстку прелоадера, проинициализирует движок и запустит игру на его месте

думаю разберешся

спасибо. думаю разберусь.

ну анимацию лоадера на CSS я кагбы сделал уже, а потом у меня настоящая загрузка начинает показываться сейчас. вот так: https://pyro338.ru/space-invaders/

затрет верстку прелоадера

Point JS поверх верстки запускается, так что я предполагаю что можно и без этого обойтись

поставь в хроме замедление на slow 3g (суровая реальность), и твой прелоадер вернее его часть - шарик, появится через 15 сек, так что лучше голый цсс а все скрипты прицепить не напрямую а вставить в страницу динамически, тогда прелоадер вспыхнет в первую секунду, начнется загрузка ресурсов и параллельно скриптов... ну а скрипты загрузятся же раньше а ресурсов нет... тупик

ну вот тут финт ушами, помнишь return isReady = true ? скрипты загрузятся раньше и первым что они сделают так это

Код:


imgInt = setInterval(function() {
      if (isReady) {
        pointjs.init(); //не знай че там у вас конкретно
        mygame.start();

        clearInterval(imgInt);
      }
    }, 1000);


т.е. будут ждать пока догрузятся картинки

твой прелоадер вернее его часть - шарик, появится через 15 сек, так что лучше голый цсс

там и есть голый цсс)) мой прелоадер выглядит как

Код:

.loading{
  position: absolute;
  left: 368px;
  top: 20px;
  width: 64px;
  height: 64px;
  background-image: url('../img/interface/loading.gif');
  background-repeat: no-repeat;
  border-radius: 32px;
  box-shadow: 0px 0px 30px #fff;
}

ага, гифка 135кб... вроде шустро должно быть, тогда пожалуй надо динамически вставить скрипты в страницу, у тебя их много и они весят не мало, они грузятся вперед картинки, поставь скорость 1кб/с и увидишь

из-за кучи параллельных загрузок она не может шустро загрузится, лучше бы ее скриптом заказать и в onload нарисовать и следом запустить загрузку ресурсов, выполнить вставку скриптов в страницу

ну ок. попробую.

есть мысль, что если слить все скрипты и минифицировать их - должно быстрее грузиться. и если все тайлы в один тайлмап слепить - тоже. но вот насколько быстрее - хз

это надо сделать в том числе

ну уже явно не сегодня))

ну еще управление мышью добавить... это правда скорости не добавит, играть будет поинтереснее
глянь до кучи и мой чтоли космос, там не хватает балансировки, но все остальное в наличии
https://ogimle.github.io/asterwaster/ в дельных движках твои мытарства "автоматизированы"

управление мышью... задумка была в том, чтобы было максимально олдово. но можно и добавить. потом как-нибудь.

фазер, ага.

и чо в фазере вот прям из коробки вот это вот все?

это не фазер, это qiciengine, фазер у него под капотом

типа unity2d только для веба, жаль что кони бросил

чтобы было максимально олдово.

хардкорщики это маленький процент, все в основном живут в казуальном сегодня, в том числе я

qiciengine

даже не слышал о таком если честно)

колхозник пишет:

чтобы было максимально олдово.

хардкорщики это маленький процент, все в основном живут в казуальном сегодня, в том числе я

ну так и не многие помнят, что был такой сериал "Вавилон-5", откуда кораблики и музыка)))

не выстрелило, они анонсировались в новостях фазера и что-то никто не побежал... вообще никто, я этого до сих пор понять не могу, это реально unity2d