pas logique
WarCraft 3

Загрузочные экраны (1024 на 768)

Добавлен , опубликован
Статья
Раздел:
Интерфейс
Вступление
19.08.15
Я уже давно пилю загрузочные экраны и это не единственная моя работа для WarC, но недавно меня попросили запилить экран для проекта История Джайны. Я никогда раньше не пытался публиковать свои работы просто они получались не совсем такими как я их задумывал, но мои друзья сказали что это довольно сносно, и всё же я решился опубликовать.
Сам экран представляет собой изображение Иллидана смотрящего на один из людских городов.
старые работы
Поствступление.
В этой статье мне бы хотелось рассказать о дизайне интерфейса и дать всевозможные наработки в этом плане.
Рисование загрузочных экранов само по себе дело увлекательное, и пусть если кто-то назовёт мои работы каляками, я спорить не буду. Но разницы нет кто как рисует, у большинства основы одинаковы.
Будуар художника.
  1. Шаблоны они же стандартные экраны яндекс.диск
  1. Фотошоп. моя версия CC 2014. яндекс.диск
  1. BLP Laboratory
  1. Прямые руки
Принцип создания и Процесс импорта.
Если кто нибудь из вас имел удовольствие шариться в 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
К сожалению, при изменении расширения экрана, загрузочный экран меняется соответствующе.
https://www.xgm.guru/files/100/150543/illidan.zip
Скачать - 2030 КБ 496
, , ,
8 июн 2015
30 952
`
ОЖИДАНИЕ РЕКЛАМЫ...
7
Показать
24
7
Показать
Невероятно красивые работы, браво.
3
Показать
11
3
Показать
NilasAran_39:
Невероятно красивые работы, браво.
Спасибо) но работы я поместил для примера и скорее нахожу их смешными нежели красивыми.
3
Показать
5
3
Показать
У вас хорошо получается. Продолжайте в том же духе)
9
Показать
24
9
Показать
Oh GOD, mah drills ^______^
Загрузочные экраны делаются во сто крат проще.
Внешнее ссылко
http://wc3-maps.ru/forum/13-4139-1
Картинка загрузочного экрана должна быть квадратной, т.е. длина = ширине. Если же одна сторона больше другой - уравниваем большую сторону с меньшей(не наоборот!)
К сожалению, при изменении расширения экрана, загрузочный экран меняется соответствующе.
Ну, это проблема тех кто варик в широкоформате запускает, хотя никто не отменял изменить размер картинки так, чтобы в "растянутом" виде она была нормальной на широкоформате.
Вообщем в топку всё, кроме картиночек, почитай статью под спойлером, она сделает твою жизнь легче.
Как видите, весят они довольно прилично, так что такие экраны очень туго подходят для мультиплеера
В blp-lab достаточно сохранения не 100% качестве, а в 85-95% чтобы вес резко упал.
2
Показать
11
2
Показать
Melissa:
Oh GOD, mah drills ^______^
Загрузочные экраны делаются во сто крат проще.
Я попробую сделать так как там написано... очень заинтересовало... но если там лучше, стоит ли в таком случае копипастить?
Меня больше поразила полоса загрузки красного цвета! Я уже давно охочусь на эту наработку, переменял все файлы в игровых константах и путём импорта заменял mpq файлы, не получалось... поэтому двойное спасибо!
0
Показать
24
0
Показать
Reach, цвет полосы загрузки вроде бы меняется только внутри самого вара ну или если локальные файлы закинуть.
Насчёт размеров проэкспериментировал - всё в порядке с большими размерами, главное картинку сделай квадратной, не сохраняя пропорции.
ну и назови так же как в примере. Либо файл ладскрина в mdlvis открой и измени название текстуры.
Ах и там небольшая дезинформация - размер необязательно должен быть степенью двойки, он просто должен делиться на 2.
0
Показать
11
0
Показать
Melissa: увы, но нет.
Падает качество, выглядит размыто, хотя конвертировал со 100% качества. И в файле нету красной загрузочной полосы.
Сам экран примера выглядит не лучше. Просто на сайте он в уменьшенном размере.
Загруженные файлы
0
Показать
24
0
Показать
Reach, это ты про созранение в 95% качества или про что
Reach:
И в файле нету красной загрузочной полосы
Melissa:
цвет полосы загрузки вроде бы меняется только внутри самого вара
0
Показать
11
0
Показать
Melissa:
Reach, это ты про созранение в 95% качества или про что
качество в blp и там и там 100%, просто все эти растягивания в конце только ухудшают качество.
цвет полосы загрузки вроде бы меняется только внутри самого вара
скорее всего просто делали руководство на репаке, и меня это отчасти очень смущает
0
Показать
25
0
Показать
Reach:
выглядит размыто
оно изначально выглядело размыто))00
Melissa:
Загрузочные экраны делаются во сто крат проще.
(((
0
Показать
11
0
Показать
JesusHipster:
оно изначально выглядело размыто))00
из двух размытостей нужно выбирать меньшее
1
Показать
25
1
Показать
Я к тому, что твой загрузочный экран выглядит весьма сомнительно в плане художественной ценности\эстетики.
Если писать большую статью по созданию экранов, даже несмотря на существование способа полегче, то можно было бы написать о том, как создать изображение, которое не сильно потеряет от оптимизации в качестве. Например использовать меньше цветов и выбирать стиль с меньшим количеством деталей.
Или заменить лишь кусок оригинального экрана и импортировать 1\4 текстуры.
Короче художественные способы справиться с весом.
А так статья не нужна.
6
Показать
11
6
Показать
JesusHipster:
Короче художественные способы справиться с весом.
А так статья не нужна.
ах. я тут два часа потратил трендя как импортировать экран без минимальной потери качества, а ты мне заявляешь, что статья не нужна и что лучше сжатые экраны нежели полноценные.
думаю, что с тобой много людей не согласятся.
0
Показать
24
0
Показать
Reach, ты растягиваешь изображение так чтобы оно стало больше оригинального? То есть было 1366*768 ты растянул до 1024*1024? Ну конечно качество поедет, чего ты хотел. Я ж подчеркнул -
Melissa:
уравниваем большую сторону с меньшей(не наоборот!)
Ещё подробнее - большую сторону уменьшаем до меньшей.
Допустим у тебя изображение 1152*900, максимальное качество для квадратной картинки - будет 900*900(без сохранения пропорций при сжатии). А вовсе не 1152*1152 и не 2048*2048.
0
Показать
11
0
Показать
Melissa: нормально я всё сделал. Проверь сам.
при том там правильно написали, что размер должен равняться степени двойки
иначе качество падает ещё сильнее
1
Показать
24
1
Показать
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
0
Показать
11
0
Показать
Melissa:
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
я говорю же, что экран в примере он не лучше выглядит. просто на сайте он показан в уменьшенном размере.
я про твою ссылку
0
Показать
24
0
Показать
Знач таг.
Я взял картинку 1600*1200 щас и сжал её до 1024*1024. Вроде бы всё окай.
Скинь свою исходную картинку или карту
Reach:
я говорю же, что экран в примере он не лучше выглядит. просто на сайте он показан в уменьшенном размере.
Я разве что-то насчёт лучше говорил? 8-/ Там картинка 512*512 в карте, конечно она не больно-то качественная
0
Показать
11
0
Показать
1024*768
Загруженные файлы
1
Показать
24
1
Показать
Вообщем для лучшего качества можно и меньшую с большей уравнять. Я прост всегда ориентируюсь на вес поменьше, так что слова "не наоборот" можно убрать. Вот сравнение короче, 1 рисунок - растянут до 1024*1024, второй - уменьшен до 768*768, решайте сами кого как больше устраивает.
Разница в весе - 1736кб против 1050 кб
Загруженные файлы
0
Показать
11
0
Показать
Melissa:
Вообщем для лучшего качества можно и меньшую с большей уравнять. Я прост всегда ориентируюсь на вес поменьше, так что слова "не наоборот" можно убрать. Вот сравнение короче, 1 рисунок - растянут до 1024*1024, второй - уменьшен до 768*768.
почему меня нельзя было с первого раза послушать ?
Reach:
Melissa: увы, но нет.
Падает качество, выглядит размыто, хотя конвертировал со 100% качества. И в файле нету красной загрузочной полосы.
Сам экран примера выглядит не лучше. Просто на сайте он в уменьшенном размере.
Качество всё равно падает. У моего же способа оно сохраняется более лучше.
0
Показать
24
0
Показать
Reach:
Качество всё равно падает. У моего же оно более лучше.
Cразу бы карту прикрепил в тему. Любите же усложнять всё. Я хочу заскринить оба варианта - по старому способу с 4 кусочками и 1 файлом с 1024*1024.
Проверил. Вообщем вердикт печальный - ужимаются текстурки. Изображение стало мыльнее, а на линиях появились "рёбра". Эксперты считают, что текстура ужалась до меньшего размера(512*512 предположительно) и без вариантов.
Причём я ни фига не пойму, с фига ли разница тогда выплыла между 1024*1024 и 768*768. Ну, да не так важно -_-
Ну зато 512*512 лоадскрин занимает всего 150-700(у меня в среднем 238 кб скрины занимают) кб в зависимости от качества и это не ударит по весу и мультиплееру.
А самое главное - не нужно делить картинку, импортировать 4 осточертелых файла и прописывать каждому путь, который запомнишь далеко не с 1 раза.
0
Показать
11
0
Показать
Melissa: я не пойму, ты мою проверил или "свою". ? где линии, где рёбра... где текстуры ужимаются... у меня рёбер никаких нет, и качество страдает не так сильно.
0
Показать
24
0
Показать
Reach, я не знаю как тебе ещё по другому объяснить, что я выше написал.
Melissa:
оба варианта - по старому способу с 4 кусочками и 1 файлом с 1024*1024
Melissa:
ужимаются текстурки. Изображение стало мыльнее, а на линиях появились "рёбра". Эксперты считают, что текстура ужалась до меньшего размера(512*512 предположительно) и без вариантов.
относится к варианту "1 файлом". Как и можно было догадаться из ленты ответов.~Melissa:
Хотя есть ещё 1 возможное "но" - вроде оговаривалось что-то вроде "варик ужимает текстуры больше чем 512*512 до 512*512" если это так, то вполне возможно, что тут он то же самое вытворяет.
0
Показать
11
0
Показать
Melissa: нет нет, я понять не могу в каком ты месте нашёл в моём способе "рёбра". И с чего вы взяли что при таком способе текстуры ужимаются, когда они наоборот растягиваются?
Чтобы оставить комментарий, пожалуйста, войдите на сайт.