Pull to refresh

Прототипирование игр с помощью JavaScript и CSS3

Reading time 2 min
Views 3.6K
Original author: TJ Holowaychuk
Я хотел бы поделиться прототипом игры, созданным всего за несколько часов. Надеюсь, что он вдохновит нескольких из вас! В индустрии однопользовательских браузерных игр, кажется, очень не хватает воображения и умения рассказывать истории, хотя, возможно, я просто не заметил таких игр ;), но мне не хватает таких игр, как Grim Fandango.

Ниже приведен скриншот из демонстрации, состоящей из нескольких узлов DOM, представляющих составные части главного героя, птиц и сцену. Большинство анимаций осуществляется CSS-переходами/анимациями, некоторые из которых являются динамическими и используют библиотеку move.js.

image

Я пока ещё не занимался профилированием чего-либо, но эта демонстрация работает без единого разрыва достаточно плавно, и есть множество аспектов, которые можно оптимизировать, начиная просто с выкидывания jQuery.

Игра под iPhone


Возвращаясь к оригинальному плану создания игры, — примерно за пару лет до выхода iPad я писал на Objective-C игру для iPhone с использованием Cocos2d и физического движка Chipmunk, парой действительно злобных библиотек. iPhone казался слишком маленьким, и в то время разрешение было недостаточно большим, не говоря уже об ограничениях на размер изображений, диктуемых Apple, так что я сдался после нескольких прототипов, включая один прототип на полноэкранный ПК.

image

Игра в браузере


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

Первый прототип, который я написал, был создан исключительно с использованием Canvas. Одно из главных преимуществ, которое вы имеете, — определённый уровень контроля, что позволяет очень легко реализовать такие возможности, как постановку на паузу, применение пост-процессинга, или специальные операции, которые сложно выполнить с использованием DOM.

Сначала я был очень доволен результатом, пока не написал прототип с использованием CSS3 и HTML; влияние на производительность было довольно значительным (хотя я не использовал грязные прямоугольники и другие техники). Некоторые аспекты игры значительно проще реализовать с использованием DOM, например, используя Z-индекс и CSS-переходы, хотя, к сожалению, постановка сцены на паузу и пост-обработка стали серьезными проблемами. По крайней мере, с текущим состоянием браузерных технологий, хорошей идеей является их смешивание и сочетание. Вы можете построить большую часть вашей игры, используя DOM, а для таких деталей, как излучатели частиц, использовать Canvas или, возможно, даже шейдеры WebGL, как в этой удивительной демонстрации.

Демонстрация


Часть интерактивных возможностей, а также крохотный инструмент для построения сцены вы можете увидеть на этом видео: http://www.screenr.com/ZfMs.

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

Исходные тексты


Вы можете забрать исходники с GitHub. Маякайте мне, если вы создадите какие-нибудь классные прототипы!

Концепты


Чуть больше концепт-арта:

image

image

image
Tags:
Hubs:
+49
Comments 25
Comments Comments 25

Articles