Разработка браузерной онлайн игры без фреймворков и движков

[@ian_phobos]

Спасибо за статью, очень интересная реализация лавы!

[@astec]

Очень круто. А профит есть?

[@Jedi_Knight]

Всё с нуля это круто. Респект.

[@Aquahawk]

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

[@Aquahawk]

Область видимости классная, люблю такие штуки, но видно что не супер сглажено на краях

[@coddy]

Тянуть bootstrap и jQuery ради одной формочки, не совсем оптимильно

[@OlegKozlov]

Круть! Люблю дешевые и сердитые фишки типа вашей лавы и ландшафта в целом. Спасибо за подробное изложение, очень интересно.

[@nightrain912]

А каким образом после построения графа остаются несвязанные waypoints? На изображении видно несколько отдельных зелёных точек, от которых есть прямая видимость до ближайшего waypoint, находящегося на графе

[@chibiryaev]

Они отфильтровались, дело в том, что они никуда не ведут, там тупик. Хотя тупики и без этого остались

[@nightrain912]

С течением лавы крутой хак. Я люблю такие шейдерные эффекты, но Гаусса для маски скорости никогда не применял, мб попробую где-нибудь

[@Trubix]

Отличная работа :).
По личным ощущениям 2 проблемы:
1. Слишком «низко» располагается камера. Учитывая что экран прямоугольный — видно больше по ширине нежели по длине.
2. Резкие повороты камеры из-за полной привязки к поворотку игрока.

Отсюда вытекает вопрос: не думал ли попробовать сделать камеру, как в GTA2, например?

[@chibiryaev]

1. Если камеру поднять, то будет очень мелко и трудно попасть по врагам
2. Там можно менять чувствительность мыши

Ну мне такое расположение камеры нравится больше, чем в ГТА2, дело привычки

[@Tatikoma]

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

[@MaximSuvorov]

А может стоило камеру в изометрию перевести? Тогда недостаток высоты будет компенсирован относительно ширины.

Нет, там не чуствительность мыши, там «еластичности» камере не хватает, что-то вроде:

float wantedRotationAngle = target.eulerAngles.y;
float wantedHeight = target.position.y + height;

float currentRotationAngle = transform.eulerAngles.y;
float currentHeight = transform.position.y;

currentRotationAngle = Mathf.LerpAngle (currentRotationAngle, wantedRotationAngle, rotationDamping * Time.deltaTime);

currentHeight = Mathf.Lerp (currentHeight, wantedHeight, heightDamping * Time.deltaTime);

Quaternion currentRotation = Quaternion.Euler (0, currentRotationAngle, 0);

transform.position = target.position;
transform.position -= currentRotation * Vector3.forward * distance;
Vector3 temp = transform.position;
temp.y = currentHeight;
transform.position = temp;

transform.LookAt (target);

[@NoFateMan]

Глазораздиралка, жесткая привязка камеры к персу. Не думали о контроллере который добавит плавности камере?

[@vantfiles]

Поддерживаю. Постоянное вращение игрового пространства приводит к сильному утомлению глазных мышц. Знаком с этим эффектом по игре Elite.

[@Tallefer]

Блин, а Элита-то чем провинилась, почему не любая другая полетная аркада/сим, и ведь это даже не 2д игра… :)

[@vantfiles]

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

[@Tallefer]

Редко встречается? Это шутка? :) Во всех симах же надо вращаться по продольной оси (симы машин не берем в расчет). А в Элите на экране космос почти все время, ничего особо не мельтешит. И при чем тут стереограмма? Мы же не про виртуальную реальность говорим?

[@chibiryaev]

Про webgl как-то грустно. Или это у меня так?

Почему грустно?

Может есть смысл перепилить все на чистом webgl?

К сожалению, я не знаю, как устроен threejs (не использовал его)

[@Aquahawk]

моя гипотеза про невзлёт игр — отсутсвие специалистов. WebGL для программиста в вебе чудж своей идеологией, а для того кто умеет GL на нативных платформах — чудж веб с его сетевыми проблемами и js с его подходами. Вот и классная теха на непопулярном стаке технологий испытывает проблемы

[@VSOP_juDGe]

А как же slither.io?

[@Aquahawk]

я так понимаю имелись ввиду классические 3d игры, slither надо сказать к гарфике то требований особо не предъявляет

[@Aquahawk]

Что-то делаете не так или three.js что-то делает не так, с ним не знаком. Посмотрите это www.youtube.com/watch?v=adixpp9CK_A оно без движка сделано, на производительность webgl я жаловаться не могу.

[@Aquahawk]

это перевод на webGL старой игры, графика не поменяется. А попробуйте сделать подобное на юнити или ue из коробки, поймёте в чём проблема. Да тут нет динамического света и тп. Но производительность шейдеров и вообще пайплайна внутри дроколла от js и webgl не зависит

[@shram1488]

Круто!) Погружаюсь в изучение исходников)))

[@achidutsu]

Йо ). Там quake-style консоль есть с командами.

[@HexGrimm]

Как при игре по сети вы боретесь с задержкой результатов ввода? Клиент ждет результат от сервера или отправляет на сервер ввод и действия постфактум а сервер верит?

[@chibiryaev]

клиент ждёт. Сначала попробовал сделать предсказания, то есть клиент сразу действует, а по факту прихода пакета с сервера корректируется, но как-то не очень получилось, поэтому пошёл по-простому

[@Smolski]

Круто. спасибо за статью! И геймплей забавный.

[@Daar]

Шикарная статья! Благодарю автора! Умел бы плюсанул.

[@Tallefer]

Очень годно! Алгоритмы, алгоритмы, алгоритмы, омномном. :) Во многих статьях есть они, но все разбросано по кусочкам, а тут полная подборка по генерации карты и вейпойнтам для ботов, прекрасно!
Есть предложение: если есть еще желание возиться, попробовать ввести модный ныне режим Бэттл Роял. :) Вроде нетрудно должно быть, только сделать ТТК побольше.
И да, лава крута, особенно издалека. Может разве что замедлить ее, а то больно текучая получилась, хотя это мелкая придирка. И вопрос по ней — много ресурсов жрет ее обработка? Профилирование возможно?

[@chibiryaev]

Лава состоит из двух пассов, оба в 512х512. Первый пасс — анимация волн. Судя по профилировщику, он сравним с основным пассом рендера левелмапы. Второй пасс лавы — это непосредственно рендеринг с применением смещений волн и смещений скоростей — этот проход дешёвый. Т.е ресурсов жрёт немного.

[@Tallefer]

Ну анимация меня не так волнует, мне интересно конкретно вот что: если отключить алгоритм сглаживания потока и сделать топорно, ну, типа как в древних играх — чтоб были видны изломы текстур на поворотах течения, вот конкретно этот момент много дает нагрузки на фпс? Изначальная задумка такова — можно ли этот алгоритм без страданий забабахать на какой-то из старых приставок. :)

[@chibiryaev]

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

[@MInner]

Что-то пошло не так?

[@chibiryaev]

Это как так получилось? То есть, это сразу такое, или вы внесли модификации в код?

[@MInner]

это сразу такое, chrome 62.0.3202.75, centos 7, карточка от nvidia, на других страницах артефактов не наблюдалось, ошибок в лог не сыпалось, по сети все, что должно было — пришло; спасибо за статью, кстати! всегда хотелось почитать что-нибудь о шейдерах на практике, потому что большая часть туторилов заканчивается словами «вот мы и научились заливать квадрат градиентом, а все остальное делается по аналогии» — а ваша статья очень все доступно объясняет!