Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 34
Наркомания скажете вы? Возможно, зато работает везде.Нет, не наркомания. Так раньше и писали игры на HTML.
Более того, только таким образом можно писать игры на HTML5 для текущего поколения Smart TV (потому что, все что может мой LG Smart TV 2012 года — это три раза в секунду очистить canvas 1280x720px).
Для сравнения канвас в разрешении 800х600 (width=«800» height=«600»), растянутый на весь экран (style=«width\height») около 50 элементов — квадратов\линий\кружочков и проч. с анимацией каждого элемента — каждый раз перерисовывается (в интервале).
PC (коллеги, linux chrome) — 220 fps
Android browser Htc One S — 60-110 fps
Ipad Mini — 60-70 fps
Iphone 4 — 45 fps
Android browser Xperia Neo — 28-30 fps
Phonegap Xperia Neo — 32-34 fps
Мой рабочий комп Windows:
Chrome 29 — 200 fps
Opera 12 — 248 fps
Opera Next 17 — 200 fps
FireFox 24 — 116 fps
Maxthon 4 — 60 fps
Safari 5.1 — 248 fps
IE 11 — не работает
Из чего можно сделать вывод, что канвасы надо немного оптимизировать Вам, ибо хоть разрешение и поболе 800х600, но не думаю, что мой телефон (xperia) 2011 года выпуска — круче в N раз, чем телевизор с интернетом =)
PC (коллеги, linux chrome) — 220 fps
Android browser Htc One S — 60-110 fps
Ipad Mini — 60-70 fps
Iphone 4 — 45 fps
Android browser Xperia Neo — 28-30 fps
Phonegap Xperia Neo — 32-34 fps
Мой рабочий комп Windows:
Chrome 29 — 200 fps
Opera 12 — 248 fps
Opera Next 17 — 200 fps
FireFox 24 — 116 fps
Maxthon 4 — 60 fps
Safari 5.1 — 248 fps
IE 11 — не работает
Из чего можно сделать вывод, что канвасы надо немного оптимизировать Вам, ибо хоть разрешение и поболе 800х600, но не думаю, что мой телефон (xperia) 2011 года выпуска — круче в N раз, чем телевизор с интернетом =)
Если у вас есть демо, то с радостью запущу его на телевизоре (пусть даже канва в 800x600, ничего не меняйте), запишу видео и выложу сюда в комментарии.
Увы, это самое самопальное демо было погребено под порывом безудержного рефакторинга =)
Вот набросал быстренько другое: jsbin.com/ItIpOpUv/1
Разрешение: 800х600
Рисуется: 800 \ 2 + 600 \ 2 линий, т.е. 550 штук раз в два пикселя
Канвас растягивается на полный экран. Выдаёт на моём рабочем компе в хроме от 180 до 197 кадров, на Xperia Neo (в браузере) — около 8-10 кадров в секунду. Может немного перестарался с количеством линий, Вы уж извините =)
Вот набросал быстренько другое: jsbin.com/ItIpOpUv/1
Разрешение: 800х600
Рисуется: 800 \ 2 + 600 \ 2 линий, т.е. 550 штук раз в два пикселя
Канвас растягивается на полный экран. Выдаёт на моём рабочем компе в хроме от 180 до 197 кадров, на Xperia Neo (в браузере) — около 8-10 кадров в секунду. Может немного перестарался с количеством линий, Вы уж извините =)
Результаты:
LG Smart TV 2012 (Netcast 3.0, модель LM640T): 0-1 FPS. Запущено как приложение, не из браузера. Фото: раз, два и три. Видео не выкладываю — совсем ничего не видно, нужно полосы толще и FPS крупнее раза в три-четыре. Вместо этого записал видео BunnyMark Pixi.JS: 3-5 FPS — ссылка.
Такие дела.
LG Smart TV 2012 (Netcast 3.0, модель LM640T): 0-1 FPS. Запущено как приложение, не из браузера. Фото: раз, два и три. Видео не выкладываю — совсем ничего не видно, нужно полосы толще и FPS крупнее раза в три-четыре. Вместо этого записал видео BunnyMark Pixi.JS: 3-5 FPS — ссылка.
Такие дела.
Теперь можно смело говорить, что не телевизорах не будет Watch Dogs! А вообще, если честно, имхо, какой-то бред играть в игры на телевизоре…
Ну, телевизоры поддерживают подключение геймпада, а в LG есть еще Magic Remote (наподобие Wiimote). Поэтому играть можно :)
Это в теории, а на практике — наверняка играть в тетрис или марио на телевизоре (мне интересно, он способен на большее?), когда есть под боком комп, предположим, со старкрафтом…
Думаю дальше можно не продолжать, мысль мою поняли =)
Думаю дальше можно не продолжать, мысль мою поняли =)
Да, как по мне на практике на телевизорах играют в игры другого плана (хотя там есть и мобильные порты от Unity), например такие:
ru.lgappstv.com/appspc/store/product/retrieveProductInfo.lge?dummy=all&appId=154387
ru.lgappstv.com/appspc/store/product/retrieveProductInfo.lge?dummy=all&appId=139619
ru.lgappstv.com/appspc/store/product/retrieveProductInfo.lge?dummy=all&appId=154387
ru.lgappstv.com/appspc/store/product/retrieveProductInfo.lge?dummy=all&appId=139619
Матерь Василиса! Сегодня получил телевизор LG 2013 года LA660 и в нем обнаружилась поддержка WebGL(!!!). BunnyMark Pixi.JS летает, 400 зайцев с 30-35 FPS.
В документации LG ни слова о WebGL, видимо он есть лишь благодаря обновленному движку WebKit, который на html5test.com идентифицируется как Chrome 22.
В документации LG ни слова о WebGL, видимо он есть лишь благодаря обновленному движку WebKit, который на html5test.com идентифицируется как Chrome 22.
Если у вас маленький экран или объект с анимацией — то следует отрисовать его через img, т.к. через смену адреса картинки можно воссоздать анимацию
Мне кажется, намного быстрее будет работать если не менять src у картинки, а показывать один длинный спрайт с чередой кадров, отрисовывая его в background какого-нибудь div-а и меняя background-position на длину или высоту кадра.
Долго думал над вашим вопросом. Использование позиционирования:
1. Поломает маштабируемость логики
2. Не будет работать в старых IE
3. Заставит разработчиков джуниоров страдать при копании в чужом коде
Два года назад я исправлял и переделывал две игры со спрайтами персонажей. Это было ужасно!
В следующей статье я напишу про конфиги, раскрою суть сборки объектов мира, и более подробно отвечу на ваш вопрос (вместе с демо примерами).
1. Поломает маштабируемость логики
2. Не будет работать в старых IE
3. Заставит разработчиков джуниоров страдать при копании в чужом коде
Два года назад я исправлял и переделывал две игры со спрайтами персонажей. Это было ужасно!
В следующей статье я напишу про конфиги, раскрою суть сборки объектов мира, и более подробно отвечу на ваш вопрос (вместе с демо примерами).
1. По первому пункту мне сложно дискутировать, так как не совсем понимаю, что вы имеете в виду.
2. Свойство background-position присутствует в css с версии CSS1 и поддерживается браузерами IE с шестой версии.
3. Код сменяющий значение background-position на ширину (высоту) кадра вряд ли будет запутаннее, чем при использовании одного спрайта. Зная расположение кадров в спрайте (горизонтальное или вертикальное), он может делать их смену автоматически (т.е. менять x или y координату свойства background-position на ширину или высоту контейнера).
То что это будет быстрее — тоже весьма очевидно. Представьте, что у вашего объекта зацикленная анимация на 100 кадров. Пролистывая их все, нам придется делать 100 запросов к веб-серверу. А перед этим еще забивать в конфиги массивы этих самых кадров. В случае с CSS-спрайтами мы грузим всего одну картинку.
2. Свойство background-position присутствует в css с версии CSS1 и поддерживается браузерами IE с шестой версии.
3. Код сменяющий значение background-position на ширину (высоту) кадра вряд ли будет запутаннее, чем при использовании одного спрайта. Зная расположение кадров в спрайте (горизонтальное или вертикальное), он может делать их смену автоматически (т.е. менять x или y координату свойства background-position на ширину или высоту контейнера).
То что это будет быстрее — тоже весьма очевидно. Представьте, что у вашего объекта зацикленная анимация на 100 кадров. Пролистывая их все, нам придется делать 100 запросов к веб-серверу. А перед этим еще забивать в конфиги массивы этих самых кадров. В случае с CSS-спрайтами мы грузим всего одну картинку.
А еще я сделал небольшое демо. По коду выглядит так, что для одного спрайта его требуется больше, но если вынести его отдельно, то в результате многое упростит. Например, нам не придется хранить где-то в конфигах массив кадров всей анимации, достаточно ссылки на один файл. Во втором примере я этот момент упростил, но в живом проекте скорее всего будут огромные конфиги с массивами вида ['object_1_frame_1.png','object_1_frame_2.png','object_1_frame_3.png' ...].
Извиняюсь за такой странный вопрос: а у вас котик радугой какает?
Если да, — то как это реализованно и как влияет на производительность?
Если да, — то как это реализованно и как влияет на производительность?
Присоединяюсь к вопросу. Как лучше в таком контексте реализовывать шлейфы? особенно постепенно гаснущие/уходящие в прозрачность. Все реализации, что я могу придумать, сводятся к большому количеству элементов.
Кстати. Порекомендовал бы взглянуть на структуру three.js, пока читал — была стойкая ассоциация с ним, уж очень много тех же терминов. Может быть, найдете пару идей, которые пригодятся.
Кстати. Порекомендовал бы взглянуть на структуру three.js, пока читал — была стойкая ассоциация с ним, уж очень много тех же терминов. Может быть, найдете пару идей, которые пригодятся.
Над этим вопросом, честно говоря не думал. Сейчас думаю как правильно сделать объект зон — он сможет сразу добавить: ветер, радиацию, взрывную волну (а значит ещё два вида оружия — мины и шахидские пояса) и объект лестниц.
Three.js и прочие штуки можно будет начать крутить, когда все будет работать на ура и возникнет необходимость третий координаты. А пока и в 2D баг на баге
*а ещё с зоной можно будет запилить гравитационную мину, которая будет всех раскидывать*
Three.js и прочие штуки можно будет начать крутить, когда все будет работать на ура и возникнет необходимость третий координаты. А пока и в 2D баг на баге
*а ещё с зоной можно будет запилить гравитационную мину, которая будет всех раскидывать*
Теоретически взрывная волна может быть абстрагирована как временная область аномальной гравитации тогда уж сама по себе — и вакуумные бомбы тогда делать можно те самые, и обычные взрывы будут наносить зональный урон + придавать импульс телу.
А по-хорошему тогда уж надо сводить все не к гравитации, а к передаче импульса за промежуток времени, правда, когда я пытался что-то подобное реализовать — запутался в абстракциях, так что меня не факт что стоит слушать :)
Относительно three.js — я больше имел ввиду взглянуть на структуру, а не на сам движок, так как там структура работы с данными очень похожа — объекты, камера, сцена… Возможно, что-то пересмотрите у себя, если наткнетесь на интересные решения в аналогичном по структуре проекте.
А по-хорошему тогда уж надо сводить все не к гравитации, а к передаче импульса за промежуток времени, правда, когда я пытался что-то подобное реализовать — запутался в абстракциях, так что меня не факт что стоит слушать :)
Относительно three.js — я больше имел ввиду взглянуть на структуру, а не на сам движок, так как там структура работы с данными очень похожа — объекты, камера, сцена… Возможно, что-то пересмотрите у себя, если наткнетесь на интересные решения в аналогичном по структуре проекте.
Спасибо за совет! three.js — посмотрю
Кстати такой момент всплыл: те кто пишут на C++ видимо познают дзен чаще других.
Когда искал информацию на форумах, адекватные люди попадались только на форумах C++`ников. Там ребята по таким темам загоняются, что и на других форумах подобного и близко не найти. Очень запомнилось обсуждение того, как они леску от удочки топили (представили её в виде множества мелких подшипников из железа, т.к. по другому она у них всплывала). Очень интересно читать, как они физику пишут и как представляют мир вокруг.
Кстати такой момент всплыл: те кто пишут на C++ видимо познают дзен чаще других.
Когда искал информацию на форумах, адекватные люди попадались только на форумах C++`ников. Там ребята по таким темам загоняются, что и на других форумах подобного и близко не найти. Очень запомнилось обсуждение того, как они леску от удочки топили (представили её в виде множества мелких подшипников из железа, т.к. по другому она у них всплывала). Очень интересно читать, как они физику пишут и как представляют мир вокруг.
Но есть и некоторые ограничения — например, объект может быть помещен только в один мир, иначе его поведение будет неадекватным (он будет реагировать на события в разных мирах).
по-моему отличное и вполне адекватное поведение. даже очень интересное в некоторых играх
Прикольно, только над багами еще поработать надо, а то в примере 1 в 4 мире удалось добиться чтобы ня-котэ вышел за пределы комнаты сквозь кирпичную стену О_О
«Психанул».jpeg
А если серьезно, то на самом деле изучать алгоритмы, создавая что-то запредельно безумное — это наилучший способ обучения. Никогда еще процесс не вызывает столько безудержного смеха.
И, кстати говоря, такие вот подвиги очень сильно стимулируют креативность.
Так что удачи и пишите еще.
Нужна рельса из квейка, рейдбоссы, дроп вещей и инвентарь :D
И можно запускать самую безумную мморпг всех времен и народов.
А если серьезно, то на самом деле изучать алгоритмы, создавая что-то запредельно безумное — это наилучший способ обучения. Никогда еще процесс не вызывает столько безудержного смеха.
И, кстати говоря, такие вот подвиги очень сильно стимулируют креативность.
Так что удачи и пишите еще.
Нужна рельса из квейка, рейдбоссы, дроп вещей и инвентарь :D
И можно запускать самую безумную мморпг всех времен и народов.
Одна из лучших статей, которые я здесь читал.
Респект за креатив, упертость и творческое безумие!
Респект за креатив, упертость и творческое безумие!
Как-то мне захотелось написать квест, где мужик ходил бы по бару и мог разговаривать с разными людьми. А события и люди в этом баре — генерировались случайно, и каждый раз перед игроком появлялась новая цель.
Была такая игрушка у Lucas Arts много-много лет назад.
UPD: Оказалось, что была ещё одна похожая игра, тоже у LucasArts.
Нашел баг :)
А первая демка работает? Ни в хроме, ни в сафари клавиши не работают.
А первая демка работает? Ни в хроме, ни в сафари клавиши не работают.
А неминифицированную версию вашего движка где можно увидеть?
Любопытно, сколько времени ушло на разработку?
В примере с киркой, после разрушения блоков и падения на землю: Земля копается не блоками, а слоями. Прямо-таки тетрис какой.
Это связано с тем, что каждый слой земли это один объединенный объект или баги в логике?
Это связано с тем, что каждый слой земли это один объединенный объект или баги в логике?
скорее всего один объект, об этом в статье упоминалось.
Да упоминалось, но там речь шла об одном DOM объекте при «рендеринге»(!).
И тогда получается, что либо автор «схалтурил» при создании карты — это все нормально и понятно — просто пример.
Либо же, это баг из-за нарушения принципов ООП. Получается так: Воздействие -> DOM объекты -> экзепляры -> Отрисовка через DOM, хотя по хорошему игрок должен взаимодействовать с экземплярами объектов напрямую, а через что там происходит рендеринг — уже не важно.
Я с трудом представляю, что там творится внутри браузера(только общие представления о web-разработке), возможно я не прав. Но с точки зрения программирования должно быть именно так.
И тогда получается, что либо автор «схалтурил» при создании карты — это все нормально и понятно — просто пример.
Либо же, это баг из-за нарушения принципов ООП. Получается так: Воздействие -> DOM объекты -> экзепляры -> Отрисовка через DOM, хотя по хорошему игрок должен взаимодействовать с экземплярами объектов напрямую, а через что там происходит рендеринг — уже не важно.
Я с трудом представляю, что там творится внутри браузера(только общие представления о web-разработке), возможно я не прав. Но с точки зрения программирования должно быть именно так.
> «схалтурил» при создании карты
Первые два слоя земли — это просто два больших пласта. Рисовать эти слои мелкими кубами было лень. На самом деле у объектов есть ещё свойство неразрушаемости. По нормальному надо было задать это свойство для нижних пластов, чтобы останавливать бесконечное копание вниз. Рассказ о картах и их создании будет в следующих статьях.
> по хорошему игрок должен взаимодействовать с экземплярами объектов напрямую, а через что там происходит рендеринг — уже не важно.
так оно и есть, иначе бы не получилось сделать демо с разными камерами смотрящими на один мир
Первые два слоя земли — это просто два больших пласта. Рисовать эти слои мелкими кубами было лень. На самом деле у объектов есть ещё свойство неразрушаемости. По нормальному надо было задать это свойство для нижних пластов, чтобы останавливать бесконечное копание вниз. Рассказ о картах и их создании будет в следующих статьях.
> по хорошему игрок должен взаимодействовать с экземплярами объектов напрямую, а через что там происходит рендеринг — уже не важно.
так оно и есть, иначе бы не получилось сделать демо с разными камерами смотрящими на один мир
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создание гравитационной и портальной пушки. Как правильно убить персонажа в машине и создать теплый вязаный интерфейс