[Dev Story] Стоп-кадр: Угадай фільм. Історія про знання кінематографа
Нам пише Павло Бахірєв.
На цих скріншотах можна дізнатися такі фільми як "Залізна людина" і "Зоряні війни. Епізод 5: Імперія завдає удару у відповідь".
Моя Dev Story почалася в новорічні свята, коли вперше за довгий час у мене з'явилося досить багато вільного часу. Втомившись від неробства, я вирішив зайнятися чимось корисним. Для початку хотілося зробити що-небудь просте, щоб розробка тривала відносно недовго, і отримати досвід для подальшої роботи.
Гаяння часу переглядом різних фільмів та й, власне, любов до хорошого кіно навели на думку створення програми даної тематики.
Відразу виникла думка створення досить популярною зараз, так званої, «угадайки». Тобі показують кадр, а ти отгадываешь з якого він фільму.
І я вирішив: спробую зробити! Зрештою, що я втрачаю? Роботи начебто не так вже й багато. Навіть якщо справа не вигорить, це все одно досвід, тим більше розробкою я вирішив займатися тільки у вільний час, щоб це не було на шкоду іншим справам. Спочатку бюджет передбачався нульовий. Всі етапи створення повинні були виконуватися самостійно, без залучення дизайнерів та інших програмістів.
Так, сама по собі ідея не блищить оригінальністю, але були в мене деякі думки щодо її модернізації... , але про все по порядку.
Проектування
Першим ділом потрібно було вирішити, як зберігати кадри з фільмів. Локальне зберігання на пристрої давало свої плюси, такі як відсутність необхідності в підключенні до Інтернет. Але скільки місця буде займати вся база і як її тоді взагалі оновлювати? При такому вирішенні оновлення бази кадрів відбувалося б тільки при випуску нової версії додатка, що мене не зовсім влаштовувало.
Крім цього, хотілося вести рейтинг гравців, а для цього теж потрібно було централізоване сховище. Значить потрібна клієнт-серверна архітектура і реалізація серверної частини.
Утримувати свій хостинг і писати API з нуля не дуже хотілося. Тим більше я вже трохи чув про BaaS платформах. Ідея таких платформ полягає в тому, що є готовий сервіс, який надає крос-платформний бекенд для будь-якого проекту. Програміст концентрується лише на створення клієнтського додатка.
Подивившись кілька таких сервісів, я вирішив зупиниться на Parse - BaaS платформі, яку не так давно купив Facebook.
Отже: вся база даних кадрів та інформації про гравців зберігається на сервері, пристрої роблять запити до неї і відображають інформацію. Такий спосіб організації дозволяє в будь-який момент додавати нові кадри і централізовано зберігати інформацію про гравців, рейтингах і т.д. З архітектурою питання було вирішене.
З створенням клієнта начебто теж не повинно виникнути проблем: завантажити зображення, показати варіанти відповідей, обробити відповідь ... на перший погляд усе просто.
Як же бути з дизайном? Як я вже згадував, бюджет був нульовий, тому найняти дизайнера не було можливості. Накидавши прототип на папері і визначивши приблизну розташування елементів, вирішено було поки залишити це питання.
Реалізація
Програмна реалізація виконувалася стандартними засобами, передбаченими Apple. Жодних хакинтошей, ніяких коштів кроссплатформної розробки начебто Xamarin, PhoneGap і т.д. - нативне iOS приложение.Вся інформація зберігається на сервері, тому першим ділом малюємо структуру таблиць і додаємо їх у веб-інтерфейсі Parse. Для кожної платформи Parse надає SDK, що дозволяє з допомогою реалізованих у ньому методів створювати функціонал, який працює з сервером. Наприклад, додавати записи в таблиці або, навпаки, отримувати вже наявні дані. Тому завантажуємо iOS SDK, встановлюємо його і відразу можемо починати реалізацію самого додатка.
Перед реалізацією програми необхідно продумати логіку гри. Для цього додатка вона гранично проста: показується зображення і чотири варіанти відповіді, вгадав - отримуєш призові очки, не вгадав - починаєш заново.
Реалізація первісної версії не змусила себе довго чекати. Дизайн, звичайно, був не завершений, але основний функціонал працював.
Вносимо різноманітність
Програма вже працює, але хочеться якось урізноманітнити гру, внести в неї щось нове. В той момент я ще окремо розбирався з цифровою обробкою зображень за допомогою графічної бібліотеки OpenGL і у мене виникла думка: а що, якщо використовувати можливості бібліотеки в моєму додатку?
Вивчаючи роботу шейдерів OpenGL, я застосовував до зображень різні графічні фільтри, прикладом яких можуть бути фільтри з Instagram.
Тоді було вирішено спробувати застосовувати фільтри до кадрів фільмів з метою їх маскування і ускладнення завдання вгадування.
Я реалізував логіку гри, при якій кадр фільму спочатку показується з застосованим фільтром. Якщо в такому вигляді гравець не міг вгадати фільм, він міг прибрати фільтр, але втративши при цьому певну кількість очок.
Тепер потрібно було реалізувати власне самі фільтри. Використовуючи бібліотеку GPUImage, я вирішив цю задачу. GPUImage - вільно розповсюджувана бібліотека, що містить близько 70 готових фільтрів і дозволяє створювати свої власні. Я зробив набір фільтрів, деякі з яких були повністю придумані мною, а деякі складались із комбінації вже наявних у GPUImage.
Грати стало цікавіше. Це нововведення не тільки дозволяло маскувати кадри, але і в деяких випадках надавало їм інший, цікавий вигляд.
Отриманий набір фільтрів був розподілений за рівнями додатки в порядку зростання складності вгадування кадру після його застосування.
На цих скріншотах можна дізнатися такі фільми як "Американська історія X", "Таємне вікно"
В результаті вийшла наступна логіка:
Кожен рівень складається з 10 кадрів. Після проходження кожного наступного рівня відкривається новий фільтр, ще більше ускладнює завдання. Разом з цим збільшується і кількість очок за правильну відповідь і кількість очок, яке віднімається за перегляд оригінального виду кадру.
Якщо вгадати не виходить, можна скористатися допомогою друзів із соціальних мереж. Для цього була реалізована публікація кадру на стіну в Facebook, Twitter та ВКонтакте, причому при публікації в VK автоматично формується опитування з поточним кадром і варіантами відповідей.
Цитати
Для завантаження зображення і застосування до нього фільтра потрібен певний час. Звичайно, якщо швидкість інтернету хороша, це не буде проблемою, але мобільний інтернет не завжди швидкий. Щоб під час завантаження користувач не нудьгував, та й взагалі, для різноманітності гри було вирішено зробити показ цитат з різних фільмів. Зображення вантажиться - гравець читає випадково обрану цитату з зазначенням автора і фільму, з якого вона була взята.
Мова
Крім того, потрібно ще сказати про мову, на якому все відображається. Інтерфейс і мова цитат локалізовані дві мови: російська та англійська. Назви іноземних фільмів для російської локалізації відповідають їх офіційного перекладу. Для англійської локалізації відображаються оригінальні назви фільмів. Локалізація автоматично змінюється в залежності від мови, встановленого в даний момент на пристрої. Але що, якщо у мене стоїть російська мова, а мені необхідно бачити оригінальні назви фільмів? Для такого випадку в додатку була зроблена настройка. Якщо раптом тобі цікаво бачити саме оригінальні назви фільмів або читати цитати англійською, варто лише зайти в налаштування і встановити відповідний перемикач у потрібне положення.
Підключаємо статистику
Звичайно ж кадри можуть траплятися досить різні. Якісь більш відомі і їх простіше вгадати, якісь з менш популярних фільмів і т.д. У зв'язку з цим хотілося більш рівномірно розподілити кадри за рівнями додатки залежно від їх складності. Для цього вирішено було скористатися статистикою. Сортування за рівнями виконується в порядку убування числа «s», яке задавалося кожного кадру і вираховувалось наступним чином: S=r/w,
де r - кількість вірних відповідей на даний кадр,
w - кількість неправильних відповідей на даний кадр
Виходить, що число S в якійсь мірі характеризує складність кадру.
Звичайно, результат відповіді може залежати від різних факторів, у тому числі й від везіння, але такий розподіл дозволяє хоча б приблизно упорядкувати кадри по складності, на відміну від випадкового вибору. Статистика відповідей кожного користувача відправляється на сервер і підсумовується. В даний момент для збору статистики сортування по складності відключена. Якийсь час кадри будуть показуватися у випадковому порядку для того, щоб зібрати статистику відповідей і сформувати значення числа «S». Надалі, після збору певної кількості статистики сортування кадрів за рівнями буде включена.
Рейтинг гравців
Результати кожного гравця зберігаються в таблицю лідерів. Облік очок ведеться як по загальній сумі, так і по максимальній кількості, отриманого за одну гру. Гра не дає право на помилку, що може викликати такий собі спортивний інтерес пройти як можна далі за одну спробу.
Заповнення бази фільмів
База фільмів програми складається з топів 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, де розробники діляться секретами своєї внутрішньої кухні.![[Dev Story] Стоп-кадр: Угадай фильм. История о знании кинематографа](/images/articles/20140718/e81b2d9a257d8fcd69193952ecc667fd.jpg)
![[Dev Story] Стоп-кадр: Угадай фильм. История о знании кинематографа](/images/articles/20140718/a668b576e8fd3872868d27f560fb37d5.jpg)
![[Dev Story] Стоп-кадр: Угадай фильм. История о знании кинематографа](/images/articles/20140718/abf9bd704b4464c1ad91c061973dcb15.jpg)
![[Dev Story] Стоп-кадр: Угадай фильм. История о знании кинематографа](/images/articles/20140718/996e2f1a889f27fa4e3386d7fe7fd846.jpg)
![[Dev Story] Стоп-кадр: Угадай фильм. История о знании кинематографа](/images/articles/20140718/5989daef181313994b73f500e075d51f.jpg)