Как написать тетрис колодцем

Мне понадобились: компьютер, интернет и год времени. Да да, целый год, правда с двумя перерывами по пол года. Сразу покажу что получилось https://vk.com/well_tetris

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

Итак, я решил написать тетрис, для души и немного для повышения ЧСВ и выложить его во вконтакт, чтобы и другие могли попробовать, как оно. Но ради интереса, решил сделать его не простым, а бесконечным. Ну как бесконечным... замкнутым по горизонтали, чтобы фигуры не упирались в края игрового поля, а свободно через них проходили. Но возникла проблемка: разорванные фигуры стали ломать мне мозг и косить мои глаза.

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

Поэтому я свернул игровое поле в трубочку и добавил немного 3D, ибо бесконечно тонкая стенка цилиндра была острее чем сиськи Лары Крофт.

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

Мне хотелось, чтобы игра была максимально отзывчивой, потому что 3D это хорошо, но механика важнее. Поэтому вывод графики я написал полностью ручками, без использования готовых библиотек. Сначала получался тетрис Мёбиуса, но я себя пересилил и сделал нормальный цилиндр, возможно зря, но мы этого уже  никогда не узнаем ;).

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

Я думал что вращать фигуры просто: берёшь фигуру и вращаешь. Только вот получалось, что нижний край фигуры меняет высоту. Иногда это приводило к тому, что после поворота, фигура сразу устанавливалась, а ведь у меня была ещё целая клетка в запасе! Поэтому вместо того, чтобы вращать фигуру, я использую подготовленные кадры анимации.

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

А ещё у меня есть топ100. В него него попадают только быстрые, ловкие и сильные духом. Для этого я сделал прогрессивную шкалу начисления очков: за 1 ряд всего 100 очков, а за 4 целых 1500. Хочешь попасть в топ? Рискуй и жди "ПРЯМАЯ ЛИНИЯ!". Для тех, кто не хочет рисковать и набирает очки потихоньку, удаляя по одной линии, я приготовил сюрприз: рост скорости зависит не от количества удалённых линий, а от числа удалений. Т.е. можно можно 10 раз получить по 100 очков или 10 раз по 1500 очков, а скорость вырастет одинаково.

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

https://www.youtube.com/watch?v=GF7Q4PX-MUQ

Почему-то оказалось, что самый быстрый, ловкий и сильным духом — это я. Возможно потому, что до сих пор никому не рассказывал как растёт скорость :D Желающие побить мой рекорд, или просто решившие узнать как оно, могут сыграть во вконтакте https://vk.com/well_tetris

Как написать тетрис колодцем Игры, Gamedev, ВКонтакте, Инди игра, Пикабу, Гифка, Длиннопост

И немного технических подробностей: TypeScript, tree.js matrix, Canvas, debain, C#, .net core, postgresql, nginx, letsencrypt, runit. Если по технической части есть вопросы, могу в комментариях ответить.

Лига Разработчиков Видеоигр

6.8K постов22.2K подписчиков

Добавить пост

Правила сообщества

ОБЩИЕ ПРАВИЛА:

- Уважайте чужой труд и используйте конструктивную критику

- Не занимайтесь саморекламой, пишите качественные и интересные посты

- Никакой политики


СТОИТ ПУБЛИКОВАТЬ:

- Посты о Вашей игре с историей её разработки и описанием полученного опыта

- Обучающие материалы, туториалы

- Интервью с опытными разработчиками

- Анонсы бесплатных мероприятий для разработчиков и истории их посещения;
- Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе

НЕ СТОИТ ПУБЛИКОВАТЬ:

- Посты, содержащие только вопрос или просьбу помочь
- Посты, содержащие только идею игры

- Посты, единственная цель которых - набор команды для разработки игры

- Посты, не относящиеся к тематике сообщества

Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.

ЗАПРЕЩЕНО:

- Публиковать бессодержательные посты с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции

- Выдавать чужой труд за свой

Подобные посты будут перемещены из сообщества в общую ленту, а их авторы по решению администрации могут быть внесены в игнор-лист сообщества.


О РАЗМЕЩЕНИИ ССЫЛОК:

Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:

- Пост должен быть содержательным и интересным для пользователей, нести пользу для сообщества

- Ссылка должна размещаться непосредственно в начале или конце поста и только один раз

- Cсылка размещается в формате: "Страница игры в Steam: URL"

