Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Управляйте маятником, чтобы построить самую высокую (и устойчивую) башню из падающих сверху постов. Следите за временем на каждый бросок по полоске справа: если она закончится, пост упадет мимо башни.

Башня

Аркады, Строительство, На ловкость

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Webgl

С этим тегом используют

Gamedev Все
35 постов сначала свежее
11
andarky
andarky
3 года назад

Сегодня день 3D-шника :)⁠⁠

С праздником Друзья!

Те кто связан с моделингом, текстурированием, Unity3d, UE, WebGg, treeJS, архитекторы, художники, конструкторы, дизайнеры!


Можем сегодня смело напиваться! Тем более что сегодня ПЯТНИЦА :)

Сегодня день 3D-шника :) Праздники, 3D моделирование, 3D печать, Blender, 3ds Max, 3D графика, 3D анимация, Unity3D, Webgl, Компьютерная графика, Рендер, Rigging, Гифка
[моё] Праздники 3D моделирование 3D печать Blender 3ds Max 3D графика 3D анимация Unity3D Webgl Компьютерная графика Рендер Rigging Гифка
0
14asdf
14asdf
4 года назад

Серьезный дизайн⁠⁠

serious design

[моё] 3D анимация Webgl Видео
3
11
webvkube
4 года назад
Web-технологии

Следующие 3 урока по three.js. Продолжаем разбирать основы⁠⁠

Предыдущие части можно найти на канале.
Группа проекта https://vk.com/kurspothreejs

Показать полностью 2
[моё] Threejs Урок Javascript Webgl 3D Видео
0
3
DELETED
4 года назад
CGI Media

Взываю к 3D сообществу и знатокам⁠⁠

Добрый день товарищи, уже который день не дает мне покоя один вопрос, перечитано уже кучу всех возможных форумов, пересмотрено еще больше видео, как полезных, так и не очень, но так и не сумел найти его решение. Суть вопроса: есть желание, а точнее даже так, сказать нужда, сделать анимацию аналогичную (а если получится может и лучше) той что на видео ниже (Время с 1:10 по 1:15 [маршрутный режим съемки], а вот сложность заключается в том, что сделать это хочу полностью в Blender (3D) и не рендер, а интерактивную модель на webgl, взялся изучать аддон blend4web, вроде как с ним подразобрался, но вот саму анимацию и как её реализовать мозгов уже не хватает. Так вот перейду к сути самого вопроса, как можно что-то похожее реализовать на возможностях blender так сказать из коробки не прибегая к сторонним аддонам, да чтоб вышло это в какое нибудь количество анимаций, управлять я ими вроде как могу (запускать, останавливать, да т.п.).

Надеюсь понятно истолковал свою просьбу, буду рад любым советам и идеям, знаниями в 3d не блещу, но стараюсь изучать, так что не пугайтесь моей глупости).

По старинке пост для минусов внутри.

Время анимации с 1:10 по 1:15

[моё] 3D Анимация Вопрос Просьба Помощь Blender Blend4web Webgl Видео
4
12
ArtemARVR
ArtemARVR
5 лет назад

ТОП 10 примеров WebGL технологий⁠⁠

Технологии дополненной и виртуальной реальности постоянно развиваются, но мало, кто знает про такую возможность как Web VR, которая позволяет при помощи различных адаптивных блоков размещать на своем сайте как целый 3D мир, так и отдельные 3D объекты. Использование Web VR увеличивает время нахождения пользователей на сайте и тем самым повышает сайт в поисковой выдаче благодаря поведенческому фактору, что делает эту технологию отличным инструментом для SEO специалиста.

Что такое WebGL


Согласно википедии, WebGL (Web-based Graphics Library) — кроссплатформенный API для 3D-графики в браузере, разрабатываемый некоммерческой организацией-консорциумом Khronos Group, куда, кстати, входят такие ведущие разработчики браузеров как Google (Chrome), Mozilla (Firefox), и Apple (Safari).


Простыми словами WebGl - это JavaScript API, позволяющий воспроизводить 3D объекты(со всеми настройками света, текстуры и материалов) без использования сторонних плагинов и позволяющая использовать устройства виртуальной реальности (Goole Cardboard, HTC Vive, Oculus и другие) для просмотра VR контента прямо в браузере. При этом, если у пользователя нет оборудования виртуальной реальности, он без проблема может наслаждаться контентом в режиме просмотра 360.


