Need For Kill - Quake 3 in 2d - WebGL game
В начале 200х некто 3d[Power] сделал игру "Need For Kill" по мотивам Quake 3. Игра написана под Windows DirectX на Delphi. В игре пристусвует мультиплеер, в интернете и на сегодняшний день сущствуют выделенные сервера для игры (к ним можно подключиться прямо из меню игры). В игре присутсвуют несколько режимов заимтствованных из Quake 3 и других игр: duel, teamplay, captu the flag, domintaion и прочие. Осовной фичей является продвинутая прогеймерская физика и отличный игровой баланс! В середине 200x по игре проводились LAN чемпионаты России с призовым фондом. Время от времени проходят online турниры.
Посмотрите этот короткий ролик, чтобы составить представление об игре: http://www.youtube.com/watch?v=FgvgVttl0zE
Больше видео можно найти на этих двух каналах: http://www.youtube.com/user/nfk2d и http://www.youtube.com/user/needforkilldemo
Скачать оригинальную игру Need For Kill можно с официального сайта: http://needforkill.ru/load/need_for_kill_0_77/22-1-0-494
К сожалению, исходные коды последней версии игры были утеряны автором после того, как он потерял интерес к разработке. Сохранились лишь бекапы одной из промежуточных версий. На основе этих "промежуточных" исходников ряд энтузиастов продолжают развивать последнюю версию игры, внося правки непосредсвенно на ассемблере. Но этот процесс очень трудоёмок и время от времени возникает идея переписать всё заново.
NFK-WEB - это проект нацеленный на перенос оригинальной игры под веб-платформу, но с сохранением физики и игрового баланса.
Демо: http://nfk.pqr.su/game/
- Графика рендрится при помощи одной из самых популярных библиотек: Pixi.js (WebGL или canvas, если первый не доступен в браузере пользователя)
- JavaScript код клиента написан на спецификации ECMAScript 2015 (ранее известного как ES6). Но поскольку не все фичи этой спецификации поддерживаются современными браузерами, код перед публикацией на сайт транслируется в поддерживаемый всеми ES5 с помощью библиотеки Babel
- Сборка проекта с помощью системы webpack
- Переписать код отвечающий за коллизии (сейчас это выглядит как "спагетти" перенесённое из старых Delphi исходников)
- Написать подробный мануал для разработчиков, как настроить окружение и систему сборки (node, webpack, ...), возможно, записать скринкаст
- Реализовать первое оружие: Railgun!
- Написать мультиплеер и серверную часть, для начала с одним режимом игры: Railarena
- Запустить официальный сайт игры с регистрацией, статистикой игр, системой подбора подходящего по скилу игрока во время игры через сайт
- Добавить больше оружий и типов игры: (duel, ctf и teamplay)
- Разработать продвинутый редактор карт
- Текстуры, скины для моделей
- Визуальные эффекты
- Profit!!!
Ниже вы найдёте пошаговую инструкцию, как начать программировать NFK-WEB. Разрабатывать можно на Windows, OS X или Linux. Инструкция ниже написана на примере Windows, но на других ОС всё работает аналогичным образом.
Предполагается, что вы умеете пользоваться git и github, сделали форк, скачали исходники.
В рамках этого проекта планируется написать web-клиент в браузере на JavaScript + WebGL и сервер на Node.js (тоже JavaScript), общаться они будут по технологии WebSockets. На текущий момент в этом репозитории есть код только клиентской части - физика и рендринг. Однако, для запуска на локальной машине вам всё же понадобится Node.js. Качаем и устанавливаем отсюда: http://nodejs.org/download/
После установки Node.js откройте консоль (cmd.exe) и перейдите в папку с репозиторием nfk-web.
Выполните следующие две команды, чтобы установить дополнительные утилиты, написанные под Node.js и необходимые для разработки:
Первая команда npm install webpack -g - устанавливает сборщик проектов webpack в качестве глобального пакета (флаг -g) в систему. В случае Windows файлы будут установлены в %UserProfile%\AppData\Roaming\npm\ и этот путь будет добавлен в PATH, таким образом вы сможете запускать утилиту webpack из сконсоли просто набрав webpack
Вторая команда npm install - устанавливает пакеты указанные в файлы package.json в текущей папке (а вы должны были в самом начале перейти в папку с клонированным репозиторем, таким образом package.json у вас уже есть!). Пакеты будут установлены локально внутри данной папки в подпапку node_modules. На самом деле здесь устанавливается всего одна утилита: Babel - транслятор кода ECMAScript 2015 (современный стандарт JavaScript, который ещё не поддерживается всеми браузерами) в более старый стандарт ECMAScript 5, который поддерживается всеми браузерами.
Теперь у нас есть всё что нужно, можно открывать свой любимый редактор кода с подстветкой JavaScript (например, WebStorm) и начинать кодить!
Исходный код состоит из index.html (основная разметка страницы) и множества JavaScript файлов из папки src, каждый из которых отвечает за свою часть логики игры (например Keyboard.js, Physics.js, Render.js). Это вам не оригинальный NFK, где почти весь код был в Unti1.pas на 30К строк :)
Однако, подгружать все js файлы отдельными script тегами внутри index.html не лучшая идея - загрузка страницы станет медленнее и вам нужно будет аккурато следить за зависимостями, чтобы самые нужные файлы загружались раньше, чем другие. Например, файл Constants.js содержит константы используемые во всех прочих модулях и он должен загружаться первым. На помощь приходит утилита webpack, которую вы уже установили. Эта утилита с помощью файла конфигурации webpack.config.js (лежит в корне репозитория) может склеить все *.js исходники из папки src в один файл build/gamebuild.js - именно этот файл подключается на странице index.html.
Код игры написан на последней версии стандарта языка JavaScript - ECMAScript 2015. Поскольку браузеры ещё не поддерживают этот стандарт в полном объёме (текущее состояние дел: http://kangax.github.io/compat-table/es6/), код нужно конвертировать в старый-добрый JavaScript ECMAScript 5 (http://kangax.github.io/compat-table/es5/). Этим занимается утилита Babel, которую вы уже установили. Но запускать её вручную не нужно, т.к. webpack.config.js содержит необходимые настроки для автоматического запуска Babel в процессе работы самого webpack.
Таким образом, запущенный webpack делает следующее:
- смотрит за изменениями исходников в папке src, если что-то поменялось, то
- читает все *.js файлы из папки src и конвертирует их из ECMAScript 2015 в ECMAScript 5 (сами файлы не перезаписываются, конвертация происходит только в памяти)
- склеивает полученные результаты в нужном порядке в единый большой JavaScript код
- записывает в файл build/gamebuild.js
Чтобы не открывать консоль и не писать команду webpack, а положил в корень репозитория bat файл: runwebpack.bat
Теперь можно залить игру на свой хостинг (или запустить под локальным веб-севером, типа apache, nginx, iis...) и посмотреть, что получилось.
Но можно пойти дальше и использовать так называемый webpack dev server. Для этого в консоли (в папке проекта) нужно выполнить команду webpack-dev-server или запустить runwebpack_dev_server.bat, который лежит в корне репозитория. Эта команда стартует простой веб-сервер написанный на Node.js по адресу http://localhost:8080, который будет раздавать статический контент из корня репозитория (строго говоря, из той директории, откуда была запущена команда webpack-dev-server). Таким образом для локальной отладки нам не нужно ставить apache или nginx или другой веб-сервер.
Более того, запущенный webpack dev server следит за изменениями исходных файлов в папке src (папка за которой следить указана в webpack.config.js) и на лету генерирует новый build/gamebuild.js, но не записывает его на диск, а раздаёт как веб-сервер из памяти. Можно обновить страницу localhost:8080 в браузере, потестировать изменения и продолжить кодить. Но перед заливкой на реальный хостинг не забыть сгенерировать реальный файл gamebuild.js на своём компьютере, запустив runwebpack.bat.
Если вы ещё не запутались, расскажу последнюю фишку: помимо того, что webpack dev server умеет следить за файлами исходников и перекомпилировать их на лету, он ещё может автоматически обновлять страницу в браузере! По адресу http://localhost:8080/webpack-dev-server/ вы увидите игру, в которую встроен дополнительный скрипт, обновляющий страницу по сообщению от сервера об изменениях в исходниках. Полная автоматизация разработки!
Основной код, который выполняется при загружке страницы, находится в файле app.js - это своего рода аналог main из мира Си. Там находится бесконечный цикл, который с определённой частотой дёргает функции обновления физики и рендринга.
Проект с открытым исходным кодом под лицензией MIT. Принимаем баг-репорты и пул-реквесты! В частности, ищем человека знающего толк в написании сетевого кода для мультиплеера (как клиентской, так и серверной части)
С нами можно связаться на irc канале: irc.wenet.ru:6667 #nfk (кодировка cp1251). Веб-портал для irc: http://needforkill.ru/index/web_chat/0-54
Или в чатике Gitter.im:
Мы в твиттере @nfk2d