58
Автор поста оценил этот комментарий
временное отключение одной из клавиш управления...
Иллюстрация к комментарию
раскрыть ветку (1)
29
Автор поста оценил этот комментарий

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

показать ответы
48
Автор поста оценил этот комментарий

Причесать, портировать на Андроид — дело будет!

раскрыть ветку (1)
20
Автор поста оценил этот комментарий

Адаптировать под мобилки в планах после лабиринта. А что можно причесать?

показать ответы
Автор поста оценил этот комментарий

Не-а...

Иллюстрация к комментарию
раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Таки все претензии к вк. Хотя не вижу никакой проблемы, ибо общая информация и так видна, я её бы мог её вытянуть тупо ид прямо с сайта и без всяких апи.

показать ответы
10
Автор поста оценил этот комментарий

Прикольный концепт. Но есть проблемка, все время ощущается дискомфорт что не попадешь куда целишься или что не влезет. Хоть и не ошибся ни разу, но какое-то волнение всегда есть. В обычном тетрисе часто есть разметка фона в клеточку, потому легко проследить куда падает фигура и сколько она займет. Здесь это сложно. Даже не знаю что предложить для решения. И еще слегка напрягает искривленность цилиндра, для такой ширины он узковат. Быть может сделать толщину фигур меньше и уменьшить толщину обводки. Еще можно отрисовать верхнюю обводку светленьким, а нижнюю темненьким добавит объема. Правда это заморочно програмно рисовать, но это я с позиции художника уже смотрю.
Хз, мне кажется можно попробовать спрайтами все сделать. Например, красивенько отрендерить каждый кубик каждого цвета, в каждом месте. Расположить их послойно, учитывая перекрытие. И просто включать в нужное время нужные кубики. И можно было бы тогда решить разметку, вв виде полупрозрачного цилиндра с легкой разметкой.
А так очень интересно. Жму руку за упорство.

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

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

показать ответы
8
Автор поста оценил этот комментарий

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

как-то так http://www.picshare.ru/uploads/161111/i93D2YNtlc.jpg

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

теперь я могу помогать ЛЛ и прикреплять картинки

Иллюстрация к комментарию
показать ответы
2
Автор поста оценил этот комментарий
Интересно, а зачем игре доступ к личным данным???
раскрыть ветку (1)
9
Автор поста оценил этот комментарий

Доступ к общей информации вообще-то. Это самый минимум прав, который только можно запросить, чтобы потом показывать имя в топе.

показать ответы
8
Автор поста оценил этот комментарий

Товарищ майор, мы вам не верим...

раскрыть ветку (1)
8
Автор поста оценил этот комментарий

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

как-то так http://www.picshare.ru/uploads/161111/i93D2YNtlc.jpg

показать ответы
10
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
5
Автор поста оценил этот комментарий

Да, многие просят, а у меня профдеформация, ибо уже нет такой потребности.

показать ответы
Автор поста оценил этот комментарий
На андроиде будет?
раскрыть ветку (1)
5
Автор поста оценил этот комментарий

Планирую портировать на мобилки. Но только после того как доделаю нечто, что вырастет из этой демки http://mblkolo.github.io/labirint/index.html

показать ответы
Автор поста оценил этот комментарий

И там сложная система освещения? Просто я вижу внутренние выглядят темнее.

раскрыть ветку (1)
5
Автор поста оценил этот комментарий

Специально сделал разного оттенка, чтобы не сливалось. Освещения нет, просто для каждого цвета есть 2 оттенка и выбирается один из них в зависимости от того какая стенка рисуется.

5
Автор поста оценил этот комментарий

Классная идея и реализация хорошая. Перспективная игра! Я бы с удовольствием взял Вас на работу, если бы я был боссом крутой it фирмы :) Но я не босс. Я бы инвестировал кучу денег в эту игру, если бы я был бизнес-ангелом, попивающим смузи на просмотре стартапов, жаждущих найти место в коворкинге IT-парка :) Но я не такой.
Поэтому просто выражаю своё уважение и благодарю за увлекательный час игры!
Пара пар предложений, может это поможет развитию игры:
1. Мне не хватает тени от фигур. Чтобы сразу было видно куда упадёт фигура.
2. У меня была паника, пока не упала первая фигурка, я считал что кнопки поворота не работают. Возможно, сетка на полу и плавная анимация поворота решит проблему.
3. На протяжении одной игры пять раз выпало три палки подряд. Но возможно это просто совпадение и мне стоит сегодня сходить в казино.
4. Если портируйте на мобильные платформы, пожалуйста, не делайте Палку платной ;)

раскрыть ветку (1)
4
Автор поста оценил этот комментарий

1. Тень - хорошая фишка, многие просят, сделаю

2. Да, замечал такое за теми кто в первый раз играет. Потом проходит. Думаю добавлю риски снизу, чтобы было понятно что площадка вращается.

3. Напоминает историю с яндекс.музыкой, когда на их честный случайный выбор песен жаловались что он недостаточно случайный, т.к. мог выдать 2 песни одного и того же исполнителя подряд. Случайную фигур выбираю так:
figures[Math.floor(Math.random() * figures.length)]

4. Не, я не хочу уродовать игры. Я пока уверен, что донат не должен влиять на геймплей.

показать ответы
Автор поста оценил этот комментарий
С шарпа не легче сначала под винфон?
раскрыть ветку (1)
4
Автор поста оценил этот комментарий

Есть мнение, что хтмл упаковать в приложение почти не ничего не стоит. Например так http://cocoon.io/

4
Автор поста оценил этот комментарий

Понятно. Просто есть вот такая проблема.

Иллюстрация к комментарию
раскрыть ветку (1)
6
Автор поста оценил этот комментарий

Я знаю, тут без Z буфера никуда, или придётся разбивать на части и хитро рисовать, но это решение не для общего случая. У меня случай специфический и удалось сделать простой рендер.

показать ответы
1
Автор поста оценил этот комментарий
Понятно что без Z буфера никуда. Но, чисто ради интереса, нельзя ли было цилиндр сделать более плавным? Насколько я знаю, делается это элементарно, но с визуальной точки зрения выглядело бы приятней.
раскрыть ветку (1)
4
Автор поста оценил этот комментарий

Ни разу не задумывался над этим :) возможно более круглый тетрис был бы лучше.

3
Автор поста оценил этот комментарий

А по какому алгоритму выбирается очередность прорисовки полигонов? Просто я помню как я пытался ручками делать и получалось что-то подобное. Довольно кривой самолёт вырисовывался.

раскрыть ветку (1)
5
Автор поста оценил этот комментарий

Сортировка в глубину. Рисуются от дальних блоков к ближним, только лицевые грани. Рисую самым обычным canvas.moveTo и canvas.lineTo

показать ответы
1
Автор поста оценил этот комментарий

Тебя уже согнали с 1 места)

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Может в этом и была моя цель ;)

Автор поста оценил этот комментарий

Есть ещё удобная штука - проекция (почти прозрачная) фигурки вниз, чтобы можно было прикидывать, куда она упадёт. А не с линейкой сидеть

раскрыть ветку (1)
Автор поста оценил этот комментарий

Пробовал - не понравилось.

Автор поста оценил этот комментарий
Как вывод графона реализован, расскажи, пожалуйста.
раскрыть ветку (1)
Автор поста оценил этот комментарий

На канвас, примитивными функциями, скажем стенка куба рисуется так:

private drawBrickPane(brick, index: number[], color: string, wc: CanvasRenderingContext2D) {

  wc.fillStyle = color;

  wc.beginPath();


  wc.moveTo(brick.points[index[0]].x, brick.points[index[0]].y);

  wc.lineTo(brick.points[index[1]].x, brick.points[index[1]].y);

  wc.lineTo(brick.points[index[2]].x, brick.points[index[2]].y);

  wc.lineTo(brick.points[index[3]].x, brick.points[index[3]].y);


  wc.closePath();


  wc.fill();

  wc.stroke();

}

1
Автор поста оценил этот комментарий
Вот дорисовал остальные кубики. Каждый кубик на отдельном слое. Все 15 х 15. Можно легко покрасить каждый в любой цвет. Впринципе достаточно одного ряда, и просто перемещать по Y координате. Если надо могу закинуть исходник в .ai
Кстати из люстры векторные файлы вроде как можно как-то экспортить непосредственно в HTML5 canvas.
Иллюстрация к комментарию
раскрыть ветку (1)
Автор поста оценил этот комментарий

Если можешь, экспортни в svg и дай ссылку на скачивание.

Автор поста оценил этот комментарий

А можно немного подробностей: почему вы использовали runit и nginx?

Если с остальным более-менее понятно, то на этом моменте я впал впросак.

Возможностей апача для такого приложения не хватает? Что там происходит такого с процессами, что ими надо управлять?

раскрыть ветку (1)
Автор поста оценил этот комментарий