Мы давно занимаемся разработкой дополненной и виртуальной реальности и решили подготовить ТОП 10 примеров с применением WebGl технологии.

1. Дворец Спонца

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Невероятные возможности по запеканию света и текстур от фреймворка Baylon.js. В этом примере вы увидите часть дворца Спонца в Хорватии, воссозданного в браузере без необходимости скачивать какие-либо приложения или утилиты. Окунитесь в мир виртуальной реальности без специального оборудования.

Наглядный пример того, какими возможностями обладает фреймворк Babylon.js. Здесь вы обнаружите потрясающую реалистичную графику, причем она будет корректно отображаться во всех демоверсиях WebVR.

Ссылка на проект Дворец Спонжа


2. 3D Web модель с возможностью кастомизации

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

В этом примере представлена 3D модель обуви, которую можно видоизменять согласно собственным предпочтения, реализуя свои скрытые дизайнерские таланты. Отличное решение для демонстрации 3D моделей, которых просто еще не существует. Написано при помощи Babylon.js.

Ссылка на проект 3D обуви


3. Игра бластер от Mozilla VR
ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

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

Ссылка на проект Mozilla VR


4. Konterball WebGl

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

настольный теннис прямо у Вас в барузере. Выбирайте режим(одиночный или многопользовательский) и начинайте свое путешествие в мир большого спорта. Играйте, учитесь и побеждайте. Используемые библиотеки deepstream.io и three.js, cannon.js.

Ссылка на проект Теннис VR


5. Галерея VR у Вас в браузере

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Сейчас, в условиях карантина, посещение мест скопления людей крайне нежелательно, но стремление к великому никто не отменял. В этом примере вы окажетесь в картинной галерее и сможете изучить творения еще не самых известных художников в окне своего браузера. Материалы и текстуры 3D галереи настроены очень качественно, создавая эффект виртуальной реальности. Использован Unity WebGl.

Ссылка на проект Галерея 3D


6. Opera North

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Как прорекламировать театральное представление, не раскрывая спойлеров и создав ощущение таинственности? Яркое решение с использованием библиотеки thee.js окунет Вас в волшебный мир остросюжетного триллера в виртуальной реальности.

Ссылка на проект Opera North


7. Игра Web Race

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Еще один пример с использованием библиотеки three.js, в котором вы сможете управлять гоночными машинами в дневном и ночном режиме. У Вас будет на выбор две 3D модели машин Gallardo и Veyron, выполненные с высокой степенью детализации. Меняйте камеры обзора и создавайте свои гоночные трейлеры.

Ссылка на проект игры Web Race



8. Dance Time
ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Этот проект сложно описать словами. Просто переходите по ссылке и Вы все поймете.

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

Ссылка на проект Dance time



9. Веб-игра Учимся летать
ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

Квадратные здания, ночь, Вы играете за пингвина, который учится летать. Управляйте стрелками, избегайте столкновений и пролетите как можно дольше. Игра не отличается качественной 3D графикой, но захватывает своей простой механикой. Очередная мини-игра на технологии WebGl.

Ссылка на проект веб-игры Учимся летать


10. 3D Вода в WebGL

ТОП 10 примеров WebGL технологий Дополненная реальность, Виртуальная реальность, Web, Длиннопост, Webgl

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

Ссылка на проект воды в WebGl

Заключение

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

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

Показать полностью 10
[моё] Дополненная реальность Виртуальная реальность Web Длиннопост Webgl
2
809
Doctor911
Doctor911
6 лет назад
Серия Космические Скауты

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы»⁠⁠

Привет, читатели! И привет, подписчики! В комментариях к предыдущему посту я кормил вас завтраками на протяжении почти десяти месяцев, и вот наконец-то свершилось: этот пост - для вас.

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост

0. Предисловие


В предыдущем посте я рассказывал о том, с чего начался мой путь разработчика браузерной онлайн-игрушки. Пост был спонтанным и сумбурным, да и о создаваемой на тот момент игре было почти нечего рассказывать, так как она была в полусыром состоянии.


В декабре прошлого года разработку игры пришлось приостановить, поскольку меня посетила идея нового проекта: браузерной многопользовательской версии «Космических Рейнджеров», и я принялся за работу.

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост

1. Рейнджеры? Браузерные? Многопользовательские? Из мыльницы? Конечно, буду!

