Фаза 1 расширения React-Chrome, вдохновленного Cyberpunk 2077
Это первая фаза многоэтапного проекта, в котором мы создаем расширение React-Chrome, которое позволяет нам управлять сеансом пользователя Spotify.
Эта серия руководств предполагает, что вы:
Узнайте, как работают расширения Google Chrome:
Опытный веб-разработчик?
Поймите, как работают расширения ReactJS-Chrome:
Все это приложение построено так, чтобы имитировать кассетный плеер.
Все объекты, которые мы разрабатываем, имеют коэффициент 1,6.
ширина ассета в 1,6 раза больше высоты
Как бы вы ни решили развивать свои собственные активы, соблюдайте эту пропорцию.
Я использую сайт pixelartcss.com.
Он позволяет создавать пиксель-арт и экспортировать в разные форматы:
- CSS-код
- гифка
- png
Я не буду использовать функцию экспорта кода CSS. Он не масштабируется должным образом.
Я не буду использовать функцию экспорта GIF. Гораздо проще создавать и редактировать гифки в другой программе; Я буду использовать GIMP.
Я просто создам ресурс в pixelartcss и экспортирую в pngs.
Начнем с создания кассетного плеера.
Я обнаружил, что оптимальное место для холста pixelartcss составляет 80x50 для
закрытого кассетного плеера.
Вы можете увеличить холст до 92 x 57, чтобы освободить место для
открытого кассетного плеера.
Это дает нам достаточно пикселей для добавления деталей, но не слишком много, чтобы тратить весь день на раскрашивание.
Каким бы ни был дизайн вашего плеера, решать вам, просто убедитесь, что вы используете полную ширину и высоту вашего холста на закрытом плеере, затем увеличьте размеры до 92 x 57 и приступайте к работе с открытым проигрывателем.
Не включайте никакие кнопки, которые должны быть функциональными. Мы сделаем это позже в HTML.
Не забудьте экспортировать эти файлы в формате png, когда закончите.
После того, как вы закончите свои деки, сделайте то же самое с кассетами.
Те же пропорции, 1,6.
Я считаю, что формат 72 x 45 работает лучше всего.
обязательно создайте два изображения для вашей кассеты
это для анимации ленты
Теперь, когда у нас есть изображения, мы собираемся масштабировать их.
Откройте свой любимый редактор изображений.
Мы будем работать с холстом 320 x 550.
Добавленная высота дает нам место для анимации.
Начнем с закрытого проигрывателя; масштабируйте его до 320 x 200 и скопируйте на холст.
Сделайте то же самое для открытого плеера; масштабируйте его до 320 x 200 и скопируйте.
Для нашей кассеты здесь вам придется играть с различным масштабированием.
В зависимости от того, как вы создали свой плеер, масштаб и положение кассеты будут меняться.
Как только вы будете довольны выравниванием этих трех элементов
, мы начнем создавать GIF-файлы.
Загрузочный gif – это всего лишь три дубликата изображений, на которых кассета каждый раз поворачивается по-разному.
Когда вы будете готовы к экспорту в gif, я обнаружил, что частота кадров 100 мс работает лучше всего.
playing gif — это всего лишь два изображения с чередующимися состояниями кассеты.
Когда вы будете готовы к экспорту в gif, я обнаружил, что 150 мс частота кадров работает лучше всего.
Даже если вы не используете все пространство сверху, все равно экспортируйте в формате 320x550.
Переходим к pause gif.
В зависимости от того, что вы хотите делать, когда ваша колода поставлена на паузу, это будет статический или анимированный gif.
Просто убедитесь, что кассета не крутится; не забудьте также экспортировать его в размере 320 x 550.
Следующее изображение вашей колоды по умолчанию.
Это будет использоваться для страницы параметров, когда пользователь выбирает своего игрока.
Просто возьмите закрытую колоду; без кассеты и экспортируйте ее в формате 320 x 200, а не 320 x 550.
Итак, у нас есть все визуальные ресурсы, созданные для нашего проекта.
https://github.com/an-object-is-a/project-1-spotify-controller-phase1
На следующем этапе мы собираемся создать пользовательский интерфейс и UX с помощью ReactJS.
Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube Объект – это А.
