[indie #5] Создание инди игры. Оптимизация HTML5 canvas, ускоряем прорисовку

Автор Ruslana Chernenko
[indie #5] Создание инди игры. Оптимизация HTML5 canvas, ускоряем прорисовку

Всем привет.

С вами сканер сегодня продолжаем работу на 1/5 игрой. И сегодня я хотел бы немного поговорить об оптимизации вот вообще вот сегодняшнего урока мы игру разрабатывали не. Активируй её абсолютно никак.

Сегодня я расскажу о том как можно оптимизировать игру непосредственно при создании её html5 вот подручными средствами вообще — это относится не только допустим к движку которые я использую.

Но — это применимо и к стальным диском которые поддерживают создание слоев и — это также будет целесообразно тем кто не использует движки вообще вот. Собственно как было. Как вы можете помнить сейчас эти вот можете заметить, что нет у меня заднего фона. То есть как бы всё на белом фоне рисуется ранее мы заливали каждый кадр наши игры то есть когда мы указывали инициализацию цены мы там использовали. Цвет этой сцены вторым параметром больше не используется не используется в целях экономии ресурсов. Представьте каждый кадр допустим у вас идёт заливка всей сцены одним цветом. Если вы не отрисовывает там изображение то сама по себе эта операция рисования вот этого прямоугольника цветного она в принципе ресурсоемкая допустим у вас игра производится на 30 фпс и вот каждую секунду вас рисуется 30 раза задний фон какие — это затраты по ресурсам. Кроме того если на задний план выводите допустим изображение то вас — это изображение аренда 35-36 по ресурсам довольно-таки. Серьёзно, что предлагает сейчас движок у нас обновился. Он предлагает использовать свои для отрисовки. Что — это значит. Это значит, что мы можем создать допустим день позади нашей правой стороны один раз отрисовать на этот слой допустим текстуру какую-нибудь имя изображение и всё. То есть он у нас рисовался и он там сзади. У нас остался использоваться у нас как собственно задний фон. Теперь давайте — это реализуемо отправь здесь перед инициализацией точнее перед стартом можете заметить есть команда Infiniti она больше не нужно теперь строить завод инициализируется автоматически при старте игры вот — это вот команда и так есть функция функция которая у нас будет ознаменовать то, что документ полностью загружен и можно приступить к созданию каких трёх слоёв динамический допустим эта функция будет называться городе примеры. Иди сюда я помещу вот этот раз команда создания стенд вот эта функция у нас будет вызываться при загрузке всего документа делаю я. Это для того чтобы избежать такой ситуации, что игра началась выполняться на какой-то из элементов игры ещё не загрузился чтобы допустим вместо какого-то спрайты персонажей или чего-либо еще просто ничего пустоту. Поэтому нам сейчас нужно вот эту функцию обернуть ещё в одну функцию которая у нас будет выполняться только после загрузки всего документа. Давайте посмотрим как — это выглядит на практике. Так у нас появилась ошибка. Да совсем забыл делаем. Ну вот здорово. Всё у нас работает следующая. Что нужно сделать — это добавить свои наш слой основной где происходит наша играет в слове называется сцена — это слой у нас является в центре всех слоёв поэтому мы можем добавлять свои как так и позади него команда для этого очень простая так первоначально здесь создам ещё одну переменную обращаться мы можем непосредственно. К объекту j2 или же просто создать переменную S и так в нашей переменную из. Давайте добавим какой-нибудь свою так как в слове у нас будет позади наши выигрывают грифоном то мы двигаем его на -1 если мы здесь написали один то свой бы добавился перед удобно использовать для вывода. Какие надписи элементов управления меню и так далее и так. Мы создали здесь собственное слой для заднего фона следующая, что мы делаем. Это заполняем. Открой какие-нибудь. Света Обращаемся мы теперь уже кресту слоев индекс этого слова будет, но вот важно сейчас понять, что 1 здесь при создании, что указывает — это глубина этого слоя если мы укажем здесь -2 допустим, а затем 40 дней в слове. Минус один таз лойсы механизма будет позади — это вне зависимости от того. В каком порядке и добавляли и так. Обращаемся к методу. Фил и сюда указываем цвет я сейчас выберу какой-нибудь голубики сойдет и так обновился и посмотрим. Ну вот замечательно. У нас всё сработало прекрасно то есть. Нашла создался и у нас работает следующая. Что нужно сделать это. Добавить сюда возможность нашего персонажа допустим кидаться яблоками в вот так как у меня по времени к сожалению очень маленький сейчас запас то я этого урок заканчиваю вот целью было показать такое метод организации посредством в следующем уроке уже продолжит более подробно поэтому у меня сегодня всё подписывайтесь на канал. Если вам понравилось можете поставить лайк в принципе по информативности получился не очень объемный, но он достаточно значимым в будущем так как проехать прости по мере наполнения его всякими объектами и персонажами у нас может возникнуть такая ситуация, что работа с большим количеством объектов может вызвать некоторые затруднения без должной организации поэтому оптимизации мы будем заниматься вот во время разработки в каких-то мелочах и прочих таких моментов. Поэтому меня на этом же всё. Всем спасибо всем.

0 комментариев
0

Читайте также