Dev Story Стоп-кадр: Угадай фильм. История о знании кинематографа

|
FavoriteLoading В закладки
Стоп-кадр: Угадай фильм. История о знании кинематографа

Нам пишет Павел Бахирев.

scr2

На этих скриншотах можно узнать такие фильмы как “Железный человек” и “Звездные войны. Эпизод 5: Империя наносит ответный удар”.

Моя Dev Story началась в новогодние праздники, когда впервые за долгое время у меня появилось достаточно много свободного времени. Устав от безделья, я решил заняться чем-то полезным. Для начала хотелось сделать что-нибудь простое, чтобы разработка длилась относительно недолго, и получить опыт для дальнейшей работы.

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

Сразу возникла мысль создания довольно популярной сейчас, так называемой, «угадайки». Тебе показывают кадр, а ты отгадываешь из какого он фильма.

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

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

Проектирование

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

Кроме этого, хотелось вести рейтинг игроков, а для этого тоже нужно было централизованное хранилище. Значит нужна клиент-серверная архитектура и реализация серверной части.

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

Посмотрев несколько таких сервисов, я решил остановится на Parse – BaaS платформе, которую не так давно купил Facebook.

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

С созданием клиента вроде бы тоже не должно возникнуть проблем: загрузить изображение, показать варианты ответов, обработать ответ … на первый взгляд все просто.

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

Реализация

Программная реализация выполнялась стандартными средствами, предусмотренными Apple. Никаких хакинтошей, никаких средств кроссплатформенной разработки вроде Xamarin, PhoneGap и т.д. – нативное iOS приложение.Вся информация хранится на сервере, поэтому первым делом рисуем структуру таблиц и добавляем их в веб-интерфейсе Parse. Для каждой платформы Parse предоставляет SDK, позволяющее с помощью реализованных в нем методов создавать функционал, который работает с сервером. Например, добавлять записи в таблицы или, наоборот, получать уже имеющиеся данные. Поэтому скачиваем iOS SDK, устанавливаем его и сразу можем начинать реализацию самого приложения.

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

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

Вносим разнообразие

Приложение уже работает, но хочется как-то разнообразить игру, внести в нее что-то новое. В тот момент я еще отдельно разбирался с цифровой обработкой изображений с помощью графической библиотеки OpenGL и у меня возникла мысль: а что, если использовать возможности библиотеки в моем приложении?

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

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

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

Теперь нужно было реализовать собственно сами фильтры. Используя библиотеку GPUImage, я решил эту задачу. GPUImage – свободно распространяемая библиотека, содержащая около 70 готовых фильтров и позволяющая создавать свои собственные. Я сделал набор фильтров, некоторые из которых были полностью придуманы мной, а некоторые состояли из комбинации уже имеющихся в GPUImage.

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

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

scr1
На этих скриншотах можно узнать такие фильмы как “Американская история X”, “Тайное окно”

В итоге получилась следующая логика:

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

Если угадать не получается, можно воспользоваться помощью друзей из социальных сетей. Для этого была реализована публикация кадра на стену в Facebook, Twitter и ВКонтакте, причем при публикации в VK автоматически формируется опрос с текущим кадром и вариантами ответов.

Цитаты

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

picture3

Язык

Кроме того, нужно еще сказать про язык, на котором все отображается. Интерфейс и язык цитат локализованы два языка: русский и английский. Названия иностранных фильмов для русской локализации соответствуют их официальному переводу. Для английской локализации отображаются оригинальные названия фильмов. Локализация автоматически меняется в зависимости от языка, установленного в данный момент на устройстве. Но что, если у меня стоит русский язык, а мне необходимо видеть оригинальные названия фильмов? Для такого случая в приложении была сделана настройка. Если вдруг тебе интересно видеть именно оригинальные названия фильмов или читать цитаты на английском, стоит лишь зайти в настройки и установить соответствующий переключатель в нужное положение.

picture4

Подключаем статистику

Конечно же кадры могут попадаться довольно разные. Какие-то более известны и их проще угадать, какие-то из менее популярных фильмов и т.д. В связи с этим хотелось более равномерно распределить кадры по уровням приложения в зависимости от их сложности. Для этого решено было воспользоваться статистикой. Сортировка по уровням выполняется в порядке убывания числа «s», которое задавалось каждому кадру и вычислялось следующим образом: S=r/w,

rде r – количество верных ответов на данный кадр,

w – количество неверных ответов на данный кадр

Получается, что число S в какой-то степени характеризует сложность кадра.

Конечно, результат ответа может зависеть от разных факторов, в том числе и от везения, но такое распределение позволяет хотя бы примерно упорядочить кадры по сложности, в отличие от случайного выбора. Статистика ответов каждого пользователя отправляется на сервер и суммируется. В данный момент для сбора статистики сортировка по сложности отключена. Какое-то время кадры будут показываться в случайном порядке для того, чтобы собрать статистику ответов и сформировать значение числа «S». В дальнейшем, после сбора некоторого количества статистики сортировка кадров по уровням будет включена.

Рейтинг игроков

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

picture5

Заполнение базы фильмов

База фильмов приложения состоит из топов IMDb, «Кинопоиска» и других случайных фильмов, которые я смотрел сам. Для заполнения этой базы была создана небольшая программа для Mac OS, также использующая методы Parse, которая позволяет добавлять новые фильмы на сервер и прикреплять к ним кадры. При добавлении кадра к нему сразу применяются все имеющиеся фильтры для того, чтобы видеть, как на каждом уровне может выглядеть изображение. Бывает, что применение фильтра делает его совсем не узнаваемым, и тогда кадр не добавляется. Так как основная база хранится на сервере, пользователи могут получать вновь добавленные фильмы без обновления версии приложения. Приложение само через определенный промежуток времени скачивает обновления кадров с сервера, и таким образом пользователь всегда имеет у себя на устройстве полную базу.

Итоги

После заверешения разработки и тестирования приложение было отправлено на проверку в App Store. Целый месяц ушел на то, чтобы Apple App Review Team его одобрили. Три раза приложение было отклонено. И все эти три раза были связаны с регистрацией. В итоге можно сказать, что App Review Team не пропустит приложение, которое запрашивает какие-либо данные у пользователя и не связывает их с функционалом. Особенно это касается персональных данных, например, таких, как электронная почта. Изначально я запрашивал при регистрации email для того, чтобы можно было восстановить пароль, но саму функцию восстановления пароля в первой версии не сделал. Получилось, что я запрашивал персональные данные без привязки к функционалу, а это является нарушением.

Затраты на разработку

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

1. Аккаунт разработчика – $99
2. Шаблон видео ролика в Adobe After Effects – $20

Всего: $120.

Доход

Для монетизации приложения была добавлена реклама iAd. Я старался сделать ее не навязчивой, чтобы не создавать помех пользователю. На момент публикации данной статьи приложение находилось в App Store всего несколько дней, поэтому говорить о каких-то доходах на данном этапе нет смысла, их практически нет. Тем более, что реклама iAd не работает в России, поэтому российские пользователи пока дохода не приносят. Изначально я этого не учел, и теперь монетизация для российского рынка будет только со следующим обновлением приложения. Уже после релиза я посмотрел, как эту проблему решают другие разработчики и решил выбрать вариант с двумя рекламными сервисами. Например берем iAd от Apple и AdMob от Google. Если один из сервисов в данный момент не доступен, пробуем использовать другой. Таким образом, в России будет показываться реклама только от AdMob, так как iAd здесь не работает. В любом случае, наличие рекламы не доставит неудобств пользователю при использовании моего приложения.

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

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

iPhone + iPad: Бесплатно [Скачать из App Store]

Данная история опубликована в рамках рубрики Developer Story, где разработчики делятся секретами своей внутренней кухни.

Поставьте оценку:

1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (Нет голосов)
Оставайся в теме. Подпишись на наш Telegram 👏
... и не забывай читать наш Facebook и Twitter 🍒
FavoriteLoading В закладки
undefined
iPhones.ru
Нам пишет Павел Бахирев. На этих скриншотах можно узнать такие фильмы как “Железный человек” и “Звездные войны. Эпизод 5: Империя наносит ответный удар”. Моя Dev Story началась в новогодние праздники, когда впервые за долгое время у меня появилось достаточно много свободного времени. Устав от безделья, я решил заняться чем-то полезным. Для начала хотелось сделать что-нибудь...
Прокомментировать

🙈 Комментарии 34

  1. t.r.o.n. avatar
    t.r.o.n.18 июля 2014
    0

    Даже если не вдаваться в подробности, ваша “внутренняя” стоимость разработки 50-80 тыс руб. (естественно, я здесь даже не затрагивал вопросы стоимостей лицензий софта, который использовался при разработке)
    Причины отклонения приложения были связаны с тем, что вы недостаточно внимательно читали апловские рекомендации для iOS разработчиков. Там савсем небольшой текст.

    Для чего я это пишу? Все просто. Увидят ваши цифры “начинающие” – получат ужасный результат потом.

    PS Обрабатывать растровую графику с помощью шейдеров – это уникальный способ борьбы как с логикой, так и с аккумулятором пользователя

    bpa555 avatar
    bpa55518 июля 2014
    0

    @t.r.o.n., поделитесь, пожалуйста, своим способом обработки графики в данном случае

    t.r.o.n. avatar
    t.r.o.n.18 июля 2014
    0

    @bpa555, в данном, это каком? Все основные эффекты доступны в CoreGraphics

    bpa555 avatar
    bpa55518 июля 2014
    0

    @t.r.o.n., данный случай, этой обработка изображений в этом приложении. Вроде бы фреймворк Core Image называется. Вообще, на эту тему есть хорошая статья на хабре http://habrahabr.ru/post/181794/
    Там сравнивают GPUImage и Core image.
    Например, одна выдержка из нее:

    Основные преимущества GPUImage над Core Image:
    GPUImage быстрее чем Core Image;
    GPUImage использует язык GLSL вместо собственного языка;
    GPUImage это Open Source;

    fazoozoo avatar
    fazoozoo18 июля 2014
    0

    @t.r.o.n., а как была рассчитана сумма в 50-80к, если не секрет?

    t.r.o.n. avatar
    t.r.o.n.18 июля 2014
    0

    @fazoozoo, приходите на форум. Гтов поделится информацией.
    Да, и я не рассчитывал, а дал прикидочный результат

  2. Sancho1985 avatar
    Sancho198518 июля 2014
    0

    Приложение неплохое. Просьба добавить правильные варианты ответа при неправильном ответе, чтобы знать, как правильно называется фильм

    bpa555 avatar
    bpa55518 июля 2014
    0

    @Sancho1985, спасибо, учту в следующей версии

    Sancho1985 avatar
    Sancho198518 июля 2014
    0

    @bpa555, Не за что. Если будут какие-то еще замечания, напишу. Удачи!

    Sancho1985 avatar
    Sancho198518 июля 2014
    0

    @Sancho1985,
    з.ы еще встречаются необработанные кадры. Видимо баг.

    bpa555 avatar
    bpa55518 июля 2014
    0

    @Sancho1985, на самом деле это не баг, но и не фича) просто изначально предполагалось, что кадры, на которых некоторые фильтры работают совсем плохо, будут иметь флаг “не применять фильтр”, но в последствии такие кадры просто не добавлялись в базу. видимо это первые добавленные, у которых остался флаг “не применять фильтр”, нужно их убрать

    Sancho1985 avatar
    Sancho198518 июля 2014
    0

    @bpa555,
    Понятно. Будем дальше смотреть)

  3. Neobit avatar
    Neobit18 июля 2014
    0

    А в чём преимущество по сравнению с “УгадайКино!” от кинопоиска?
    Честно говоря, эти фильтры кошмаркошмаркошмар. Какой-то странный подход. Зачем глаза-то ломать? Ещё понимаю, сделали бы ASCII art. Что-то такое новенькое, хотя тоже мутное.

  4. Neobit avatar
    Neobit18 июля 2014
    0

    Вы бы ещё размытие по Гаусу бы сделали. И с каждым новым уровнем увеличивали бы размер пикселя. %)

    bpa555 avatar
    bpa55518 июля 2014
    0

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

  5. xaoc avatar
    xaoc18 июля 2014
    0

    Интерфейс, сделанный программистом – ужасен.

    Antoxa2584 avatar
    Antoxa258418 июля 2014
    0

    @xaoc, полностью согласен.
    Еще оочень интересно на что были потрачены 50-80к на разработку “Этого”. На покупку ПК с маковской системой?

    bpa555 avatar
    bpa55518 июля 2014
    0

    @Antoxa2584, а кто сказал что было потрачено 50-80к на разработку?

    Antoxa2584 avatar
    Antoxa258418 июля 2014
    0

    @bpa555, ошибка. Увидел где то в комментариях.

    PAHAN avatar
    PAHAN18 июля 2014
    0

    @Antoxa2584, Если нанимать работников, это приложение вполне 80к бы стоило, уверяю. Ну если не студентов нанимать

  6. cd_racer avatar
    cd_racer18 июля 2014
    0

    а как обстоят дела с авторскими правами на киноматериал?

    bpa555 avatar
    bpa55518 июля 2014
    0

    @cd_racer, конечно, разрешение у авторов получено не было, попробуй тут собери разрешение на такое количество фильмов.
    В App Store довольно много приложений, использующих какие-то авторские материалы. Думаете тот же “Кинопоиск” получал разрешение на использование материалов всех фильмов, которые у него представлены?

    cd_racer avatar
    cd_racer18 июля 2014
    0

    @bpa555, жаль, жаль :(
    удивительно, что у создателя и продавца интеллектуальной собственности вопрос по чужой собственности не проработан :(

    t.r.o.n. avatar
    t.r.o.n.18 июля 2014
    0

    @cd_racer, а вопроса здесь просто нет. Внимательно посмотрите закон об авторских правах, раздел – цитирование и особые правила для справочников, энциклопедий и словарей.

  7. zinkovskiy avatar
    zinkovskiy18 июля 2014
    0

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

    bpa555 avatar
    bpa55518 июля 2014
    0

    @zinkovskiy, да, есть такая проблема. Parse почему то увеличивает размер изображения после загрузки на сервер. причем я заметил это, когда у них была другая ценовая политика, и максимальный размер бесплатного хранения файлов был всего 1Гб, вместо теперешних 20 Гб. я задавал вопрос в поддержку, но ответа не было.

    zinkovskiy avatar
    zinkovskiy18 июля 2014
    0

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

    bpa555 avatar
    bpa55518 июля 2014
    0

    @zinkovskiy, спасибо за замечание) скрин не надо, я в принципе понял в чем суть

    flinteg19 июля 2014
    0

    @bpa555, лучший способ решить проблему долгой загрузки – заранее подгружать следующую фотографию, пока человек разбирается с текущей.

    bpa555 avatar
    bpa55519 июля 2014
    0

    @flinteg, сейчас так и сделано. только если отвечать быстро, это не спасает.

  8. GapBranigan avatar
    GapBranigan19 июля 2014
    0

    Спасибо за игру. Гораздо интересней, чем от Кинопоиска. Правильные ответы в случае неудачи, по моему мнению, писать не надо. Вдумчивый игорок и так вычислит.
    Хочу заметить, что когда очки переваливают за 15к, у меня игра глючит или подвисает (всегда на разных числах: 17500, 20000 и тп). В связи с невозможностью бить рекорды, отложил Стоп-кадр до лучших времен

    bpa555 avatar
    bpa55519 июля 2014
    0

    @GapBranigan, спасибо за отзыв. видел Вас в таблице рейтинга, неплохо) хотелось бы подробнее узнать о подвисании. Если Вас не затруднит, напишите на каком устройстве играли, ну и в чем собственно заключались глюки. можно в контакты, которые в разделе “Обратная связь” в приложении.

    GapBranigan avatar
    GapBranigan19 июля 2014
    0

    @bpa555, напишу здесь, ибо так быстрей. У меня iPhone 4s. Подвисания были 2-х типов:
    1. При переходе к следующему кадру внизу появлялся смайлик и какое-то время ничего не происходило. Потом выбивало в главное меню.
    2. Приложение само собой свернулось, а когда я его вновь развернул – уже было главное меню.

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

    bpa555 avatar
    bpa55519 июля 2014
    0

    @GapBranigan, спасибо, буду разбираться

Вы должны авторизоваться или зарегистрироваться для комментирования.

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь