Создание игр в фотошопе

Обновлено: 23.01.2025

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

Поэтому практически весь дидактический материал приходится разрабатывать и изготавливать самому дефектологу. Моим огромным помощником в этом нелегком деле стала программа Photoshop.

Методом проб и ошибок, самостоятельно изучая работу в программе шаг за шагом, я разрабатывала и создавала пособия, отвечающие вышеописанным требованиям.

На семинаре-практикуме для своих коллег тифлопедагогов я представлила мастер-класс по использованию программы Adobe Photoshope на примере создания игр "Силуэты и контуры" и "Наложенные изображения".

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

Вложение	Размер
ispolzovanie_programmy_adobe_photoshop_v_sozdanii_didakticheskih_igr.docx	273.64 КБ

Предварительный просмотр:

Использование программы Adobe Photoshop в создании дидактических игр.

Урок№1. Создание силуэтных и контурных изображений.

Этот урок разработан на примере создания игры «Силуэты и контуры».

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

1. Откройте программу Adobe Photoshop. Перед началом работы убедимся, что все необходимое есть у нас под руками. Для этого нужно открыть меню "Окно" (Window). Нам понадобятся окна Слои, Инструменты. Около этих слов должны стоять галочки. Это означает, что окна уже открыты на экране. Если окон на экране нет, нужно щелкнуть по их названиям мышкой, и они появятся.

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

3. На правой панели «Слои» необходимо создать копию слоя, с которой мы будет работать. Для этого выделенный синим слой перетащите вниз на кнопку «создать новый слой».

Появился новый слой, который мы и будем использовать в работе. Чтобы слой-оригинал не отвлекал, его можно удалить, перетащив аналогичным образом, только на кнопку «удалить слой» (находится в нижнем правом углу)

4. Далее необходимо сделать фон прозрачным. Для этого на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на фоне изображения и наживаем на клавиатуре кнопку delite (удалить). Фон стал прозрачным. Повторный клик мышью на рабочей области позволит выйти из режима «волшебная палочка».

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

5.1. В нижней её части выбираем инстумент «добавить стиль слоя» → окно « наложение цвета» . Здесь необходимо задать цвет перекрытия (цвет будущего силуэта). Нажмите ОК.

6. Сохраняем полученный силуэт. Для этого заходим в меню Файл → сохранить как →указываем адрес для сохранения, имя файла ( например , груша силуэт) и сохраняем в формате JPEG ( сохранить →параметры jpeg →качество наилучшее → ок ).

7. Для создания контурного изображения вновь обращаемся к палитре слоев , нажимаем на иструмент «добавить стиль слоя» →открываем окно «обводка». Установите желаемый цвет обводки (это будет цвет контура). Регулируйте ширину обводки, перемещая ползунок размера до желаемой ширины (например, 10 пикс.). Нажмите ОК.

8. Затем на верхней панели программы заходим в меню "Слои" →выполнить сведение . Слой заблокирован, фон стал белым.

9. Чтобы удалить вннутренний и внешний фоны изображения создаем копию слоя (см. п.2 выше). Далее на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на внутреннем фоне изображения и нажимаем на клавиатуре кнопку delite (удалить). Аналогично удаляем и внешний фон.

10. Сохраняем файл (см. п.6), но под другим именем ( например , груша контур).

11. Подобно данному уроку можно выполнить изменение группы цветных изображений в контурные и силуэтные. Для этого цветной образец должен содержать несколько изображений. Последовательность выполнений аналогично п.2-10 представленного урока.

В результате вот что может получиться:

Материал, намеченый для изучения на этом уроке, изложен.

Это все, что я хотела Вам сообщить на этом уроке. На этом урок закончен. Спасибо за внимание!

Урок№2. Наложенние и транформация изображений.

Этот урок разработан на примере создания игр «Наложенные изображения» и «Посчитай контуры».

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

1. Откройте программу Adobe Photoshop. Для начала работы нам необходимо открыть файл-заготовку с контурами (например, овощей). Открывать изображение очень просто, достаточно проследовать в (Файл – Открыть) и выбрать нужное вам изображение ( например, контуры) , нажав “Окей.” Однако слой с контурными изображениями заблокирован.

2. На правой панели в палитре «Слои» необходимо создать копию этого слоя, с которой мы будем работать. Для этого выделенный синим слой перетащите в нижнюю часть панели на кнопку «создать новый слой». Появился новый слой, который мы и будем использовать в работе. Чтобы слой-оригинал не отвлекал, его можно удалить, перетащив аналогичным образом, только на кнопку «удалить слой» (находится в нижнем правом углу)