Болезнь чекумаш. Эффект: Наличие в космосе нереальных объектов: бредовых планет, туманностей. Потусторонние звуки, взывающие к зараженному. Сильного негативного влияния не оказывает.

Играя в «Рейнджеров» в первый/пятый/десятый/пятидесятый раз, я всё время думал о том, как же этой игре не хватает мультиплеера. Так хотелось с друзьями коллективно грабить корованы, отжимать грузы у торгашей, отбиваться от вояк, чинить беспредел в Галактике и иногда делать вылазки в доминаторские системы, чтобы разжиться оборудованием для более плодотворного посева раздора.


Есть такая болезнь в «Рейнджерах», вызывающая глюки, чекумаш называется. Подхватив её, можно повстречать в космосе странные объекты, космические базы, туманности, даже Звезду Смерти. Увидев многопользовательскую версию «Рейнджеров», можно решить, что всё, этот ваш чекумаш подкрался незаметно и нужно срочно проходить курс уринотерапии, но нет: работа над браузерной версией игры действительно скоро будет завершена. К разработке я подошёл с большим энтузиазмом и стараюсь реализовать все основные аспекты оригинальной игры, а также привнести кое-что новое.

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост
«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост

2. Фишки и плюшки

- Желаете ли ознакомиться с правилами Иикэ-Бааны? - чиновник явно над вами издевался, демонстрируя своё презрение к вашим беспочвенным претензиям на титул Чемпиона.
- Конечно, хочу! А то вдруг вы и в правилах что-нибудь поменяли, как и в сроках проведения Чемпионата…

Думаю, многим из тех, кто досюда дочитал, не нужно рассказывать об игровом процессе оригинальной игры. Космические пошаговые бои, межзвёздные прыжки, торговля и ремонт на планетах и базах, всё это присутствует и в «Космических Рейнджерах Онлайн» (далее просто КРО). Лучше поведаю про свою отсебятину, одна часть которой уже реализована, а другая часть только витает в виде идей, над которыми ещё надо поработать.


- ИГРОВОЙ ПРОЦЕСС


Геймплей, интерфейс, управление - всё взято из оригинальной игры, за тем лишь исключением, что ходы делаются в автоматическом режиме. Я прикинул, что 60-90 секунд на ход достаточно, чтобы спланировать дальнейшие действия, и не очень много, чтобы беситься и кричать «ДАВАЙ! БЫСТРЕЙ! ЁКАРНЫЙ БАБАЙ, ЖМИ!!!1». Таймер един для всей Галактики, т.е. смена ходов происходит одновременно во всех системах. Таймер будет отображаться внизу экрана, рядом с балансом, свободным местом и галактическим временем.


В оригинальной игре уничтожение корабля означало смерть персонажа и, соответственно, конец игрового процесса. В ММО, разумеется, такое недопустимо. Корабль игрока, конечно же, по-прежнему можно уничтожить и сам игрок погибнет, но не насовсем. Помните, как в Mass Effect церберовцы восстановили убитого Шепарда? А в Borderlands с аппаратами для воскрешения играли? Так же и в КРО, игрок после поражения в бою будет восстановлен на ближайшей медицинской станции. Жизнь великого рейнджера не закончится, хоть с его счёта и спишется 5% от имеющейся в наличии суммы денег, а сам он с небольшим шансом схлопочет в довесок какую-нибудь болезнь (которую, в общем-то, сразу можно будет вылечить на той же станции, выложив копеечку за курс живительной уринотерапии). Поэтому храните деньги в сберегательной кассе в виде вкладов в бизнес-центрах. Если, конечно, они у вас есть.


В КРО игроки стартуют в Солнечной системе, расположенной в центре галактической карты. Коалиция затратила колоссальные ресурсы на разработку и строительство САПОГ® (Системы Автоматического Подавление ОГня): комплекс, расположенный на Земле, управляет сотнями небольших транснептуновых космических станций, образующих кольцо, в пределах которого действует излучение Кварксона-Хаммбонда. В космическом пространстве излучение препятствует детонации снарядов, генерации когерентных, монохроматических, поляризованных и узконаправленных потоков излучения определённой сигнатуры, выбросу тахионов; иными словами, не даёт оружию производить выстрел. Соорудить подобный защитный комплекс стоило невиданных средств, и повторить подобное в других системах Коалиция не готова: иначе просто не останется ресурсов на ведение войны с доминаторами, да ещё и пираты эти масла в огонь подливают... Нет, САПОГ, конечно, обошёлся дешевле, чем стадион для чемпионата Галактики по хэчболу, но сами понимаете - война войной, а чемпионат по расписанию.


Короче говоря, окрестности Солнца - свободная от PvP и PvE зона. Оружие не стреляет, все живут в мире и согласии, приторговывают, пользуются услугами находящихся в системе баз: научного центра, военной станции, центра рейнджеров, бизнес-центра и медицинской станции. Пиратскую базу Коалиция в Солнечную систему не допустила, да те и сами не особо горели желанием: что толку от системы, если там нельзя грабить и убивать? Но отсиживаться всем в одной системе скучно, да и опасно. Такими темпами доминаторы доберутся и до Солнца, найдут способ отключить САПОГ и в итоге разрушат последний оплот Коалиции в Галактике.

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост

Сама Галактика разбита на три сектора, подконтрольные Коалиции, пиратам и доминаторам. И чем дальше в лес, тем толще партизаны, то бишь чем дальше от Солнца расположена система, тем более сильные бойцы там обитают. Крутые пираты предпочитают держаться подальше от переменчивого Центра, выбирая для себя более безопасные погрязшие в беззаконии системы. Коалиция сосредотачивает силы на внешнем кольце для защиты периметра от вторжений извне. Наиболее мощные доминаторы плотно засели в дальних системах, направляя более значительные силы их удержанию, чем контролю над центральными системами.

Пограничные районы между секторами - горячие точки, где системы то и дело переходят из рук в руки. Доминаторы теснят пиратов и Коалицию; пираты наседают на Коалицию и даже иногда освобождают доминаторские системы (больше систем без доминаторов - больше возможностей для грабежа!); Коалиция отбивается от доминаторов и пиратов, тщетно пытаясь вернуть в Галактику былые мир и порядок.


В оригинальных «Рейнджерах» очки опыта были нужны, чтобы получать новые звания на военных или пиратских базах. В КРО очки нужны для достижения новых уровней. Более высокий уровень позволяет игроку пользоваться более совершенным оборудованием, что упрощает продвижение к краям Галактики. Как было сказано, крутые парни тусуются на окраинах, и планеты отдалённых систем более развиты в техническом плане, чтобы обеспечивать контролирующие их силы соответствующей техникой. Пилотам-новичкам безопаснее держаться центральных систем, накапливая силу и опыт.


- ФРАКЦИИ


Суть такова. Пользователь может играть лесными эльфами, охраной дворца и злодеем на стороне либо Коалиции, либо пиратов, ну или быть нейтралом. Принадлежность к фракции определяется деятельностью игрока. За определённые действия игрок получает очки пиратства, торговли и войны.


Очки пиратства даются за атаку, грабёж и уничтожение мирных и военных кораблей.

Очки торговли даются за (внезапно) торговлю и защиту своего груза от пиратов.

Очки войны даются за атаку и уничтожение пиратов и доминаторов.


Каждая фракция содержит нескольких классов характеров. К примеру, если у игрока подавляющее большинство очков составляют очки пиратства, то он становится Паханом, а если он ещё и приторговывает, то Бандитом или Корсаром. Героем может стать тот, кто посвятил себя войне, а Магнатом - тот, кто живёт торговлей. От того, насколько «чистое» звание игрока, зависит и отношение фракций. За простым Рейдером не станут гоняться военные, тогда как на Пахана может быть открыта самая настоящая охота; но и пиратская фракция не бросит своего Пахана и всегда будет спешить ему на помощь при малейшей угрозе. Торговых Магнатов всегда будут защищать нейтралы и военные, а Герою на подмогу придут как военные, так и рейнджеры.


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


- КЛАНЫ


Игроки одной фракции смогут объединяться, создавая кланы. Это могут быть коалиционные или пиратские объединения.

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


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

- системы под контролем Коалиции делают наценку в 5% на все товары для пиратов;

- захваченные пиратами системы делают наценку в 5% на все товары для не-пиратов.

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


