Virtown - Город Вашей мечты

Содержание:

Часть 1 (материалы посвященные веселому и непростому занятию создания спрайтов)
Часть 2 (из чего и как формируется мир)
Часть 3 (формирования конечного спрайта)
Часть 4 (Анимация для понимающих)
Базовые модели персонажей
История создания дивана
Открытки
Часть 5. Как сделать из рисунка объект?
Часть 6. Как делать страйпы?

Часть 1

Здесь я буду выкладывать материалы посвященные веселому и непростому занятию создания спрайтов для Виртауна.

В частности обьясню как нарисовать одежду, мебель, дом, растения.

Те, кто все таки решил попробовать свои силы в создании спрайтов, должны понимать простые правила - создание графики для этого мира занятие очень кропотливое, требуются усидчивость и готовность потратить много времени для получения хорошего результата.
Помимо этого, вы должны знать что рисуя для Виртауна вы соглашаетесь с ниже следующим соглашением:

Располагая картинки, рисунки и любые другие художественные произведения в этом разделе Вы соглашаетесь с тем, что они могут быть использованы Виртауном. Вы передаете все исключительные имущественные авторские права, перечисленные в п. 2 ст. 16 Закона РФ «Об авторском праве и смежных правах». Также вы берете на себя ответственность за то, что все публикуемые вами материалы не нарушают законных прав и интересов третьих лиц.

Простыми словами пользоваться Вашим изделием кроме Виртауна уже никто не сможет, в том числе и по той простой причине что результат может быть примен только здесь. В утешение могу заверить вы приобретаете опыт рисования в искустве pixelart.

И в случае использования Вашего спрайта Виртауном получаете право видеть свое имя среди известных лиц Виртауна и возможно получите бонусы в самом Виртауне.

Вам потребуется как минимум один из приведенных ниже графических редакторов растровой графики или их платный аналог:

1. GraphicsGale http://www.humanbalance.net/gale/us/

русская shareware версия GraphicsGale версии 1.83 http://www.bers.ru/soft/gale183_ru.rar после скачивания положите содержимое архива в каталог где уставновлен shareware GG и запускайте gale_ru.exe, о найденых ошибках пишите по адресу webmaster(o)bers.ru

русская версия GraphicsGale версии 1.86 Freeware Edition http://www.bers.ru/soft/graphicsgale_fe_rus.rar после скачивания положите содержимое архива в каталог где уставновлен freeware GG и запускайте gale.exe, о найденых ошибках пишите по адресу webmaster(o)bers.ru

2. Gimp http://www.gimp.org/

Я рекомендую использовать GraphicsGale, по двум причинам, во-первых - приложенные ниже исходники (болванки) для работы над графикой сделаны в этой программе (по сути решаюший фактор), во-вторых - данный редактор наиболее приспособлен для решения того круга задач, что будет перед вами стоять.

Итак, помолясь своему компу, ангелу его монитору и пророку их манипулятору типа мышь, приступим.

Вся графика для Виртауна выполнена в стиле который носит название pixelart, по русски пиксель-арт, что означает дословно - нарисованное по точке. Такой тип графики подразумевает:

1. Вы действительно будете рисовать по точке.
(буквально мышь в руки, максимальное увеличение и по точке)

2. Не надо ждать что сразу получится нарисовать именно то что вы задумали.
(опыт, дело наживное)

3. Количество цветов на картинке жестко ограниченно требованиями оптимизации размера контента.
(в нашем случае на исполнение одежды для героев используется всего 5 цветов (+один отвечающий за прозрачность), уверен что на первый взгляд выглядит удручающе, но тут мне придется посвятить вас в маленький секрет - эти 5 цветов, средствами програмной части нашего Виртауна могут быть любыми, вы даже можете разработать отдельные палитры которые будут описывать допустимые сочетания цветов для разработаной вами одежки.

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

Автор: Bers.

Часть 2

В этой части я расскажу вам из чего и как формируется мир Виртауна.

Напомню что базовым размером спрайта для героев является размер 32х64 пикселя (точки), но на самом деле все еще хуже, или можно сказать - сложнее. Первоосновой для спрайта героя является изометрический тайл (кусочек) 32х16 пикселя. Тут надо еще раз отвлечься и рассказать о том что же такое, собственно изометрическое измерение и пиксель-арт выполненый в этом типе графики.

Из картинки видно что мы смотрим на мир как бы с высоты птичьего полета, под углом примерно в 45 градусов к поверхности. Такой вид изображения и называется изометрическим. Если внимательно примотреться к изображению, то можно заметить, на заднем фоне повторяющийся рисунок в виде ромбовидных кусочков. Эти кусочки называются тайлами. Их форма и размер подчинениы ряду правил, описание которых вполне можно найти в интернете поискав на поисковых системах слова "pixelart iso". Поэтому я не буду очень уж подробно останавливаться на технической стороне, оговорю лишь то что основой всей графики Виртауна является вот такой тайл 32х16.

В графике такого типа есть только два измерения, Y-координата и X-координата, причем обе координаты повернуты относительно горизонтали примерно на 23 градуса. Этим и обьясняется ромбовидная форма тайла. Но поскольку нам нужно передать ощущение трехмерности то у тайлов есть виртуальная "высота" (Z-координата), помните что спрайт размером 32х64? Вот эти дополнительные 48 точек и являются высотой спрайта, выглядит это так.

Из всей этой достаточно сложной технической стороны вопроса, вам нужно усвоить только то что рисовать надо основываясь на тайле размером 32х16, а все что выходит за пределы 16-ти точек будет являться как бы высотой картинки.
Ноги наших героев опираются именно на такой тайл 32х16, это как бы пол, по которому они ходят. Пригодиться это в том случае если вы решите нарисовать полностью своего героя, или дополнительные тайлы оформления мира (траву, дерево, дом и тд.

.

На этом я закончу краткий экскурс в техническую сторону вопроса. Надеюсь этого достаточно для того что примерно понять как и почему нарисованы картинки.

Продолжение следует...

Автор: Bers.

Часть 3

Надеюсь вы уже установили требуемый растровый редактор и готовы "внимать и усваивать"? :) Тогда начнем с "простого" (ну или будем считать что это просто) - с обуви. Как вы могли заметить в Виртауне есть 4-ре типажа героев, все они кстати имеют прозвища отвечающие их внешнему виду.

Я мог бы, тут, рассказать массу историй о создании каждого из этой славной компании, однако у меня сейчас другая задача, поэтому не будем отвлекаться. Как видно из картинок наши "герои" одеты в одежду и обувь, а через какое то время у всех появится возможность носить дополнительные предметы (например шляпы, бороды для мальчиков, и косметику для девочек). Выбор над чем поработать достаточно богатый.

Однако требуется небольшое техническое отступление, или если хотите краткий экскурс в то, как изготовлены эти картинки и как работает собственно процесс "переодевания" или формирования конечного спрайта.
Вот наш "рабочий герой", для примера возьмем "Будду", в частности создан из вот таких картинок носящих название "страйп" (по-русски можно назвать "пленка").

Как вы видите тут есть отдельные элементы - тело, голова, обувь, штаны, плащ, прическа, мало того, все это еще и в двух вариантах - спереди и сзади, и количество кадров на "страйпе" равно количеству (этих кадров 8 ) кадров режима "ходьба" + 2 кадра на положения "стоит" и "сидит", итого на данный момент 10 кадров. Первым идет положение "стоит", следом начинаются карды "идет". 10-ый кадр положение "сидит".
Вы должны, так же, знать, то что на картинках нарисовано белым, на самом деле является тем самым (+ один) прозрачным цветом.
Программная часть Виртауна, получая такие картинки делает из них, при создании героя игроком, этакий бутерброд. И прозрачный цвет позволяет видеть сквозь наложенные друг на друга слои те изображения что находятся ниже. Это означает что создание любой одежки невозможно в отрыве от анимации самого героя и всех оставшихся предметов одежды. Конечно не исключены варианты когда верхняя одежда закрывает большую часть тех предметов что находятся ниже, например - плащ обязательно частью или полностью закроет штаны и футболку, но даже в таком случае в "плаще" есть прозрачные места для того чтобы были видны кисти рук. Порядок наложения "страйпов" друг на друга на сегодняшний момент выглядит так.

Количество таких наложений в принципе неограниченно, но из-за ограниченного размера опорного спрайта 32х64 все таки имеет конечное число, больше площади опорного спрайта нарисовать все равно не выйдет :), но вероятно в будущем при добавлении неких действительно необходимых предметов, порядок и количество слоев изменится, но сейчас работать придется в этих рамках.

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

Перейдем к собственно созданию обуви. Посмотрите на эту увеличенную картинку.

Видите эти смешные 20 пикселей? Это и есть дефолтовые тапочки в которых бегает большинство "Будд" по Виртауну после своего первого появления, если конечно игрок не решит побегать босиком :), вот основываясь на разумном расходе этих пикселей вам и надо начинать создание обуви для героя.
Естественно для того чтобы начать рисовать вам нужны оригинальные файлы анимации героев. Они есть в следующей главе.

После того как вы запишете файл выбранный для работы к себе на диск можете смело запускать Graphics Gale, и пока я пишу продолжение можно попробовать свои силы на свой страх и риск. Правда предупреждаю, без моих дальнейших объяснений, подготовить действительно готовый к употреблению страйп у вас не выйдет. Так что, все что вы сейчас будете делать можно считать практикой.

Автор: Bers.

Часть 4. Анимация для понимающих.

Данная глава по анимации предназначена по большей части для тех, кто уже рисовал графику для Виртауна, знает что такое страйп, редактор Graphics Gale (GG) и некоторые другие тонкости пиксельной графики. Также понятно из заголовка темы что многие базовые знания и принципы анимации здесь будут не раскрыты, такой труд требует несколько большего времени и другого подхода, так что под понимающими в данном случае подразумевается, что вы понимаете то, что обучение в общем будет происходить больше на форуме нежели в статьях

. Естественно в дальнейшем мы реализуем сей труд в удобоваримой для всех форме. Тем не менее, такое вступление не означает что анимировать могут лишь те кто уже что-то рисовал для этого проекта – пытаться может каждый желающий и мы в меру наших сил, естественно вам поможем, комментируя ваши работы.

Начнем с обозрения, необходимого для анимации, инструментария в Graphics Gale (GG). Трепетно надеюсь, что вы знаете как просто нарисовать статичную картинку в этом редакторе, что такое слои и чем рисовать, поэтому перейду сразу к окну Frame (Кадры).

Frame (Кадры).
В каждом кадре имеются свои слои, т.е. свой уникальный набор. К примеру, в анимации у вас есть не меняющаяся часть изображения (голова) это не значит что она должна быть только на первом кадре, это изображение (или слой с изображением) должно присутствовать во всех кадрах.
У окна Frame есть меню работы с кадрами, необходимо нажать на черную стрелочку (как и в Layer) и увидите выпадающие меню. Кадры можно добавлять (как же без этого), дублировать, удалять, копировать, вырезать, вставлять слева от текущего или справа. Есть еще некоторые тонкости в кадрах такие, как тайминг, прозрачность но об этом в другой раз, в предоставленных вам файлах эти параметры будут настроены, вплоть до количества кадров, поэтому во избежание проблем не изменяйте их без надобности.

Preview (Предпросмотр).
Отдельного внимания заслуживает окно Preview (Предпросмотр). В нем, с учетом тайминга кадров, проигрывается анимация, т.е. здесь вы увидите свой нарисованный костюм, персонаж в действии.
! Если окно стало серым и не показывает анимацию, то стоит сохранить файл и перезагрузить программу. Это глюк присутствующей в этой версии GG.

Ресурсы.
Для каждого персонажа предоставлен базовый файл *.gal. Ниже также показано содержимое этих файлов в виде анимированных гифов, которые вам не нужны. Нужны лишь файлы *.gal, находящиеся в архиве.

http://www.11line.ru/files/virtown/persons/base/base_anim_persons_v1_2.rar

Для примера скачайте и посмотрите как нарисовано платье.

http://www.11line.ru/files/virtown/persons/base/example_anim_dress.rar

Работа с базовыми ресурсами.
Важные моменты:
1. Начать рисовать следует с создания нового слоя для одежды (волос, обуви), не рисуйте на базовом изображении!
2. При создании нового слоя автоматически на нем включается альфа-канал (кнопочка с буквой "а") - его нужно выключить.

3. Новый слои должен иметь уникальное имя, которое должно повторяться на каждом кадре. Если слои на кадрах имеют одинаковые имена мы можем оперировать ими одновременно, а именно скрывать и показывать с помощью функции Reverse visibility в выпадающем меню окна Layer (Слой).
Пример. Есть платье – на первом кадре создаем слой с именем dress и рисуем на нем. Затем, на втором кадре создаем слой с тем же именем и рисуем изображение для анимации платья. Либо просто копируем слой, (простым перетаскиванием из окна слоев на нужный кадр) из первого кадра во второй и изменяем его изображение.
4. Для каждой вещи должен быть отдельный слой.

Готовый результат.
Когда анимация закончена и вы довольны результатом, то для утверждения и обсуждения вашей работы выкладывать на форум нужно анимированный gif. В лицензионной GG это делается достаточно просто.
1. Сохраните текущий файл
2. Изначально вы работаете в почти неограниченной цветовой палитре. но для формата гиф необходимо 256 цветов. Нажимаем All Frames (Все кадры) – Color Depth (Глубина цвета) – Меняем Format (Формат) из 24 bpp (Full Color) на 8bpp (256 colors). Нажимаем OK и увидим как наша палитра преобразуется в 256 цветов, а именно покажет те цвета которые используются в этом файле.
3. Нажимам File (Файл) – Save as (Сохранить как). В типе файла (расширение файла) указываем gif.

К сожалению в бесплатной версии возможности сохранять анимированный гиф нет. Поэтому для его создания использовать придется дедовский метод. А именно:
В GG копируем каждый кадр (Edit – Copy display image) и по очереди вставляем в Adobe Image Ready (надеюсь у большинства есть эта программа). Если необходимо пояснение как это делать в Image Ready, скажите об этом и мы постараемся описать это в последующих главах.

Автор: Mangust.

Базовые модели персонажей.

Вид спереди и сзади.
Размер 32х64 (белый фон).
1. При отрисовки одежды и акссесуаров для этих моделей нельзя менять положение модели на холсте (холст - имеются ввиду белые прямоугольники в которые заключены модели).
2. Нельзя менять форму и позу модели, за исключением маскарадного костюма (что такое этот костюм будет описано чуть позже).
3. Одежда должна соответствовать изометрии мира и форме тела персонажа.

История создания дивана

Костюмы это коне4но хорошо, но как гриться дизайнер должен уметь все)) Да и Китайгород совсем забросила.
http://www.virtown.ru/jforum/posts/list/576.page
В общем по совету Мангуста, и под его редакцией, нарисовала диван. оказалось, 4то нарисовать мебель не менее сложно 4ем нарисовать и полностью анимировать костюм.

Вместе с готовым диваном прилагаю скриншоты.Последовательность работы оставляет желать лу4шего. Но надеюсь моя работа кому-нить поможет в обу4ении.

на4альные построения, нахождение основные то4ки. Диван из мира был взят для ориентира.

построение основного контура, определение размера

определение света и тени

обогащение форм, сглаживание углов, наложение текстуры

прорисовка деталей

примерная форма подушек

наложение текстур

