Как сделать гифку вашей игры и постить его соцсетях

Как сделать гифку вашей игры и постить его соцсетях

Один из способов бюджетного продвижения для инди игры – это публикация видео и GIF в различных соцсетях. В этой статье маркетолог из команды Midnight Hub рассказывает о своих наработках и наблюдениях, использованных во время продвижения игры Lake Ridden. Читайте, как сделать гиф вашей игры красивым и знаменитым!

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

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

Формат GIF существует еще со времен возникновения интернета. В зависимости от качества, содержания и особенностей платформы для публикации, ролик может иметь продолжительность от 1 до 30 секунд. Множество GIF на Reddit сейчас делают очень длинными, почти как видео на YouTube. В Facebook ролики тоже длинные. В Твиттере и Tumblr, наоборот, самая распространенная продолжительность 1-3 с. Но в некоторых файлах начало и конец настолько плавно соединены, что реальная длина ролика не всегда очевидна.

Короткие (3-4 сек) GIF лучше. Вы получите файл небольшого размера, а интерес только повысится! Ролик выше запущен в обратном направлении, чтобы красивее показать танец светлячков.

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

Каким ПО мы пользовались чтобы сделать GIF

Разные разработчики пользуются для записи публикуемых на Твиттер GIFок различными программами. Кто-то пользуется Fraps, чтобы сделать скриншоты кадров в игре, а кто-то предпочитает простые и быстрые программки наподобие GifCam или что-нибудь собственного приготовления. Скорее всего, выбор технических средств зависит от того, сколько времени есть у вас в распоряжении, какого качества необходимо получить изображения и каковы характеристики игры. Когда надо что-нибудь попроще и побыстрее, подойдет ScreenToGif. Но если вам нужны супер четкие фрагменты с идеальным цветом, придется потратиться на более сложные инструменты. Вышеупомянутый Fraps позволит максимально точно сохранить детали арта и палитру игры.

как сделать гиф в игре

Не забывайте об ограничениях на размеры файлов. Например, в Твиттере это 15 Мб. Когда нужно уменьшить все файла, при этом не уменьшая длину ролика, сохранить качество кадров поможет Photoshop.

Еще один совет: определите, какое количество времени вы собираетесь тратить на изготовление GIF. Если вы просто хотите отскриншотить, отредактировать и выбросить в сеть, попробуйте LiceCap. Он не предложит вам сотни вариантов последующей обработки. Если вы хотите настраивать тончайшие нюансы, используйте Photoshop + Fraps (ДА, вы можете редактировать видео в Photoshop!).

Качество GIF необходимо проверить и проработать, потому что многие платформы сжимают файл. После публикации это приведет к тому, что изменятся цвета или уменьшится количество пискселей. Twitter возьмет ваш GIF и тайно преобразует его в .mp4. Facebook не разрешает публиковать GIF-файлы вообще, если вы не линкуете их через GIF-сервис, например Giphy (подробнее об этом позже).

Технические моменты создания GIF

Ниже дается описание, как использовать связку Fraps и Photoshop для создания GIF-файла и как управлять его размером.

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

  1. Запускайте свою игру с максимальными настройками графики. Любые лаги, падение fps и тому подобны вещи особенно хорошо заметны при записи GIF.
  2. Fraps давно зарекомендовал себя в записи кадров из видеоигр. Не пожалейте денег на приобретение премиум-версии, тогда ваши тизеры будут на самом высоком уровне.
  3. Когда вы решили, какой из сырых кадров хотите перевести в броский GIF, открывайте его в Photoshop. Он очень прост и понятен в использовании для мелкого редактирования видео. Вам не нужен After Effects или другие продвинутые программы, если вы этого не хотите.
  4. В Photoshop можно отредактировать видео, обрезать кадр, корректировать цвета, а затем экспортирую в нужный формат. Перейдите в меню Файл > Экспорт > Сохранить для Интернета, и появится нужное диалоговое окно.
  5. На данном этапе необходимо обратить внимание на несколько моментов. Выше уже говорилось, что в Твиттер размер файла не должен превышать 15 Мб. Как раз сейчас вы имеете возможность управлять размером файла. Далее вы можете оставить или убрать галочку в пункте «Прозрачность». Иногда это позволяет уменьшить размер файла без потери качества. Только после этих манипуляций, если файл по-прежнему весит слишком много, стоит вернуться и обрезать его продолжительность в секундах. В завершение нажмите «Всегда» в «Параметры повтора» и сохраняйте файл. Готово!

Художественные моменты создания GIF

Переходим к самой интересной части. Хороший GIF – это не только набор отличного качества картинок. Что вы показываете (или не показываете) в превью, еще важнее.

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

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

Итак, ваш GIF должен быть заметен и узнаваем в размере миниатюр (сравните с результатом ниже).

Окончательный GIF показывает важную и жуткую игровую локацию.

  1. Решите, что вы хотите показать и почему. Что будет звездой вашего GIF?В каждом GIF лучше всего сфокусироваться на показе только чего-то одного: или классной анимации или боевого эффекта или атмосферы в игре.
  2. Запишите много (15-20) небольших фрагментов в игре, всего по несколько секунд. Они будут демонстрировать одно и то же под разными углами, с разными настройками камеры, в разном масштабе и т. д.
  3. Снова откройте свои лучшие клипы в Photoshop, обрежьте и сверните для отображения в реально маленьких окнах. Вы сможете увидеть, будет ли GIF хорошо отображаться, например, в смартфонах. Многие люди просмотрят его в своих каналах Twitter или Facebook, на разных устройствах. Они должны мгновенно определить, что смотрят на лицо, собаку или дом. Если люди путаются, то вы упустили свой шанс вызвать их любопытство и, в конечном счете, реакцию на вашу игру.
  4. Не бойтесь обрезать кадр, чтобы сосредоточиться на том, что важно в изображении. Опять же, это должно быть читаемо.
  5. Настраивайте яркость, цвета и насыщенность. В большинстве случаев лучше сделать изображение немного ярче, так как оно становится темнее при публикации в ленте.
  6. Для Twitter предпочтительнее делать GIF до 3-5 секунд и включать бесконечный повтор. Для Facebook файлы можно делать немного длиннее, например, 5-8 секунд. У людей очень мало внимания, и ваш GIF должен попадать прямо в цель.  При любых сомнениях делайте GIF короче.

А вот еще одна команда рассказывает о том, как они делают GIF для продвижения своей игры.

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

Мы с другом @heydahoon представляем собой небольшую игровую студию Contingent99. Работаем над скоростной игрой Wizard of Legend в жанре Dungeon Crawl. Когда мы начали это предприятие еще в 2014 году, мы знали, что самая первая игра будет самой сложной в разработке. У нас не было известности или маркетинговых навыков, которые есть у ветеранов.

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

Скриншот Wizard of Legend в сравнении с GIF

Это добавило нам работы, но GIF явно смотрелись выигрышнее. Они точно захватывали действие и привлекали внимание людей в ленте. Когда мы это поняли, для демонстрации игрового процесса Wizard of Legend мы стали использовать только анимированные GIF. Обратная связь и количество полученных ответов показали, что GIF – это правильный путь.

Год спустя мы много выучили о том, как делать gif классными, и теперь хотим поделиться некоторыми советами и трюками, которые собрали по пути.

Сосредоточьтесь на чем-то одном

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

Ранняя версия GIF из Wizard of Legend, в котором нет фокуса

Фокус на одном особенном заклинании – ледяная волна в Wizard of Legend

Увеличивайте и обрезайте

Отредактируйте сцену и устраните все «мертвое» пространство так, чтобы на изображении было только то, что важно. Вам станет проще создавать GIF, потому что появится возможность скрыть все возможные недоработки. Разрешение гифов в среднем меньше, чем у скриншотов, поэтому увеличение масштаба позволяет людям видеть, что происходит. Ваша игра может выглядеть великолепно в 1080p, но что толку, если приходится щуриться ради деталей, которые прекрасно уместились бы на анимации шириной 600 пикселей. Также обрезайте или полностью скрывайте пользовательский интерфейс, если только он не интегрирован прямиком в геймплей, или если вы вдруг не хотите показать именно его.

Оригинальный кадр из Wizard of Legend в сравнении с обрезанным и увеличенным gif

Делайте GIF коротким

Оптимальная продолжительность GIF около 3-4 секунд. Чуть дольше, и вы рискуете потерять интерес людей, да и время загрузки тоже увеличивается. Делать GIF надо коротким и интересным, чтобы большинство людей посмотрели его как минимум дважды. Короткое сообщение всегда получает больше внимания и понимания.

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

вырезать кадры из gif

Окончательный вариант после обрезки и доработки анимации

В кадре должно быть движение

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

Движение всегда захватывает внимание!

Подстраивать красивые сцены в порядке вещей

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

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

Пару советов напоследок

По возможности зацикливайте  GIF: делайте начало и конец одинаковыми, чтобы переход не был заметен.

Там, где только можно, убирайте текст. Его сложно читать и это отнимает время.

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

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

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

Пора делать гиф!

Не все вышесказанное может относиться к вам и вашей игре, но мы надеемся, что вы нашли некоторые из этих советов полезными. Мы, в свою очередь, применили многое из этого в кампании для Wizard of Legend на Kickstarter, там почти все изображения на странице были GIF.

Если вы все же выбрали видео

Сторонние сервисы, такие как Giphy, урезают качество файла. Для прямой публикации Facebook принимает видео в формате .avi и .mp4.

Вода в Lake Ridden – как пример четко определенного содержания для одного поста.

Можно разместить ссылку с Youtube, но для отслеживания статистики (и для удобства людей в социальной сети) лучше публиковать трейлер в формате .mp4 на своей личной странице в Facebook. Преобразование GIF в mp4 можно также сделать в Photoshop, а можно – любыми удобными вам программами, в том числе и онлайн.

Будьте изобретательны!

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

Иногда вам нужно искать новые, интересные способы показать то же самое немного иначе. В этом GIF камера немного выходит за пределы сцены (сравните со следующим изображением).

Здесь камера движется вдоль сцены, и это создает иное ощущение. Будьте изобретательны в использовании своих инструментов! Одинаковые методы съемки могут заставить ваших подписчиков на каналах скучать так же, как если бы вы публиковали похожие кадры.

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

Понравилась статья? Поделиться с друзьями:
Автор natalya
Переводит для Вас самые интересные статьи про разработку игр. По образованию физик-программист. Техническими переводами начала подрабатывать еще на старших курсах и постепенно это переросло в основное занятие. Интересуется гуманитарными технологиями, пробует себя в журналистике.
  1. Спасибо за статью! Как раз недавно думал о том, как нормально делать гифки :)
    *Пошёл откатывать фиксы багов, чтобы показать забавные ошибки* :D

  2. CCG HerWam :

    А почему мой коммент удаляют?

  3. Ох, хороших исполнителей всегда очень сложно искать. Про это прям статью можно написать! Особенно про художников :) (решил написать небольшую заметку на форум)

    Надеюсь у вас все получится) Присылайте гифки сюда или на форум: coremission.net/forums/

  4. Владимир Черный :

    Статья просто ни о чем. Как создать гиф?? Вы серьезно? Когда первый раз видишь статью, то думаешь, что увидишь какие-то интересные моменты или правила создпния/оптимизации. В итоге ломаный перевод + статья на 5000 символов, где просто 0 информации.
    И да, блог скатился.

    • Привет, Владимир! Спасибо за комментарий!
      Ломаный перевод – есть ошибки? неточности? Пишите – я поправлю)
      Статья о том “как сделать интересную анимированную картику”, об этом же и советы.
      А какие Вам статьи нравились до того как блог скатился?)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *