g
Среда
22.11.2017
01:46
 
Все для редактирования и создания игр
 
Приветствую Вас Новичок | RSS|Главная | Каталог статей | Регистрация | Вход

Каталог статей

Главная » Статьи » Photoshop » Для начинающих

Туториал. Тайлинг текстур (пиксель арт для игры)

Ни одна игра не может обойтись без набора тайлов — бесшовно стыкующихся текстур земли, стен и различных объектов окружения, состоящих из нескольких повторяющихся элементов.

Тайлы — основополагающая часть всей графики 2D-игр.


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

 

 

Палитра, материал, сетка

 

 

 

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

 



Самым темным цветом я набрасываю "сетку" — будущее расположение элементов текстуры на тайле.
Выделяем область сетки, равную размерам будущего тайла — в данном случае это 50x50 пикселей и вырезаем этот фрагмент. Затем открываем новый документ (размер должен равняться размеру планируемого тайла) и вставляем фрагмент нарисованной сетки туда.
(Да, размеры тайлов должны быть определены еще на стадии задумки игры, а при рисовании очень помогает такой инструмент, как Grid, он должен быть включен, а привязка кисти выключена.
 

Фильтр Offset

Заходим во вкладку filters > Others > Offset и применяем смещение на нашем документе. Параметры задаем так: (размер тайла)/2. В нашем случае 50/2=25 пикселей. Смотрим что вышло.
Когда сетка затайлена — можем еще раз применить offset, а можем продолжить работать и так — тайлится текстура будет в любом случае.
На картинке зеленым показаны добавленные линии, красным — лишние пиксели, которые убираем стеркой. В оригинале линии, естественно, добавляются тем же цветом, что и остальная сетка.
 

Отрисовка

Далее наступает сплошной пиксель-арт: заливаем всё более светлым цветом ( я использую цвет, на один уровень темнее чем средний из выбранной палитры, по личному опыту - так выходит удобнее)
Рисуем текстуру булыжников, не забывая о выбранном направлении освещения и применяя offset, если нужно уточнить не нарушена ли бесшовность. (в принципе с опытом это можно проделывать без фильтра смещения, а просто на глаз)
 

Доводка и коррекция

После отрисовки текстуры используем offset для контроля бесшовности и поправляем недочеты.
Теперь тайл практически готов — можно скопировать его и посмотреть как он тайлится, создав небольшой кусочек из дублируемой текстуры.
Важный момент — в текстуре нужно избегать элементов выбивающихся из общей монотонности, например слишком ярких, или темных участков, слишком мелких или крупных,относительно остальных, элементов. Всё это может привести к ярко выраженной визуальной сетке - заметности повторяющейся текстуры.
Теперь последний штрих — цветокоррекция. (Я обычно применяю корректирующие слои) В Ajustment layers выбираем Selective colors и настраиваем необходимые оттенки, после этого можно применить слой Color ballance.
 

Изометрия

С рисованием изометрических тайлов всё тоже самое. Во всём процессе есть лишь одно отличие: При тайлинге смещением (с фильтром offset) нужно дублировать слой с заготовкой, один дубль смещаем, а на другом рисуем.
На картинке ниже я для наглядности покрасил в разные цвета смещенный на половину дубликат слоя и слой, на котором мы будем рисовать.
Примеры изометрических тайлов, которые я делал этим способом.
(делались для одного заброшенного на данный момент проекта)
 

Полезные советы:

 
  • Важно заранее продумать тайл-сет и на бумаге расчертить весь набор, что и с чем будет стыковаться, где какие переходы будут нужны.
  • Переходные тайлы (например стык вертикальной стены и горизонтальной, тайлы обрывов и прочие) можно сделать уже из готовых тайлов — на примере:
    тайл вертикальной стены (где текстура земли заканчивается обрывом) и тайл вертикальной границы (сверху земля — в нижней части тайла — граница с пустым пространством) накладываем один на другой, и, применив на оба изначальных тайла маски — отрезаем от них лишние части, добавляем новый слой поверх этих двух и дорисовываем аккуратное закругление
  • Самые часто повторяемые на игровой карте тайлы, лучше разнообразить несколькими вариантами — это поможет убрать визуальную повторяемость и разнообразить большие участки с монотонной заливкой одним тайлом.



  •  
  • Да, кстати, трюк со смещением на половину размера тайла отлично подходит не только для пиксель арта, но и для создания обычных рисованных текстур для 2D и 3D игр.


Еще примеры: тайлы из двух вышедших игр и одной.


На этом у меня всё, надеюсь этот урок окажется полезным.


Источник: http://pixelwarheads.blogspot.com/2012/12/blog-post.html
Категория: Для начинающих | Добавил: gameshaker (16.11.2013) E
Просмотров: 3389 | Теги: Tutorials, Туториал, Тайлинг, арт, текстур, Игровая, GameDev, пиксель, игрострой, flash
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Последние файлы
Мега пак примеров и исходников для Unity3D (for RGS) пак12
(Комментариев:0)
(Загрузок:2845)
Мега пак примеров и исходников для Unity3D (for RGS) пак11
(Комментариев:0)
(Загрузок:1689)
Мега пак примеров и исходников для Unity3D (for RGS) пак10
(Комментариев:0)
(Загрузок:1089)
Мега пак примеров и исходников для Unity3D (for RGS) пак9
(Комментариев:0)
(Загрузок:967)
Мега пак примеров и исходников для Unity3D (for RGS) пак8
(Комментариев:0)
(Загрузок:1005)
Мега пак примеров и исходников для Unity3D (for RGS) пак7
(Комментариев:0)
(Загрузок:1053)
Мега пак примеров и исходников для Unity3D (for RGS) пак6
(Комментариев:1)
(Загрузок:844)
Категории раздела
Для начинающих [15]
Работа с Photoshop [1]
Фильтры в Photoshop [0]
Фотомонтаж и спецэффекты [0]
Разное о фотографии [0]
Наш опрос
Разработка игр для вас:
Всего ответов: 48
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Зарег. на сайте
Всего: 2914
Новых за месяц: 25
Новых за неделю: 7
Новых вчера: 1
Новых сегодня: 0
Из них
Админинистраторов:1
Модераторов:0
Проверенных:0
Обычных юзеров:2913
Из них
Парней:2720
Девушек:194
Статистика файлов
Новостей:178
Файлов:481
Статьи:198
Фото:450
Коментариев:150
Форма входа
Поиск



Социум
Друзья сайта
продвижение сайта в поисковых системах GanGstA Game's TOP-100 CounterRambler's Top100 TOP Яндекс.Метрика
продвижение самостоятельно самостоятельное продвижение сайтоврегистрация сайта в каталогах Все для редактирования и создания игр с нуля.Игрострой.Новости моддинга и игростроя.Уроки рисования. Рейтинг SIMPLETOP.NET раскрутка сайта

Бесплатная регистрация в поисковых системах

Locations of visitors to this page

Graffiti Decorations(R) Studio (TM) Site Promoter ТОП GTA-GAME
О сайте Новое в галерее

Здравствуйте уважаемые любители игростроя! Этот сайт создан специально для вас! Здесь есть всё что нужно для редактирования и созданию игр, в том числе и без программирования... На этом сайте вы найдёте очень много файлов статей для редактирования игор. Также на сайте есть очень много различных файлов к играм, программ, патчей, трейнеров и др., для таких известных игор как GTASA, NFS, CS1.6, Crysis и др. Также есть различные программы связаны с играми, для создания 3D-моделей, для извлечения ресурсов из разных игор. На сайте очень много картинок, скриншотов и обоев на рабочий стол из игор. Здесь вы найдёте всё необходимое для создания модификаций к вашим любимым играм, а так же создания собственных игр. Для игроделов на сайте можно скачать необходимые для этого инструменты (конструкторы игр, движки), изучить необходимую литературу (статьи, журналы, книги) и т.д. На нашем форуме вы всегда сможете спросить совет или поделиться своими наработками. Если у вас имеются интересные файлы, то вы так же можете разместить их на нашем сайте.Ващей фантизии нет границ? Тогда вперёд, покажите всем на, что вы способны! А наш сайт вам в этом поможет. Играйте, создавайте, модифицируйте, удивляйте людей! И может быть через какое то время весь мир узнает о Вас!
Подробно о сайте >>>

Ubisoft транспорт GTA IV 3d модели GTA SA Crytek nfs_shift моделирование Новый pc Как обзор правильно статьи Туториал Как создать журнала реалистичные редактор photoshop игровые Моды новое Демо стиле красивый научиться TDU смотреть иностранный локацию по pdf интернет персонаж Основы Рисуем персонажа программирования фон Фотошоп GTA flash ADOBE уроки спрайт графика мод игра FPS журнал 2013 игр GDC программы Выдиралки данных моддинг рисование конструктор релиз версия игры для 3D моделей studio Tools создания скачать новости вышел Android на Nvidia демонстрация CryENGINE анонс Unity Игровая движка текстур выпуск игрового Видео игрострой движок 2D SDK игровой Нарисовать графику GameDev урок 3ds Max sa создание авто Grand Theft Auto из рисовать



Гостевая книга                   Последние комментарии
Администрация не несет ответственности за корректность и достоверность информации в статьях и надежность всех упоминаемых URL-адресов. Все названия и логотипы в файлах и статьях являются собственностью их законных владельцев и не используются в качестве рекламы продуктов или услуг. Материалы портала распространяются согласно условиям лицензии
CreativeCommons.
© 2017
Рейтинг@Mail.ru