Все о создании спрайтов

Сообщения
2,288
Реакции
1,739
Помог
31 раз(а)
Что такое спрайт и с чем его едят?

Слово "sprite", дословно переводиться как "двухмерное изображение на экране". Спрайты - двухмерные файлы анимации. Могут представлять собой как небольшой мульт из нескольких кадров, так и один статичный кадр.
В HL спрайты используются на каждом шагу - вы просто не могли их не заметить. Это анимации взрывов, огня, дыма, капельки воды(дождь, снег), различные вспышки, так называемые "оптические" эффекты(слепящие ореолы ламп) и т.д. Находятся в папке x:/half-life/cstrike/sprites. Имеют расширение *.spr

Достоинства и недостатки

Для профессионально маппера спрайты незаменимы. Они никоем образом не влияют на r_speeds, что не может не радовать! Мне известно три вида спрайтов, которые имеют свои достоинства и недостатки.

1) Параллельные спрайты. Создают иллюзию трехмерности объекта, за счёт того, что они всегда параллельны по отношению к игроку. Пример - на карте cs_nnd, спрайтом выполнен бильярдный шар, который кажется игроку полностью трёхмерным; на de_crater_club, параллельными спрайтами выполнены кегли и шары для боулинга (Рис. 1).

sprites_03.jpg
Рис. 1

2) Ориентированные спрайты. Это настоящее открытие для маппера! ;) Позволяют ориентировать спрайт в какую-либо сторону. Выглядит как текстура, наложенная на обычный браш. Очень удобно использовать ориентированные спрайты вместо обычных entity с текстурами, которые содержат прозрачные области (битовую маску). К тому же, использование таких спрайтов поможет вам технологически снизить r_speeds! Смотрим Рис. 2.

sprites_04.jpg
Рис. 2

На карте cs_costabrava при помощи ориентированных спрайтов создана листва деревьев. Выглядит чертовски реалистично и самое главное - приём экономит драгоценные w_poly!

3) Фиксированные спрайты. Представляют собой параллельные спрайты, зафиксированные по вертикали. Такой спрайт будет всегда параллелен к игроку, за исключением случаев, когда игрок смотрит на него сверху или снизу. Пример - трава на карте cs_BbICOTKA (Рис. 3).

sprites_02.jpg
Рис. 3

К сожалению, спрайты так же имеют и свои недостатки :( Главный недостаток - ограниченное количество используемых спрайтов. Дело в том, что при загрузке спрайтов, моделей и entity, для них резервируется ограниченное место в памяти. Поэтому, количество спрайтов, использованных вами, желательно не должно превышать 200 штук. Иначе ваша карта попросту не загрузится, уж поверьте мне ;) Эх! Прощай мечта о создании огромного спрайтового конопляного поля. :)

Цветовая палитра спрайта - всего 256 цветов. Ограничение на размер 256х256 пикселей.
Ещё один недостаток - на спрайт никаким образом не влияют тени, отбрасываемые брашами, а так же источники света(т.е. при компиляции спрайт не обрабатывается hlrad-ом). Если спрайт будет находиться в полной темноте - он будет выглядеть светящимся. Пример - кегли и шары для боулинга на de_crater_club (Рис. 1). Согласитесь, смотриться странно.
Но всё же существуют случаи, когда этот недостаток можно обратить достоинством.

sprites_00.jpg
Рис. 4

Мультфильм, который идёт по телевизору на карте cs_bikini (Рис. 4) выполнен ориентированным спрайтом с несколькими кадрами. В комнате немного темновато, поэтому светящийся спрайт-экран выглядит очень реалистично, при этом нет необходимости делать каждый отдельный кадр анимированной текстурой и помещать её в wad! 8)

Учимся делать спрайты

Пришло время учиться делать продвинутые спрайты! 8) Для этого нам понадобятся: для создания текстуры - любой графический редактор; для создания спрайта - SpriteGen; для просмотра спрайта - SprView.

Итак, попробуем вместе замутить ориентированный спрайт травки. Для начала нам необходимо создать рисунок в формате bmp, который станет спрайтом. Помните о ограничениях: 256 цветов, не больше 256х256, значение кратное числу 16 (как у обычной текстуры). Если рисунок содержит прозрачные области - последний цвет RGB в его палитре должен равняться R=0, G=0, B=255. Что бы избежать глюков с отоображением спрайта, желательно отступать несколько пикселей от краев рисунка. Вобщем, у меня получилось так (Рис. 5):

sprites_05.gif
Рис. 5

Сохраняем рисунок в папку c:\makesprite. В эту же папку копируем утилиту SpriteGen.
Создаём текстовый файл с именем primer.qc. Туда мы занесём специальные команды, которые помогут нашей текстуре стать спрайтом ;) Выглядеть это должно примерно так (Рис. 6):

sprites_06.gif
Рис. 6

Сначала пишем путь к папке с материалами - в нашем случае c:\makesprite(Рис. 6-1). Затем указываем имя спрайта newsprite (Рис. 6-2), тип спрайта - oriented (Рис. 6-3), параметр отображения текстуры - alphatest (Рис. 6-4), имя рисунка - newsprite.bmp (Рис. 6-5), размеры текстуры - 256 на 64 (Рис. 6-6). Наш primer.qc готов! Сохраняем его в папку c:\makesprite\. Осталось создать bat-файл и сохранить в ту же папку. Туда мы вписываем имя нового спрайта (Рис. 7-1) и путь к primer.qc (Рис. 7-2):

sprites_07.gif
Рис. 7

Смело запускайте bat-файл. Если всё сделано верно, то у нас должен получился самый настоящий ориентированный спрайт! В вашу карту спрайт вставляется при помощи entity env_glow.
В свойствах ентити настраиваем:

Model (путь к спрайту) - sprites/newsprite.spr
Render mode
(параметр отображения) - Solid
FXAmount
(прозрачность) - 255

Важно указать направление спрайта при помощи angle. Помните - направление стрелки показывает сторону, в которую спрайт повернётся "задом"! После компиляции карты у меня получилось вот такая симпатичная травка (Рис. 8):

sprites_01.jpg
Рис. 8

Теперь давайте поподробнее остановимся на параметрах primer.qc, изменяя которые можно создавать различные типы спрайтов.

Типы спрайтов при значении:

vp_parallel - параллельный спрайт
vp_parallel_upright - фиксированный спрайт
oriented - ориентированный спрайт

Тип отображения текстуры:

normal - обычный режим, 256 цветов
alphatest - спрайт с битовой маской, 256 цветов, последний цвет в палитре RGB должен быть (R=0,G=0,B=255)
additive - спрайт с битовой маской, 256 цветов, последний цвет в палитре RGB должен быть (R=0,G=0,B=255)
indexalpha - черно-белый спрайт, последний цвет в палитре - определяет окраску спрайта.

Анимация спрайта:

При создании анимации (например из 5 кадров), ваш primer.qc дожен содержать информацию о дополнительныч кадрах. Делается это добавлением новых строчек с именами бмп-файлов:

$load newsprite001.bmp
$frame 0 0 96 128
$load newsprite002.bmp
$frame 0 0 96 128
$load newsprite003.bmp
$frame 0 0 96 128

и т.д

Если создание спрайтов при помощи SpriteGen вам показалось слишком сложным, то можно попробовать ещё одну программку - под названием SpriteWizard. К сожалению, она позволяет создавать только параллельные спрайты. Но зато в работе очень проста и неприхотлива - достаточно всего лишь найти свой бмп-файл и выбрать тип отображения текстуры! Всё! :) Спрайт в кармане!

Источник - cs-mapping.com.ua
 

Download all Attachments

Последнее редактирование:
Сообщения
264
Реакции
80
Помог
1 раз(а)
Неплохо так! Сделал себе, давно хотел.. :blush2: Спасибо покемошке, за подсказки! :yes3:
Вот пример как выглядит. (надеюсь не сочтут за рекламу, и не удалят..) :beee:

Если кому надо, вот координаты!
Код:
de_dust2
{
"origin" "-127 -514 221"
"angles" "0 90 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "300 2050 -5"
"angles" "0 270 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
de_nuke
{
"origin" "1409 -352 -344"
"angles" "0 180 0"
"rendermode" "4"
"renderamt" "255"
"scale" "0.7"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-513 -984 -350"
"angles" "0 360 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
 

Download all Attachments

Сообщения
2,143
Реакции
1,225
Помог
44 раз(а)
REVO, не плохо, но спрайт - вырви глаз. Не стоит делать такие "яркие" и переливающиеся картинки. Это не PNG и качество получается убогим.
10 Янв 2018
На крайний случай, можно сделать модель баннера. Так качество лучше будет.
 
Сообщения
264
Реакции
80
Помог
1 раз(а)
Minni, переделал) чуть позже координатами с людьми поделюсь, может пригодится кому!
13 Янв 2018
Вот как и обещал. (полезно будет тем, кто хочет зашить их в карту)
Код:
{
"origin" "-780.012023 1178.979492 -6.933424"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-753.074035 345.017608 -8.218673"
"angles" "0.000000 90.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-441.424072 -62.974479 106.571159"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "306.998321 1616.972656 183.466629"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "1166.972534 -662.653137 112.561347"
"angles" "0.000000 0.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-1342.973144 -1609.839477 -258.701599"
"angles" "0.000000 180.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "928.724243 175.273345 -85.369255"
"angles" "0.000000 135.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "0.7"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-3327.032470 126.400703 -116.983985"
"angles" "0.000000 180.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "2559.064941 333.876556 -134.059127"
"angles" "0.000000 0.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-2240.272460 -257.014251 115.117935"
"angles" "0.000000 90.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-767.068725 2323.428466 70.248870"
"angles" "0.000000 180.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-380.424285 -1281.019775 153.585144"
"angles" "0.000000 90.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "1104.022094 2816.801025 117.108680"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "2402.311767 2623.006835 233.437927"
"angles" "0.000000 90.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-1408.909667 -23.640119 114.612831"
"angles" "0.000000 0.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "737.000854 -1735.428100 344.025115"
"angles" "0.000000 180.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "1261.539306 767.036254 175.444412"
"angles" "0.000000 90.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "-1697.026489 -888.591491 -30.215772"
"angles" "0.000000 0.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "1119.059082 1260.543945 142.654022"
"angles" "0.000000 0.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
Код:
{
"origin" "1643.540161 -1614.983642 -200.788055"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-1167.613281 1217.010742 -130.950759"
"angles" "0.000000 270.000000 0.000000"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
 

Вложения

ALT

Сообщения
52
Реакции
0
такой вопрос может кто нить переделать данный спрайт на более человеческий . просто этот ну пц уг 20180113181739_1.jpg
ну или скажите цеу вопроса хотя бы ((((
 

Download all Attachments

Сообщения
52
Реакции
34
Хотел сделать спрайт по координатам указанным в этом посте https://dev-cs.ru/threads/1718/#post-18629 , но с форматом текстуры additive, чтоб выглядело как в плагине mode2x2:
20344

В ent-файле rendermode указал "3", а спрайт создан с параметрами ORIENTED и additive.
20348 20349
В итоге спрайт стал просвечивающим, как на предыдущем скрине, но стал масштабироваться и менять прозрачность в зависимости от приближения и отдаления к нему:
20346 20347


Пробовал разные значения rendermode, но в других режимах спрайт перестаёт быть просвечивающим.
Пробовал компилировать спрайт с разыми параметрами, но тоже ничего не помогло.
Пробовал менять classname "env_glow", "env_sprite" - всё так же.
Есть какое-то решение данной проблемы?
 
Последнее редактирование:
Сообщения
57
Реакции
155
Помог
1 раз(а)
Vincent, таково поведение этого режима. Из fgd:
Like additive, but as the player gets further from the sprite, it gets progressively larger and more transparent. The sprite is also not obscured by intervening models, which can sometimes look bad. Alphatest sprites won't use their masks in this mode.
3: "Glow (sprites only)"
Нужен rendermode 5, он точно не работает?
 
Сообщения
52
Реакции
34
gordon9k, да, 5 работает. а я его, видимо, пропустил, потому что подумал, что нужен исключительно для текстур типа лестниц и других с синей маской.
благодарю
7 Янв 2020
gordon9k, Есть какая-то принципиальная разница для моей задачи, какой ентити ставить env_glow или env_sprite?
 
Сообщения
57
Реакции
155
Помог
1 раз(а)
Vincent, если просто поставить спрайт на карту и env_glow устраивает, то разницы нет. Главное отличие env_sprite от env_glow в том, что env_sprite можно включать и выключать. Если это не требуется, тогда и env_glow сойдёт.

нужен исключительно для текстур типа лестниц и других с синей маской
Это режим Soild, он же "rendermode" "4"
 
Последнее редактирование:
  • Нравится
Реакции: Ayk
Сообщения
52
Реакции
34
gordon9k, Я всё понял. Я при выборе rendermode ориентировался по учебнику cs-mapper, а там вот:
20360
Только сейчас понял, что отсчёт идёт не с 1, а с 0. И вместо rendermode 5 ставил 6

А env-glow с анимированным спрайтом работает? Я сейчас вставил 7-кадровый спрайт с env-glow, но он не двигается.


Главное отличие env_sprite от env_glow в том, что env_sprite можно включать и выключать.
Включать и выключать только по триггеру? Можно сделать, например, чтоб спрайт работал первые 15 секунд в начале раунда, а потом отключался самостоятельно?
 
Последнее редактирование:
Сообщения
57
Реакции
155
Помог
1 раз(а)
Включать и выключать только по триггеру? Можно сделать, например, чтоб спрайт работал первые 15 секунд в начале раунда, а потом отключался самостоятельно?
Кнопка, триггер и т.п.
Вот образец выключения спрайта для сервера с ReGameDLL, добавить в ent-файл:
Код:
{
"origin" "0 0 56"
"targetname" "sprite_entity"
"angles" "0 0 0"
"renderfx" "0"
"rendermode" "5"
"renderamt" "255"
"rendercolor" "0 0 0"
"framerate" "10.0"
"model" "sprites/enter1.spr"
"scale" "1"
"spawnflags" "1"
"classname" "env_sprite"
}
{
"origin" "0 0 128"
"sprite_entity" "15.0"
"targetname" "mm_sprite"
"classname" "multi_manager"
}
{
"origin" "0 0 107"
"target" "mm_sprite"
"delay" "0"
"triggerstate" "1"
"classname" "trigger_auto"
}
trigger_auto в начале каждого раунда активирует multi_manager, тот активирует уже "включенный" с начала раунда "sprite_entity" ("spawnflags" "1"), и, тем самым, его выключает.

А env-glow с анимированным спрайтом работает? Я сейчас вставил 7-кадровый спрайт с env-glow, но он не двигается.
Будет работать, если ты пропишешь "framerate" для env_glow
 
Последнее редактирование:
Сообщения
190
Реакции
16
Помог
1 раз(а)
Бред какой-то, редактирую через Фотошоп картинку, когда начинаю её соединять, программа не создаёт spr. Если уже сделанные картинки без моей использовать, то создаёт. Хотя свою картинку сохраняю с Индексированными цветами 256. В общем не понятно, как через Фотошоп отредактировать картинку и сохранить правильно в *bmp, чтобы потом добавилась.
 
Сообщения
67
Реакции
18
Интересная статья, а можно узнать где-нибудь поподробнее конкретно об этом ограничении размера 256x256. Это обусловлено движком? Есть ли вообще возможности обхода данного ограничения?
 
Сообщения
3,561
Реакции
1,559
Помог
131 раз(а)
R1ner, да, это ограничения движка.
 
Сообщения
67
Реакции
18
Nordic Warrior, понятно. Жаль, что даже в ReHLDS ничего не смогли с этим сделать.
Интерес у меня возник из-за желания объединить все спрайты WeaponList'а в один, с целью экономия места на прекеш, но видимо придётся искать другой способ...
 
Сообщения
3,561
Реакции
1,559
Помог
131 раз(а)
R1ner, можно объединить хотя бы в два или более.
 
Сообщения
67
Реакции
18
Nordic Warrior, да я так и делаю, например иконки типа патронов, я переместил на один спрайт из которого беру по ним инфу, но это ладно, они имеют размер 24х24, но если мы говорим о спрайтах оружия (спрайт при поднятии и спрайта в инвентаре), когда на сервере используется с пару десятков кастомных, для каждого из которых надо выделять (170x45)*2 px по дефолту, ну блин, такое...
 
Сообщения
5
Реакции
0
Неплохо так! Сделал себе, давно хотел.. :blush2: Спасибо покемошке, за подсказки! :yes3:
Вот пример как выглядит. (надеюсь не сочтут за рекламу, и не удалят..) :beee:

Если кому надо, вот координаты!
Код:
de_dust2
{
"origin" "-127 -514 221"
"angles" "0 90 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "300 2050 -5"
"angles" "0 270 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
de_nuke
{
"origin" "1409 -352 -344"
"angles" "0 180 0"
"rendermode" "4"
"renderamt" "255"
"scale" "0.7"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
{
"origin" "-513 -984 -350"
"angles" "0 360 0"
"rendermode" "4"
"renderamt" "255"
"scale" "1"
"model" "sprites/ваш_спрайт.spr"
"rendercolor" "0 0 0"
"classname" "env_glow"
}
@REVO,

Скажите кто знает как самому найти координаты?
 

Пользователи, просматривающие эту тему

Сверху Снизу