Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 02.09.2013, 06:08   #1
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 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. Возможно, копеечка на ВК И в дальнейшем на ФБ. Впрочем, не рассчитываю на окупаемость, но если упадёт копеечка, это поднимет моё ЧСВ

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


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

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

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

И да, не пора ли нам сделать раздел "Проекты на WebGL" ? У нас их уже, как-никак, два
Миниатюры
Нажмите на изображение для увеличения
Название: HrElFTHy.png
Просмотров: 1033
Размер:	273.2 Кб
ID:	19651  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена


Последний раз редактировалось ABTOMAT, 23.10.2013 в 22:14.
(Offline)
 
Ответить с цитированием
Эти 9 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
Arton (02.09.2013), Harter (02.09.2013), impersonalis (02.09.2013), pax (03.09.2013), Phantom (02.09.2013), SBJoker (02.09.2013), St_AnGer (02.09.2013), tormoz (02.09.2013), Wegox (02.09.2013)
Старый 02.09.2013, 11:11   #2
Mr_F_
Терабайт исходников
 
Аватар для Mr_F_
 
Регистрация: 13.09.2008
Сообщений: 3,947
Написано 2,189 полезных сообщений
(для 6,051 пользователей)
Ответ: [проект] Tower Defense на WebGL

Задача 6: пик по этому добру (о да, в движке до сих пор нет пика! значит надо сделать)
алсо, по деревьям пикать вряд ли будет полезно для игры, скорее всего достаточно будет пика по террейну + некоторым AABB.
из террейна можно посчитать distance field заранее, пикать его будет оч быстро и весьма точно.
(Offline)
 
Ответить с цитированием
Старый 02.09.2013, 16:01   #3
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Да конечно не по деревьям, а по клеткам. Террейн не обычный террейн а скорее майнкрафтоподобный.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Старый 03.09.2013, 00:15   #4
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 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
Можно даже его сюда заимпортить и посмотреть
Миниатюры
Нажмите на изображение для увеличения
Название: HrElFTJR.png
Просмотров: 906
Размер:	37.7 Кб
ID:	19652  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Эти 5 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
Harter (03.09.2013), Phantom (03.09.2013), St_AnGer (03.09.2013), tormoz (03.09.2013), Wegox (03.09.2013)
Старый 03.09.2013, 03:05   #5
moka
.
 
Регистрация: 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,]

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

Читаем:
for(var 0level.height; ++y) {
  for(var 
0level.width; ++x) {
    var 
tileInd level.map[level.height];
    var 
tile level.tiles[tileInd];
  }

Или если один цикл (ну кому как):
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):
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)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
LLI.T.A.L.K.E.R. (04.09.2013)
Старый 03.09.2013, 03:11   #6
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 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)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Phantom (06.09.2013)
Старый 03.09.2013, 03:35   #7
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: [проект] Tower Defense на WebGL

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

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

Да и почему 15х15, ведь числа корявые :D 16х16 давай.
(Offline)
 
Ответить с цитированием
Старый 03.09.2013, 04:25   #8
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Да ладно гемор распаршивать? Это ж JSON!
И кто его захочет заюзать? Это как раз одна из тех вещей, которые делаются "на 1 раз".
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Phantom (06.09.2013)
Старый 05.09.2013, 00:00   #9
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Запилил объединение буферов (Задача 2).
Ничего выдающегося, да и показывать пока нечего.
Ну, покажу, пожалуй, пирамиду и сферу, с которыми я тренировался (синий объект - результат объединения буферов двух раздельных объектов), ведь тема должна содержать картинки, верно?
Миниатюры
Нажмите на изображение для увеличения
Название: HrElFTMv.png
Просмотров: 839
Размер:	33.5 Кб
ID:	19657  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
moka (05.09.2013), Phantom (06.09.2013)
Старый 09.09.2013, 01:45   #10
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Делаю тайлы.
Решил разделить их на два яруса: нижний (земля гориз. -> земля верт.) и верхний (земля верт. -> один из трёх типов местности либо переход между ними).
Пока что мучаю нижний ярус, накопилась куча лапши, придётся это дело размотать прежде чем двигаться дальше.
Миниатюры
Нажмите на изображение для увеличения
Название: 98ebcd87e69ee63a40b87c2730ad2035.png
Просмотров: 894
Размер:	88.3 Кб
ID:	19663  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
Phantom (09.09.2013), St_AnGer (09.09.2013)
Старый 09.09.2013, 02:13   #11
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Во! Сделал нижний ярус как полагается! Серые клетки соответствуют отсутствию в них меша. Просто пока второй ярус не готов, я их вставил, чтобы было понятно, что там что-то есть.
Миниатюры
Нажмите на изображение для увеличения
Название: ebb65d3edaa2fb97c3dbd16b9f342fd1.png
Просмотров: 841
Размер:	50.6 Кб
ID:	19664  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Phantom (09.09.2013)
Старый 09.09.2013, 04:27   #12
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: [проект] Tower Defense на WebGL

Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 и даже лучше.
Миниатюры
Нажмите на изображение для увеличения
Название: 3a4653bcdf95aca246399ebe2cebbb7b.png
Просмотров: 835
Размер:	47.3 Кб
ID:	19665  
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Эти 3 пользователя(ей) сказали Спасибо ABTOMAT за это полезное сообщение:
Arton (09.09.2013), Phantom (09.09.2013), St_AnGer (09.09.2013)
Старый 09.09.2013, 04:48   #13
Arton
Быдлокодер
 
Аватар для Arton
 
Регистрация: 05.07.2009
Адрес: Проспит
Сообщений: 5,018
Написано 2,312 полезных сообщений
(для 5,349 пользователей)
Ответ: [проект] Tower Defense на WebGL

Сообщение от ABTOMAT Посмотреть сообщение
Убил последние косячки. Теперь можно браться за второй ярус тайлов.
Там будет посложнее, ибо там уже будут переходы не только между низом/верхом но и разными типами местности. Это значит, что будет нужно по 13 однородных тайлов для каждого типа местности и по 24 для каждой пары.
То есть
13 * 3
+
24 * 3
Итого ещё 111 тайлов надо сделать. Такие дела. Зато как в Варкравте 3 и даже лучше.
А что это у такое в левом, верхнем углу артефактное?
(Offline)
 
Ответить с цитированием
Старый 09.09.2013, 04:57   #14
Nex
Гигант индустрии
 
Аватар для Nex
 
Регистрация: 13.09.2008
Сообщений: 2,893
Написано 1,185 полезных сообщений
(для 3,298 пользователей)
Ответ: [проект] Tower Defense на WebGL

Это похоже на какой то своеобразный дебаг отображающий какой то цикл.
(Offline)
 
Ответить с цитированием
Старый 09.09.2013, 06:18   #15
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений
(для 1,833 пользователей)
Ответ: [проект] Tower Defense на WebGL

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

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


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 09:42.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com