У меня сервер на .net core, потому что C# мой основной рабочий язык, я умею на нём писать серверную часть. nginx использую потому что его легко настраивать. На него свешал работу с сертификатами, раздачу статики с сжатие контента. Могу похвастаться настойкой безопасного соединения https://www.ssllabs.com/ssltest/analyze.html?d=lazyhopeless....


А runit я использую чтобы сделать за сервером, может можно было лучше сделать, но я не силён в линуксах и сделал так как проще, вот по этой статье: https://habrahabr.ru/post/83775/

Автор поста оценил этот комментарий

Добавьте вашу игру в Telegram, как раз таких игр там не хватает. Готов помочь, если возникнут затруднения.

раскрыть ветку (1)
Автор поста оценил этот комментарий

Да этого же нужно сначала портироваться под мобилку, правильно?

показать ответы
2
Автор поста оценил этот комментарий

Еще сыровато, но в общем как-то так. Давай завтра спишемся тут в коментах.

Иллюстрация к комментарию
раскрыть ветку (1)
Автор поста оценил этот комментарий

Идея с полупрозрачным цилиндром в центре мне нравится, Но вот количество клеток по окружности не хочу увеличивать, больше будет скучно. Я сначала вообще 10 сделал как в классическом тетрисе, но выглядело совсем ужасно :)

показать ответы
Автор поста оценил этот комментарий

Что это всё за английские слова и сколько этому учиться с 0?

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Много, очень много, но можно срезать использую конструкторы игр. Но просто всё равно не будет.

1
Автор поста оценил этот комментарий
Ну, например у меня страница доступна только для друзей. Остальным виден только никнейм и фото профиля. Надо поизучать API VK по поводу того, что они имеют ввиду под словом общая информация.
раскрыть ветку (1)
Автор поста оценил этот комментарий

Я думаю, что это то что видит не залогиненный пользователь. Если будешь изучать, кинь сюда что наизучал, лады?

1
Автор поста оценил этот комментарий
Ну есть какие-то стандартные размеры окна самой игры 800 х 600 px там или еще какие?
раскрыть ветку (1)
Автор поста оценил этот комментарий

@Neck9, меня не теряй, ибо я не отвечаю не потому что ленива скотина, а потому что в Ч уже 3 часа ночи и я вырубился.

показать ответы
1
Автор поста оценил этот комментарий
Ну есть какие-то стандартные размеры окна самой игры 800 х 600 px там или еще какие?
раскрыть ветку (1)
Автор поста оценил этот комментарий

канва 560 на 560

2
Автор поста оценил этот комментарий
Хм... На Opera 10-12 в плагинах точно такой же тетрис был. Стоит ли копать и поднимать старые образы диска, сверять код? Или сами признаетесь, что позаимствовали что-то?

http://www.html5games.net/torus-3d-tetris/
http://www.foxload.com/opera/torus-rundes-3d-tetris-fur-oper...
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Это было ожидаемо, что есть тетрисы колодцы, ибо все низковисящие плоды давно сорваны. Могу сказать что совершенно точно не вдохновлялся чужой реализацией и уж тем более ничего не заимствовал (цвета? код? систему очков?).

показать ответы
1
Автор поста оценил этот комментарий
Думаю перспективу использовать не стоит. Лучше остановиться на изометрии. Тогда все ряды кубиков будут унифицированы.
Да, могу, погодь чуток. Расчехляю люстру.
Скажи пожалуйста. Надо знать размеры поля. И количество кубиков в строке. И сколько в высоту?
раскрыть ветку (1)
Автор поста оценил этот комментарий

Поле 15 на 15 клеток. Что имеется ввиду под размерами не знаю.

показать ответы
Автор поста оценил этот комментарий

После касания движущегося кубика с упавшими, если повернуть быстро - он, сука, не приклеится. Это не должно так работать

раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы
1
Автор поста оценил этот комментарий
Но ведь конкретно такой тетрис уже давно есть
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

В вк только такой есть, но он дохлый https://vk.com/app2775968

показать ответы
Автор поста оценил этот комментарий

может тебе помочь?

раскрыть ветку (1)
Автор поста оценил этот комментарий

Не откажусь, а чем можешь помочь?

показать ответы
1
Автор поста оценил этот комментарий

Спасибо, очень залипательно. С:

раскрыть ветку (1)
Автор поста оценил этот комментарий

Пожалуйста :3

Автор поста оценил этот комментарий

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

раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы