Пошаговая стратегия как хобби



    Привет, хабралюди! Кто из вас не мечтал создать свою игру? А возможно ли написать браузерную стратегию, не имея при этом опыта и денег? Возможно, если очень этого хотеть.

    Под катом моя история создания бесплатной пошаговой стратегии.



    Что из себя представляет игра? В двух словах — сетевой аналог старого доброго «Panzer General».

    Но обо всем по порядку.

    Предыстория


    Некоторое время назад я играл и модифицировал серию игр «В тылу врага». Серия отличная, а тамошние танковые бои считаю прародителями World of Tanks. Но за несколько лет сетевая игра жутко надоела, даже с модами. Причиной тому был однообразный геймплей: одни и те же карты, один и тот же поток юнитов,
    все игроки всегда копили кредиты на более мощный танк или отряд пехоты, а юнит-лист каждого был строго фиксированным.
    Таким образом некоторая техника полностью исчезла из боев, а последние были однообразны и предсказуемы. Искались способы в модах кастомизировать меню покупки, дабы игрок хотя бы рандомно получал свой юнит лист и им сражался, не говоря уже о специализациях. Но увы движок этого не позволял.

    Тогда же в форумных дискуссиях и родилась идея — «а что, если к игре прикрутить глобальную карту с экономикой?».
    Стратегия на глобальной карте, тактические бои в ВТВ. Юниты доступные сторонам диктует фронт. Не успел прислать подкрепления? — сражайся тем что есть! Круто! Конец однообразию!

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

    Я немного знаком с коллективом BestWay, и мы пришли к выводу, что стратегию то можно и в браузере реализовать, тогда «В тылу врага» придется минимально дорабатывать, всего лишь дописав API.

    Браузерную часть, без раздумий, гордо взял на себя. Договорились после каких-то моих наработок обсудить дальнейшую жизнь проекта, ведь «поболтать» все мастера.

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

    Разработка


    В качестве фреймворка был выбран Сodeigniter, на нем я правил несколько чужих проектов, и был некий опыт. Клиентскую часть было решено писать на JS, точнее на jQuery, ведь flash я еще больше не знал.

    Далее нужно было понять как это все должно выглядеть. Из игр подобного жанра я видел лишь «Total war» и «Карибский кризис», но все они были standalone. Продолжительное гугление дало свой результат — weewar.com. Вот оно, то что нужно!

    За основу была выбрана карта Европы и начал анализировать html. На виваре было несколько слоев. Нижний — картинки территорий, средний — юниты, самый верхний — теги area с точным контуром гексы. При этом, весь html код весил больше 500 кб.

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


    Как я решил эту проблему? Никак. Практика показала, что она совершенно несущественная. Все клики в 99% случая производятся в центр гексы или выше. Если в будущем будут жалобы, сделаю проверку координат клика.
    Карта отрисована, в глазах счастье. Движемся дальше.

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

    Как обычно, сначала строился велосипед, затем внезапно обнаружен «волновой алгоритм», и на его основе все хорошо собралось до работоспособного состояния. Далее его нужно было портировать на php, т.к. любые расчеты js легко подделываются. Переписал, выбросил все лишнее, ведь на сервере необходимо всего-лишь проверить валидность движения из точки А в точку Б. Работает.

    Очередная интересная задача — избавиться от перезагрузки страницы. Тут все оказалось достаточно просто. Запись всех игровых действий в лог, выборка аяксом свежих логов с помощью long polling, анимация на карте полученных данных. В итоге, в двух разных браузерах я видел одни и те же действия, совершаемые в третьем. И это было очень круто, учитывая, что даже на виваре не было никаких анимаций и практически невозможно было понять, что твой враг делает, кого куда передвинул и кем атаковал.

    Очередное «ноу хау» по сравнению с weewar — отображения лога действий и возможность просматривать повтор. Ну кому будет удобно читать player1 move unit 23,5 -> 24,6?
    Пару десятков строк кода, и юзер, кликнув на глаз в логе, видит повтор анимации.
    image

    Когда данный прототип был показан, никакого внятного ответа от BestWay я не получил. Но совершенно не расстроился. За плечами был отличный опыт программирования и стремительное решение доделать игру как независимую. Как weewar, но лучше.

    То что было дальше, помимо программирования, можно смело считать геймдизайнерской работой.
    Сеттинг был оставлен — Вторая Мировая.
    Придумывались формулы для расчета атаки, характеристики юнитов… Очередная моя гордость — разные бонусы территорий, для взаимодействия разных типов войск. Например, танк в лесу получал +2 к обороне от вражеской техники, но -2 от пехоты, что было вполне логично и имело важное значение для геймплея. На виваре лес просто давал танку -2 к обороне.

    Так медленно и печально, спустя пол года, была рождена альфа версия, где уже можно было играть и даже местами было интересно. Потратились «кровные» на покупку домена и хостинга, проект выкачен в свет, и с друзьями начали играть первые партии. Выглядело это тогда так.

    Жизнь проекта


    В первые недели количество зарегистрированных пользователей было очень мало. Никто не понимал, куда он попал и что нужно делать. Нужен был хороший мануал, и я начал смотреть онлайн проекты на их наличие, дабы хоть примерно понять как они пишутся. Пролистав несколько, мне стало нудно. Если ты уже немного знаком с игрой, тогда документация читается легко. Но для новичка — это «лес». Пришел к выводу, что нужно интерактивное обучение. Минимум текста, максимум действий. После его реализации жизнь стала налаживаться.

    День за днем игрались партии на затертой до дыр карте Европы, еще той, с weewar. Это быстро надоело. Было ясно, что без редактора карт не обойтись.
    Примерно за месяц написал такой редактор, которому игроки были очень рады. В первые сутки его существования в проекте появились 5 новых карт. На сегодняшний день карт около 40.

    Очень хотелось сделать красивую отрисовку возможный путей.
    Но уперся в производительность браузеров. Для реализации необходимо JS-ом накладывать третий слой с полупрозрачной белой гексой. А на средней карте это около 1000 новых div. Файрфокс, опера — довольно быстро справлялись с задачей. Хрому нужно было несколько секунд. Ну а виновник «торжества» — IE. Даже девятая версия добавляла дивы секунд 5. Пришлось отказаться. Думаю над более производительной схемой.

    Вот так, в течении нескольких месяцев, почти каждый день в проекте что-то делалось. Фиксились баги, прикручивались новые фичи. Добавлялись юниты. Буквально на днях был кардинально обновлен интерфейс, и добавлена новая нация — США. Полная история изменений доступна в разделе «Что нового?».

    За 2 месяца жизни проекта зарегистрировалось почти 150 русскоязычных пользователей, было сыграно 300 игр, а в логе действий оказалось 75 тысяч записей.
    Наверное неплохо, учитывая, что ни копейки не было потрачено на рекламу, а проект был представлен всего-лишь на нескольких русскоязычных форумах.

    Что дальше?


    Кто-то клеит модельки, кто-то играет в страйкбол, мое хобби — моя стратегия.

    В данный момент собираю «кровные» на хорошего художника, ведь многие юниты и объекты в игре из других игр.

    В будущем планирую реализовать еще несколько сеттингов, например, средневековье или современную войну, пока не решил. А может и орков с эльфами, с чем чёрт не шутит.

    Также в планах нужные фичи, такие как туман войны или бронирование техники. Более подробно можно почитать на сайте в разделе «В разработке».

    Проект пока крутится на обычном хостинге, поэтому даю ссылку сразу на обучение. Оно полностью на JS, не насилует MySql. Надеюсь, хабраэффект будет милостив.

    Wargex

    Спасибо за внимание и удачи на виртуальных фронтах!

    P.S. Огромное спасибо alexDark и Armin за помощь со статьей.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 56

      –11
      html5 было бы актуальнее :)
        +9
        Я в восхищении!

        Не думали сделать OpenSource? Думаю, набралась бы приличная команда разработчиков, желающих поддерживать такой проект.

        Либо наоборот, не думали о поиске инвесторов? Опять же, думаю и с коммерческой точки зрения получилось бы неплохо
          +1
          К OpenSource пока не готов. Инвесторы? Сомневаюсь, что на таких варгеймах можно что-то заработать. Донат вполне вероятей.
            +3
            Реклама это дело, а OpenSource тоже дело, но клон скорее всего уже есть.
            Можно ввести рекламный юнит или возможность, предложив компании разместить ее логотип.
            Рекламный тип поверхности, типа Colgate защищает ваш город +2
            Или с развитием игры и появлением апгрейдов привязывать логотипы.
            С появлением исследований тоже «Интел» разрабатывает в вашем городе процессоры N для военных
            Ваш город закупил у GE светодиодные лампы N Город сберегает 100500 и экономит принося в бюджет +1050, солдаты получают фонарики и видимость +1.
            Я могу тысячи таких примеров придумать: «EMS Почта России...» Хотя нет это уже не реалистично
            То есть главное это получить рекламодателей, ну либо есть идея наладить взаимодействие с ними чтобы не особо искать их.
              +19
              EMS Почта России… ваш город потеряется где-то в китае при перемещении на соседнюю клетку
                +2
                Или юниты прибудут на поле пожеваными
                  –1
                  «Мы под президентом» и растопыренные пальцы.
                  Это же стратегическая фишка.
                  Разбомбили страну, несмотря на некую посланную нам резолюцию ООН в вакууме — не бомбите. А им в ответ ну вы же знаете нашу почту. А в следующую секунду курьер приносит конвертик со словами распишитесь.
            +2
            Я потыкался и не смог начать нормально играть! Попробуйте растянуть бесконечные подсказки по процессу игры, а то слишком большой объем информации сразу! В большинстве игр (обыкновенных, не браузерных) обучение происходит постепенно по мере прохождения начальных уровней игры! Попробуйте последовать примеру грандов геймдева!
              +6
              Интересно. Несколько замечаний: расчет координатов клика сделать очень легко на эту тему мануалов в сети море. Смотрите к примеру здесь: www.tonypa.pri.ee/tbw/tut25.html
              Второе: для отрисовки возможных путей не нужно тысячи дивов, нужен один: полупрозрачный оверлей, а сверху собственно путь — группа тайлов, которые засчет того что находятся над оверлеем создадут желаемый вами эффект. Я кстати тоже делаю что то подобное: jgen.googlecode.com/svn/branches/map-editor/index.html

              Ну и напоследок вопрос: где графику брали?
                0
                Да, действительно. Я даже не догадался, что над полупрозрачным дивом можно продублировать гексы с территорией. Спасибо за подсказку.

                За графику забыл написать. За большинство гексов территорий также отдалось немного кровных талантливому пареньку. Все остальное вырезалось из скриншотов «В тылу врага» и других проектов.
                  +1
                  Да их даже дублировать не надо, благодаря тому что каждый тайл это див, достаточно сделать .appendChild на диве лежащем над оверлеем — это тупо перенесет тайл из под оверлея — в слой над ним.
                    +1
                    Да, Вы правы. Опыта в моем деле очень мало, сразу ко всему не догадываешься. Еще раз спасибо за подсказку.
                      +1
                      Или вообще z-index использовать (правда в IE могут быть сюрпризы).
                        0
                        В ие будут сюрпризы и очень нехорошие ибо PNG.
                          0
                          Как раз на днях решал проблему png и z-index :)
                          Правда у меня один png-фон и однообразные картинки. С z-index там проблема в наложении идущих после, на то, что идет до, но возникает, когда идущий до становится «больше». Тут, если за клетки не выходит изображение, то проблемы может и не быть. С png, судя по тому, что оно уже работает, проблема как-то решена.
                          А вообще, конечно, ну его нафиг, этот IE! Для таких специфических вещей, с немаксимально широкой ЦА, может уже стоит отказываться от поддержки IE (не знаю как там в IE9 те же эффекты проявляются).
                  +1
                  А не проще это вынести вообще на уровень CSS, через прозрачность? Грубо:

                  .map-with-path .tile{ opacity: 0.5;}
                  .map-with-path .path-tile{ opacity: 1;}


                  Далее карте даём класс map-with-path, а всем видимым тайлам path-tile. Остальные сами тухнут в полупрозрачности.

                  Никаких существенных манипуляций с DOM, никаких дополнительных png.

                    0
                    Да проще
                  +2
                  И в догонку… откуда там тысяча дивов то? Если делать по уму — то отрисовывать нужно только то что попадает во viewPort, вот тут то что я имею ввиду: jgen.googlecode.com/svn/branches/api-test/map.html спрайт «идет» по бесконечной карте, количество дивов (смотрите сами через инспект) — соответствует тому что физически вмещается в рамку viewPort'a… в любом случае удачи!
                    +2
                    У меня дежавю. Хм, хотя фиолетовая ссылка говорит об обратном %(
                      0
                      вот вам и первый баг-репорт.
                        +1
                        clip2net.com/s/1aqSN
                        не вставилась картинка сначала, извиняюсь.
                          +1
                          Спасибо, исправлено.
                            +1
                            Не за что, игра и впрямь потрясающая, если всё же надумаете OpenSource, дайте знать.

                            Да и ещё из пожеланий, когда в чате пишешь, что бы сообщение по нажатию на Enter отправлялось, так многим думаю привычнее будет.
                        +4
                        желаю успехов. именно при таком душевном подходе создаются лучшие творения!

                        пс не упадите под хабраэффектом:)
                          0
                          А чего самолеты несколько раз одну цель не атакуют?
                            0
                            А с чего им несколько раз атаковать? :)
                              0
                              Ну как, один раз на ход, нет?
                                0
                                Верно, самолеты атакуют один раз на ход. Возможно, вы пытаетесь атаковать истребителем танки? У них атака против танков 0, поэтому не атакуют.
                            0
                            Никто еще не упомянул eRepublik'y и всеми проклятый военный модуль из v2?
                            0
                            С помощью чего был сделан long polling? Или какая-то своя разработка?
                            +6
                            супер ) один момент — энтузиазм когда нить заканчивается (по своему опыту знаю) и тогда проект умирает…
                            посему думайте о монетизации :)
                              0
                              Отличная идея и реализация!
                              Что-то подобное под названием «Блицкриг» когда-то было на WinMobile.

                              P.S. Не совсем, правда, понял как всё это связано с ВТВ и сетевой игрой в ней.
                                0
                                «Мировую войну» в WoT видели? Там стратегия и экономика в браузере, а бои в клиенте WoT. Тут планировалась такая же схема.
                                0
                                Впечатляет! Сделать более юзер френдли, добавить небольшую кампанию из 10 миссий для обучения. Повесить рекламу на сайт, подать рекламу вконтакт и будет профит.
                                Если делать другой сеттинг, то я бы выбрал sci-fi про космические корабли.
                                Успехов!
                                  0
                                  не только рекламу в вк, а ещё и приложение, тогда будет совсем сказочно.
                                    0
                                    Так в вк размер окна маленький, как туда это все поместить? Наверное единственный выход — это flash, хотя могу и ошибаться.
                                  0
                                  Картинка в топе чем-то напомнила старую добрую Battle for Wesnoth…
                                    +2
                                    А мне почему-то настольную The Settlers of Catan
                                    0
                                    Не хватает звукового оповещения после каждого хода.

                                    И переключатель земля/воздух ну очень мал. Очень.
                                      +1
                                      Я просто в восторге. Особенно после заявления про «скудный опыт». Всегда уважал людей которые не ищут отмазок и не чинят препятствий сами себе а просто садятся и делают! Отличная статья и игра
                                        0
                                        Может форум подключите?
                                          0
                                          Обязательно. К слову говоря, может кто посоветует простой форум, который легко можно будет интегрировать с Tank Auth?
                                          0
                                          Искусственный AI хочу, не всегда хочется играть с кем-то… иногда просто с компом погонять можно.
                                            0
                                            Там вообще кто-нибудь играет?
                                            Поиграйте со мной, попробовать хоть.
                                              0
                                              Спать не пробовали? :)
                                              0
                                              Круто :)

                                              P.S. Мультиплеер ВТВ бесподобен :) Наверное самая многогранная сетевая игра из тех, что я играл.
                                                +1
                                                ВТВ божественная игра, ни одна игра в этом жанре мне так не вставляла. Но многогранность её сыграла злую шутку: не хватало нормального управления большими группами юнитов. И возведения фортификационных сооружений. В последнем аддоне добавили возможность возведения брустверов, колючки и п-т ежей, но из-за первого недостатка воспользоваться ими даже в одиночке получается только в одиночке, и то редко — элементарно не успеваешь. А уже переснарядить целый отряд другим оружием — это же минут пять надо потратить. Я уж не говорю о случае, когда двадцать человек пехоты расстреляли все патроны и тупят в окопах. Это же надо каждым сходить обыскать пяток трупов, чтобы насобирать боезапас… А если они под огнем? А если где-то далеко что-то важное происходит? Уж кнопочку «поискать патроны к текущему оружию» можно было бы сделать… Сказывается изначальная заточенность под дотошное управление мелким отрядом, одним словом. В одиночке это все доставляет неимоверное удовольствие, а в сетевой, увы, портит геймплей…

                                                А по сабжу — так держать, товарищ! Уважаю. Я тоже вот делаю в свободное время игрулину just for fun, и знаю, как много это отнимает времени и сил. Может, тоже когда-нибудь доведу её до презентабельного состояния и выложу на суд общественности…
                                                0
                                                По скриншоту думал, что это настольные колонизаторы…
                                                  0
                                                  Можно поинтересоваться, в среднем сколько часов в день уходило на работу над игрой?
                                                    0
                                                    Да по разному. Когда все выходные сидел, а когда и на месяц-два забивал, ибо надоедало.
                                                    0
                                                    Не хватает кораблей и подводных лодок — морских юнитов. Здорово!
                                                      0
                                                      До кораблей просто не дошел — они тоже есть оказывается…
                                                      0
                                                      Офигенско!

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                      Самое читаемое