![](images/chestnut/misc/left.gif) |
JavaScript / HTML Создание динамической разметки страниц |
02.09.2013, 06:08
|
#1
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
[проект] Tower Defense на WebGL
Актуальная информация (23.10.2013)
Ссылка на демо
------
Итак, я вздумал сделать ещё один проект на WebGL и моём смеходвижке, название которому (движку-то) уже придумано, но не публикуется.
Скажу сразу: эта игра будет являться аллюзией на Cursed Treausre. Или клоном, называйте как хотите (хотя если на то пошло, то все Tower Defensы клоны друг друга, а все шутеры от первого лица — клоны Quake'а). По крайней мере основная механика будет та же.
Мудель, скажете, нехрен копировать то, что уже есть. Но я решил, что лучше уж подражать чему-то хорошему, чем выдумывать что-то своё, но плохое. По крайней мере, оригинал мне очень понравился, и я бы не прочь поиграть в продолжение, которого нет. Так что берём бразды в свои руки! Тем более, простора для творчества будет и так предостаточно!
Вся игра планируется в 3D, довольно лоупольном, но симпатичном. Ведь делать это я буду своими кривыми ручонками с минимальным third-party (в идеале вообще без него, т.к. я ничего не знаю о том, ждёт ли проект коммерческий успех), а, значит, заранее нужно замахнуться на тот уровень медии, который я могу осилить сам и при этом в чтоб не увязнуть на год. Запланирована 1 неделя на рисовку всей графики, не больше.
Цели проекта:
1. Тестирование, "укрепление" и прокачка движка (ибо фичи есть, но не оттестированы, и есть список желаемых фич). Игра, как известно, лучший тест для движка.
2. Готовый проект в портфолио, который не стыдно продемонстрировать
3. Прокачка навыков, куда без этого?
4. Возможно, копеечка на ВК ![Laught](images/smilies/DDD.gif) И в дальнейшем на ФБ. Впрочем, не рассчитываю на окупаемость, но если упадёт копеечка, это поднимет моё ЧСВ
Что на данный момент сделано:
1. Левопяточный редактор уровней (на скрине). Сделан он на HTML/JS и его даже можно потыкать: http://maslov.co/webgl/2/editor.html Обозначения схематичные, сохранять он пока не умеет (ещё не решил, будет он сохранять в бинарник или же будет высирать мне JSON)
Дальнейший план:
Задача 2: заставить движок хавать высер из левел-эдитора и расставлять кубики как полагается
пока что моделек не будет будут просто кубики разных цветов
Задача 3: заставить генерировать именно меш земли, т.е. цельный, а не из разных дипов
Задача 4: сделать красивые переходы между разными типами террайна
Задача 5: вставить тестовые модельки и текстуры чтобы когда придёт время заменять на релизные, я бы просто заменил файлы и всё, не пришлось бы ничо в коде переделывать
Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)
Задача 7: расстановка начальной и конечной точки
Задача 8: враги-кубы, бегущие из начала в конечную точку, путенах А*
Задача 9: башни, стрельба говном по врагам
Задача 10: апгрейды башен, меню апгрейда
Далее по обстоятельствам.
Итак, я начал. Надеюсь, кончу. ![Laught](images/smilies/DDD.gif) О прогрессе буду постить сюда.
И да, не пора ли нам сделать раздел "Проекты на WebGL" ? У нас их уже, как-никак, два ![Laught](images/smilies/DDD.gif)
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
Последний раз редактировалось ABTOMAT, 23.10.2013 в 22:14.
|
(Offline)
|
|
Эти 9 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
|
|
02.09.2013, 11:11
|
#2
|
Терабайт исходников
Регистрация: 13.09.2008
Сообщений: 3,947
Написано 2,189 полезных сообщений (для 6,051 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)
|
алсо, по деревьям пикать вряд ли будет полезно для игры, скорее всего достаточно будет пика по террейну + некоторым AABB.
из террейна можно посчитать distance field заранее, пикать его будет оч быстро и весьма точно.
|
(Offline)
|
|
02.09.2013, 16:01
|
#3
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Да конечно не по деревьям, а по клеткам. Террейн не обычный террейн а скорее майнкрафтоподобный.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
03.09.2013, 00:15
|
#4
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
В редакторе сделал экспорт и импорт в игру (пункт "Задача 2").
Я даже знаю, кто у меня будет тестовой моделькой крипа
http://maslov.co/webgl/2/maps/1.map
Вот json этой мапы
http://maslov.co/webgl/2/editor.html
Можно даже его сюда заимпортить и посмотреть
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Эти 5 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
|
|
03.09.2013, 03:05
|
#5
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Делай массив индексов для мапы, а то такой формат как у тебя солько же будет занимать?
Вот так лучше будет ( http://files.moka.co/map.json ):
{ "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 байта на тайл.
А можно его вообще одной строкой а не массивом выводить.
Читаем:
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]; } }
Или если один цикл (ну кому как):
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):
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'ами ты конечно прикольнулся в редакторе, не мог канвой сделать?
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
03.09.2013, 03:11
|
#6
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Да мне не жалко пары килобайт на это дело, пусть останется словами. 225 клеток всего-то. В конце-то концов, это же не основополагающая вещь и не боттлнек даже.
Канвой не мог, мне в разы удобнее с дивами. И если ты посмотришь на editor.js, то там всё завязано на эвентах по html-элементам. С канвой бы пришлось писать намного больше.
Планы на ближайшее время:
1. Делаю в Максе тестовые тайлы.
2. Делаю объединение буферов
3. Делаю чтоб делалась карта не из кубиков, а из смоделленных тайлов и не отдельными Entity, а а один буфер
4. Разберусь наконец с проецированием в камеру, что-то я там накосячил в прошлый раз
5. Делаю пик по полигонам
6. Делаю ещё второй меш попроще тупо из квадов, чтобы пикать уже по нему, к тому же по дороге пикать не надо будет вообще
7. По координатам пика делаю определение клетки куда ткнули
8. Отлично, теперь я могу мышкой выбирать нужную клетку и у меня террайн, который я потом могу сделать красивый!
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
Последний раз редактировалось ABTOMAT, 03.09.2013 в 04:31.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
03.09.2013, 03:35
|
#7
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Кода да - мало..
Но в плане формата, всё же это тупой копи-паст, и если кто-то захочет заюзать формат - это же гемор то какой его распаршивать.
Тем более хочешь заменить весь тайл-сет - без проблем, меняем просто первый массив, и карту не трогаем.
Да и почему 15х15, ведь числа корявые :D 16х16 давай.
|
(Offline)
|
|
03.09.2013, 04:25
|
#8
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Да ладно гемор распаршивать? Это ж JSON!
И кто его захочет заюзать? Это как раз одна из тех вещей, которые делаются "на 1 раз".
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
05.09.2013, 00:00
|
#9
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Запилил объединение буферов (Задача 2).
Ничего выдающегося, да и показывать пока нечего.
Ну, покажу, пожалуй, пирамиду и сферу, с которыми я тренировался (синий объект - результат объединения буферов двух раздельных объектов), ведь тема должна содержать картинки, верно?
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
|
|
09.09.2013, 01:45
|
#10
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Делаю тайлы.
Решил разделить их на два яруса: нижний (земля гориз. -> земля верт.) и верхний (земля верт. -> один из трёх типов местности либо переход между ними).
Пока что мучаю нижний ярус, накопилась куча лапши, придётся это дело размотать прежде чем двигаться дальше.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
|
|
09.09.2013, 02:13
|
#11
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Во! Сделал нижний ярус как полагается! Серые клетки соответствуют отсутствию в них меша. Просто пока второй ярус не готов, я их вставил, чтобы было понятно, что там что-то есть.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
09.09.2013, 04:27
|
#12
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 ![Laught](images/smilies/DDD.gif) и даже лучше.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Эти 3 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
|
|
09.09.2013, 04:48
|
#13
|
Быдлокодер
Регистрация: 05.07.2009
Адрес: Проспит
Сообщений: 5,019
Написано 2,312 полезных сообщений (для 5,349 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Сообщение от ABTOMAT
Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 ![Laught](images/smilies/DDD.gif) и даже лучше.
|
А что это у такое в левом, верхнем углу артефактное?
|
(Offline)
|
|
09.09.2013, 04:57
|
#14
|
Гигант индустрии
Регистрация: 13.09.2008
Сообщений: 2,893
Написано 1,185 полезных сообщений (для 3,298 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Это похоже на какой то своеобразный дебаг отображающий какой то цикл. ![:)](images/smilies/smile.gif)
|
(Offline)
|
|
09.09.2013, 06:18
|
#15
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: [проект] Tower Defense на WebGL
Сообщение от ABTOMAT
Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 ![Laught](images/smilies/DDD.gif) и даже лучше.
|
Я, конечно, в программировании три дэ, да и игр вообще, не особо разбираюсь и некоторые обороты речи твоих постов даже не совсем понимаю (всякие меш, дип, пик и т. п.), но разве нельзя применить какую-то технологию вроде этой: Смешивание текстур ландшафта, чтобы сократить количество пререндеренных тайлов и чтобы в будущем можно было добавлять новые виды ландшафта?
P.S. Оригинальную игру прошёл дважды: один раз как-то давно, а второй раз, когда увидел эту тему.
|
(Offline)
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 19:18.
|