3. Работаем с активным слоем. Далее необходимо сделать фон прозрачным.

3.1. Для этого на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на белом фоне в окне с изображением и наживаем на клавиатуре кнопку delite (удалить). Фон стал прозрачным. Так как изображений много, то кликаем «волшебной палочкой» внутри всех изображений, удаляя внутренний белый фон.

3.2. Повторный клик мышью на рабочей области позволит выйти из режима «волшебная палочка». Рабочие контуры подготовлены к перемещению.

4. Для дальнейшей работы необходимо создать новый файл .

4.1. Для этого на верхней панели программы (в меню) заходим файл → новый →задаете имя файла (например, овощи наложенные)→, установки → А4 → цветовой режим → RGB → содержимое фона → прозрачный . Нажимаем ОК . Это рабочий фал, на котором мы будем создавать наложенные изображения.

4.2. Обратите внимание, на правой панели «Слои» выделен рабочий слой. Перемещаясь с одного окна изображения на другое изменяется и активный слой.

5. Приступаем к перемещению необходимых контуров на окно «Овощи наложенные».

5.1. Для этого переходим к окну с контурами овощей, выбираем на вертикальной панели инструмент (прямоугольная область) и выделяем нужный для перемещения контур (выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши).

5.2. Затем на вертикальной панели инструментов нажимаем (перемещение) и перетаскиваем на новый файл «Овощи наложенные». (Перемещение осуществляется путем перетаскивания курсора при нажатой левой клавише мыши). Не отключая действия «перемещение» вы можете переместить изображение в любое место окна.

5.3. Для того, чтобы увеличить размер перемещенного изображения нажимаем на клавиатуре одновременно кнопки (Ctrl + T) . Вокруг нашей картинки появится квадратик с точками на краях и по углам. Если мы нажмем и будем держать на одну из этих точек, то мы сможем растягивать наше изображение как захотим, двигая мышку с зажатой левой клавишей мыши. А если вы хотите увеличивать изображение пропорционально, сохраняя пропорцию между длинной и высотой картинки, то вам надо нажать левой кнопкой мыши на одной из точек, которая стоит на углах картинки, одновременно нажимая клавишу «Shift» на клавиатуре, и повести мышкой в сторону. Вот таким простым способом мы растягиваем наше изображение по холсту.

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

5.5. Если вам понадобится отразить изображение вертикально или горизонтально, необходимо выполнить его трансформацию. Для этого заходим в меню Редактирование → трансформирование → отразить по горизонтали /вертикали.

5.6. Остановить действия «увеличение» или «трансформирование» можно двойным щелчком мыши внутри изображения.

6. Проделаем то же самое с другими контурами, которые вы хотите переместить и получим наложенные изображения овощей. Перемещать изображения в окне возможно только при активном слое (на палитре слоев он должен быть синим), не забывайте об этом.

7. Наше задание готово, необходимо его сохранить. Для этого заходим в меню Файл → сохранить как →указываем адрес для сохранения. Имя файла уже указано (т.к. мы создавали новый файл «Овощи наложенные») и сохраняем в формате JPEG.

8. Окно файла «Контуры» следует закрыть, оно нам больше не понадобится. При его закрытии появится окно с вопросом о сохранении изображения. Нажимаем НЕТ , т.е. изменения там не сохраняем.

9. Осталось открытым окно «Овощи наложенные». На примере одного контура рассмотрим вариан создания игрового задания «Посчитай, сколько контуров».

9.1. Для образца оставим один слой ( например , контур огурца). Остальные слои удаляем в (нижний правый угол).

9.2. Далее копируем изображение. На вертикальной панели нажимаем инструмент перещение, нажимаете на клавиатуре кнопку Alt и перемещаете копируемый контур в нужное место. Во время перемещения Alt удерживать не нужно. Повторить данное действие необходимое количество раз.

9.3. Располагаем по своему желанию все копии изображения, производя при этом по необходимости действия «трансформирование», «отражение», «увеличение размера» (см. п. 6.3 – 6.6).

9.4. Затем на верхней панели программы заходим в меню "Слои" →выполнить сведение . Слой заблокирован, фон стал белым. Для сохранения изображения (см.п.8) указываем адрес файла, новое имя (например, Посчитай огурцы) и сохраняем в формате JPEG.

Материал, намеченый для изучения на этом уроке, изложен.

