Архив рубрики: Я стану Разработчиком Игр

Как можно стать разработчиком игр? Ответ на это вопрос в этой рубрике!

Обучение JS и разработка игры Самолётик. Шаг 2.

В подготовительной части  мы подгружали 2 JS файла:

<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/step1.js"/></script>

Если про 1 я упоминал — это сам 3D фреймфорк, то файл «step1.js», то то что нам предстоит создать.

Преступим.

Из чего должна состоять игра самолётик? Вполне логично предположить что из самого самолетика, поля над котором он должен лететь, облаков для антуража, топливо ( в последующем мы его заменим на буквы) для полета, которое нужно собирать ну и препятствий, которые нужно облетать.

Нам нужно создать соответствующие объекты. three.js содержит «по умолчанию» ряд стандартных графических объектов, такие как шар, куб, цилиндр, пирамида и тд. — подробнее можно глянуть в описании ФВ.

Итак с объектами разобрались — но игра это не только объекты, это и «камера» от лица который мы видим «сцену» , так же это освещение и управление объектами. Для удобства создания и обновления всех объектов создадим «основной» модуль-функцию, пусть называется  «init»:

window.addEventListener('load', init, false);

function init() {
	// тут создаем сцену - камеру
	createScene();

	// тут добавляем свет, а то темно будет
	createLights();

	// тут появляются чать наших объектов, 
        // еще не все что нужно, но уже что-то
        // Сам самолетик / поверхность для полета будет море / облака
	createPlane();
	createSea();
	createSky();

	// здесь в зависимости от "контроллов",
        // мы будем менять положение наших объектов 
	// а так же генерировать изменения ландшавта
	loop();
}

 

Давайте начнем с самого простого и понятного — наших 3D объектов :

Самолетик:

 

Обучение JS и разработка игры Самолётик. Шаг 1.

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

Итак ШАГ 1.

Создаем папку «Самолетик», я это сделал на рабочем столе.

В этой папке создаем файл index.html

Делаем в нем следующий код:

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
 <meta charset="UTF-8" />
 <title>Самолетик: Часть 1 </title>
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <script type="text/javascript" src="js/three.js"></script>
 <script type="text/javascript" src="js/step1.js"/></script>
 </head>
 <body>
 <div class="world" id="world"></div>
 </body>
</html>

Потом внутри делаем еще 2 папки «css» и «js», и

Идем на сайт http://threejs.org/build/three.min.js и скачиваем последнюю версию самого фреймворка или скачиваем ее ОТ МЕНЯ  (версия скачана 12.07.2016), чтобы точно работало, и кидаем ее в папку «js» (имя должно быть three.js)

В папке «css» создаем файл  styles.css, со след наполнением (ОН ЖЕ,только с заготовкой для 2 части):

.world {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: -webkit-linear-gradient(#e4e0ba, #f7d9aa);
 background: linear-gradient(#e4e0ba, #f7d9aa);
}

Это наш «мир» а именно, фон.

Итак подготовка сделана. Осталось творить — ШАГ 2.

Статья для habrahabr

Решил попробовать стать полноценным жителем habrahabr.ru. Для получения заветного «ключа» нужно представить относительно полезную/интересную статью или ее перевод, или обзор по технологии — в общем что-то связанное с IT и не слишком «замыленное» на Habre.

Так как сейчас начал изучать JavaScript  в виду его активного роста, простоты изучения и увеличения возможностей за счет различный фреймворков, для создания web приложений — ориентир на SPA ( SPA в WiKi )

Кстати для начала разработки SPA сайтов и приложений кроме JS нужно еще знание HTML / HTML5 , CSS, AJAX.

После изучения базовых основ, а для этого мне очень помогла статьи на Habre, направляя на пусть истинный:

Как стать профессиональным веб-разработчиком: практическое руководство

А для «набивания руки» в JS использовал игру codecombat.com , которая вплоне дает понимания как основ программирования , так и использования JS в принципе. PS.  в CodeCombat можно выбрать не только JavaScript, но и например Phyton, для изучения — вперед дерзайте!

PS. Так же у каждого разработчика должна быть под рукой статься с Более 350 бесплатных инструментов для разработчиков так же на Habre.

По совету той же статься после основ, стал искать различные фреймворки и проекты с открытым исходным кодом. И ткак как мне всегда нравились игры нашел статью по созданию игры The Aviator — летающий самолетик который уклоняется от камней и собирает «топливо», в которой есть не только исходники, но и «пошаговое описание» как эту игру сделать:

Делаем игру «Самолетик» используя Three.js

Раз пример будет использовать Three.js, то соответственно наш путь идет на  http://threejs.org/ — где имеется полное описание для данного FW с примерами. Туду нужно заглянуть тем кто заинтересуется как работают «потрошки».

В рамках обучения лучше не просто повторить, то что уже кто-то сделал, а попробовать немного изменить и посмотреть что получиться. Сразу же возникло желание немного её упростить и переделать на «ловить» буквы и составлять из них слова — само собой расчет на аудиторию в 4-6 лет.

Ну как говориться если хочешь чему то научиться, попытайся обучить этому другого)…

Итак ШАГ 1.

 

 

 

Трудности при разработке игр.

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

«Оставь надежду всяк сюда входящий» — создание игры чаще всего, это не «круто» или «весело», а это работа или даже «ТРУД», к которому надо себя заставлять:

  1. Учиться — а куда же без этого. Если вы рассчитываете все делать самостоятельно, то придется мнооого учиться. Даже если вас в команде 3-4 человека, то все равно придется совмещать те же 3-4 роли).
  2. Выделять время — за 2-3 часа в неделю на что-то типа тетриса вам потребуется года полтора, если опыта мало, или полгода если он уже есть (имеется ввиду создание не «работающего прототипа», а полный цикл).
  3. Искать команду — если и тетрис можно сделать самому, то для всего остального нужно разделение труда. Как только мы видим что новый проект своими силами мы реализуем за 6-7+ месяцев нужно искать команду, обычно проекты забрасываются на этом сроке из-за «усталости».