Ну и где кланы, там и межклановые войны. Пират из клана «Плюгавые» грабанёт рейнджера из клана «Светлые Паладины Света», соклановцы рейнджера толпой отмудохают пирата, тот позовёт на помощь других хулиганов и всё заверте... Чтобы кланы не принимали абы кого, а тщательно рассматривали каждую кандидатуру, будет введена прогрессивная шкала налога на вступление. Сначала вступление стоит копейки, но с каждым новым игроком стоимость увеличивается, скажем, на 50%. Т.е. чтобы взять игрока в клан, сначала платится 10.000 кредитов. Потом 15.000. Десятый игрок обойдётся казне уже в 57.000, а пятнадцатый в 437.000 кредитов. Объясним это так: деньги условно тратятся на совершенствование ангара Доминиона и систем жизнеобеспечения, на шоколадки и полотенца в номера и т.п.


- ПРОФЕССИИ


Игроки могут приобретать лицензии для осуществления различной деятельности.


Торговая лицензия позволяет игроку открыть на планете магазин, продавать технику и покупать её с рук.


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


На пиратской базе можно приобрести «лицензию» на получение секретной информации. Лицензией это сложно назвать, конечно - по сути это плата пиратскому братству за то, чтобы оно собирало и передавало любые ценные сведения об игровом процессе. На кого готовится покушение, какие планеты строят новый флот, какой клан готовит вторжение и куда - всё это можно узнать от подкупленных пиратов. Подобная информация может быть полезной при планировании кланами будущих действий.


Профессия ремонтника позволяет чинить корпуса и оборудование игроков прямо в космосе. Весьма актуально во время ожесточённых битв.


- ПРАВИТЕЛЬСТВЕННЫЕ ЗАДАНИЯ


Задания есть двух видов: доставка грузов и заказ на убийство. Хороший способ заработать деньжат на новый движок и пару пушек.


- ЧАТ


Чат - это... ну, это чат. В нём можно чатиться. Вот, есть даже скриншот с чатом, в котором уже кто-то початился. Ещё там есть чат-лист. Можно переключаться между чатами: чат галактики (читают все), чат системы и панель личных чатов между игроками. Чат можно свернуть, спрятать и потаскать по экрану. От обилия слова «чат» захотелось дёрнуть стопку чачи и сплясать ча-ча-ча.

«Космические Рейнджеры Онлайн» - браузерная многопользовательская адаптация старой доброй игры «КР2: Доминаторы» Космические рейнджеры, MMO, Браузерные игры, Gamedev, Webgl, Web-программирование, Игры, Гифка, Длиннопост

3. И где? И когда? ©

Представьте, что вы испытываете малокский истребитель "Шмель". Прямо на вас летит сумасшедший ремонтный робот, вооруженный фотонным резаком. Вы решаете расстрелять робота из орудий, но из-за неисправности прицела все выстрелы уходят мимо цели. Тогда вы хотите уйти в облака, но рычаг набора высоты заклинивает. Вы пытаетесь взять робота под свой контроль с помощью известного вам хакерского кода, но обнаруживаете, что в передатчике сели батарейки. А робот уже совсем рядом!!! В отчаянии вы нажимаете на кнопку катапультирования, и на табло высвечивается надпись: "Данное действие приведет к безвозвратной потере боевой машины. Оно допустимо только в чрезвычайной ситуации. Для подтверждения ваших полномочий введите свой идентификационный номер, персональный пароль и код чрезвычайной ситуации". Ну и что вы после этого думаете о вашем начальстве?

Именно на такой разваливающийся истребитель смахивает сейчас игра. Да, уже работают перелёты, посадки и взлёты с планет и баз, магазины, рынки, инвентари, боевая система, чат, настроены ИИ ботов и генерация нового оборудования на планетах, работает ценообразование. Но я хочу превратить игру если не в величественный гаальский флагман Хаа-Монгер, то хотя бы в крепкий малокский Каргас. Нужно ещё некоторое время, чтобы исправить кое-какие баги, добавить правительственные задания, настроить работу космических баз и отладить систему набора очков опыта и характера. Когда хотя бы это будет готово, буду запускать открытое тестирование. Также я пока не брался за ракетное оружие, есть там пара проблем с расчётом траекторий, но в перспективе это будет решено. Ещё подбор контейнеров в космосе доступен только в начале хода - пока что нельзя захватывать предметы на лету.


Нужна ещё пара-тройка недель для того, чтобы открывать для тестирования не сырой продукт. Хотя как показывает практика, сроки могут подрастянуться. Помимо разработки игры мне приходится иногда и работать, чтобы не помереть с голоду, поэтому чёткого временного плана нет.

4. Начинка

Перед вами открылся портал о компьютерных технологиях. Здесь Убил "Нейро" Гайдс рассказывал о новейших квазинейронных компьютерах и их модификациях. Большую долю статьи занимали рекомендации по обслуживанию систем, диагностике и устранению различного рода проблем.

Пара слов о том, как всё устроено.


В основе взаимодействия пользователя и сервера лежит технология WebSocket. WebSocket - протокол связи, предназначенный для обмена данными между браузером и веб-сервером в режиме реального времени. WebSocket-сервер, использующий библиотеку Ratchet, написан на PHP, как и весь бекенд. Благодаря этой технологии действия, выполняемые игроками, тут же обрабатываются сервером, и результат мгновенно отсылается всем, кто находится в игре: сообщения в чате, покупки предметов в магазинах, проложенные траектории полёта и прочее.


Во фронтенде используются JS-библиотеки jQuery и Three.js. Three.js упрощает работу с WebGL (Web-based Graphics Library) - библиотекой, позволяющей создавать на JavaScript интерактивную 3D-графику. За счёт использования низкоуровневых средств поддержки OpenGL часть кода на WebGL может выполняться непосредственно на видеокартах. Если погуглить, можно найти фантастические примеры использования данной технологии. Даже первую Кваку уже портировали в браузеры, во до чего прогресс дошёл.


Поиграть в КРО будет невозможно в том случае, если браузер не поддерживает веб-сокеты или HTML5 c элементом canvas. Но они поддерживаются всеми современными браузерами, кроме некоторых мобильных, так что не пугайтесь. Всё будет хорошо!

5. Послесловие

Рано утром на планету прибыла комиссия. После беглого осмотра базы было вынесено постановление:
«Остов форпоста удовлетворяет требованиям комиссии, однако отделка не завершена.»
Мда. Провода висят, меланитовая побелка отваливается прямо на глазах - ну куда это годится. Нужно было больше внимания уделить отделке базы. Впрочем, теперь уже поздно об этом думать - задание вы провалили.

Почему я пишу пост, не закончив разработку? Во-первых, у меня аж 41 подписчик, я ощущаю перед ними некую ответственность, что ли. Во-вторых, хочется узнать число тех, кому интересна задумка. А то жаль будет, если окажется, что во всей моей виртуальной Галактике будут летать одни боты да я. Сразу обмолвлюсь: я совершенно не желаю вводить лютый донат, без которого даже с планеты не стартанёшь, и превращать игру в «плати и побеждай». И вообще ни о каких платных услугах уж точно не может быть речи, пока не будут реализованы и протестированы все идеи и достигнуты сбалансированность, стабильность и удобство игрового процесса. Весь проект строится исключительно на энтузиазме, и я хочу нести людям свет, добро и котиков пенчекряков.


Было бы здорово услышать от вас, читатели, пожелания, предложения и критику вышеописанного.

А чтобы быть в курсе всех будущих вестей и участвовать в голосованиях по тем или иным вопросам: vk.com/k.r.online

Спасибо за внимание!

Показать полностью 5
[моё] Космические рейнджеры MMO Браузерные игры Gamedev Webgl Web-программирование Игры Гифка Длиннопост
203
35
MihailM
MihailM
7 лет назад
Лига Разработчиков Видеоигр

Оживший кексик. Как делалась игра.⁠⁠

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Как и обещал, в продолжение предыдущего поста (ссылка), сделал пост о создании игры.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

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

Идея для игры взялась можно сказать из ниоткуда. В очередной раз изучая инструменты, которыми можно реализовать интерактив в html, решил попробовать сделать что-то с пикабушным кексиком, как-то его оживить, для того чтобы опробовать, что вообще можно сделать на js и WebGL. Не буду рассказывать подробно о способах реализации, эта тема достойна отдельного разговора, и я не считаю себя достаточно опытным чтобы кого-то учить как писать код. Расскажу о том, какие идеи, и как были реализованы в игре.


Итак, взял я кексика, и подумал, как же его «оживить». Ну и для начала приделал ему глаза. Потом подумал над тем как же ему перемещаться в пространстве и приделал ему руки и ноги. Получилось забавно. Он у меня начал ходить, прыгать и смотреть на курсор. Собственно так и был определён его размер, и дальше все элементы игры я подстраивал, ориентируясь на него.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Но этого показалось мало. Должна же быть у него какая-то изюминка, суперсила? Внимательно его осмотрев, пришёл к выводу что у обычного кекса с начинкой «суперсила» может быть только одна, его можно приклеить этой начинкой к чему-то. А раз у меня получается «платформер», то приклеиваться он будет к любым «твёрдым» поверхностям, которые он может достать. И начались пляски с бубном, тригонометрия, декартовы и полярные координаты, вобщем жесть. Отдельно решался вопрос о том, чтобы он мог поворачиваться, когда приклеен. Собственно вот такие формулы решают эту задачу.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Ну и естественно, для реализации базовых функций потребовалось разделить персонажа на несколько спрайтов. Причём за приклейку отвечает именно спрайт-джем сверху. Так оказалось удобнее.

Вот как в итоге он стал приклеиваться:

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Посмотрев на всё это дело, и решив, что выходит довольно весело — кекс уже весело прыгал, прилипал-отлипал, и по-прежнему наблюдал за курсором, шевеля лапками, - я понял — игре быть. И сам наберусь опыта, и, возможно, пикабушников развлеку.

Следующими я решил реализовать «оценки». Ведь должно быть в игре что-то что определят количество очков набранных игроком. И, раз это пикабушный кекс, то оценки должны быть пикабушными. Взял +/- из постов и заставил их летать, чтобы кекс мог их собирать.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё
Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

А откуда берутся оценки? Их ставят пользователи. Значит в игре должен быть какой-то объект, который будет генерировать оценки и ассоциироваться с пользователями пикабу. Поразмыслив немного, я расширил игровой экран, добавил условную рамку и разместил спрайты-человечки по бокам. Так появились они- «судьи»

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Для того, чтобы их всех нарисовать и запихнуть в игру потребовалась уйма времени. Но начал я с простого. Взял блокнот и записал туда все типы «судей — пользователей» которых можно встретить на реальном пикабу и заанимировать в игре. Потом начал их потихоньку анимировать, рисовать покадровые спрайты (кстати все спрайты в игре с покадоровй анимацией сделанной вручную, никаких готовых шаблонов, кроме нескольких скринов с пикабу нет). После прорисовки спрайтов начал потихоньку вставлять их в игру и писать «события» для них. Это был тот ещё челлендж, из-за обилия взаимосвязанных событий и эффектов. Ну, собственно, вот что получилось:

Судьи, бросающие что-то

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

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

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Админ, модератор, злые и добрые пользователи. Админ бросает кнопки закрепляющие посты или кесик, модератор бросает молнии  - удаляющие посты.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Следующим этапом (если честно он шёл параллельно предыдущему, но пусть будет следующим), было создание «постов». Посмотрев на эту вакханалию из бегающего кексика и анимированных судей, я решил, что кесик должен бегать и прилипать не просто к квадратам, а к объектам, имеющим аналогию на реальном пикабу. Ими оказались посты. У них есть и рамка, и наполнение, на них влияют оценки, которые уже добавлены в игру — дело за малым, отскринить разных текстов и картинок, добавить необходимые спрайты и...

Вот тут я задумался. Просто посты с готовыми заголовками это скучно. Надо добавить рэндомную генерацию заголовков для постов, да так, чтобы они получились весёлыми. Реализовал я это просто — сделал «словарь» для слов и знаков препинания в конце поста, и заставил игру выбирать их случайным образом, причём так, чтобы количество зависело от размера поста. Ну и для того чтобы несколько усложнить игру, добавил поворот на слученный угол для постов, который зависит от сложности.

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Затем, когда «скелет» игры уже вырисовался, я начал развивать идею. Бегать просто так бесконечно по полю и собирать плюсики? Скучновато. Надо добавить ограничения, которые влияют на процесс и продолжительность игры. Так появилась «свежесть» кексика. Когда он только появляется в игре — он свежий, ароматный, привлекательный. Но чем дольше он бегает, тем быстрее он черствеет, как натуральный кекс (или как темы на пикабу, вначале интерстно всем, потом хорошо, если 1 плюсик в день поставят). Соответственно в игре появилась шкала, которая показывает свежесть кексика, и чтобы её повысить, нужно, как и реальный кекс, подогреть кексик в игре. Так появился огонь и его источники. Ну, и чтобы игроки не расслаблялись, кексик можно пережарить — тогда будет уголёк и игра закончится.

