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

в 10:24, , рубрики: javascript, jquery, Веб-разработка, онлайн игры, метки: ,

Книга первая: Создание OpenSourse проекта

Продолжу тему описанную в статье «14 Способов сделать вклад в открытое программное обеспечение, не будучи Гениальным Программистом или Рок-Звездой» habrahabr.ru/post/147220/, но немного в другом ключе!

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

Этап первый: Идея

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

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

Давайте немного пофантазируем! Как хорошо было бы, если имелось такое приложения благодаря которому можно было бы с лёгкостью создавать векторную анимацию для внедрения в браузер. Конечно это не полная замена FLASH, но для создания баннеров, анимации некоторых деталей страницы, созданию игр, и многих других мультимедийных элементов, управляемых при помощи javascript очень бы пригодилось. Как было бы хорошо, если нарисовав персонаж со скелетной структурой можно было бы передавать ему некоторые параметры и управлять им и его поведением на странице пользователя. А если объеденить это всё с сервером на node.js, то вполне можно организовать многопользовательские игры, и, устроить неординарное общение администрации сайта со своими клиентами! Например через симпатичного человечка. Ну, как? Впечатляет!? Тогда переходим ко второму этапу.

Этап второй: Скелет системы

Идея есть, теперь необходимо решить, как всё это у нас будет работать! Так как данный этап требует мозгового штурма, собрав мнение из ваших комментариев будет составлен основной план разработки, общее описание которого будет выложено в следующей статье.

Для начала предложу свою версию! Что необходимо для системы…

Блоки и Слои.
Все элементы должны делиться на блоки и слои. Каждый блок может иметь свой список слоёв, и в любом слое может находится блок со своими слоями. Для того чтобы двигая блок слоёв можно было бы перемещать все внутренние части.

Стоит ли использовать jquery или другой фреймворк? (перевод: блок — это единный объект внутри которого могут быть свои слои с анимацией. Например, делаем изображение в котором идет дождь, — рисуем блок с летящими каплями и дублируем его много раз в разных местах, вот и получается дождь!), а слои они и в африке слои!

Кости.
Слои и блоки необходимо связывать при помощи костей. Для управления ими через скрипт

... В основном все объекты векторные, но можно подключать изображения, аудио и видео, например чтобы можно сделать было какую-то анимацию, предположим чтоб кто-то пробегал и на стене белую кляксу ставил, а уже в этой кляксе видео проигрывалось.

Данные подгружаются как и при загрузке приложения, так и по ходу выполнения (заранее), чтобы общий вид был целостным. Например, сперва загружается основа, то есть ядро системы, с первыми моментами анимации, а потом по ходу работы подгружаются нужные данные. А то вдруг самих изображений будет на 200 метров, кто же их дождется то!? :(

Каким образом лучше хранить и передавать данные? Я думаю, что лучше через JSON прямым потоком данных.
Но пока не знаю на чем остановиться 100-процентно, так как в каком формате будут храниться данные для генерации анимации, потому что программы будет две, мне пока окончательно не понятно.
Первая программа — это редактор, через который всё это делается, вторая — это скрипт, который отображает всё что сделано в редакторе, но для этого нужен единый формат для записи и чтения! Кроме JSONa ничего пока не приходит в голову.

Нужно создать возможность работы с сервером, как в автоматическом режиме (то есть запрос — ответ, по типу аськи), так и в прямом (то есть подавая запрос на сервер, мы управляем скриптом в браузере, — типа посетитель к нам зашёл, мы его видим, что он сейчас на сайте, и созданная программа даёт команду человечку чтобы он, например, выбежал в верхней части страницы, и поприветствовал пользователя, или чтоб он что-нибудь предложил пользователю!

Редактор — это одна из основных частей с помощью которой можно будет создавать что-то в этом приложении. В редакторе можно рисовать, создавать мульты, писать скрипты и так далее.

Основные цели:
— минималистичный размер кода с подгрузкой необходимых частей скрипта по мере необходимости, чтобы ядро весило не много так как все функции не будут использоваться, если нужен дополнительный функционал тогда он подгружается, если доп функционала не требуется, тогда все остается на своих местах.
— по возможности загрузка скрипта, анимации с мельтимедиа данным — одним файлом! То есть не куча отдельных, сотня фоток и две музыки, а один файл в которой всё это находится.
— для рендеринга стоит использовать видеокарту пользователя для увеличения возможностей скрипта. Чтобы не напрягать браузер и вызывать тотальные подвисания, плюс, через карту, так как там мощности в разы побольше, можно сконструировать полноценные 3D игры, так как ей мощности хватит.

В итоге можно сделать совместными усилиями мощную программу для WEBa, типа web4.0 :))))

Лицензия будет самая открытая, то есть делать с такой программой можно всё что угодно и кому угодно (какая под это все походит, будет выбрана в ближайшее время)

Этап третий: Разработка

Для разработки удобнее всего будет использовать github. По функционалу он более всего подходит! Для новичков описание, что это такое и как оно работает, будет в следующей статье.

А теперь вопрос всему хабрасообществу «Как назвать данное приложение?»

Все варианты будут учтены и выбран самый популярный! Проект на данный момент находится по адресу github.com/xamelion/newproject и абсолютно пустой!

Автор: xamelion


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js