Інструменти та інтеграціїПосібник
Додайте піксель-арт ефект у свою гру за допомогою навички pixelfx
Встановіть навичку pixelfx у Claude Code, попросіть frost nova і подивіться, скільки коштує така сесія на дешевій моделі з живою таблицею витрат.
На цій сторінці
Ви хочете додати frost nova у свою браузерну гру, і вам не хочеться малювати сорок кадрів вручну. Навичка pixelfx дозволяє Claude Code зробити це: встановіть її двома командами, опишіть ефект одним реченням, і агент напише код. Скільки коштує така сесія на дешевій моделі, залежить від кількості кроків, тому таблиця нижче рахує її за живими цінами для зазначеного припущення.
Що таке pixelfx#
pixelfx — це бібліотека з 244 піксель-арт ефектів. Згідно з її README (github.com/patch-gg/pixelfx, прочитано 4 листопада 2026 року), кожен ефект — це невеликий фрагмент коду на src/, а категорії охоплюють вогонь, вибухи, воду й лід, блискавку, ближній бій, святе, тінь, статуси, погоду, UI та істот. Шістдесят один ефект використовує персонажа, і є 12 повних рухів, які поєднують кілька ефектів разом.
Два способи використання, залежно від вашого рушія:
- Браузерна гра: використовуйте код JavaScript напряму. Без залежностей.
- Godot або інший рушій: експортуйте потрібні ефекти як PNG-спрайтшити з JSON у стилі Aseprite.
У репозиторії також є окрема навичка Claude Code, яка створює нові ефекти. Саме про цю навичку цей посібник. Якщо ви ніколи не відкривали файл навички, що таке навичка агента і як її перевірити займе п'ять хвилин і варте прочитання перед тим, як щось встановлювати з репозиторію.
Встановіть навичку#
Вам потрібен Claude Code, уже налаштований на CheapTokens. Якщо ні, зробіть це спершу: як підключити Claude Code до CheapTokens містить адресу та змінні. Для ігрового коду з довгими файлами добре підходить DeepSeek-V4-Flash (deepseek-): до 32 768 токенів на відповідь, контекстне вікно 380K і одна ціна в будь-яку годину. Подробиці на сторінці моделей DeepSeek.
README пропонує два способи встановлення. Шлях через плагін — це дві команди всередині Claude Code:
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxРучний шлях — скопіювати теку skills/pixelfx з репозиторію в ~/.
Розставте по порядку
Розставте налаштування в правильному порядку
Перетягніть елементи або скористайтеся стрілками
- Підключіть Claude Code до вашого ключа CheapTokens
- Додайте маркетплейс pixelfx через /plugin marketplace add
- Встановіть навичку через /plugin install
- Попросіть ефект простою мовою
Попросіть один ефект#
Навичка керується звичайними запитами: додати, експортувати, змінити або створити ефект. Приклади з самого README — найкраща відправна точка. Відкрийте теку вашої гри, запустіть claude і введіть щось на кшталт:
Add a frost nova to my character's ultimate.Це весь промпт. Навичка створена для таких запитів: вона вчить Claude Code знаходити, використовувати, експортувати та створювати ефекти, а коли він створює новий, то працює за циклом чернетка, рендер, огляд, доопрацювання (згідно з README). Очікуйте кілька кроків, а не одну відповідь, як у будь-якій сесії агента: читання файлів, потім редагування.
Якщо ви використовуєте Godot, попросіть інше, що описує README:
Export the fire and explosions categories as sprite sheets for Godot.Ви отримаєте PNG із кадрами в сітці плюс JSON у стилі Aseprite; згідно з README, імпортери Aseprite для Godot і Unity його читають.
Одна річ, яку варто знати перед початком. Ефекти, намальовані на тілі, створені для стандартного манекена 24x38, тому персонаж іншого розміру потребує перегенерації цих ефектів.
Спробуйте саміСпробуйте: ваш герой має 32x48 пікселів. Чи вирівняється ефект тіла?Показати відповідь
Не одразу. Ефекти тіла намальовані для манекена 24x38, тому попросіть Claude Code перегенерувати цей ефект під розмір вашого персонажа.
Скільки коштує сесія#
Ось частина, яка дивує людей. Сам ефект — це невеликий файл. Вартість походить від роботи агента: на кожному кроці Claude Code повторно надсилає прочитані файли проєкту, текст навички та попередню розмову.
Швидка перевірка
Яка частина сесії Claude Code зазвичай містить найбільше токенів?
Показати відповідь
Відповідь: Вхідні дані, що повторно надсилаються на кожному кроці
Кожен крок несе весь робочий контекст, тому вхідні дані швидко накопичуються, тоді як кожна відповідь значно коротша (у прикладі нижче 1 500 токенів проти 30 000).
Ось припущення, яке ви можете змінити для свого проєкту: скажімо, сесія триває 20 кроків, кожен крок надсилає близько 30 000 токенів вхідних даних (файли, текст навички та історія), а модель пише близько 1 500 токенів. На DeepSeek-V4-Flash один такий крок коштує $0.0006, і вся 20-крокова сесія — у таблиці. Вона також показує OpenRouter поруч із нашою ціною для кожної моделі, порахованою сумарно з вхідними та вихідними даними разом.
| Модель | Вхід $/1М | Вихід $/1М | За запит | 20 запитів | OpenRouter, 20 запитів |
|---|---|---|---|---|---|
| GLM-5.3-Flash | $0.02 | $0.04 | $0.00066 | $0.0132 | $0.0226 |
| DeepSeek-V4-Flash | $0.015 | $0.10 | $0.0006 | $0.012 | $0.0462 |
| MiniMax-M2.7 | $0.05 | $0.15 | $0.0017 | $0.0345 | $0.414 |
30 000 вхідних і 1 500 вихідних токенів на запит. Ціни за 1 млн токенів актуальні та змінюються разом із нашими тарифами; стовпець OpenRouter показує довідкові ціни для того самого навантаження.
Ціни за 1M токенів зараз: вхідні $0.015, вихідні $0.10. Для невеликих правок ефекту, який уже існує, GLM-5.3-Flash має контекст 390K і до 8 192 токенів на відповідь, чого цілком достатньо для коригування кольорів чи таймінгу.
Щоб побачити, як складається довший день з агентом, як зробити Claude Code дешевшим розбирає звички, що скорочують вхідні дані.
Перед публікацією#
Код і ефекти ліцензовані за MIT. Шрифт Patch Pixel у gallery/fonts не покривається MIT (див. NOTICE.md у репозиторії), а деякі ефекти адаптують код MIT від Hugo Duprez і Hollow Crown. Якщо ваша гра постачається зі шрифтом, спершу прочитайте NOTICE.md.
Щоб почати з власним ключем і списком моделей, дивіться документацію CheapTokens і сторінку живих цін.