Проект разработки можно разделить на несколько этапов — они могут и будут чаще всего идти частично параллельно, но обычно следующий этап нельзя начинать пока не наберется «критическая масса» с предыдущего и крайне не рекомендуется держать активными больше 2-х этапов — если 3, то это уже увеличение объема работ, ну а 4 — уже не «процесс», а «каша» которой и управлять нельзя и результат будет непонятный:

  1. Идея — да все банально, без создания воздушного замка в голове все последующие действия будут напоминать подергивание под музыку — «вроде и не месте стоим, но и танцем это не назвать». Под идеей, нет не так под ИДЕЕЙ, понимается не мысли «сделать новый варик», или «сейчас по быстрому забацаю КС». Под идей понимается вполне конкретное ТЗ, в любом виде, но оно должно быть! с описанием игры, мира, игрового процесса, фич, дизайна игры, дизайна локаций, используемых технологий, ГДЕ и КТО как вы ожидаете в эту игру будет играть — это из обязательного.
  2. Создание элементов — сначала идет кропотливая работа по созданию различных объектов, физики, скриптов, рисуются текстуры и фоны.
  3. Создание прототипа из элементов — как только элементов хватает чтобы собрать 1 демо уровень, сразу это делаем и проверяем концепцию игры, геймплей и др составляющие, на этом этапе еще как то можно повлиять на результат без сильных задержек в сроках. Но стоит помнить что это самый затратный и сложный этап — как только он выходит на финишную прямую что-то поменять будет сложно без существенных дополнительных ресурсов.
  4. Тиражирование — тут начинаем творить, у нас уже есть необходимые объекты (персонажи, элементы локаций, элементы интерфейса и тд) со всеми его возможными действиями, есть большая часть объектов, текстуры уже «натянуты» на объекты, по большей части, начинаем все ЭТО компоновать в «Сцены» ну или уровни.
  5. Тестирование — перед выходом «в люди», нужно протестировать ВСЕ что только можно, любая мелочь, которую «добавили в последний момент» может сделать игру «непроходимой» или «проходимой слишком просто», как показывает практика — попытка «выстрелить» есть только 1 — НЕЛЬЗЯ выпускать сырой продукт для общего использования!
  6. Сопровождение — а куда без него). Получаем фидбак и делаем исправления.
  7. Модернизация — Тестировать больше нечего, ключевые ошибки выловили и подчистии — проект взлетел? Если да, то отлично — самое время для реализации всего что «хотелось, но не моглось», а именно , повторяем 4-5 этапы и делаем новый контент (DLS). Добавляем новые фички и логику.  Главное на этом этапе вовремя понять что «хватит доить золотую корову»), и приступать к новым свершениям. Ну а если проект не взлетел, то порадоваться полученному опыту и с новыми силами браться за новые проекты.

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

В следующей части переходим к пункту 1 — Учиться), а именно обзор того что нужно знать, хотя бы на базовом уровне!