WarCraft 3: Загрузочные экраны.

» Раздел: Основы
» Автор оригинала: Reach

» Вступление
19.08.15

Я уже давно пилю загрузочные экраны и это не единственная моя работа для WarC, но недавно меня попросили запилить экран для проекта История Джайны. Я никогда раньше не пытался публиковать свои работы просто они получались не совсем такими как я их задумывал, но мои друзья сказали что это довольно сносно, и всё же я решился опубликовать.
Сам экран представляет собой изображение Иллидана смотрящего на один из людских городов.

Поствступление.

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

Принцип создания и Процесс импорта.

Если кто нибудь из вас имел удовольствие шариться в mpq архивах, то вы скорее всего замечали папку с загрузочными экранами UI\Glues\Loading\Backgrounds\...множество директорий. Все они разделены на четыре составляющие 512 на 512 (x2) и 512 на 256 (x2) пикселей. Позже при загрузке карты они соответствующим образом деформируются и растягиваются относительно нашего расширения экрана.
К слову. Почему просто нельзя импортировать целое изображение. Всё просто, там задано максимальное расширение для файла импорта не помню но где-то 800 на 600, что разумеется очень убого будет выглядить. Данный ниже метод импортирования позволяет запихнуть изображение без сжатия.
Для удобства нужно создать изображение 1024 на 768 пикселей.

Четыре файла: BotLeft; TopLeft; BotRight; TopRight.
Top -верх. Bot - низ. Left- лево. Right - право.
После создания изображения его нужно разбить.
Все с индексом Top режутся 512 на 512 от соответствующих боков.
Все с индексом Bot режутся 512 на 256 от соответствующих боков.

После присвоения индексов дописываем имя "Generic-Loading- без пробелов индекс".
Получаются такие четыре файла. Импортируем их в WarC под путями " UI\Glues\Loading\Load-Generic\ "

Как видите, весят они довольно прилично, так что такие экраны очень туго подходят для мультиплеера.

Осталось только поменять экран загрузки на стандартный, и экран готов.
Люди! Пытайтесь избегать цветовой коррекции вашего экрана с помощью фотофильтров в фотошопе. При показе в WarC используются упрощённые цвета и такие фильтры не будут видны.

» ps
К сожалению, при изменении расширения экрана, загрузочный экран меняется соответствующе.

Просмотров: 8 126

» Лучшие комментарии


NilasAran_39 #1 - 2 года назад 5
Невероятно красивые работы, браво.
Reach #2 - 2 года назад 2
NilasAran_39:
Невероятно красивые работы, браво.
Спасибо) но работы я поместил для примера и скорее нахожу их смешными нежели красивыми.
HumanWE #3 - 2 года назад 2
У вас хорошо получается. Продолжайте в том же духе)
Melissa #4 - 2 года назад (отредактировано ) 5
Oh GOD, mah drills ^______^
Загрузочные экраны делаются во сто крат проще.
» Внешнее ссылко
Картинка загрузочного экрана должна быть квадратной, т.е. длина = ширине. Если же одна сторона больше другой - уравниваем большую сторону с меньшей(не наоборот!)
К сожалению, при изменении расширения экрана, загрузочный экран меняется соответствующе.
Ну, это проблема тех кто варик в широкоформате запускает, хотя никто не отменял изменить размер картинки так, чтобы в "растянутом" виде она была нормальной на широкоформате.
Вообщем в топку всё, кроме картиночек, почитай статью под спойлером, она сделает твою жизнь легче.
Как видите, весят они довольно прилично, так что такие экраны очень туго подходят для мультиплеера
В blp-lab достаточно сохранения не 100% качестве, а в 85-95% чтобы вес резко упал.
Reach #5 - 2 года назад 2
Melissa:
Oh GOD, mah drills ^______^
Загрузочные экраны делаются во сто крат проще.
Я попробую сделать так как там написано... очень заинтересовало... но если там лучше, стоит ли в таком случае копипастить?
Меня больше поразила полоса загрузки красного цвета! Я уже давно охочусь на эту наработку, переменял все файлы в игровых константах и путём импорта заменял mpq файлы, не получалось... поэтому двойное спасибо!
Melissa #6 - 2 года назад 0
Reach, цвет полосы загрузки вроде бы меняется только внутри самого вара ну или если локальные файлы закинуть.
Насчёт размеров проэкспериментировал - всё в порядке с большими размерами, главное картинку сделай квадратной, не сохраняя пропорции.
ну и назови так же как в примере. Либо файл ладскрина в mdlvis открой и измени название текстуры.
Ах и там небольшая дезинформация - размер необязательно должен быть степенью двойки, он просто должен делиться на 2.
Reach #7 - 2 года назад (отредактировано ) -1
Melissa: увы, но нет.
Падает качество, выглядит размыто, хотя конвертировал со 100% качества. И в файле нету красной загрузочной полосы.
Сам экран примера выглядит не лучше. Просто на сайте он в уменьшенном размере.
прикреплены файлы
Melissa #8 - 2 года назад 0
Reach, это ты про созранение в 95% качества или про что
Reach:
И в файле нету красной загрузочной полосы
цвет полосы загрузки вроде бы меняется только внутри самого вара
Reach #9 - 2 года назад 0
Melissa:
Reach, это ты про созранение в 95% качества или про что
качество в blp и там и там 100%, просто все эти растягивания в конце только ухудшают качество.
цвет полосы загрузки вроде бы меняется только внутри самого вара
скорее всего просто делали руководство на репаке, и меня это отчасти очень смущает
JesusHipster #10 - 2 года назад 0
выглядит размыто
оно изначально выглядело размыто))00
Melissa:
Загрузочные экраны делаются во сто крат проще.
(((
Reach #11 - 2 года назад 0
JesusHipster:
оно изначально выглядело размыто))00
из двух размытостей нужно выбирать меньшее
JesusHipster #12 - 2 года назад -4
Я к тому, что твой загрузочный экран выглядит весьма сомнительно в плане художественной ценности\эстетики.
Если писать большую статью по созданию экранов, даже несмотря на существование способа полегче, то можно было бы написать о том, как создать изображение, которое не сильно потеряет от оптимизации в качестве. Например использовать меньше цветов и выбирать стиль с меньшим количеством деталей.
Или заменить лишь кусок оригинального экрана и импортировать 1\4 текстуры.
Короче художественные способы справиться с весом.
А так статья не нужна.
Reach #13 - 2 года назад (отредактировано ) 4
JesusHipster:
Короче художественные способы справиться с весом.
А так статья не нужна.
ах. я тут два часа потратил трендя как импортировать экран без минимальной потери качества, а ты мне заявляешь, что статья не нужна и что лучше сжатые экраны нежели полноценные.
думаю, что с тобой много людей не согласятся.
Melissa #14 - 2 года назад 0
Reach, ты растягиваешь изображение так чтобы оно стало больше оригинального? То есть было 1366*768 ты растянул до 1024*1024? Ну конечно качество поедет, чего ты хотел. Я ж подчеркнул -
Melissa:
уравниваем большую сторону с меньшей(не наоборот!)
Ещё подробнее - большую сторону уменьшаем до меньшей.
Допустим у тебя изображение 1152*900, максимальное качество для квадратной картинки - будет 900*900(без сохранения пропорций при сжатии). А вовсе не 1152*1152 и не 2048*2048.
Reach #15 - 2 года назад 0
Melissa: нормально я всё сделал. Проверь сам.
при том там правильно написали, что размер должен равняться степени двойки
иначе качество падает ещё сильнее
Melissa #16 - 2 года назад 1
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
Reach #17 - 2 года назад 0
Melissa:
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
я говорю же, что экран в примере он не лучше выглядит. просто на сайте он показан в уменьшенном размере.
я про твою ссылку
Melissa #18 - 2 года назад 0
Знач таг.
Я взял картинку 1600*1200 щас и сжал её до 1024*1024. Вроде бы всё окай.
Скинь свою исходную картинку или карту
Reach:
я говорю же, что экран в примере он не лучше выглядит. просто на сайте он показан в уменьшенном размере.
Я разве что-то насчёт лучше говорил? 8-/ Там картинка 512*512 в карте, конечно она не больно-то качественная
Reach #19 - 2 года назад 0
1024*768
прикреплены файлы
Melissa #20 - 2 года назад (отредактировано ) 1
Вообщем для лучшего качества можно и меньшую с большей уравнять. Я прост всегда ориентируюсь на вес поменьше, так что слова "не наоборот" можно убрать. Вот сравнение короче, 1 рисунок - растянут до 1024*1024, второй - уменьшен до 768*768, решайте сами кого как больше устраивает.
Разница в весе - 1736кб против 1050 кб
прикреплены файлы
Reach #21 - 2 года назад (отредактировано ) 0
Melissa:
Вообщем для лучшего качества можно и меньшую с большей уравнять. Я прост всегда ориентируюсь на вес поменьше, так что слова "не наоборот" можно убрать. Вот сравнение короче, 1 рисунок - растянут до 1024*1024, второй - уменьшен до 768*768.
почему меня нельзя было с первого раза послушать ?
Reach:
Melissa: увы, но нет.
Падает качество, выглядит размыто, хотя конвертировал со 100% качества. И в файле нету красной загрузочной полосы.
Сам экран примера выглядит не лучше. Просто на сайте он в уменьшенном размере.
Качество всё равно падает. У моего же способа оно сохраняется более лучше.
Melissa #22 - 2 года назад (отредактировано ) 0
Качество всё равно падает. У моего же оно более лучше.
Cразу бы карту прикрепил в тему. Любите же усложнять всё. Я хочу заскринить оба варианта - по старому способу с 4 кусочками и 1 файлом с 1024*1024.
Проверил. Вообщем вердикт печальный - ужимаются текстурки. Изображение стало мыльнее, а на линиях появились "рёбра". Эксперты считают, что текстура ужалась до меньшего размера(512*512 предположительно) и без вариантов.
Причём я ни фига не пойму, с фига ли разница тогда выплыла между 1024*1024 и 768*768. Ну, да не так важно -_-

Ну зато 512*512 лоадскрин занимает всего 150-700(у меня в среднем 238 кб скрины занимают) кб в зависимости от качества и это не ударит по весу и мультиплееру.
А самое главное - не нужно делить картинку, импортировать 4 осточертелых файла и прописывать каждому путь, который запомнишь далеко не с 1 раза.
Reach #23 - 2 года назад (отредактировано ) 0
Melissa: я не пойму, ты мою проверил или "свою". ? где линии, где рёбра... где текстуры ужимаются... у меня рёбер никаких нет, и качество страдает не так сильно.
Melissa #24 - 2 года назад 0
Reach, я не знаю как тебе ещё по другому объяснить, что я выше написал.
Melissa:
оба варианта - по старому способу с 4 кусочками и 1 файлом с 1024*1024
ужимаются текстурки. Изображение стало мыльнее, а на линиях появились "рёбра". Эксперты считают, что текстура ужалась до меньшего размера(512*512 предположительно) и без вариантов.
относится к варианту "1 файлом". Как и можно было догадаться из ленты ответов.~Melissa:
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
Reach #25 - 2 года назад (отредактировано ) 0
Melissa: нет нет, я понять не могу в каком ты месте нашёл в моём способе "рёбра". И с чего вы взяли что при таком способе текстуры ужимаются, когда они наоборот растягиваются?
Nosferoh #26 - 2 года назад 0
Reach, растягиваются модели. А текстуры падают в качестве независимо от этого из-за движка. Чего сложного?
Reach #27 - 2 года назад 0
Nosferoh:
Reach, растягиваются модели. А текстуры падают в качестве независимо от этого из-за движка. Чего сложного?
а вы не думали вообще, зачем близзам требовалось разбивать экраны?
то что так тупо искажение меньше. я ведь приводил примеры выше. на что мне ответили, что в моём способе как недостаток- это рёбра.
в каком месте то они?
Melissa #28 - 2 года назад 0
Reach, в каком месте ты увидел, что я про способ 4 делений говорю, лал?
Мб у тебя там есть части картинок размером больше 512*512 или что?
Объясни мне как ты пришёл к такому выводу
Reach #29 - 2 года назад 0
Melissa:
Объясни мне как ты пришёл к такому выводу
Просто скажи, мол Паша, если делать твоим способом, то и вправду качество получается лучше. ну оно же правда лучше
Melissa #30 - 2 года назад 0
Разве сообщение 22 оказалось недостаточно информативным, излагая мою мысль?
Довольно ясное подытоживание, как по мне.
Reach #31 - 2 года назад 0
Melissa:
Разве сообщение 22 оказалось недостаточно информативным, излагая мою мысль?
Довольно ясное подытоживание, как по мне.
моих скринов разумеется недостаточно. погоди момент пожалуйста
Melissa #32 - 2 года назад 0
И ты уж извини, но "твой способ" юзают все новички картостроения, он не нов ни для кого. Уже потом я стал делать все лоадскрины 1 файлом, но т.к. никогда не превышал 512*512(чтобы не ударить по весу) то и не обращал внимания как сильно теряет картинка в качестве(она ведь и так теряет становясь 512*512, с чего бы заметить 10% больше меньше?)
Reach #33 - 2 года назад 0
новички то про архив mpq первый раз услышат
прикреплены файлы
Melissa #34 - 2 года назад 0
Как создавать лоадскрин обычно узнают открывая чью-то карту либо, на крайняк, из интернета. В 2000-ых все разбивали картинки на 4 части. ну почти все
Reach #35 - 2 года назад 0
мне патент не нужен. но всё равно, я думаю, что этот способ должен иметь возможность находиться в статьях.
Melissa #36 - 2 года назад 0
Reach, да
тем более не все знают про generic
Reach #37 - 2 года назад 0
Melissa: так в каком случае качество лучше?
Melissa #38 - 2 года назад 0
В том, где текстура может быть разделена на максимальное число составляющих, размерами не больше 512*512, молодец что спросил.
Bornikkeny #39 - 2 года назад 0
Не плохо =)
PAXMA #40 - 2 года назад 4
Изумительно! Но ссылка на прямые руки битая. Поправь, пожалуйста, очень нужно.
A.W.K. #41 - 2 года назад 0
Да уж. +2 однократно заслуживает)
Это сообщение удалено