оптимизация цветов . из 75 цветов ( ох размахнулася!) до 28.

Автор: Тай.

Открытки

Если есть желание у кого рисовать открытки, то можете приступать. В своей теме делаем новый рисунок и вперед.

Объясню технические моменты:
1. Размер не больше 599х568, не меньше 100х150. Чем меньше открытка тем быстрее загрузиться. Открытки загружаются в момент обращения к внутренней картинки, они не подгружаются вместе с ресурсами мира.
2. Работать будет по принципу газеты, будет маленькая стандартная картинка открытки, на которую надо нажать, а потом нажать на кнопку "использовать" (Вы так газету читаете). Тогда откроется окошко с картинкой открытки.
3. Графика пиксельная обязательно. Никаких уменьшенных фотографий. Здесь речь не идет об изометрии, может что-то абстрактное, графика, живопись, на волю вашей фантазии. Но требования по качеству будут не менее чем к созданию ресурсов мира.
4. Когда вы выкладываете открытку в тему, то обязательно напишите что это открытка и что пытались на неё изобразить.

Недостатки:
1. На данный момент при покупки нельзя будет просмотреть содержимое, лишь ориентироваться по названию. Поэтому требование к авторам придумать название, соответствующие содержанию.

Часть 5. Как сделать из рисунка объект?

Ответ прост - для того, чтобы сделать из вашего рисунка сам объект нужно, учитывая будущее основание объекта, сделать gif файл с соответствующими размерами и отдать нам.
Кому не понятно первое предложение этой статьи читайте дальше, там вы найдете более подробный ответ.

Как вы уже знаете, первоосновой для любого объекта в мире Виртаун является тайл 32х16 пикселя (если нет, то в срочном порядке читать статьи выше). Также вы узнаете и эту картинку

Это напоминаю, и есть наш тайл. Из таких тайлов состоит вся поверхность мира.

Формируется такая сетка при наложении тайлов друг на друга с определенным смещением.

Подробнее углубляться не будем, на данный момент достаточно понять что такое тайл и что его размер 32х16, хотя размер черного ромба 30 пикселей по ширине и по краям мы имеем еще по одному белому пикселю. В данном случае ромб это лишь визуальное отображение виртуального элемента.

Объект мира.
Объектом мира является любой рисунок, выполненный в изометрии мира и имеющий основание.
Есть рисунки, иллюстрирующие содержание объекта (внутренние страницы газеты, игры). Такие рисунки не относятся к данному определению, и в этой статье мы не будем о них говорить.

Основание объекта.
У каждого объекта (предмета) есть основание, которое находиться на горизонтальной поверхности мира. Основание это есть ширина и длинна объекта. Единицей измерения ширины и длинны в нашем мире являются тайлы, как в реальном мире сантиметры, метры и т.п. Основание не может быть меньше одного тайла, так как тайл есть минимальная величина определения ширины и длинны объекта.

Однотайловые объекты.
Такие объекты имеют основание размерами 1х1 тайл.

Объект занимает на горизонтальной поверхности один тайл по ширине и один в длинну, и в этот тайл уже нельзя будет встать персонажем или поставить туда другой предмет. Изображение (картинка) объекта с основанием в один тайл не обязательно должен иметь ширину 32 пикселя, он может быть меньше по ширине 32 пикселей (смотри урны в городе, фонари).

Многотайловые объекты.
Конечно есть и предметы, у которых основание больше одного тайла и таких предметов большинство. К примеру дом (максимальная ширина в картинке – 286 пикселей):

У таких предметов рисунок обычно больше 32 пикселей, поэтому если указать основание, предположим в 2 тайла (меньше правильного, в данном случае правильное это 9х9), то будет отображаться только по два тайла с каждой стороны и на примере дома останется только странная полоска с камешками.

Такой дом должен иметь основание 9х9 тайлов и тогда в мире он будет отображаться во всей красе.

Как сделать из рисунка объект?
Наконец дошли до сути и практики. Теперь вы знаете, что такое основание объекта, в чем измеряется и с чем его едят. Осталось теперь только: «…учитывая будущее основание объекта, сделать gif файл с соответствующими размерами…».
На самом деле правильная работа начинается с определения основания будущего объекта, а затем уже рисуется рисунок к этому основанию.
Но мы рассмотрим на практическом примере уже готовый рисунок.

Вы нарисовали рисунок с определенными размерами:

Теперь этот рисунок нужно положить на поверхность мира. Берете вот эту серую сетку, которую вы видите и кладете на него свой рисунок.

Как видно положили абы как. Понять какое основание здесь не просто. Теперь начинаем двигать наш рисунок по сетке, чтобы найти оптимальный размер основания.

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

Это верный вариант. Трудность в том, чтобы найти как раз наиболее оптимальный размер основания, чтобы рисунок не вылезал за границы основания, но и основание не было слишком большим.
Затем учитывая полученное основание 2 на 4 тайла, делаем gif файл с учетом размеров основания, фактический размер файла получается таким (то что внутри фиолетовой рамки):

Не забывайте что тайл – 32х16. Помните его форму и примерную картинку.

Теперь у вас есть вот такой гиф

Его вместе с серым фоном и линиями нужно выкладывать на форум в свою тему. Зачем? Чтобы мы видели что вы правильно определяете основание.
Если с основанием все в порядке, то просто удалите серый фон и серые линии и все полученное пространство должно стать прозрачным, но ширина и высота картинки должны остаться те же. Просто по краям появятся пустые пространства – это нам и нужно.

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

Это и есть почти готовый объект. Т.е. вы сделали все от вас возможное. Полноценным объектом, как сами понимаете он станет в мире, там где его можно будет подвигать, походить вокруг, покрутить и т.д.

Примеры:
Ниже показаны предметы, уже существующие в мире, а также их основания.

Автор: Mangust.

Часть 6. Как делать страйпы?

Предлагаем скачать и запустить по этому вопросу видеоурок, в котором за минуту все объясняется:
http://11line.ru/files/virtown/help/part6/lesson-1.exe

Для тех, кто любит почитать:
1. Открыть.
Чтобы сделать страйп нужно прежде всего открыть файл с анимацией в программе Graphics Gale.

2. Изменить палитру.
Затем нужно изменить глубину цвета на 256 цветов. Меню All frames (Все кадры) - Color depth (Глубина цвета) – переключить в положение 8bpp (256 colors). Нажать кнопку «ОК».

Вы увидите как в вашей палитре уменьшится количество цветов. Там появятся те цвета которые вы используете в своем рисунке. Теперь максимальное количество цветов – 256.

Вы в любой момент, после создания страйпа, можете вернуть глубину цвета в исходное положение 24bpp (full color).

3.Сделать экспорт.
Далее меню File – Export. Вам откроется окно экспорта, которое должно выглядеть таким образом:

Если оно выглядит по другому, то настройте его следующим образом:
В поле Type (Тип) – Combined File (Комбинированный файл)
В поле Columns (Колонки) – 1
Напротив Frame Properties(Свойства кадра) – галочки нет.
Нажать кнопку «ОК».

4. Сохранение.
Вам предложат сохранить ваш страйп. Выберите нужную папку.

В поле File name (имя файла) – укажите нужное имя файла с расширением (*****.gif).
В первый раз обязательно припишите к имени файла «.gif». Вполне возможно, что без этого в первый раз сохранения страйпа, файл запишется без расширения и вы не сможете его открыть.
В поле Save as type (тип файла) – выберите из списка GIF.
Если у вас нелицензионная GG, вполне возможно, что формата GIF не будет в списке, поэтому на форум разрешается выкладывать страйп в формате Gale (*.gal).
Нажмите кнопку «Save» (Сохранить).

5. Результат.
Готовый страйп, предположим из 5 кадров, должен выглядеть вот так:

Автор: Mangust.