Собственно вот те кто «подогревают» кексик, один с огнемётом, один бросает фаерболлы, а ещё один в пояснении не нуждается :).

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё
Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Добавив в игру свежесть, я решил также ограничить возможность прилипания кексика к поверхностям. Добавил шкалу «желе» в игру. Увеличить количество желе можно ловя минуса, как ни парадоксально. То есть игроку придётся не только стараться «набить рейтинг» но и иногда осознанно уменьшать его.


После всего этого я решил несколько разнообразить игру появлением других объектов. Как ещё могут отреагировать пользователи на событие/пост/комментарий на пикабу? Всё просто - «судьи» в игре периодически могут сделать такие вещи:

-кинуть пруфы

-подбросить клубничку

-покидаться г*** на вентилятор

-подкинуть идею

-зажечь в комментах (ну собственно об этом рассказано чуть выше)

-добавить в ленту/комменты котиков, которых все любят(я в том числе)


Ну и в итоге, каждому такому объекту в игре соответствует определённое событие. «Судья» бросает объект, он попадает в игрока или пост и происходит определённая реакция. Вот например, пруфы влияют на рейтинг, кексика, клубничка на рейтинг и желе. Кот вцепляется когтями в кексик, какшки влияют на рейтинг и на свежесть:

Оживший кексик. Как делалась игра. Инди игра, Html 5, Webgl, Гифка, Длиннопост, Gamedev, Моё

Помимо прочего, я добавил в игру продолжительность существования постов, которая зависит от количества оценок им полученных. Как в реальном пикабу, если пост заплюсовали — он летит в горячее, если заминусовали — скрывается от глаз пользователей. И если пост в игре получает определённое количество оценок, он исчезает из игрового поля. + или - я не заморчивался, так как генерация оценок случайная, может создаться эффект, когда пост либо висит слишком долго, либо исчезает слишком быстро. Так что только количество.

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

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

Затем написал подсказки для игры, добавил рамку, добавил сложность 49,5 (just for fun, там «посты» без заголовков и крутятся на все 360), сделал меню и вывод статистики, с таблицей рекордов не возился, для меня клиент-серверные приложения пока слишком сложны, и вот готовый продукт. Оценивайте, играйте, делитесь рекодамии и делайте скрины.


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


Готовую версию вы можете увидеть и оценить тут.


http://mihailm.hhos.ru/bakehouse_/


или тут (пока тут предыдущий релиз, обновится немного позже)

http://pikabu.koto.fun/

Спасибо команде @kotofun за размещение игры у себя.


Управление простое - "W" "A" "D", кексик всегда смотрит на курсор мышки

Для ЛЛ специально настроено управление только для мышки - ЛКМ - двигаться, ПКМ - прыгать.

Старайтесь забраться повыше - там больше плюсиков.

Показать полностью 14
[моё] Инди игра Html 5 Webgl Гифка Длиннопост Gamedev Моё
6
14
MihailM
MihailM
7 лет назад

Кексик ожил. Мой первый опыт в геймдеве.⁠⁠

Кексик ожил. Мой первый опыт в геймдеве. Моё, Инди игра, Gamedev, Пикабу, Webgl, Html 5, Гифка

Уважаемые пикабушники, позвольте представить вам ожившего кексика. Это мой первый опыт в геймдеве, поэтому не судите строго (комменты для минусов есть).

Игра создавалась под действием некоторой ностальгии по старому пикабу. По старому дизайну, по атмосфере.

Кексик ожил. Мой первый опыт в геймдеве. Моё, Инди игра, Gamedev, Пикабу, Webgl, Html 5, Гифка

Вот что получилось.

Для начала взял логотип пикабу и анимировал его. Постом создал «посты». Потом , людей которые кидают «оценки» постам и игроку. Потом игровое поле... Ну и понеслось.

Кексик ожил. Мой первый опыт в геймдеве. Моё, Инди игра, Gamedev, Пикабу, Webgl, Html 5, Гифка

Готовую версию вы можете увидеть и оценить тут.


http://pikabu.koto.fun/

или тут

http://mihailm.hhos.ru/bakehouse_/


Управление простое - "W" "A" "D", кексик всегда смотрит на курсор мышки

Для ЛЛ специально настроено управление только для мышки - ЛКМ - двигаться, ПКМ - прыгать.

Старайтесь забраться повыше - там больше плюсиков.



Спасибо команде @kotofun за размещение игры у себя.


Позже расскажу о создании отдельным постом.

Показать полностью 1
[моё] Моё Инди игра Gamedev Пикабу Webgl Html 5 Гифка
10
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии