Как сделать свои живые обои
Перейти к содержимому

Как сделать свои живые обои

  • автор:

Это просто. Я создаю живые обои для iPhone за 2 минуты

Favorite В закладки

Это просто. Я создаю живые обои для iPhone за 2 минуты

Живые обои создаются из Live-фотографий. Если установить любую такую в качестве хранителя домашнего экрана, она начнет двигаться после сильного* нажатия на заблокированный дисплей.

Дело за малым — превратить стильное видео или анимацию в Live-фото. В этом нам поможет простая, но функциональная программа intoLive, которая выступит в роли редактора и конвертера.

* Обратите внимание, живые обои работают только на iPhone, которые поддерживают 3D Touch.

Предлагаю создавать живые обои через intoLive

Шаг 1. Скачайте и откройте приложение intoLive (бесплатно + покупки).

Шаг 2. Выберите видео или GIF для создания живых обоев.

Шаг 3. Используйте инструмент «Холст», чтобы заранее выбрать расположение анимации на экране.

Шаг 4. Наложите на обои «Фильтр» и выберите «Скорость», при необходимости поверните или отразите их.

Шаг 5. Перейдите в меню «Фото Главным», чтобы выбрать кадр, который будет отображаться в статичном варианте живых обоев.

Шаг 6. Попробуйте инструменты редактирования для «Фото Главным», чтобы сделать его неповторимым: «Текст», «Стикер», «Фильтр», «Размытие», «Фон», «Поворот» и «Флип».

Шаг 7. Нажмите на кнопку «Сделать» и выберите число повторений анимации: от одного до 10-ти раз.

Шаг 8. Просмотрите готовую анимацию и выберите «Сохранить живые фото», чтобы обои появились в галерее.

Шаг 9. Отройте приложение «Фото» и выберите живые обои, которые вы создали.

Шаг 10. Перейдите в меню дополнительных действий, воспользуйтесь возможностью «Сделать обоями» и установите их.

Вот что получилось (лого intoLive есть только на превью).

Нужно ли покупать платную версию приложения

Чтобы превратить intoLive в intoLive Pro, нужно один раз заплатить 229 руб. Это откроет доступ ко всем премиум-возможностям приложения:

«Макет холста». Вы можете разделить экран на несколько частей и использовать разные настройки живых обоев на каждой из них.

«Фото Главным». С помощью этой функции вы сможете изменить изображение, которое будет отображаться на экране в статичном варианте.

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

«Редактировать Фото Главным». Это даст вам возможность добавлять стикеры, текст и специальные эффекты на то самое статичное изображение.

«30 фотографий». Вы сможете использовать одновременно до 30 изображений для конвертирование в живые снимки.

«Продолжительность 30 с». По умолчанию вы можете создавать живые обои продолжительностью всего 5 с, в Pro версии его длина увеличится в 6 раз.

«Подключение к ПК». Pro-версия программы даст возможность забрасывать анимированные изображения и видео для создания живых обоев напрямую в программу через iTunes.

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

«Цикличные видео и GIF». Лучший вариант живых обоев — зацикленность, и это доступно только за деньги.

«Различные фильтры». Вы сможете отредактировать живые обои на свой вкус.

«Убрать рекламу». В бесплатной версии программы действительно много рекламы.

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

10 живых обоев, которые нельзя пропускать:

Нажмите на любое превью анимации и сохраните ее в системную галерею стандартными средствами вашего браузера.

Создание обоев для iPhone 4+

Создавайте уникальные живые или обычные обои с помощью различных фильтров и эффектов. Преображайте экран своего iPhone! Пусть ваше устройство радует вас каждый раз, когда вы смотрите на него!

Высококачественные обои для вашего iPhone. Простой и понятный интерфейс. Здесь вы обязательно создадите то, что давно хотели!

14 категорий замечательных изображений:
Абстракция
Самолёты
Животные
Архитектура
Автомобили
Рисунки и Картины
Цветы и Растения
Еда и Кулинария
Пейзажи
Макро
Природа
Разное
Корабли
Космос

Wallpaper Engine. Создание простых, анимированных обоев. ⁠ ⁠

Сегодня я расскажу вам, как сделать простые, онемечные(можно не только аниме, но и на другую тематику. тут уж на что фантазии хватит :D) обои и обмазыватся подписчиками.

1 шаг: поиск картинки.
Вы можете взять совершенно любую пикчу из сети интернет, в WE(Wallpaper Engine) вас не забанят за АП, если вы не будете использовать ваши обои в коммерческих целях.
Слова разработчика программы:

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

2. подгон фото под FullHD или другое, нужное для вас качество (если нашли изображение не того размера, который вам нужно)

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

из программ могу посоветовать только то, чем сам пользуюсь: фотошоп и Paint tool SAI

там все просто, объяснять не буду.

3. Покупаем программу, запускаем.

Далее видим такую картину:

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

4. Нам нужен редактор обоев, он находиться в правом нижнем углу. Нажимаем.

