forum.boolean.name - [проект] Tower Defense на WebGL

forum.boolean.name (http://forum.boolean.name/index.php)

- JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)

- - [проект] Tower Defense на WebGL (http://forum.boolean.name/showthread.php?t=18510)

[проект] Tower Defense на WebGL

Актуальная информация (23.10.2013)

Ссылка на демо

------
Итак, я вздумал сделать ещё один проект на WebGL и моём смеходвижке, название которому (движку-то) уже придумано, но не публикуется.

Скажу сразу: эта игра будет являться аллюзией на Cursed Treausre. Или клоном, называйте как хотите (хотя если на то пошло, то все Tower Defensы клоны друг друга, а все шутеры от первого лица — клоны Quake'а). По крайней мере основная механика будет та же.

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

Вся игра планируется в 3D, довольно лоупольном, но симпатичном. Ведь делать это я буду своими кривыми ручонками с минимальным third-party (в идеале вообще без него, т.к. я ничего не знаю о том, ждёт ли проект коммерческий успех), а, значит, заранее нужно замахнуться на тот уровень медии, который я могу осилить сам и при этом в чтоб не увязнуть на год. Запланирована 1 неделя на рисовку всей графики, не больше.

Цели проекта:

1. Тестирование, "укрепление" и прокачка движка (ибо фичи есть, но не оттестированы, и есть список желаемых фич). Игра, как известно, лучший тест для движка.
2. Готовый проект в портфолио, который не стыдно продемонстрировать >>:(
3. Прокачка навыков, куда без этого?
4. Возможно, копеечка на ВК :-D И в дальнейшем на ФБ. Впрочем, не рассчитываю на окупаемость, но если упадёт копеечка, это поднимет моё ЧСВ :-D

Что на данный момент сделано:
1. Левопяточный редактор уровней (на скрине). Сделан он на HTML/JS и его даже можно потыкать: http://maslov.co/webgl/2/editor.html Обозначения схематичные, сохранять он пока не умеет (ещё не решил, будет он сохранять в бинарник или же будет высирать мне JSON)

Дальнейший план:

Задача 2: заставить движок хавать высер из левел-эдитора и расставлять кубики как полагается
пока что моделек не будет будут просто кубики разных цветов
Задача 3: заставить генерировать именно меш земли, т.е. цельный, а не из разных дипов
Задача 4: сделать красивые переходы между разными типами террайна
Задача 5: вставить тестовые модельки и текстуры чтобы когда придёт время заменять на релизные, я бы просто заменил файлы и всё, не пришлось бы ничо в коде переделывать
Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)
Задача 7: расстановка начальной и конечной точки
Задача 8: враги-кубы, бегущие из начала в конечную точку, путенах А*
Задача 9: башни, стрельба говном по врагам
Задача 10: апгрейды башен, меню апгрейда

Далее по обстоятельствам.
Итак, я начал. Надеюсь, кончу. :-D О прогрессе буду постить сюда.

И да, не пора ли нам сделать раздел "Проекты на WebGL" ? У нас их уже, как-никак, два :-D

Ответ: [проект] Tower Defense на WebGL

Цитата:

Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)

алсо, по деревьям пикать вряд ли будет полезно для игры, скорее всего достаточно будет пика по террейну + некоторым AABB.
из террейна можно посчитать distance field заранее, пикать его будет оч быстро и весьма точно.

Ответ: [проект] Tower Defense на WebGL

Да конечно не по деревьям, а по клеткам. Террейн не обычный террейн а скорее майнкрафтоподобный.

Ответ: [проект] Tower Defense на WebGL

В редакторе сделал экспорт и импорт в игру (пункт "Задача 2").
Я даже знаю, кто у меня будет тестовой моделькой крипа :-D

http://maslov.co/webgl/2/maps/1.map
Вот json этой мапы

http://maslov.co/webgl/2/editor.html
Можно даже его сюда заимпортить и посмотреть

Ответ: [проект] Tower Defense на WebGL

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

Вот так лучше будет ( http://files.moka.co/map.json ):

PHP код:




{
  "tiles": [
    "grass-trees",
    "rock-trees",
    "grass",
    "road",
    "snow-trees",
    "rock",
    "snow"
  ],
  "width": 15,
  "height": 15,
  "map": [ 4,4,4,4,4,4,4,4,4,4,4,1,1,1,1,4,4,4,4,3,3,3,3,3,3,4,1,1,1,1,4,4,3,3,3,3,3,3,3,3,3,3,1,1,1,4,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,6,6,6,6,3,3,3,3,1,1,3,3,3,6,6,6,6,6,6,5,5,3,3,3,1,3,3,4,4,4,4,4,4,4,5,5,3,3,3,1,4,4,4,4,4,4,0,1,1,1,5,5,3,3,1,4,4,4,4,4,0,0,1,1,1,5,5,3,3,1,1,4,3,3,3,0,0,0,2,2,2,3,3,3,1,1,4,3,3,3,0,2,2,2,2,2,3,3,3,1,1,1,3,3,3,3,2,2,2,3,3,3,3,2,0,1,1,3,3,3,3,3,3,3,3,3,3,3,2,0,1,1,1,3,3,3,3,3,3,3,3,2,2,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0 ]
}

Да и в BSON'е такое ваще хранить сказка, можно сделать tile максимум 8, или 16, тем самым юзать соответственно 1 или 2 байта на тайл.
А можно его вообще одной строкой а не массивом выводить.

Читаем:

PHP код:




for(var y = 0; y < level.height; ++y) {
  for(var x = 0; x < level.width; ++x) {
    var tileInd = level.map[x + y * level.height];
    var tile = level.tiles[tileInd];
  }
}

Или если один цикл (ну кому как):

PHP код:




for(var i = 0, len = level.width * level.height; i < len; ++i) {
  var x = i % level.width;
  var y = Math.floor(i / level.width);
  var tileInd = level.map[i];
  var tile = level.tiles[tileInd];
}

Результат будет (tileInd):

PHP код:




4 4 4 4 4 4 4 4 4 4 4 1 1 1 1
4 4 4 4 3 3 3 3 3 3 4 1 1 1 1
4 4 3 3 3 3 3 3 3 3 3 3 1 1 1
4 3 3 3 3 3 3 3 3 3 3 3 3 1 1
3 3 3 3 3 6 6 6 6 3 3 3 3 1 1
3 3 3 6 6 6 6 6 6 5 5 3 3 3 1
3 3 4 4 4 4 4 4 4 5 5 3 3 3 1
4 4 4 4 4 4 0 1 1 1 5 5 3 3 1
4 4 4 4 4 0 0 1 1 1 5 5 3 3 1
1 4 3 3 3 0 0 0 2 2 2 3 3 3 1
1 4 3 3 3 0 2 2 2 2 2 3 3 3 1
1 1 3 3 3 3 2 2 2 3 3 3 3 2 0
1 1 3 3 3 3 3 3 3 3 3 3 3 2 0
1 1 1 3 3 3 3 3 3 3 3 2 2 0 0
1 1 1 1 0 0 0 0 0 0 0 0 0 0 0

Так в разы экономнее.

ЗЫ, с div'ами ты конечно прикольнулся в редакторе, не мог канвой сделать?

Ответ: [проект] Tower Defense на WebGL

Да мне не жалко пары килобайт на это дело, пусть останется словами. 225 клеток всего-то. В конце-то концов, это же не основополагающая вещь и не боттлнек даже.
Канвой не мог, мне в разы удобнее с дивами. И если ты посмотришь на editor.js, то там всё завязано на эвентах по html-элементам. С канвой бы пришлось писать намного больше.

Планы на ближайшее время:

1. Делаю в Максе тестовые тайлы.
2. Делаю объединение буферов
3. Делаю чтоб делалась карта не из кубиков, а из смоделленных тайлов и не отдельными Entity, а а один буфер
4. Разберусь наконец с проецированием в камеру, что-то я там накосячил в прошлый раз
5. Делаю пик по полигонам
6. Делаю ещё второй меш попроще тупо из квадов, чтобы пикать уже по нему, к тому же по дороге пикать не надо будет вообще
7. По координатам пика делаю определение клетки куда ткнули
8. Отлично, теперь я могу мышкой выбирать нужную клетку и у меня террайн, который я потом могу сделать красивый!

Ответ: [проект] Tower Defense на WebGL

Кода да - мало..

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

Да и почему 15х15, ведь числа корявые :D 16х16 давай.

Ответ: [проект] Tower Defense на WebGL

Да ладно гемор распаршивать? Это ж JSON!
И кто его захочет заюзать? Это как раз одна из тех вещей, которые делаются "на 1 раз".

Ответ: [проект] Tower Defense на WebGL

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

Ответ: [проект] Tower Defense на WebGL

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

Ответ: [проект] Tower Defense на WebGL

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

Ответ: [проект] Tower Defense на WebGL

Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 :-D и даже лучше.

Ответ: [проект] Tower Defense на WebGL

Цитата:

Сообщение от ABTOMAT (Сообщение 266688)

А что это у такое в левом, верхнем углу артефактное?

Ответ: [проект] Tower Defense на WebGL

Это похоже на какой то своеобразный дебаг отображающий какой то цикл. :)

Ответ: [проект] Tower Defense на WebGL

Цитата:

Сообщение от ABTOMAT (Сообщение 266688)

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

P.S. Оригинальную игру прошёл дважды: один раз как-то давно, а второй раз, когда увидел эту тему.