Как сделать билеты для своего кино
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71a8b04fa9459a1b • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации
В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия — в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.
Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф.
Что нужно, чтобы купить билет в кино?
Когда вы определились с фильмом и кинотеатром, вам нужно выбрать место в кинозале — изучить красивую схему выбора мест и купить самые лучшие билеты.
дизайн схемы выбора мест
Мы придумали три варианта реализации такой схемы.
1. Сделать все на старом добром HTML
Удобно работать в React.
Все доступно (A11Y).
Растет количество DOM-нод и глубина DOM-дерева (пример — на изображении выше).
Проблемы с производительностью при взаимодействии с пользователем (перемещение схемы).
2. Использовать SVG
Плюсы и минусы примерно такие же, как и с HTML.
Получилось найти только схему метро на SVG
3. Canvas
Удобно стилизовать (можно нарисовать что угодно).
Меньше проблем с производительностью.
Не получится совместить с Server Side Rendering.
Проблемы с A11Y (нет «из коробки»).
Мы решили делать схему на canvas, потому что нам важно, чтобы все было красиво и с приятным UX для пользователя. Также с технической стороны у нас пропадают проблемы с глубиной DOM-дерева и количеством нод в нем. Тем более что canvas без проблем работает даже в Internet Explorer 11.
Конечно, на наше решение повлияло и то, что использовать canvas намного интереснее, чем просто работать с SVG- и HTML-решениями.
Экосистема вокруг canvas
Итак, мы отправились выбирать библиотеку для более удобной работы с canvas. Как оказалось, их существует достаточно большое количество, из самых популярных — Konva, PixiJS, Fabric.js и Phaser.
Из этого многообразия мы выбрали PixiJS. Ключевые особенности Pixi: он быстрый, гибкий и производительный. Также наши коллеги активно рекомендовали использовать именно его.
Простой код на PixiJS. Мы инстанцируем Pixi.App с заданным конфигом (например, ширину, высоту, цвет фона, разрешение). Добавляем объекты на сцену (Stage в терминологии Pixi), пишем простой цикл и получаем сетку 5 × 5 из кроликов, которые вращаются вокруг своей оси — пример с официального сайта Pixi
Структура и читаемость
Этот код достаточно простой для понимания, но и делает он не так уж много. Если мы хотим создать что-то наподобие схемы выбора мест, код становится достаточно объемным и плохо воспринимается.
Выше не слишком крупная программа, но мы уже дошли до 100 строк кода и, просто глядя на этот код, тяжело понять, что же происходит.
Вписываем в React
Кроме сложности понимания кода возникает другой вопрос: как это вписать в парадигму React?
Сначала мы решили сделать свои обертки для разных примитивов. Но впоследствии обнаружили, что за нас все уже придумали.
Одно из решений, которое понравилось нам, — библиотека react-pixi-fiber. Ее плюс в том, что мы пишем привычный нам JSX, а под капотом происходит взаимодействие с Pixi и мы получаем наш canvas.
В этой библиотеке у нас уже есть обертки для всех нативных объектов Pixi. К примеру, вместо инстанцирования класса Pixi.Text мы используем react-элемент <Text /> .
Также есть удобное АПИ для создания своих объектов — CustomPIXIComponent
Приблизительно так теперь выглядит код для нашей схемы выбора мест. Здесь уже нет никаких инстансов Pixi, у нас обычный JSX: компоненты Stage, Container, посадочные места, привычный маппинг данных на react-компоненты.
А вот как выглядит создание своего компонента. Он немного отличается от привычных react-компонентов, но, если разобраться, по сути тут все то же самое. У нас есть ссылка на отображаемый компонент graphics и привычное слово props. Также почти привычным образом мы можем использовать обработчики событий, например ховер, клик и так далее.
Применяем все на практике
Какие у нас были вводные для отрисовки кресел?
У нас была информация в виде массива объектов. В каждом — данные, необходимые для отрисовки сиденья: размеры, координаты, номер места и ряда.
Наша задача — сделать так, чтобы в любых сочетаниях кресла смотрелись красиво.
В зависимости от ценовой категории кресло может иметь различный цвет. А также кресла могут быть разных размеров: например, это сдвоенные места — диванчики.
Вариант с загрузкой кресла как простой текстуры мы сразу отбросили: были проблемы с отображением на retina-экранах и в целом с изменением размеров без визуальной деформации. А с SVG в то время были проблемы у PixiJS: некорректно работала подгрузка ассетов в SVG.
Поэтому мы решили сами рисовать каждое кресло.
Рисуем кресло на PixiJS
Для удобства мы разделили кресло на сектора:
A — полукруглые края подлокотников.
B — подлокотник.
C — кривая от подлокотников до спинки кресла.
D — спинка кресла.
E — верхняя часть кресла.
F — средняя часть кресла.
G — нижняя часть кресла.
Ширина одной клетки — width / 22.
Высота одной клетки — height / 16.
Кресло в макете у нас имеет размер 22 пикселя на 16, таким образом, каждая черточка или буковка — это пиксель в сетке.
Затем мы разделили эту сетку на зоны: подлокотники, спинка и так далее. И отрисовали все по частям, используя PixiJS и CustomPIXIComponent.
Теперь — все по порядку и каждому разработчику, который приходит в этот код, сразу понятно, где, как и что.
Мы решили все задачи: кресла могут быть любых размеров без потери пропорций, реагируют на действия пользователя и выглядят круто!
Схемы секторов
Когда вы покупаете билет на крупное мероприятие, например на хоккей или на концерт в «Олимпийском», скорее всего, сначала вы выбираете сектор, в котором хотите сидеть, а потом уже — места в этом секторе. С появлением задач по концертам нам тоже нужно было это реализовать.
От наших партнеров приходила такая схема секторов.
Собственно массив секторов в поле sectors с информацией о каждом секторе, название площадки, а также строка hallScheme, которая занимает почти 236 килобайт.
Как оказалось, это схема секторов площадки в SVG и закодирована в base64.
Что же нам с этим делать?
Первым нашим решением было парсить этот SVG и как-то перевести на PixiJS.
Второй вариант — просто вставить это как HTML, повесить обработчики через стандартные методы.
Рассмотрев эти варианты и взвесив плюсы и минусы, мы решили пойти дальше и сделать третий вариант — парсить эту SVG и превращать ее в react-элементы.
Выбором для парсера стал html-react-parser. Эта библиотека парсит любой валидный HTML в react-элементы. Работает как на стороне Node.js, так и на стороне браузера. Но решающим стало то, что любой элемент из оригинальной разметки можно заменить на что угодно.
Передаем всю разметку схемы в функцию parseHtmlToReact а также через опции задаем функцию, которая будет заменять элементы на наши.
Здесь уже опять привычный нам JSX и полный контроль над всем, что нужно: обработчики событий, стилизация и так далее.
Вот так теперь выглядит ВТБ Арена.
Поговорим об оптимизации
Во время работы над схемами мы заметили, что даже для маленьких схем загрузка процессора держится на 20%, а в больших достигает 80—90%. Визуально это незаметно для пользователя, но может привести к проблемам на слабых мобильных устройствах и быстрому разряду батареи.
Используя инструменты разработчика, мы видим, что даже при простое приблизительно каждые 16 мс вызывается одна и та же таска. Сразу видно некий Ticker_tick
В замечательной документации по Pixi можно найти упоминание об этом тикере. Как понятно из описания, это некий цикл, который выполняет что-то за некий интервал времени, в нашем случае — приблизительно каждые 16 мс.
Но почему именно 16 миллисекунд?
Вспомним понятие «60 кадров в секунду» — это нужно, чтобы обеспечить плавность анимации и перемещений. Также, новые фильмы снимают в 60 кадров в секунду, что дает более плавную картинку.
Чтобы получить такую частоту обновления, нужно каждую секунду обновлять изображение 60 раз: 1000 мс ÷ 60 = 16,6666 мс.
Как раз этот цикл из класса Pixi.Ticker обеспечивает обновление 60 раз в секунду всего canvas, и у нас все плавно и красиво. В нашем случае при большом количестве объектов перерисовка выходит достаточно дорогой. При этом чаще всего схема абсолютно статичная, а плавность нужна только при взаимодействии.
Так как мы не работаем напрямую с Pixi, получить доступ к регулированию цикла обновления мы не могли.
Исходный код компонента Stage из react-pixi-fiber
Как видно, вся работа с Pixi происходит внутри компонента Stage от react-pixi-library. К сожалению, официальных способов от создателей react-pixi-library по работе с Ticker нет.
В нашем случае выходом стало применение опции sharedTicker для Pixi. По сути, эта опция включает использование всех инстансов pixi-приложений общего Ticker. Общий Ticker доступен простым импортом из пакета.
Мы сразу отключили автоматический старт цикла обновлений Ticker с инициализацией приложения. А дальше мы связали это с ререндером react-компонента, так как при взаимодействии пользователя со схемой меняются props данного компонента.
Соответственно, цикл обновления запускается, только когда нужно. В остальных случаях canvas статичен, выглядит как картинка и не нагружает ресурсы.
Пока мы все это изучали, обнаружили, что у Pixi на Github есть целая wiki, где очень много интересной информации:
Забавно, что на официальном сайте Pixi ссылку на эту wiki не найти.
Главный совет по оптимизации заключается в том, что инстансы объектов Pixi.Graphics стоят дорого и не кэшируются, в отличие от текстур, спрайтов и так далее. А наши кресла, как сложные объекты, как раз и являются инстансами Pixi.Graphics.
Выводы
Какие выводы из этого всего можно сделать?
Чем меньше оберток — тем более гибко мы можем оптимизировать приложение.
Работа с canvas отличается от обычных рутинных задач.
Pixi заточен под более интерактивные вещи, например игры.
При разработке желательно сразу иметь большой объем данных. Например, в нашем случае надо было сразу получить схему какого-нибудь огромного концертного зала вместо зала кинотеатра.
Как открыть свой кинотеатр с нуля. Где брать фильмы для кинотеатра. Необходимое оборудование и нормативные документы для старта
Чудесный мир кино – он манит нас с детских лет. В те давние времена, когда мы были мальчишками и девчонками, каждый поход на новый фильм превращался в значительное событие. Да и сейчас этот вид искусства не потерял привлекательности. Чтобы не расставаться с детским миром мечты и получить доходный бизнес, достаточно познакомиться с бизнес-планом, как открыть свой кинотеатр с нуля, какие для этого потребуются затраты.
Виды кинотеатров
Современные технологии не обошли киноиндустрию и сферу развлечений. Сейчас в кинотеатрах можно посмотреть фильм в различных форматах: 3D, IMAX-3D, 4D-аттракционы.
В крупных городах подобные заведения оснащаются самым современным, мощным оборудованием, имеют несколько кинозалов и могут образовывать киносеть. Кроме этого, при кинотеатрах имеются превосходные места для семейного отдыха: кафе, площадки для детских игр.
Как вы думаете, что нужно для открытия кинотеатра? Прежде всего, это составление бизнес-плана. Если вы собираетесь открыть свое дело в небольшом населенном пункте, то в планировании бизнеса могут быть нюансы. Рассмотрим их подробнее.
Кинотеатр для небольшого городка
Индустрия развлечений не зря считается одной из самых прибыльных, наряду со сферой обслуживания, торговлей и сельским бизнесом. Даже в небольшом городке удачно расположенный кинотеатр найдет своих зрителей. Достаточно открыть зал, рассчитанный на пятьдесят мест. Это — не самое главное. Если вы собираетесь открыть кинотеатр в маленьком городе, надо соблюсти несколько важных требований. Все стороны настоящего бизнес-плана должны быть хорошо продуманы и рассчитаны.
Финансовые расходы
Если вы задумали осуществить постройку самого современного кинозала, то в нем должны демонстрироваться фильмы в формате 3D. Постройка самого здания потребует серьезных денежных вливаний. Как вариант – оформление аренды помещения.
В таком случае в смету затрат нужно внести плату за съемную площадь, расходы на приобретение фильмов и оплату труда сотрудников. Не стоит забывать, что пятьдесят процентов от выручки, полученной от показа фильмов, поступает прокатчику. Если сложить вместе все траты на здание и оборудование, можно ответить на вопрос, сколько стоит открыть кинотеатр.
Потребуется около 400 тысяч долларов. Кроме этого, надо учитывать, что требуется постоянно обновлять фильмы, следить за новинками, регулярно ремонтировать оборудование. Все эти моменты важны, так как позволяют создать комфортабельные условия для зрителей. Существенная часть прибыли поступает не от проката фильмов. Свою роль играют дополнительные услуги кинотеатра: продажа напитков, попкорна и др.
Необходимые документы
Предприниматель, решившийся открыть кинотеатр, обязательно должен зарегистрироваться как юридическое лицо в ИФНС. Самый оптимальный вариант правовой формы такого предприятия – общество с ограниченной ответственностью или индивидуальный предприниматель.
Есть возможность пользоваться упрощенной системой налогообложения. Затем необходимо получить разрешение на работу от санитарно-эпидемиологической и пожарной службы, а также территориального управления имуществом.
Строительство здания
Обдумывая проблему, как построить кинотеатр, можно столкнуться с немалыми затруднениями. Прежде всего, если вы планируете возводить его с нуля, требуется правильно подобрать место для строительства. Самым удачным будет соседство с крупными торговыми точками, жилыми массивами, развлекательными центрами. Рядом со зданием надо обязательно предусмотреть место для парковки автомобилей.
Можно решить проблему по-иному. Арендовать помещение с возможностью его реконструкции. Удачный вариант – снимать помещение в торгово-развлекательном комплексе. Перед тем как открыть мини-кинотеатр, нужно рассчитать его общую площадь. Он может занимать четыреста квадратных метров. Здесь разместятся все главные объекты: кинозал, помещение для аппаратуры, подсобки техперсонала, гардероб и туалеты. Для самого кинозала, рассчитанного на пятьдесят мест, хватит восьмидесяти квадратных метров, но не менее того. Потолки должны быть высокими, не ниже четырех метров.
Оборудование для кинотеатра
Если зал предназначался для 4D-аттракционов, то потребуются специальные кресла, которые во время сеанса могут изменять положение, позволяя таким образом погрузиться в мир происходящего на экране. Они могут двигаться из стороны в сторону, может появиться дым, капли дождя, создается иллюзия падения и др.
Для приобретения оборудования для кинотеатра можно обратиться в специальные компании, которые занимаются его производством и продажей. Превосходное качество обеспечивают цифровые проекторы и современные экраны. Также потребуется акустическая система. Для небольшого кинотеатра, где планируется использовать современные технологии, необходимо установить специальное оборудование для демонстрации формата 3D, который пользуется большой популярностью.
Это привлечет зрителей и повысит популярность кинотеатра. К тому же вы сможете приобретать для проката самые новые и кассовые фильмы. Для их демонстрации необходимы особые очки. Также потребуются специальный 3D экран (размерами от двух с половиной до пяти метров), проектор, набор кабелей. Для воспроизведения фильмов в модном формате потребуется кино-сервер, а также звуковое оборудование.
Обязательно оснастить кинозал удобными, комфортабельными креслами с подлокотниками. Производя подбор оборудования для кинотеатра, нельзя экономить на качестве. Обязательно отдавать предпочтение только самым удобным и комфортабельным креслам, высококачественным системам передачи звука, кинопроекторам и др.
Подбор персонала
Для небольшого кинотеатра потребуется от четырех до шести человек обслуживающего персонала. Люди будут работать посменно: убирать помещение, продавать билеты, размещать зрителей в зале. Также нужен администратор и гардеробщик. Не обойтись кинотеатру без инженера-техника, который будет демонстрировать фильмы.
Команду необходимо подбирать профессиональную, предварительно людей надо подготовить, обучить. Сотрудники обязательно должны быть вежливыми и опытными. График работы администратора – пять дней в неделю, обслуживающего персонала – посменно, с девяти до двадцати четырех часов, два дня через два. На зарплату сотрудникам уходит примерно пятнадцать процентов от оборота.
Приобретение фильмов для проката
После решения всех организационных вопросов остается самый главный – где брать фильмы для кинотеатра, чтобы они были интересны зрителям. Прежде всего, нужно заключать договор с прокатчиками фильмов. У нас в стране этим занимаются «Централ Парнершип» и «Каро-фильм», которые обладают правами на кинопродукцию.
Заявка подается заранее, так как дистрибьютор располагает ограниченным количеством копий фильма. Срок его демонстрации не может превышать трех месяцев, он оговаривается в договоре. Если упустить момент и не успеть приобрести широко разрекламированный фильм, то можно понести серьезные убытки.
Задумываясь, как открыть свой кинотеатр с нуля, необходимо обязательно учитывать, что пятьдесят процентов выручки от проката фильма будет отчисляться компании-правообладателю. По жанрам фильмы должны быть разнообразными: драмы, комедии, фантастика, мелодрамы, ужасы, боевики. Цены на билеты нужно устанавливать в зависимости от целевой аудитории и уровня ее доходов.
Чем доступнее стоимость, тем охотнее люди будут посещать кинотеатр. В небольшом кинотеатре, демонстрирующем фильмы в формате 3D, билеты будут стоить 150 рублей. Необходимо постоянно отслеживать появление новых кинолент, учитывать интересы зрителей и просчитывать кассовый успех демонстрации того или иного фильма. Поэтому целесообразно устраивать премьерные показы самых популярных кинолент (от пяти до шести в месяц). Обновлять репертуар лучше каждую неделю.
Организация работы
Очень важно в рассматриваемом бизнес-плане, как открыть свой кинотеатр с нуля, определить распорядок и организацию его работы. Конечно, для успешного функционирования предприятия необходимо позаботиться о проведении коммуникаций (электричество, вода, система канализации, отопление и кондиционирование). В фойе кинотеатра целесообразно разместить мягкие кресла, в которых зрители могут ожидать начало сеанса.
Дополнительные услуги
Как уже упоминалось выше, при кинотеатре могут функционировать точки, предоставляющие дополнительные услуги зрителям. Например, в буфете они смогут приобрести кока-колу и попкорн, посидеть в уютном кафе в ожидании фильма, детей увлечет игровая площадка.
На стенах удачным ходом будет размещение мониторов, чтобы посетители смогли посмотреть трейлеры фильмов, которые планируется демонстрировать в кинотеатре. Это привлечет зрителей и создаст дополнительную рекламу.
Какие еще бывают кинотеатры
Технологии не стоят на месте. Появился новый формат – 5D. Он позволяет демонстрировать фильмы не только с многомерным изображением высокого качества. К этому прилагаются специальные эффекты, стереозвучание и специальное оборудование. В результате у зрителя складывается полное ощущение присутствия в предлагаемом месте. Посетитель кинотеатра попадает в виртуальную реальность.
Таких кинотеатров пока очень мало. Эта ниша кинобизнеса еще не занята. Поэтому у предпринимателей есть все предпосылки для развития этой отрасли. Конечно, для фильмов в формате 5D потребуется новое оборудование. Видеопроектор должен воспроизводить изображения высокого разрешения – 1280×800 пикселей — и обеспечивать световой поток большой мощности.
Еще один выигрышный вариант – открыть кинотеатр под открытым небом. Он не потребует больших финансовых вложений. Однако существенным минусом является то, что он абсолютно не подходит для тех регионов, где холодный климат. Такой кинотеатр будет уместен в южных областях. Для его открытия потребуется аренда удобного места, приобретение оборудования, экрана и организация зрительного зала.
Рентабельность предприятия
Занятие кинобизнесом, несмотря на свою дороговизну, тем не менее приносит ощутимый доход. Средняя рентабельность предприятия – семнадцать процентов. Спустя год после того, как открыть свой кинотеатр с нуля вам удалось, прибыль может составить два миллиона. Потребуется от четырех до пяти лет, чтобы полностью окупить открытие кинотеатра.
Наполняемость залов можно подсчитывать при помощи современных электронных устройств. Например, применяют инфракрасные камеры. Такие меры позволяют отслеживать наполняемость залов. Можно рассчитать доходы, исходя из количества сеансов в день, цены на билет. Нельзя забывать о такой важной части успеха, как правильно поданная реклама. Ярко оформленные объявления в средствах массовой информации, анонсы премьер, баннеры на улицах, афиши у самого кинотеатра. Сыграют свою роль и такие услуги, как продажа и резервирование билетов через интернет-сайт.