Это все, что я хотела Вам сообщить на этом уроке. На этом урок закончен. Спасибо за внимание!

Знакомьтесь, полезные инструменты!

Rectangular marquee (прямоугольная область) - [M] - позволяет произвести выделение прямоугольной области для последующего её редактирования. Выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши.

Magic wand (волшебная палочка) - [W] - щелкните мышью на изображении и Photoshop выделит непрерывную область, залитую одним цветом

Move (перемещение) - [V] - позволяет переместить выделенную область или активный слой путем перетаскивания курсора при нажатой левой клавише мыши. Если перед использованием инструмента нажать и удерживать клавишу ALT, то в момент нажатия на левую кнопку мыши будет создана копия текущего слоя или выделенной области, и перемещаться уже будет копия. Если необходимо совершить перемещение строго по вертикали или горизонтали, нажмите и удерживайте клавишу SHIFT в момент перетаскивания выделенной области.

Crop (кадрирование) - [C] - позволяет удалить ненужные поля изображения. Перетаскивая курсор при нажатой левой клавише мыши производится выделение области (кадра), которую необходимо оставить. Всё, что находится вне области выделения будет отрезано.

Eraser (ластик) - [E] - стирает изображение с текущего слоя. Если текущий слой - фон (Background), или слой с заблокированной прозрачностью, то ластик просто закрашивает изображение цветом фона.

Zoom (лупа) - [Z] - позволяет изменять масштаб изображения выводимого на экран. Текущее значение масштаба (в процентах) выводится в заголовке окна изображения.

Всего 2 года назад я была 17-летней школьницей и ничего не знала о программировании. Это не помешало мне начать учиться и через несколько месяцев выпустить свою первую игру в Steam. Сегодня у меня более 10 игр для ПК, интернета и мобильных устройств и свыше 1,9 млн игроков.

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

Всему, что я знаю, я научилась сама, а теперь научу вас.

Чтобы сделать игру, нужно пройти 6 этапов:

Концепция
Графика
Программирование
Звук
Подготовка к публикации
Публикация

Концепция

Совет

У вас есть классная идея. Но как оформить её на бумаге?

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

Когда приходит вдохновение, бросайте всё и пишите. В следующий раз, когда мысль уйдёт, не понадобится высасывать идеи из пальца.

Инструменты

Заметки на Mac OS.
Google Документы.
Трелло.

Google Диск.
GitHub. Требуется git и Unity .gitignore.
Unity Collab. Самый простой инструмент, но с ограничениями в бесплатной версии.

Книга Джесси Шелл «Искусство геймдизайна».
Сайт для разработчиков игр Gamasutra.

Графика

Совет

Если вы не умеете программировать, сначала прочтите раздел «Программирование». Вряд ли вы хотите потратить время на графику и выкинуть её потому, что под неё не написать код.

Даже если вы не умеете рисовать, игру можно сделать красивой, используя три визуальных принципа: цвет, форма и объём.

Thomas Was Alone — простая и прекрасная игра

Интерфейс

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

Неудачный и удачный шрифт

2D-анимация

Анимацию можно реализовать двумя способами:

Покадровая анимация. Когда вы отрисовываете каждый кадр. Для этого используйте таблицы спрайтов и Sprite Packer в Unity.
Скелетная анимация. Отрисовывается каждая подвижная конечность, затем анимируется её позиция и повороты. Это быстрее, легче и тратит меньше оперативной памяти. Для 2D-анимации на Unity используйте пивоты (точки привязки) или плагин Anima 2D.

Что ещё может пригодиться

Советы, которые применимы не только к игровой графике, но и к другим программам:

Без тайлов и с тайлом

9-slice объекты с немасштабируемыми границами и масштабируемым центром позволяют увеличивать изображения без заполнения памяти.

Пятно расширяется, но углы остаются прежними

Делайте разрешение каждого объекта таким, чтобы оно делилось на 4 или было степенью числа 2.
В Photoshop вы можете сохранить каждый слой в отдельный файл через Файл > Экспорт > Быстрый экспорт в [формат изображения].

Инструменты

Photoshop.
Gimp.
Paint Tool SAI — для графики в стиле аниме.

Blender — мощное ПО со сложным обучением.
Maya — для анимации.
Max — для отрисовки.

Программирование

Совет

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

int — тип данных, i — имя переменной, = 0 — значение переменной.

Используя оператор else, можно расширить условие и отобразить что делать, если условие не соответствует истине:

For-циклы похожи на while-циклы. Для while мы пишем так:

Равнозначный for-цикл будет таким:

Если в коде что-то идёт не так, на помощь приходят исключения. Они как бы говорят: «Так, погоди, здесь ты сделал что-то нелогичное. Перепроверь ещё раз».

О чём ещё надо знать:

Код — это вызов самому себе. И ничего не понимать поначалу — нормально.

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

Другие немаловажные основы программирования:

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

Сопрограммы. Позволяют начать выполнять действие, продолжать в течение нужного времени и затем прекратить. Я использую их для визуальных эффектов взрывов, резких движений.
Класс ScriptableObject. Он хранит данные с меньшими затратами, чем базовый класс MonoBehaviour.

Инструменты

Visual Studio Code (для MacOS) — не зависает, имеет встроенную справочную информацию и удобные «горячие» клавиши.
Visual Studio (для Windows).
MonoDevelop — устанавливается с Unity, иногда подвисает.

В Unity Asset Store, bitbucket и GitHub очень много бесплатных ассетов. В своих проектах я использую минимум по два. Они упрощают жизнь, но далеко не идеальны. Заметили ошибку — исправляйте и говорите разработчику о ней.

Немаловажный, даже главный источник решения проблем с кодом — Гугл!

Совет

Аудио способно создавать настроение и погружать в игру, но для него нужна память.

Для начала решите: вы хотите звук? Если да, будет ли в игре музыка, звуковые эффекты, озвучка или повествование.

В любом случае потребуется запись и сведение таким образом, чтобы звук подходил под настроение игры. Например, Bastion использует органические и инструментальные звуки, хорошо вписывающиеся в мир игры. Crypt of the Necrodancer включил в себя смесь электронных ритмов и восьмибитного рока, чтобы передать темп и яркость игры.

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

Инструменты

Приложения для работы с аудио:

Logic Pro (только для MacOS). Цена 200 $.
FL Studio. Цена 99–899 $. Есть бесплатная демоверсия.
Reaper. Цена 60–225 $.
Audacity. Бесплатная программа. Имеет мало возможностей, но полезен для чистки аудио.

Подготовка к публикации

Совет

Существует небольшая вероятность — на 99,99 процентов, что в игре есть ошибки. А это значит, что самое время заняться баг-тестом.

Как тестировать игру на баги?

Дайте другим поиграть в игру. Желательно вместе с вами, на случай, если они столкнутся с ошибкой и не смогут понять или объяснить её.
Проверьте игру на разных платформах. В редакторе может не быть проблем, но работает ли она там, где её будут запускать? Будьте особенно внимательны с Linux и Android.

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

Типичные ошибки

В чём дело: функция выполняется с несуществующей (null) переменной.
Быстрое решение: проверьте, является ли переменная null.

Примечание: Проверьте, какие кавычки вы используете.
" //правильные кавычки;
" //ненужные кавычки, они принесут вам немало ошибок.

Советы по оптимизации

Установите нужную частоту кадров. Для визуальной новеллы хватит 20 кадров в секунду, а вот для шутера нужны 60. Низкая частота кадров тратит меньше времени на отрисовку.
Анимация / система частиц / выборочная обработка. Объекты, невидимые для камеры игрока, не обрабатываются. Персонажи анимируются, частицы обновляются, 3D-модели обрабатываются только в поле зрения игрока.
Сжатие текстур и звуков. Для сжатия текстур используйте Crunch. Потоковая музыка и распаковка звуковых эффектов перегружают игру. Попробуйте снизить качество аудио. Сжатие может заметно снизить качество объектов.
Не позволяйте Raycast касаться лишних объектов. Raycast похожи на маленькие лучи, выстреливающие из ваших пальцев или мыши, когда вы касаетесь экрана или кликаете. Найдите объекты, которые не должны реагировать на действия игрока и удалите их из вычислений Raycast.
Используйте объектный пул. Частое создание и удаление большого количества объектов снижает производительность. Вместо этого, объедините их в список, очередь или другую структуру. Например, пули должны объединяться в один массив.
Оптимизируйте шейдеры. Задайте материал для каждого визуализатора. Игре не придётся создавать новые материалы в начале игры, что сэкономит ресурсы. Пусть визуализатор включает только то, что функционально необходимо.
Используйте AssetBundles (дословно «комплекты активов») вместо старой системы Resources в Unity. AssetBundles экспортирует ваши файлы из Unity и помещает в один файл, экономя оперативную память.

Инструменты (только для Unity)

Публикация

Совет

Самое время показать всему миру своё творение.

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

Вы не узнаете, станет ли игра хитом, пока не опубликуете её.

Если хотите, чтобы все узнали об игре, напишите анонсы для игровых медиа, участвуйте в фестивалях и конференциях.

Отправьте описание игры в прессу за неделю до выхода — дайте людям время написать о ней. Может случиться, что о ней не станут писать, но помните: журналисты любят красивые истории о разработчиках, уникальную или противоречивую идею и медиа-кит.

Найдите в сети контакты авторов, которые вам нравятся: почта, страница в LinkedIn, Твиттер.
Найдите почту издания в разделе «О нас» или внизу страницы.

Не пишите в игровые издания, которые не освещают ваш жанр или целевую игровую платформу.

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

Письмо видеоблогеру Markiplier, чей канал насчитывает более 21 миллиона подписчиков

Это прекрасный инструмент для продвижения: Agar.io обрела популярность на 4chan, Butterfly Soup подскочила в загрузках после внимания в Твиттере.

Как лучше: публиковаться через издателя или самому. Хотите пойти по пути Hotline Miami, выпущенной Devolver Digital, или перенять опыт Farmville и Doki Doki Literature Club?

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

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

Количество установок игры растёт

Получилось! Теперь расслабьтесь, возьмите что-нибудь вкусное и отдохните. Вы работали не покладая рук и заслужили это.

Главное, что вы сделали игру и многому научились. Сейчас этого достаточно, и всегда есть возможность попробовать ещё раз с новыми знаниями.

Инструменты

Сервис presskit() помогает разработчикам оформить описание игры для прессы.

Платформы для публикации:

Заключение

Нет простого пути создания игры. Есть только ваши решительность и усилия.

За каждым Half-Life, Minecraft и Uncharted лежат океаны крови, пота и слез.
Кен Левин, создатель Bioshock

Вы будете допускать ошибки, чувствовать себя в тупике и плакать. Это нормально — значит, вы растёте над собой.

Разработка видеоигр и всё, что с этим связано. Концепции, иллюстрации, 3D-моделирование, программирование и многое другое геймдев-направленности.

ОБЩИЕ ПРАВИЛА:

- Уважайте чужой труд и используйте конструктивную критику

- Не занимайтесь саморекламой, пишите качественные и интересные посты

- Не употребляйте мат без необходимости

СТОИТ ПУБЛИКОВАТЬ:

- Посты о Вашей игре с историей её разработки и описанием полученного опыта

- Обучающие материалы, туториалы

- Интервью с опытными разработчиками

- Анонсы бесплатных мероприятий для разработчиков и истории их посещения;
- Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе

НЕ СТОИТ ПУБЛИКОВАТЬ:

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

- Посты, содержащие только идею игры

- Посты, единственная цель которых - набор команды для разработки игры, для этих целей больше подойдёт Discord-сервер сообщества

- Посты, не относящиеся к тематике сообщества

Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.

ЗАПРЕЩЕНО:

- Публиковать бессодержательные посты с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции

- Выдавать чужой труд за свой

Подобные посты будут перемещены из сообщества в общую ленту, а их авторы по решению администрации могут быть внесены в игнор-лист сообщества.

О РАЗМЕЩЕНИИ ССЫЛОК:

Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:

- Пост должен быть содержательным и интересным для пользователей, нести пользу для сообщества

- Ссылка должна размещаться непосредственно в начале или конце поста и только один раз

Статьи о программах для создания игр, уроки и описания.

Различные программы, в том числе в помощь игроделам.

Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.

Уроки по моделированию, ландшафт, модели, текстурирование и пр.

Модификация компьютерных игр, создание дополнений, перевод, хакинг.

Статьи об играх, в том числе и сделанных на гейммейкерах.

Автор, не ну как можно было вообще написать статью о создании такого убожества?

1 0

Ничего не понять, если следовать по шагам, указанным автором.

Ужасный урок, автору отрубить руки.
Вот на такую кнопку у меня ушло 5 минут, притом, что я совершенно не умею рисовать.
1 1 3

не ну прост это тупо картинка.если не прав поправьте

6 3 11

А зачем рисовать меню в каком-то фотошопе? Меню рисуется сразу в программе, из отдельных частей.
Чтобы сделать такое меню, достаточно сделать отдельно кусок фона (он же повторяющийся) или весь фон, логотип (если, конечно, нужен), и две кнопки - просто кнопка и в нажатом положении. Дальше программно просто рисовать в нужном порядке на нужных местах - это проще.
А сам урок плохой. Ни о чём. Ты просто предлагаешь применить пару эффектов к готовым картинкам, при этом просто говоришь, куда кликать, не объясняя, что там и как (да, я думаю, ты сам не знаешь, что и как там работает, поэтому молчишь об этом).
И, если ты считаешь полученную картинку красивой - у тебя дурной вкус. Серые тонкие надписи на огромных кроваво-красных кляксах на фоне цвета фекалий, размазанных ровным слоем по неровной доске.
А название игры должно быть по центру. "Логотип" вообще не к месту.

Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):

Пять минут у тебя ушло на три полоски? Да любой первоклассник нарисует такую же картинку в MS Paint за 10 секунд. Не стоило хвастаться этим.

Спасибо, что разрешил мне написать туда что-то своё, а не "GameTool".

Может быть, всё-таки лучше Button1? Или хотя бы Knopka1, если в английском даже такого простого слова не знаешь.

Разработка компьютерных игр. С чего начать? Это просто! С нуля до разработчика игр: как начать создавать свою игру. Заказать создание игры.

Главная » Как программисту создать игровую графику (или как подделать ее в стиле игрового художника)

Как программисту создать игровую графику (или как подделать ее в стиле игрового художника)

Введение

Совет Первый: начните с определения палитры

Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!

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

Ресурсы:

Я не умею рисовать.

Подсказка Третья: простые формы и силуэты

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

Вы cможете увидеть различия между объектами и их внешней областью, и даже распознать некоторые из них. Я все еще уверен, что для объектов со схожей формой внешние контуры были различны.

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

Подсказка Четвертая: рисуйте больше, чем вам нужно

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

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

Подсказка Пятая: работайте в большем разрешении

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

Он пока еще неаккуратный и малодетализирован, но вскоре мы применим эффект даунсэмплинга, который скроит все это.

Подсказка Шестая: следите за краями

Шаг первый: оградите версию с высоким разрешением на прозрачном фоне

Шаг второй: понизьте разрешение до целевого

Шаг третий: сделайте четкие края

Получить правильные края можно следующим способом:

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

Шаг четвертый: подчистите пиксели

Теперь вам нужно повозиться с каждым пикселем в отдельности. Ваш контур будет возможно немного излишним, используйте карандаш (инструмент pencil tool) для того, чтобы очистить его и добавить детализации частям спрайта, которые получились немного размытыми после уменьшения размера. Здесь я немного подчистил лицо, хвост и антенны.

Готово: завершенный спрайт врага

Вот завершенный спрайт в обычном и 2x размерах. Он не идеален и, разумеется, не сделает из меня сразу художника, но он кажется вполе приемлемым для программиста.

Подсказка Седьмая: создавайте разнообразие

Подсказка Восьмая: избегайте анимации

Используйте тему, которой не нужно этого. Космическим кораблям не нужно много анимации. Для машин вы можете просто сделать движение колес. Если вы можете придумать способ, который не требует анимации, то это намного лучше и сэкономишь время для кодинга.
Начните с маленьких хитростей. Просто отразите верхнюю часть спрайта персонажа по-горизонтали и получите два кадра. Можете взглянуть на замечательные спрайты из старых игр, чтобы узнать, что они нарисованы всего в нескольких вариациях.
Используйте шаблоны. Не пользуйтесь рипам спрайтов, используйте позы персонажей из них. Для этого срайта я нашел шаблон Мега-Мена и нарисовал новый спрайт, но использовал такие же позы.
Ротоскопирование сейчас применяется не только для создания поющих орков в мультипликации или в кино. Многие цифровые камеры в наше время имеют режим съемки серий кадров или позволяют снимать короткий видеоролик и выбирать из него отдельные кадры. Снимите самого себя, выполняющего простые действия, отберите нужный кадр и начните трассировку. Внимание: это может стать бесполезной тратой времени, если вы будете неосторожны, поэтому не увлекайтесь этим занятием. Это просто совет.

Подсказка девятая: Скайбокс

Делаете 3D-игру?

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

Но где мне достать хорошее изображение скайбокса?

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

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

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

Подсказка одиннадцатая: приобретите планшет

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

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

В сегодняшнее время интерфейсов на основе сенсорных дисплеев, иметь планшет становится выгодно, чтобы понять как работают игры, основанные на этой технологии. Хотя такой подход ничем не отличается в сравнении технологии использования мыши.

Читайте также: