Створення документальних зображень і відео

У всій документації часто потрібні зображення, щоб зробити пояснення функції чи концепції якомога зрозумілішим для читача. Ця сторінка пояснює процес від початку до кінця.

Зображення

Захоплення зображення

Щоб сфотографувати щось у Godot, можна використати інструмент захоплення екрана.

У Windows 10 і 11 це буде програма Snip & Sketch. Натискання Windows + Shift + S дозволяє зробити скріншот частини екрана та зберегти його в буфер обміну. Після натискання цих клавіш клацніть і перетягніть область, яку ви хочете сфотографувати.

У macOS натискання Shift + Command + 3 робить те саме. Щоб сфотографувати весь екран, натисніть Shift + Command + 4. Усі зроблені скріншоти будуть збережені на робочому столі.

Кожне робоче середовище Linux має власний інструмент для створення скріншотів. Наприклад, у KDE Plasma для створення скріншотів використовується програма Spectacle. Якщо ваш дистрибутив не містить його за замовчуванням, спробуйте пошукати його сховище пакетів або Flathub, якщо це підтримується.

В ідеалі всі знімки екрана мають бути зроблені на екрані 1080p. Усе, що має вищу роздільну здатність, додає деталі, що не робить документацію кращою та різко збільшує розмір файлу. Якщо ви робите знімки екрана на екрані з вищою роздільною здатністю, знімок екрана має бути зменшеним. Пізніше на цій сторінці є інструкції, як це зробити.

Перетворення формату

Поточний формат зображень у документації Godot — WebP (.webp). Хоча деякі програми Linux підтримують збереження знімків екрана в цьому форматі, macOS і програма Snip & Sketch у Windows не підтримують. Для зображень, які не потребують редагування, наприклад точного обрізання чи додавання контурів, можна використовувати Squoosh. Squoosh — це конвертер, розроблений Google, із відкритим вихідним кодом і не надає Google жодних прав на зображення при його використанні. Вибираючи стиснення, якщо ви можете отримати зображення розміром менше 300 КБ, використовуйте стиснення без втрат. Якщо він перевищує 300 КБ, використовуйте достатньо стиснення з втратами, щоб він був меншим. Якщо це призводить до помітних артефактів стиснення, використання меншого стиснення є нормальним, навіть якщо розмір файлу більший.

Якщо у вас уже встановлено редактор зображень, наприклад GIMP, Krita або Photoshop, він може мати можливість відкрити зображення та зберегти його як файл WebP.

Примітка

Оскільки WebP підтримує анімацію, а документація може відображати відео, GIF-файлів слід уникати. Їх стиснення є неефективним, і вони підтримують лише 256-кольорову палітру з 1-бітною прозорістю.

Обрізка

Для скріншота 2D або 3D сцени в редакторі буде достатньо описаних вище кроків. Але для більшості зображень інтерфейсу користувача слід виконати певну додаткову роботу, зокрема обрізати, щоб зробити зображення чистим. Нижче наведено приклад хорошого обрізання.

Для обрізання рекомендується програма Krita. Хоча деякі програми для створення скріншотів мають вбудовану функцію кадрування, не завжди легко отримати щось точне. І хоча Krita розроблено як програма для малювання, інструмент обрізання за замовчуванням забезпечує точність пікселів. Звичайно, не соромтеся використовувати іншу програму, з якою ви знайомі.

Якщо ви ніколи раніше не користувалися Krita, завантажте її з офіційного веб-сайту Krita, у Linux ви також можете завантажити її зі сховища своїх дистрибутивів, flathub теж варіант. Після встановлення на вашому комп’ютері відкрийте Krita, а потім відкрийте зображення, яке потрібно обрізати. Ця кнопка на лівій панелі є інструментом кадрування.

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

Клацніть і перетягніть білі прямокутники, щоб налаштувати те, що буде обрізано. Якщо ви наблизите зображення, ви побачите окремі пікселі на зображенні, що корисно для точності.

Якщо ви припустилися помилки та вибрали надмірний урожай, не хвилюйтеся, у Krita обрізання є неруйнівним і його можна налаштувати. Клацніть зображення з вибраним інструментом обрізання, і елементи керування повернуться.

Зменшення зображення

Як пояснювалося раніше на цій сторінці, усі зображення, зроблені на екрані з роздільною здатністю, вищою за 1080p, мають бути зменшені. Щоб зробити це у Krita, клацніть Зображення на верхній панелі та виберіть у спадному меню Змінити зображення до нового розміру. Це меню також можна відкрити, натиснувши Ctrl + Alt + I. У цьому меню ви хочете налаштувати розміри пікселів. Для всього, що зроблено на монітор 4K, змініть значення ширини та висоти на половину поточного значення, для всього, що зроблено на монітор 1440p, помножте ширину та висоту на 0,75. Переконайтеся, що прапорець Обмежити пропорції внизу меню позначено, щоб вам потрібно було змінити лише 1 значення.

Збереження як WebP у Krita

Щоб зберегти зображення як webp, якщо воно ще не створено, перейдіть до Файл > Зберегти як. Виберіть webp зі спадного меню Зберегти як тип:, а потім виберіть, де ви хочете зберегти його. Після натискання Зберегти з’явиться спливаюче меню з параметрами webp. Переконайтеся, що Lossless позначено, а Quality встановлено на 100%. Це означає, що зображення не втратить деталізації та буде якомога меншим.

Якщо розмір зображення перевищує 300 КБ, спробуйте стиснути його без втрат за допомогою Squoosh. Якщо він усе ще перевищує 300 КБ, перейдіть до стиснення з втратами та повільно збільшуйте стиснення, доки він не стане менше 300 КБ. Якщо це призводить до помітних артефактів стиснення, використання меншого стиснення є нормальним, навіть якщо розмір файлу більший.

Контури, стрілки та текст

Іноді зображенню потрібно щось додаткове, щоб належним чином спрямувати увагу читачів або зробити щось зрозумілим. Для цього можна використовувати контури та стрілки. Для цих типів редагування Inkscape є рекомендованою програмою з відкритим кодом, її можна завантажити з офіційного веб-сайту Inkscape. Подібно до Krita, якщо ви використовуєте Linux, ви також можете перевірити репозиторій своїх дистрибутивів або отримати його з Flathub.

Тут немає повного посібника зі створення контурів, ми рекомендуємо шукати різні навчальні посібники, як використовувати його в Інтернеті. Однак існує два стандарти для контурів і стрілок зображень документа. По-перше, колір має бути жовтим, зокрема цей шістнадцятковий колір: fffb44 (fffb44ff, якщо є значення прозорості, як у Inkscape). Цей колір було обрано спеціально, щоб переконатися, що люди з дальтоніком не мають проблем із читанням документації; інші кольори можна використовувати на додаток до цього жовтого, якщо потрібно кілька контурів на зображенні; слід уникати червоного. Другий стандарт полягає в тому, що всі контури та лінії зі стрілками мають бути шириною 2 пікселі.

Нарешті, для деяких зображень може знадобитися текст, щоб розрізнити кілька частин зображення. Немає строгих вимог, окрім використання легкого для читання нехимерного шрифту. Що стосується кольору, слід також використовувати жовтий колір, який був раніше, але за необхідності можна використовувати чорний або інші кольори. Наприклад, якщо жовтий зливається із зображенням або якщо є кілька контурів у різних кольорах.

Додавання зображення на сторінку документації

Після завершення роботи над зображенням його можна додати до документації. Усі зображення зберігаються в папках із назвою img поруч зі сторінкою, на якій вони використовуються.

Щоб додати своє зображення, додайте його до папки img, яка знаходиться в тій же папці, що й файл .rst для сторінки (створіть його, якщо він не існує). На сторінці .rst зображення мають бути включені з таким фрагментом коду:

.. image:: img/documentation_image.webp

Де documentation_image.webp буде змінено на назву створеного вами зображення. Назвіть зображення так, щоб було зрозуміло їхнє значення, можливо, додавши префікс, який чітко пояснює їх зв’язок із сторінкою документації.

Відео

Зйомка відео

Щоб записати щось у Godot, можна використовувати інструмент захоплення екрана. Операційні системи, як правило, не мають достатньо гнучких інструментів для цього, тому вам потрібно буде встановити утиліту стороннього виробника.

OBS Studio є найпопулярнішим варіантом, але SimpleScreenRecorder можна використовувати як альтернативу в Linux. ShareX можна використовувати як альтернативу в Windows. Усі ці інструменти можна налаштувати для запису всього екрана, окремого вікна чи попередньо визначеного прямокутника.

Рекомендована частота кадрів для відеозаписів становить 60 кадрів/с, хоча ви можете використовувати 30 кадрів/с для довших відео, щоб зменшити їх розмір. Для повноекранного відео використовуйте роздільну здатність 1280×720.

Примітка

Режим Godot Movie Maker може бути використаний для запису виходу запущеного проекту, включаючи його звук. Це не потребує встановлення будь-якого програмного забезпечення сторонніх розробників і дозволяє уникнути будь-яких падінь кадрів (навіть під час запису на повільному пристрої), але це менш гнучко.

Стиснення відзнятого відео

Рекомендовано записати відео у найвищій якості (без пропуску кадрів через надмірне використання ЦП/ГП), а потім повторно закодувати його пізніше, щоб зменшити розмір файлу. Це призводить до більш ефективного стиснення, ніж пряме націлювання на невеликий розмір файлу, оскільки методи стиснення в реальному часі менш ефективні, ніж повільні методи стиснення.

Щоб перекодувати відео для меншого розміру файлу, використовуйте HandBrake або FFmpeg <https://ffmpeg.org/> командний рядок нижче:

ffmpeg -i input.mp4 -crf 23 output.webm

Число після -crf регулює якість відео, при цьому більші числа призводять до нижчої якості (і менших розмірів файлів). CRF 23 є хорошою відправною точкою, але вам може знадобитися використовувати вище значення для довших відео, щоб забезпечити прийнятний розмір файлу. Спробуйте прагнути до розміру файлу менше 2 МБ, якщо це можливо.

Якщо відео було записане з вищою роздільною здатністю або частотою кадрів, ви можете налаштувати вихідну роздільну здатність і частоту кадрів таким чином:

ffmpeg -i input.mp4 -crf 23 -vf scale=1280:-2 -r 30 output.webm

Це призводить до роздільної здатності відео приблизно 1280 × 720 при 30 FPS. Точна роздільна здатність відео залежить від співвідношення сторін джерела.

Порада

Якщо відео було записане з аудіодоріжкою, але ця аудіодоріжка не потрібна, подумайте про видалення її, додавши параметр -an до командного рядка FFmpeg (перед назвою вихідного файлу). Це зменшить розмір файлу, а також гарантує, що елементи керування звуком не відображатимуться у відео під час відтворення у браузері.

Додавання відео на сторінку документації

Коли ви закінчите працювати над своїм відео, його можна додати до документації. Усі відео зберігаються в папках із назвою відео поруч зі сторінкою, на якій вони використовуються.

Щоб додати своє відео, додайте його до папки video, яка знаходиться в тій же папці, що й файл .rst для сторінки (створіть його, якщо він не існує). На сторінці .rst відео мають бути включені з таким фрагментом коду:

.. video:: video/csg_tools.webm
   :alt: Put a text description of the video here
   :autoplay:
   :loop:
   :muted:
   :align: default

Де documentation_video.webp буде змінено на назву створеного вами відео. Назвіть свої відео так, щоб було зрозуміло їхнє значення, можливо, додавши префікс, який чітко пояснює їх зв’язок із сторінкою документації.

:autoplay:, :loop: and :muted: flags should always be specified unless the video needs to play audio. In this case, do not specify any of these flags. The :align: default завжди слід вказувати прапор.