www.boolean.name

www.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)

ABTOMAT 02.09.2013 02:08

[проект] Tower Defense на WebGL
 
Вложений: 1
Актуальная информация (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

Mr_F_ 02.09.2013 07:11

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

Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)
алсо, по деревьям пикать вряд ли будет полезно для игры, скорее всего достаточно будет пика по террейну + некоторым AABB.
из террейна можно посчитать distance field заранее, пикать его будет оч быстро и весьма точно.

ABTOMAT 02.09.2013 12:01

Ответ: [проект] Tower Defense на WebGL
 
Да конечно не по деревьям, а по клеткам. Террейн не обычный террейн а скорее майнкрафтоподобный.

ABTOMAT 02.09.2013 20:15

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

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

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

moka 02.09.2013 23:05

Ответ: [проект] 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,]


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

Читаем:
PHP код:

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


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

for(var 0len level.width level.heightlen; ++i) {
  var 
level.width;
  var 
Math.floor(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'ами ты конечно прикольнулся в редакторе, не мог канвой сделать?

ABTOMAT 02.09.2013 23:11

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

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

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

moka 02.09.2013 23:35

Ответ: [проект] Tower Defense на WebGL
 
Кода да - мало..

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

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

ABTOMAT 03.09.2013 00:25

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

ABTOMAT 04.09.2013 20:00

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

ABTOMAT 08.09.2013 21:45

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

ABTOMAT 08.09.2013 22:13

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

ABTOMAT 09.09.2013 00:27

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

Arton 09.09.2013 00:48

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

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

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

Nex 09.09.2013 00:57

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

Phantom 09.09.2013 02:18

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

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

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

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


Часовой пояс GMT +1, время: 15:35.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot