GIMP: создание простой анимации
Мы начинаем курс по игровому дизайну для ребят 9-12 лет. Хотя, скорее, тут подразумевается не проектирование компьютерной игры (игровой дизайн) в целом, а только часть игрового дизайна - создание игровых ресурсов (game asset) в виде простых рисунков персонажей игр, простых рисунков игрового окружения, фонов, меню игры и тому подобного.
У нас преподаватель, приступая к очередному курсу, должен пройти тест, который покажет достаточность его знаний для обучения детей. На самом деле, в таких тестах довольно примитивные задания и вопросы, но поскольку мы начинаем новый курс у каждой группы каждые полтора месяца, то преподавателю оказывается не очень просто переключаться между разными дисциплинами. Приходится постоянно учиться, причем в разных направлениях.
В рамках подготовки к тесту я сделал несколько заготовок для практических заданий в тесте. Тут я хочу описать одну из таких заготовок - создание простой анимации.
Графический редактор «GIMP»
Для создания игровых ресурсов (картинок) предполагается использовать известный растровый графический редактор «GIMP» (вики). Этот редактор - бесплатный, исходный код программы открыт, его можно свободно изучать и изменять. Программа создана в 1995 году и написана на языке программирования Си. Кроме этого, редактор GIMP доступен в разных операционных системах (кроссплатформенный), в частности, в «Windows», «Linux», «macOS» и так далее. Название «GIMP» - это аббревиатура, которая расшифровывается как «GNU Image Manipulation Program» (аббревиатура «GNU» в названии означает, что редактор «GIMP» включен в проект GNU). Официальный сайт программы, с которого ее можно загрузить к себе на компьютер:
https://www.gimp.org
У меня установлена самая свежая на текущий момент версия редактора - 2.10.36 (вышла 7 ноября). Я работаю в операционной системе «Windows 10».
Ранее я уже много работал в редакторе «GIMP», но использовал его только для примитивных однотипных задач, во время подготовки иллюстраций для постов в блоге. Так что мне не нужно привыкать к интерфейсу этого редактора, но выполнение многих нестандартных задач (даже простых) будет для меня в новинку.
Создание простой анимации
Я ориентировался на пост в блоге Антона Лапшина от 01.09.2012 года:
https://www.gimpart.org/animatsiya/prostaya-animatsiya-v-gimp
Там некоторые детали опущены, поэтому мне пришлось в некоторых местах догадываться, что именно нужно сделать.
1. Откройте редактор и создайте новый проект с помощью пункта главного меню «Файл - Создать проект...» (Ctrl+N). При создании проекта можно указать много разных настроек, но сейчас достаточно указать только размеры холста, на котором будем рисовать. Пусть это будут размеры 100×100 пикселей: небольшая картинка, которую я смогу безболезненно вставить в пост.
В растровых графических редакторах ключевое значение имеет работа со слоями. После создания проекта нужно проверить список слоев. У меня автоматически создался слой с названием «Фон», залитый белым цветом. В нашем проекте этот слой можно удалить, либо использовать в качестве первого кадра анимации. Для упрощения описания действий я его удалил (это можно сделать из списка слоев).
2. Создадим новый слой, с белой заливкой. Это можно сделать с помощью пункта главного меню «Слой - Создать слой...» (Shift+Ctrl+N). В свойствах нового слоя свойство «Заполнение» должно быть выставлено в значение «Цвет фона» (предварительно нужно выбрать в качестве цвета фона белый цвет, это можно сделать на панели инструментов).
Я буду делать простую анимацию, в которой просто будут меняться цифры с 1 до 3, затем снова с 1 до 3 и так далее. Этого достаточно для иллюстрации принципа. В дальнейшем, конечно, вместо цифр можно нарисовать и вставить, к примеру, постепенно меняющие своё положение фигурки, как это делается в мультипликации, и тому подобное.
3. Для создания цифр я использую инструмент «Текст», который можно активировать с помощью пункта главного меню «Инструменты - Текст» (или клавишей с латинской буквой «T»). Шрифт я выбрал «Sans-serif», размер текста - 75, цвет - черный. Для вставки текстового слоя на холст щелкните левой кнопкой мыши по холсту и наберите цифру 1 с клавиатуры.
4. Не имеет значения, куда именно цифра вставилась на холст, так как мы ее сейчас выровняем на холсте по центру (по вертикали и по горизонтали). Для выравнивания я использую инструмент «Выравнивание», который можно активировать с помощью пункта главного меню «Инструменты - Преобразование - Выравнивание» (или клавишей с латинской буквой «Q»). После активации инструмента «Выравнивание» следует левой кнопкой мыши выбрать выравниваемый объект (цифру 1), иначе выравнивание работать не будет. В параметрах инструмента «Выравнивание» нажмите на кнопки выравнивания по вертикали и горизонтали (это две отдельные кнопки). После этого цифра 1 окажется в центре холста.
5. В списке слоев (сейчас там должно быть два слоя) объедините текстовый слой с предыдущим. Для этого можно открыть контекстное меню слоя, щелкнув на него правой кнопкой мыши в списке слоев. Из контекстного меню следует выбрать пункт «Объединить с предыдущим». После этого у вас должен остаться один слой с цифрой 1.
6. Повторяем шаги 2-5 только с цифрой 2, затем повторяем шаги 2-5 с цифрой 3. Можно и дальше продолжать, но я решил остановиться на анимации из трех кадров, так как в этом посте я рассказываю о создании простой анимации. Изложенное тут нужно лишь для того, чтобы понять принцип. Теперь у вас должно быть три слоя: слой с цифрой 1, слой с цифрой 2 и слой с цифрой 3. Эти слои должны быть залиты белым цветом за исключением площади самих цифр. Вот как это выглядит у меня:
В принципе, всё уже готово. Достаточно этот проект экспортировать в файл в формате GIF с нужными настройками, и анимация будет проигрываться, если открыть полученный файл в формате GIF в браузере или какой-либо другой программе, которая умеет отображать картинки.
Однако, мы не указали время для отображения каждого кадра анимации. При экспорте в файл формата GIF из редактора GIMP можно настроить это время (задержку), но только одинаковое для всех кадров. По умолчанию в моем экземпляре редактора GIMP это время равно 100 миллисекундам (мс). Если сохранить нашу анимацию в файл в формате GIF с такой настройкой, кадры будут меняться слишком быстро, такая анимация в данном случае мне не подходит. Я хочу установить эту задержку в 1 секунду (1000 миллисекунд).
7. Экспортируйте проект в файл формата GIF. Это можно сделать с помощью пункта главного меню «Файл - Экспортировать как...». В открывшемся окне следует написать имя файла (с указанием расширения «.gif»); выбрать папку, в которую будет сохранен файл и нажать кнопку «Экспортировать» в правом нижнем углу окна. После этого откроется окно настроек формата GIF, вот какие я выбрал настройки в этом окне:
После настройки нажмите в окне настроек формата GIF кнопку «Экспорт». Файл формата GIF будет сохранен в указанное ранее местоположение.
Вот мой результат (файл формата GIF с анимацией из трех кадров с задержкой в 1000 мс; размер файла: 2,3 Кб):
Что делать, если нужно указать разные задержки для кадров
Для этого в названиях слоев-кадров в конце следует в скобках добавить число миллисекунд задержки для данного слоя-кадра и единицу измерения - «ms». Вот как я настроил названия слоёв для иллюстрации разных задержек для слоев-кадров:
Вот мой результат (первый кадр отображается с задержкой в 1 секунду, второй и третий - с задержкой в 100 мс, поэтому они проскакивают очень быстро, а цифра 1 задерживается на картинке):
Еще один полезный инструмент - предпросмотр
Если действовать по инструкции, описанной выше, то вы не сможете увидеть готовую анимацию, пока не экспортируете проект в файл формата GIF и не просмотрите его в программе, которая может отображать картинки (например, в браузере). Это неудобно при отладке задержек слоев-кадров анимации. В редакторе GIMP имеется инструмент, с помощью которого вы можете просмотреть полученную анимацию до экспорта проекта в файл формата GIF. Открыть этот инструмент можно с помощью пункта главного меню «Фильтры - Анимация - Воспроизведение...». Вот как выглядит окно этого инструмента:
Этот инструмент ничего не добавляет в проект и ничего не изменяет в проекте, просто позволяет запустить анимацию на воспроизведение.
Продолжение следует...
У нас преподаватель, приступая к очередному курсу, должен пройти тест, который покажет достаточность его знаний для обучения детей. На самом деле, в таких тестах довольно примитивные задания и вопросы, но поскольку мы начинаем новый курс у каждой группы каждые полтора месяца, то преподавателю оказывается не очень просто переключаться между разными дисциплинами. Приходится постоянно учиться, причем в разных направлениях.
В рамках подготовки к тесту я сделал несколько заготовок для практических заданий в тесте. Тут я хочу описать одну из таких заготовок - создание простой анимации.
Графический редактор «GIMP»
Для создания игровых ресурсов (картинок) предполагается использовать известный растровый графический редактор «GIMP» (вики). Этот редактор - бесплатный, исходный код программы открыт, его можно свободно изучать и изменять. Программа создана в 1995 году и написана на языке программирования Си. Кроме этого, редактор GIMP доступен в разных операционных системах (кроссплатформенный), в частности, в «Windows», «Linux», «macOS» и так далее. Название «GIMP» - это аббревиатура, которая расшифровывается как «GNU Image Manipulation Program» (аббревиатура «GNU» в названии означает, что редактор «GIMP» включен в проект GNU). Официальный сайт программы, с которого ее можно загрузить к себе на компьютер:
https://www.gimp.org
У меня установлена самая свежая на текущий момент версия редактора - 2.10.36 (вышла 7 ноября). Я работаю в операционной системе «Windows 10».
Ранее я уже много работал в редакторе «GIMP», но использовал его только для примитивных однотипных задач, во время подготовки иллюстраций для постов в блоге. Так что мне не нужно привыкать к интерфейсу этого редактора, но выполнение многих нестандартных задач (даже простых) будет для меня в новинку.
Создание простой анимации
Я ориентировался на пост в блоге Антона Лапшина от 01.09.2012 года:
https://www.gimpart.org/animatsiya/prostaya-animatsiya-v-gimp
Там некоторые детали опущены, поэтому мне пришлось в некоторых местах догадываться, что именно нужно сделать.
1. Откройте редактор и создайте новый проект с помощью пункта главного меню «Файл - Создать проект...» (Ctrl+N). При создании проекта можно указать много разных настроек, но сейчас достаточно указать только размеры холста, на котором будем рисовать. Пусть это будут размеры 100×100 пикселей: небольшая картинка, которую я смогу безболезненно вставить в пост.
В растровых графических редакторах ключевое значение имеет работа со слоями. После создания проекта нужно проверить список слоев. У меня автоматически создался слой с названием «Фон», залитый белым цветом. В нашем проекте этот слой можно удалить, либо использовать в качестве первого кадра анимации. Для упрощения описания действий я его удалил (это можно сделать из списка слоев).
2. Создадим новый слой, с белой заливкой. Это можно сделать с помощью пункта главного меню «Слой - Создать слой...» (Shift+Ctrl+N). В свойствах нового слоя свойство «Заполнение» должно быть выставлено в значение «Цвет фона» (предварительно нужно выбрать в качестве цвета фона белый цвет, это можно сделать на панели инструментов).
Я буду делать простую анимацию, в которой просто будут меняться цифры с 1 до 3, затем снова с 1 до 3 и так далее. Этого достаточно для иллюстрации принципа. В дальнейшем, конечно, вместо цифр можно нарисовать и вставить, к примеру, постепенно меняющие своё положение фигурки, как это делается в мультипликации, и тому подобное.
3. Для создания цифр я использую инструмент «Текст», который можно активировать с помощью пункта главного меню «Инструменты - Текст» (или клавишей с латинской буквой «T»). Шрифт я выбрал «Sans-serif», размер текста - 75, цвет - черный. Для вставки текстового слоя на холст щелкните левой кнопкой мыши по холсту и наберите цифру 1 с клавиатуры.
4. Не имеет значения, куда именно цифра вставилась на холст, так как мы ее сейчас выровняем на холсте по центру (по вертикали и по горизонтали). Для выравнивания я использую инструмент «Выравнивание», который можно активировать с помощью пункта главного меню «Инструменты - Преобразование - Выравнивание» (или клавишей с латинской буквой «Q»). После активации инструмента «Выравнивание» следует левой кнопкой мыши выбрать выравниваемый объект (цифру 1), иначе выравнивание работать не будет. В параметрах инструмента «Выравнивание» нажмите на кнопки выравнивания по вертикали и горизонтали (это две отдельные кнопки). После этого цифра 1 окажется в центре холста.
5. В списке слоев (сейчас там должно быть два слоя) объедините текстовый слой с предыдущим. Для этого можно открыть контекстное меню слоя, щелкнув на него правой кнопкой мыши в списке слоев. Из контекстного меню следует выбрать пункт «Объединить с предыдущим». После этого у вас должен остаться один слой с цифрой 1.
6. Повторяем шаги 2-5 только с цифрой 2, затем повторяем шаги 2-5 с цифрой 3. Можно и дальше продолжать, но я решил остановиться на анимации из трех кадров, так как в этом посте я рассказываю о создании простой анимации. Изложенное тут нужно лишь для того, чтобы понять принцип. Теперь у вас должно быть три слоя: слой с цифрой 1, слой с цифрой 2 и слой с цифрой 3. Эти слои должны быть залиты белым цветом за исключением площади самих цифр. Вот как это выглядит у меня:
В принципе, всё уже готово. Достаточно этот проект экспортировать в файл в формате GIF с нужными настройками, и анимация будет проигрываться, если открыть полученный файл в формате GIF в браузере или какой-либо другой программе, которая умеет отображать картинки.
Однако, мы не указали время для отображения каждого кадра анимации. При экспорте в файл формата GIF из редактора GIMP можно настроить это время (задержку), но только одинаковое для всех кадров. По умолчанию в моем экземпляре редактора GIMP это время равно 100 миллисекундам (мс). Если сохранить нашу анимацию в файл в формате GIF с такой настройкой, кадры будут меняться слишком быстро, такая анимация в данном случае мне не подходит. Я хочу установить эту задержку в 1 секунду (1000 миллисекунд).
7. Экспортируйте проект в файл формата GIF. Это можно сделать с помощью пункта главного меню «Файл - Экспортировать как...». В открывшемся окне следует написать имя файла (с указанием расширения «.gif»); выбрать папку, в которую будет сохранен файл и нажать кнопку «Экспортировать» в правом нижнем углу окна. После этого откроется окно настроек формата GIF, вот какие я выбрал настройки в этом окне:
После настройки нажмите в окне настроек формата GIF кнопку «Экспорт». Файл формата GIF будет сохранен в указанное ранее местоположение.
Вот мой результат (файл формата GIF с анимацией из трех кадров с задержкой в 1000 мс; размер файла: 2,3 Кб):
Что делать, если нужно указать разные задержки для кадров
Для этого в названиях слоев-кадров в конце следует в скобках добавить число миллисекунд задержки для данного слоя-кадра и единицу измерения - «ms». Вот как я настроил названия слоёв для иллюстрации разных задержек для слоев-кадров:
Вот мой результат (первый кадр отображается с задержкой в 1 секунду, второй и третий - с задержкой в 100 мс, поэтому они проскакивают очень быстро, а цифра 1 задерживается на картинке):
Еще один полезный инструмент - предпросмотр
Если действовать по инструкции, описанной выше, то вы не сможете увидеть готовую анимацию, пока не экспортируете проект в файл формата GIF и не просмотрите его в программе, которая может отображать картинки (например, в браузере). Это неудобно при отладке задержек слоев-кадров анимации. В редакторе GIMP имеется инструмент, с помощью которого вы можете просмотреть полученную анимацию до экспорта проекта в файл формата GIF. Открыть этот инструмент можно с помощью пункта главного меню «Фильтры - Анимация - Воспроизведение...». Вот как выглядит окно этого инструмента:
Этот инструмент ничего не добавляет в проект и ничего не изменяет в проекте, просто позволяет запустить анимацию на воспроизведение.
Продолжение следует...