У нас открывается редактор. Нажимаем на создать обои и выбираем заранее найденное изображение.

Далее видим такую картину:

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

чтобы обои не казались чересчур статичными, используем эффект тряски: для этого сначала нужно немного увеличить изображение, чтобы эффект тряски не выходил за пределы изображения. Для этого нажимаем по нашему файлу(он находиться слева) правой кнопкой мыши и жмем по «разблокировать»

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

после чего мы уже можем двигать изображение как нам удобно. Нам же его нужно немного увеличить.

примерно вот так:

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

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

Переходим в настройки проекта(вкладка, похожая на шестеренку в левом верхнем углу экрана)

и поставьте галочку на «тряска камеры»

Wallpaper Engine. Создание простых, анимированных обоев. Steam, Обои на рабочий стол, Wallpaper Engine, Аниме, Длиннопост, Rem (Re:Zero Kara)

далее уменьшите скорость, т.к. идет слишком сильная тряска. Самая оптимальная скорость, как по-моему — 1.18.

5. Дальше проще — нужно выбрать эффекты ваших обоев. Они находяться левее настроек проекта(значок похож на слои)

И жмем на кнопку «Добавить предустановку»

В конце всё легко: добавляете эффект, настраиваете его, добавляете ещё эффект и так по новой.

6. Не спешите сразу же опубликовывать обои, после того, как добавили все нужные вам эффекты. Сначала посмотрите, как они будут выглядеть в полном размере. Для этого нажмите на «файл» левом верхнем углу и на «применить обои». Если вас все устраивает — нажимайте на «Steam» и «Подготовить к публикации».

Пишете название, описание, делаете скриншот для предпросмотра, устанавливаете жанр и возрастное ограничение.

Андроид живые обои. Как делать?

Независимо от того, какие обои вы задумали сделать, существуют 2 различных подхода к реализации ваших задумок: SGL (в дальнейшем Canvas) и OpenGL. Когда я создавал свои первые обои у меня ушло несколько дней, чтобы попробовать различные средства и методы, поэтому эта статья сэкономит вам немного времени и быстро введет вас в курс дел.

Canvas

Если работает для вас — даже и не думайте об OpenGL

Что же такое Canvas? Это главный способ рисования GUI в андроид. Все формы, кнопочки и переключатели отрисовываются с помощью данной технологии. Нам дается Bitmap определенного размера (1024х600 например), на котором мы должны рисовать. Рисовать мы можем с использованием класса Canvas, который имеет богатое высокоуровневое АПИ для рисования. Скажем, нарисовать окружность заданной толщины определенного цвета с включенным сглаживанием не составляет никакой сложности. Есть даже поддержка шейдеров.

Но зачем тогда спрашивается OpenGL?

  • низкая скорость. Вся работа с графикой производится без аппаратного ускорения (есть исключение). То есть ваш Bitmap вы будите заполнять усилиями центрального процессора, с чем он отлично справляется, если Bitmap умеренного размера. Скорость рисования пропорциональна площади и сильно замедляется при ее увеличении.
  • никакого 3d и наворотов. Канва не поддерживает 3d, свойства материалов, расстановку и настройку источников света и др. Если вам нужно, что-то из этого списка, то придется эмулировать это самим, что еще больше замедлит и без того низкую скорость отрисовки.
  • простота интеграции в приложение. Рисование с помощью Canvas доступно вам сразу. Не надо создавать специальных поверхностей на которую будет выводится изображение созданное с помощью OpenGL. Не надо создавать поток, в котором работает OpenGL и синхронизировать его с вашим сервисом обоев (очень нетривиальная задача).
  • простое высокоуровневое АПИ. У канвы есть готовая функция рисования почти на все случаи жизни. Требуется 5 минут, чтобы прочитать документацию на класс и начать успешно использовать его.

OpenGL

Если Canvas не справляется, то больше ничего не остается.

OpenGL, DirectX — все мы слышали эти «крутые» слова. На Андроид у нас доступен OpenGL, но не простой (не такой как на десктопе), а урезанный. Причем у нас даже есть выбор: OpenGL ES 1.0/1.1 (работает везде) или OpenGL ES 2.0 (Android 2.2+). Что такое ES в названии? ES говорит нам о том, что это урезанная версия OpenGL, из которой убрали все лишнее, чтобы сделать АПИ как можно более компактнее и не тащить за собой на мобильные устройства вещи, которые легко эмулировать на центральном процессоре. То есть не все примеры из книжек по обычному OpenGL у вас заработают, но в принципе осталось все также.

Как было замечено версий у нас две: 1.0/1.1 и 2.0. Почитать об их отличиях можно в википедии (выбрать английский язык). Причем не все устройства одинаково поддерживают все расширения OpenGL ES, перед тем как использовать некоторые, нужно убедится, что это поддреживается (почитать можно тут).

  • тяжело интегрировать в приложение. Чтобы выводить графику на экран устройства с помощью OpenGL необходимо создать специальную поверхность и специальный поток, который будет на этой поверхности рисовать. Необходимо также позаботиться о синхронизации системы и потока.
  • сложное низкоуровневое АПИ. У нас нет функции нарисовать квадрат, нет функции вывести картинку. Зато есть куча флагов и режимов рисования. Если механизмы задания вершин полигонов, матриц преобразования координат, функции загрузки текстур и средства управления наложением… В общем все очень запутано, если вы раньше никогда не имели дело с OpenGL. На освоение уйдет несколько дней.
  • высокая скорость работы. Никогда ваше приложение с использованием Canvas не будет работать быстрее и плавнее чем с использованием OpenGL (при наличии прямых рук конечно же).
  • поддержка 3d и наворотов. Трехмерные гонки или стрелялки? Все это возможно с использованием OpenGL. Создавайте источники света, управляйте камерой, создайте реалистичный эффект водной поверхности, используйте материалы и др.

OpenGL. Делаем проще.

Когда тяжело в одиночку — просим помощи.

Понятно, что мы далеко не первые, кто решил использовать OpenGL и все мы уже играли в красивые игрушки, перерезали веревки и спасали сворованные яйца. Редко когда игра пишется абсолютно с нуля, обычно используются движки, которые берут на себя все скучные занятия и предлагают нам более простое АПИ для реализации наших фантазий. И оказываться, применительно к живым обоям, вариантов сделать проще у нас 2…

GLSurfaceView adapted for 3D Live Wallpapers

Так называется статья Роберта Грина, где он рассказывает о созданных им классах (основной из которых GLWallpaperService), которые выполняют всю работу по настройке за нас. Нам же остается писать код, который рисует. Скачав с github файлы проекта (проект живой и недавно обновлялся), вы получите готовые обои, которые правда ничего не делают красивого (просто заливают весь фон цветом), но они уже работают. Вам остается только написать требуемый код для рисования. Об интерфейсе взаимодействия с системой и базовой настройке OpenGL уже позаботились. У Роберта используется OpenGL 1.0/1.1, но перейти на 2.0 не представляет никакой сложности. Стоит так же заметить, что никаких дополнительных средств для рисования не предоставляется, рисовать придется все тем же OpenGL ES АПИ.

AndEngine

AndEngine это настоящий 2d движок для создания игр. Движок поддерживает несколько расширений, среди которых и physicsbox2d для создания физики. Сам движок довольно популярный с открытым кодом (Java). Все средства движка можно использовать для создания обоев. Есть много примеров, которые являются единственной «документацией» движка. Если надо что-то сделать — вспоминаем в каком примере мы это видели и смотрим как это там реализовано. Так же есть форум, где можно попросить помощи (форум активный, быстро помогают).

Теперь о плохом.

Версии у движка 2. Первая (GLES1) использует OpenGL ES 1.0/1.1, вторая (GLES2) — ES 2.0. АПИ в GLES2 намного продвинулось вперед, поэтому лучше использовать GLES2, но мы тогда теряем пользователей Андроида версии 2.1 (GLES2 на нем не работает, a живые обои замечательно работают). Мне удалось запустить обои используя обе версии AndEngine. Но в GLES1 сразу же столкнулся с невозможностью изменить настройки камеры при изменении ориентации экрана (приходится изменять масштаб сцены по одной из осей, в GLES2 АПИ это позволяет).

Движок создан для 2d игр, поэтому никакого АПИ для поддержки 3d не предоставляется (никто не запрещает использовать OpenGL напрямую). Так же отсутствуют казалось бы такие нужные функции как рисование окружности и даже треугольника. Движок больше ориентирован на спрайты. Добавить функцию рисования той же окружности, так чтобы она вписывалась в систему классов движка довольно тяжело — никакой документации нет. Поэтому придется перелопатить много кода и разбираться что к чему.

Заключение.

Начнем делать выводы с того, что я приведу пример: один кадр созданных мной обоев с помощью Canvas рисуется за 17мс на Kindle Fire (6 из которых «лочится» и «анлочится» канва). Это много, для заполнения фона текстурой 16х16px, вывода изображения 350х180px и отрисовки 4х окружностей различной толщины и радиуса. При использовании OpenGL это делается на порядок быстрее. О хорошем: код отрисовки я написал за час с небольшим, 17мс немного — анимация плавная.

В остатке.

Используйте канву, если вам не важно 3d, если ваша анимация не очень сложна и не требует больших вычислительных ресурсов.

Используйте AndEngine, если вы делаете 2d обои. Изучив примеры и почитав форум, вы быстро приступите к созданию вашей анимации, а дополнительные расширения движка позволят вам с легкостью внедрить в вашу анимацию эффектные решения (физика, система частиц и др.)

Используйте GLWallpaperService Роберта Грина. Если вы хорошо владеете OpenGL и делаете 3d обои, он позволит вам, не отвлекаясь на рутину, быстро приступись к кодированию вашей анимации.

Вы также можете адаптировать многие ваши любимые графические OpenGL движки для создания живых обоев. Используя код GLWallpaperService и/или AndEngine в качестве примера.

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

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