Как создать игру на компьютере самому с нуля
Как создать игру, ничего не умея. Часть первая: модели и анимации
Привет, меня зовут Павел, и я разработчик игр. На идею рассказать о разработке игр людьми, которые ничего не умеют, но горят желанием, меня натолкнул мой брат.
— Я придумал игру, создай мне её.
— А почему ты сам её не создашь?
— Я не умею.
И я задумался, а так ли сложно что-то создать с нынешним количеством уроков и тем по созданию игр в интернете?
С чего начать?
Для начала нам нужна идея, что за игру мы будем создавать, благо у меня была идея брата. Рассмотрим её поближе.
Думаю, что данный план вполне подойдёт для создания шедевра ААА класса =).
Начнём создавать шедевр
В первую очередь регистрируемся на сайте Unity, скачиваем и устанавливаем движок последней версии. Далее перевоплощаемся в человека, который совершенно ничего не знает о движке и о создании игр.
Идём в интернет и спрашиваем «как нам начать использовать Unity?».
Запускаем Unity Hub.
Выбираем NEW и далее 3D проект, пишем название и местоположение проекта.
И открывается сама программа.
И тут, наверное, знатоки начнут кидаться картошкой со словами «Зачем столько воды? Все и так это знают» НО! Материал предназначен в первую очередь для тех, кто ничего не умеет, а не для гуру геймдева =).
Дальше снова идём в интернет либо проходим туториал в самой программе, чтобы научиться основам работы с движком. Для того, чтобы воспользоваться туториалом в программе, нужно в окне Unity Hub нажать на строчку Learn и выбрать любой из проектов. Я советую пройти все уроки и посмотреть несколько роликов по созданию игр.
Как создать модели для игры?
Я выбрал второй вариант. Отправляемся в AssetStore. Если у вас не активировалась ваша учетная запись, повторно входим в личный кабинет. И начинаем искать подходящие паки. Я нашел то, что нужно, примерно за 3 минуты по поиску knight. В паке, помимо моделей самих персонажей, были модели окружения. Купил за 10 долларов, нажал Import, поставил все галочки, и пропала проблема, неумения моделировать. 1/4 игры готово.
Сцена
Дальше начинается самое нудное. Нужно собрать рабочую зону (scene, сцену, кому как привычнее называть).
Я привык сначала прописывать персонажей, анимацию, и прочую ненужную (очень нужную) ерунду в начале работы, а уже после того как основные механики готовы, я собираю уровень (локацию, игровую зону). Для начала давайте в сцену поставим кусок земли, на которой будет стоять наш персонаж, и начнём работать с анимацией.
Далее добавляем персонажа (рыцаря, демона, ниндзю, тяночку, или кто вам больше по душе). Персонажа берем из папки Prefabs: мы уже знаем (вспоминаем, чему нас научили во вкладке Learn), что туда сохраняют полностью готовые объекты, персонажей и так далее.
И вот он, наш герой, который будет покорять всех и вся.
Анимация
Помните в рейде «Цитадель Ночи» в World of Warcraft был босс Алуриэль? Когда она произносила заклинания, то кричала «Аннигиляция, репликация, детонация, АНИМАЦИЯ. ». Нам необходимо с криком «Анимация!» наброситься на интернет и понять, как её сделать.
Изучаю кучу материала по созданию анимации, и…, либо я дурак, либо лыжи забыл. Реально перелопатил полтора часа материала, но так ничего более-менее подходящего не нашел. Поэтому я решил объединить несколько уроков в один и собрать простой способ анимации.
Что нужно в первую очередь? По мне — так научиться ходить и бегать. Возьмём анимацию ходьбы и бега.
Теперь создаём папку Animation в Unity и добавляем туда нашу анимацию. Начинаем настройку.
Вот мы и победили нашу анимацию! УРА! Теперь нам нужно подключить её к нашему персонажу. Вперед, к финишной прямой!
Выбираем персонажа, inspector, окно Animator, и в строке Controller нажимаем на кругляшок. Появится выбор, где мы и увидим нашу Animation, выбираем её и нажимаем на кнопку Play в Unity. Если вы всё сделали правильно, то сейчас должны наблюдать как ваш персонаж стоит, и у него проигрывается анимация Idle. То есть, он стоит и немного покачивается.
С анимацией разобрались, пора включать снова человека, который ничего не умеет =)
Скрипт W A S D
Анимация у нас есть, теперь нужно заставить нашего персонажа двигаться. Покопавшись в интернете, я узнал, что можно просто добавить компонент Character Controller. Так и сделаем — тыкнем Add Component, в поиск вбиваем Character Controller и добавляем его, в строке Center выставляем Y=1 (нужно, чтобы «яйцо» покрывало всего персонажа. Если у вас получилось меньше или больше, то просто настройте его вручную).
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Move: MonoBehaviour
<
public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
<
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);
CharacterController controller = GetComponent ();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);
Тут я немного поясню скрипт.
Верхние четыре строчки — это подключение библиотек, public class — название скрипта. Если у Вас скрипт называется Moving или что-то в этом роде, то поменяйте название. Учтите, к регистру скрипт тоже придирчив.
public float speed = 3.0F; public float rotateSpeed = 3.0F; — это скорость персонажа, настраивается по желанию. Далее идёт подключение управления Character Controller и, соответственно, анимации.
Перетаскиваем скрипт в Inspector персонажа и проверяем. It’s ALIVE.
Но есть нюанс: поворачивается наш персонаж слишком быстро и не подключена анимация бега. Скорость поворота лечится просто — выставляем в строке Rotate Speed 0.5, и наш персонаж больше не использует чит-крутилку из CS GO. Теперь сделаем, чтобы наш персонаж все-таки побежал. Снова интернет, хотя, по мне, тут можно и логически додумать, как всё провернуть, но всё же я нашел строчку кода, чтобы всё заработало. Добавляем в наш код такую строчку
Если у Вас возникли вопросы, что такое Fire3, то ответ прост: это LShift, а проверить это можно, зайдя File->Build Setting->Player Setting->Input Manager. Эту информацию также не составило труда найти в интернете.
После проверки наш персонаж при нажатии клавиши LShift сменил свою анимацию на бег, но при этом его скорость никак не изменилась. Снова уже по протоптанной дорожке идём сами знаете куда, и я снова нашел строчку кода, которая мне подошла и оказалась полностью рабочей.
В итоге весь скрипт у нас получился такого вида
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Move: MonoBehaviour
<
public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
<
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);
CharacterController controller = GetComponent ();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);
if (Input.GetKey(KeyCode.LeftShift))
<
speed = 6.0f;
>
else
<
speed = 3.0f;
>
Всё проверили, всё работает, осталось только прикрепить камеру к персонажу. Без заморочек просто перетаскиваем Main Camera в нашего персонажа, далее её настраиваем как нам удобно, проверяем и празднуем ПОБЕДУ!
Заключение
Я считаю, что не имея никаких знаний и денег, а только немного терпения, можно самому создать свою игру. Если вас смущает покупка пака из Asset Store, то всегда можно найти бесплатные паки. Я порылся в интернете и нашел как минимум 6 ресурсов, которые их предоставляют. Советую помимо интернета начать изучение какого-либо направления гейм дева.
Все описанное в этой статье было собрано без специальных знаний с помощью интернета.
Как сделать свою первую игру. 7 главных советов
Геймдизайну может научиться каждый. Главное — не бояться собственных ошибок.
Если вы читаете эти строки, вас, скорее всего, посещала идея сделать собственную игру. Может быть, вы даже пытались взяться за это — но, впервые увидев интерфейс игрового движка, сказали себе: «Нет». А потом закрыли движок и больше никогда к нему не прикасались.
На самом деле всё не так страшно, как кажется. Советуем, как перестать беспокоиться и полюбить делать игры.
Совет №1. Не стремитесь к идеалу
Не повторяйте ошибку тех, кто пытается сразу сделать игру своей мечты.
Многие берутся за разработку в надежде воплотить в жизнь свои блестящие идеи. Иногда у новичков выходит The Stanley Parable — но куда чаще их задумки гибнут ещё на первых этапах разработки, погребённые под грузом амбиций.
Не потому что у вас нет таланта — просто для этого нужны опыт, знания и, если речь идёт о хоть сколько-нибудь большой игре, команда профессионалов. Вашей целью поначалу должен быть не хороший продукт, а что-то, что вы сможете быстро собрать и так же быстро начать тестировать.
Иными словами, смотрите на свои первые проекты как на обучающие упражнения. Ведь это они и есть.
Совет №2. Выберите подходящие инструменты
Найдите движок, который поможет вам освоить азы разработки. На этом этапе удобство и простота в освоении куда важнее, чем мощность технологии и список опций, — хотя они тоже важны.
При помощи разработчиков-специалистов мы разобрались в плюсах, минусах и особенностях трёх игровых движков, которые подойдут новичкам, — GameMaker Studio 2, Unity и Unreal Engine.
GameMaker Studio
Лозунг компании-создателя движка YoYo Games — «Делать игры может каждый». Дебютировавший в 2007 году GameMaker известен прежде всего своей доступностью. Например, он не требует знания кода: в редактор встроен визуальный редактор скриптов, который позволяет сразу начать делать игру.
Тем не менее его возможностей хватает, чтобы сделать качественный проект: доказательством служат такие игры, как Spelunky, Hotline Miami и Hyper Light Drifter.
Инди-разработчик и старший геймдизайнер Кирилл Золовкин (Allods Team) рекомендует движок независимым разработчикам: «Для небольшой инди-студии или одиночки, создающего 2D-игры, трудно найти более простой и понятный редактор».
Разработчик перечисляет опции и сильные стороны движка, которые пригодятся новичкам:
Однако главное достоинство GameMaker, его простота, также порождает его главные недостатки:
Кроме того, бесплатно GameMaker доступен только в первый месяц — после этого придётся купить одну из версий ценой от 39 до 799 долларов.
Unreal Engine
Движок был впервые использован в 1998 году для создания шутера от первого лица Unreal, но с тех пор успел завоевать репутацию одного из самых мощных и универсальных редакторов в игровой индустрии. На его основе созданы самые разные проекты: от серии NBA и батл-рояля Fortnite до ролевой игры The Outer Worlds и будущей S.T.A.L.K.E.R. 2.
Инди-разработчики тоже любят использовать движок Epic Games. Валентин Щекин (Primary Games) сделал на нём свою первую игру, инди-хоррор Never Again. Он объяснил, почему выбрал именно Unreal Engine: «Меня впечатлили возможности движка. Я сразу в перспективе увидел то, что мне по силам реализовать».
На этом же движке геймдизайнер и художница Юля Кожемяко (Supr Games) делает игры-инсталляции, которые она называет playful experiences. Она выделяет интуитивный интерфейс программы: «Многие вещи [в ней] можно понять методом тыка, просто изучая редактор».
Разработчица также отмечает простор для экспериментов, который даёт Unreal Engine. Для этого в движке присутствует множество опций:
В то же время у движка тоже есть свои ограничения:
Unity
Ещё один популярный движок, любимый инди-сообществом — во многом за баланс между возможностями и дружелюбностью по отношению к новичкам. Unity одинаково хорошо подходит для разработки 2D- и 3D-игр, и с момента дебюта в 2006 году в редакторе были созданы самые разные проекты — от «симулятора ходьбы» Gone Home и мобильной AR-игры Pokemon Go до изометрической RPG Pillars of Eternity и шутера-головоломки SUPERHOT.
Ведущий программист Pixonic Алексей Малороссиянов перечисляет качества, благодаря которым Unity обрёл популярность:
Из достоинств движка также стоит отметить Unity Asset Store, в котором в несколько раз больше ассетов, чем в маркетплейсах других движков.
В то же время в Unity есть свои недостатки, которые могут усложнить разработку:
В конечном счёте, как отмечает Алексей, всё зависит от того, чего вы хотите от своего проекта.
Если ваша задача — собрать прототип несложной механики, или в вашей команде есть только художники и геймдизайнеры, вам подойдёт GameMaker Studio. Если вы хотите создать кинематографический опыт со сложной визуальной частью, вам стоит выбрать Unreal. Если же вы хотите создать достаточно сложный проект со множеством механик, мобильную игру или если вы нацелены на множество платформ, стоит использовать Unity.
Совет №3. Соберите прототип и покажите его друзьям
«Не откладывайте на потом практическую часть», — рекомендует Кирилл Золовкин. Как только вы немного разобрались в движке, пришло время делать прототип — модель будущей игры, предназначенную для тестирования игровых механик.
Опирайтесь на те навыки, которые вы получили при знакомстве с движком, — так вы не загоните себя в тупик. Соберите что-нибудь небольшое — один уровень платформера или трассу в гоночной игре. Главное, чтобы в это можно было играть.
Такое самоограничение поможет за неделю-две собрать прототип, который затем следует показать друзьям.
И надо быть готовым, что его не оценят по достоинству: в конце концов, вашему творению далеко от высокобюджетных игр, к которым они привыкли. Любая реакция ценна сама по себе: во-первых, друзья дадут вам фидбэк, который поможет избежать ошибок в будущем, во-вторых, это избавит вас от ощущения, что вы делаете игры «в стол».
Совет №4. Следуйте принципу «Каждому по способностям»
Успели помучить друзей своими прототипами? Уже получается собрать целый уровень, не запутавшись в движке? Пора сделать полноценную игру. И здесь важно вновь не потонуть в море собственных амбиций.
В геймдеве (и не только) существует такое понятие, как минимально жизнеспособный продукт — то есть набор механик, которого достаточно для запуска. В случае шутера, например, это перестрелки. Все прочие механики — стелс, кат-сцены, разрушаемость — можно добавить позже.
Не пытайтесь сделать всё и сразу. Minecraft тоже когда-то была всего лишь виртуальным конструктором — и посмотрите, во что она выросла.
Геймдизайнер и ведущий канала Extra Credits Джеймс Портнов рекомендует опираться на то, что вы умеете делать лучше всего. Хорошо рисуете? Создайте игру с оригинальным стилем. Не умеете рисовать, зато умеете кодить? Сделайте проект с упором на механики.
Совет №5. Участвуйте в игровых джемах
Игровые джемы ( англ. game jam) — это мероприятия, целью которых становится разработка новых игр в ограниченный срок. Как правило, на создание прототипа участникам даётся двое суток, а тема и условия обычно объявляются перед началом джема.
Юля Кожемяко объясняет, почему так важны эти события: «На джеме есть ограниченный срок, [поэтому] ты не будешь несколько месяцев сидеть без результата, а получишь его через два-три дня… Ты увидишь, что можешь сделать, пусть даже в команде с другими ребятами. На джеме нет возможности прокрастинировать. Нужно полностью сосредоточиться на игре».
Здесь действует тот же принцип, что и с показом игры друзьям. Джемы позволяют не работать «в стол», а показать своё творчество другим участникам и, возможно, профессионалам из индустрии. Там же можно завести знакомства с будущими коллабораторами. В частности, с Ильёй Кононенко, соавтором игры The Tender Cut, вдохновлённой «Андалузским псом», Юля Кожемяко впервые встретилась именно на джеме.
Наконец, из удачного прототипа, собранного во время упражнений, вполне может вырасти полноценная игра. Так, например, на свет появились SUPERHOT, Mini Metro и Hollow Knight.
Совет №6. Составьте график разработки
Закончить игру — слишком масштабная задача. Разделите её на основные этапы — собрать уровень, написать диалоги, — а затем разбейте эти этапы на мелкие задачи, которые вам по силам выполнить за неделю.
Да, дедлайны нужны даже свободным художникам. Расписание даст вам возможность отслеживать свой прогресс и чувствовать, что вы не стоите на месте.
В посте, посвящённом разработке Never Again, Валентин Щекин даёт совет по составлению графика: «…Есть негласное правило разработчика: время, заложенное на разработку, нужно умножать на два. Не верьте! Нужно умножать на четыре».
Если вы отстаёте от графика на месяц, возможно, вам следует скорректировать расписание, чтобы дать себе больше времени. Но если застой длится уже два месяца, скорее всего, вы всё-таки переоценили свои силы. В этом случае лучше урезать масштаб проекта — выбросить необязательные уровни и механики — или просто начать другую игру поменьше.
Совет №7. Работайте регулярно
Старая пословица гласит: «Быстро — это медленно, но без перерывов». То же правило действует в геймдизайне.
Избегайте больших пауз в работе. Старайтесь выкроить хотя бы час в день на разработку игры. Постепенно это превратится в привычку — и у вас не будет чувства, что вы топчетесь на месте.
Алексей Малороссиянов объясняет: «Изучать программирование непросто и требует определённого майндсета. Но когда начинает получаться, вы испытываете огромное удовольствие от результата… Не сдавайтесь и планомерно каждый день хотя бы немного времени уделяйте разработке и изучению движка. И всё у вас обязательно получится».
С ним соглашается Юля Кожемяко: «Возможно, пару месяцев не будет видно никакого прогресса, [не будет ощущения], что вы идёте к разработке игр, но спустя какое-то время это произойдёт. Просто надо методично работать».
Как создать игру без навыков программирования
Мечтаете создать свою игру, но мысли о том, что придётся учить языки программирования пугают вас? Вы гуманитарий? А может, у вас просто не хватает времени на изучение C# или Java? В любом случае, речь в этом посте пойдёт об игровых конструкторах. Для тех, кто не в курсе, это программы, в которых можно делать игры без написания кода. Конструкторы подходят для создания прототипов и участия в коротких Game Jams, которые сейчас популярны.
Первое знакомство
Однажды мне довелось побывать на мастер-классе по прототипированию у одного известного левел-дизайнера, работавшего в одной из крупнейших IT-компаний в России. На мастер-классе каждому участнику предложили создать свою игру за 1 час, а в конце часа показать игру остальным. То есть я первый раз запускаю программу и через час должен создать игру? Обладая некоторым опытом работы в программах, где необходимо писать код, я не поверил, что такое возможно. К моему удивлению, все (я в том числе) успели сделать свою первую маленькую игру. Пусть и простую, но в нее можно было играть. Так во мне зародилась любовь к конструктору под названием Clickteam Fusion 2.5 (раньше назывался Multimedia Fusion). Ещё популярными конструкторами являются Game Maker Studio и Construct 2. В основном, я работаю в Clickteam Fusion 2.5 (далее CF 2.5). На её примере раскрою принцип работы таких программ и их возможности.
Как это работает
Сразу отмечу, что конструкторы предназначены для работы в 2D. Уверен, в ближайшее время появятся и полноценные 3D-аналоги. Если вы настроены попробовать себя в 3D, то без знания программирования, вы сможете создать только карты для популярных игр, которые имеют редакторы-карт. Это уже другая тема, а сейчас я расскажу, как же работать в конструкторе.
При создании новой игры необходимо определить, для какой платформы хотите творить. Конструкторы дают возможность создавать игры для PC, IOS, Android, Html 5, Flash и т.д. Например, чтобы создать игру не только для PC, но и для IOS в программе CF 2.5, придётся докупить или скачать export module ios. Модуль конвертирует игру в код платформы – Xcode. Затем, через несколько нажатий, вы уже сможете тестировать игру на устройствах Apple (также нужен аккаунт разработчика Apple).
Ваша игра будет состоять из кадров (сцен). В каждом кадре можно создавать объекты, которые помогут вам решить любую задачу. Например, если это главное меню и вы хотите создать кнопку «Start», вам необходимо создать объект «active».
Окно «Редактор кадра».
Нажимаем правую кнопку мыши и выбираем «Insert object».
Выбираем объект «active».
Затем, нужно вставить в объект изображение кнопки или нарисовать во встроенном редакторе. В этом окне также можно создать покадровую анимацию. Один объект может иметь несколько анимаций (герой стоит, герой бежит, герой летит).
Окно «Графический редактор».
Осталось придумать событие, которое будет происходить с этим объектом.
Для этого, переходим с вкладки «редактор кадра» на вкладку «редактор событий».
Выбираем из списка необходимые события (условия), при которых, произойдут установленные вами действия над выбранным объектом, группой объектов, кадром.
Если игрок нажимает левой кнопкой мыши на объект «Start», то — 
— происходит переход на следующий кадр.
Вот так просто, без программирования, можно создавать различные события, из которых будет состоять ваша игра.
Ещё несколько примеров:
— Если объект «шар» коснулся объекта «шип», то на экране появляется надпись «вы проиграли», а объект «шар» меняет анимацию на «шар лопнул».
— Если прошло более 5 секунд с начала запуска кадра, то в правом верхнем углу появляется объект «аптечка».
— Если объект «птичка» коснулся объекта «червяк», то «червяк» исчезает, в объект «счётчик очков» прибавляется единица и один раз проигрывается звук «жалобный крик червя».
Не изучая программирование, вы сможете создавать самые разные механики, используя фантазию и большое количество вспомогательных объектов. Перечислю некоторые из них:
Active object – самый популярный объект, его используют для создания объектов взаимодействия (главный герой, враги, платформы, ящики и т.д.). Он может содержать много разных анимаций (герой стоит, герой бежит, герой стреляет), иметь встроенные стандартные механики движения и управления.
Counter object – создает всевозможные счётчики жизней, денег, очков и т. д. Может быть представлен как в виде цифр, так и в виде шкалы.
INI object – сохраняет данные после выхода игрока из игры. Можно использовать для сохранения месторасположения любых объектов в кадре.
Physic engine object – появление этого объекта в кадре создаёт гравитацию, параметры которой можно регулировать.
Joystick control object– для touch-устройств создаёт эмулятор джойстика.
IOS store object – даёт возможность сделать внутриигровые покупки для AppStore.
Admob object – позволяет поместить баннерную рекламу в игру.
Touch object – учитывает все касания к экрану touch-устройства. Например, можно создать такое событие:
если игрок одновременно коснулся экрана тремя пальцами, то игра останавливается на паузу.
Если что-то не получается
У CF 2.5 есть отличная техподдержка, которая в течение 24 часов всегда отвечала мне. Ещё у них неплохой форум, на котором выложено много готовых кусков игр и рассказывается, как работать с новыми объектами. Не знаю, как дела с технической поддержкой у других конструкторов, но думаю, не хуже. Game Maker более популярен, чем CF 2.5 и, как мне кажется, тоже должен иметь хорошую поддержку. Один мой знакомый работает на Construct 2, он никогда не слышал, чтобы возникали трудности. А на youtube.com выложено много роликов, где разжёвывают создания популярных механик для большинства конструкторов.
Список популярных игр созданных на конструкторах
Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 1/2
Современная вычислительная техника позволяет создавать классные компьютерные игры! И сейчас, достаточно популярны игры с 3d-графикой, так как, играя в них, ты окунаешься в вымышленный мир и теряешь всякую связь с реальностью. Развитие интернета и браузерных технологий сделало возможным запускать головоломки и стрелялки в любимом Хроме, Мозилле или еще в чем-то там (про Эксплорер помолчим) в онлайн-режиме, без загрузки. Так вот, здесь я расскажу о том, как создать простую трехмерную браузерную игру.
1. Инструменты для разработки
Я использую для проверки сайтов и игр только 2 браузера: Chrome и Mozilla. Все остальные браузеры (кроме того самого Эксплорера) построены на движке первого, поэтому использовать их я не вижу смысла, ибо результаты точно такие же, как и в Chrome. Для написания кода достаточно Notepad++.
2. Как реализуется трехмерное пространство в html?
Посмотрим на систему координат блока:
По умолчанию, дочерний блок имеет координаты (left и top) 0 пикселей по x и 0 пикселей по y. Смещение (translate), также 0 пикселей по всем трем осям. Покажем это на примере, для чего создадим новую папку. В нем создадим файлы index.html, style.css и script.js. Откроем index.html и запишем туда следующее:
В файле style.css зададим стили для элементов “container” и “world”.
Сохраним. Откроем index.html c помощью Chrome, получим:
Попробуем применить translate3d к элементу “world”:
Как вы поняли, я перешел в полноэкранный режим. Теперь зададим смещение по оси Z:
transform:translate3d(200px,100px,-1000px);
Если вы снова откроете html-файл в браузере, то никаких изменений вы не увидите. Чтобы увидеть изменения, нужно задать перспективу для объекта “container”:
Квадрат отдалился от нас. Как работает перспектива в html? Взглянем на картинку:
Теперь повернем “world” вокруг какой-нибудь оси. В сss можно использовать 2 способа вращения. Первый – вращение вокруг осей x,y и z. Для этого используются transform-свойства rotateX(), rotateY() и rotateZ(). Второй – вращение вокруг заданной оси с помощью свойства rotate3d(). Мы будем использовать первый способ, так как он больше подходит для наших задач. Обратите внимание, что оси вращения выходят из центра прямоугольника!
Заметно смещение против часовой стрелки. Если же мы добавим rotateY(), то получим смещение уже по оси Y. Важно заметить, что при вращении блока оси вращения также поворачиваются. Вы также можете поэкспериментировать с различными значениями вращения.
Теперь внутри блока “world” создадим еще один блок, для этого добавим тег в html-файл:
В style.css добавим стили к этому блоку:
То есть, элементы внутри блока “world” будут трансформироваться в составе этого блока. Попробуем повернуть “square1” по оси y, добавив к нему стиль вращения:
transform: rotateY(30deg);
«Где вращение?» — спросите вы? На самом деле именно так выглядит проекция блока “square1” на плоскость, образуемую элементом “world”. Но нам нужна не проекция, а настоящее вращение. Чтобы все элементы внутри “world” стали объемными, необходимо применить к нему свойство transform-style:preserve-3d. После подстановки свойства внутрь списка стилей “world” проверим изменения:
Отлично! Половина блока “square” скрылась за голубым блоком. Чтобы его полностью показать, уберем цвет блока “world”, а именно, удалим строку background-color:#C0FFFF; Если мы добавим еще прямоугольников внутрь блока “world”, то мы можем создать трехмерный мир. Сейчас же уберем смещение мира “world”, удалив строку со свойством transform в стилях для этого элемента.
3. Создаем движение в трехмерном мире
Для того, чтобы пользователь мог по этому миру передвигаться, нужно задать обработчики нажатия клавиш и перемещения мыши. Управление будет стандартным, какое присутствует в большинстве 3д-шутеров. Клавишами W, S, A, D мы будем перемещаться вперед, назад, влево, вправо, пробелом мы будем прыгать (проще говоря – перемещаться вверх), а мышью мы будем менять направление взгляда. Для этого откроем пока еще пустой файл script.js. Сначала впишем туда такие переменные:
Изначально клавиши не нажаты. Если мы нажмем клавишу, то значение определенной переменной изменится на 1. Если отпустим ее, то она снова станет 0. Реализуем это посредством добавления обработчиков нажатия и отжатия клавиш:
Номер 32 – код пробела. Как видите, тут появилась переменная onGround, указывающая на то, находимся ли мы на земле. Пока разрешим движение вверх, добавив после переменных press… переменную onGround:
Итак, мы добавили алгоритм нажатия и отжатия. Теперь необходимо добавить само передвижение. Что, собственно, мы передвигаем. Представим, что у нас есть объект, который мы двинаем. Назовем его “pawn”. Как и принято у нормальных разработчиков, для него мы создадим отдельный класс “Player”. Классы в javaScript создаются, как ни странно, с помощью функций:
Вставим этот код в script.js в самом начале файла. В конце же файла создадим объект данного типа:
Распишем, что означают эти переменные. x, y, z – это начальные координаты игрока, rx, ry – углы его поворота относительно осей x и y в градусах. Последняя записанная строка означает, что мы создаем объект “pawn” типа “player” (специально пишу тип, а не класс, так как классы в javascript означают несколько другие вещи) с нулевыми начальными координатами. Когда мы двигаем объект, координата мира изменяться не должна, а должна изменяться координата «pawn». Это с точки зрения переменных. А с точки зрения пользователя, игрок находится на одном месте, а вот мир двигается. Таким образом, нужно заставить программу изменять координаты игрока, обрабатывать эти изменения и двигать, в конце концов, мир. На деле это проще, чем кажется.
Итак, после загрузки документа в браузер мы запустим функцию, которая перерисовывает мир. Напишем функцию перерисовки:
В новых браузерах world будет соответствовать элементу с однако надежнее ее присвоить перед функцией update() с помощью следующей конструкции:
Мы будем изменять положение мира каждые 10 мс (100 обновлений в секунду), для чего запустим бесконечный цикл:
Запустим игру. Ура, теперь мы можем двигаться! Однако мир вылазит за пределы рамок элемента «container». Чтобы этого не происходило, зададим css-свойство для него в style.css. Добавим строку overflow:hidden; и посмотрим на изменения. Теперь мир остается в пределах контейнера.
Вполне возможно, что вы не всегда понимаете, куда нужно записывать те или иные строчки кода, поэтому сейчас я вам представлю файлы, которые, как я полагаю, у вас должны получиться:
Если у вас что-то по-другому, обязательно поправьте!
Мы научились двигать персонажа, однако мы еще не умеем поворачивать его! Поворот персонажа, конечно же, будет осуществляться с помощью мыши. Для мыши к переменным состояния клавиш press… мы добавим переменные состояния движения мыши:
А после обработчиков нажатия-отжатия вставим обработчик движения:
В функцию update добавим поворот:
Обратите внимание на то, что движение мыши по оси y вращает pawn по оси x и наоборот. Если мы посмотрим на результат, то ужаснемся от увиденного. Дело в том, что если смещения нет, то MouseX и MouseY остаются прежними, а не приравниваются к нулю. Значит, после каждой итерации update смещения миши должно обнуляться:
Уже лучше, мы избавились от инерции вращения, однако вращение происходит все равно странно! Чтобы понять, что все-таки происходит, добавим div-элемент «pawn» внутрь «container»:
Зададим ему стили в style.css:
Проверим результат. Теперь все ровно! Единственное — синий квадрат остается впереди, но пока оставим это. Чтобы сделать игру от первого лица, а не от третьего, нужно приблизить мир к нам на значение perspective. Сделаем это в script.js в функции update():
Теперь можно делать игру от первого лица. Скроем pawn добавив строку в style.css:
Отлично. Сразу скажу, что ориентироваться в мире с одним квадратом крайне тяжело, поэтому создадим площадку. Добавим в «world» блок «square2»:
А в style.css добавим стили для него:
Теперь все четко. Ну… не совсем. Когда мы нажимаем по клавишам, мы движемся строго по осям X и Z. А мы хотим сделать движение по направлению взгляда. Сделаем следующее: в самом начале файла script.js добавим 2 переменные:
Градус — это pi/180 от радиана. Нам придется применить синусы и косинусы, которые считаются от радиан. Что нужно сделать? Взгляните на рисунок:
Когда наш взгляд направлен под углом и мы хотим пойти вперед, то изменятся обе координаты: X и Z. В случае перемещения в сторону тригонометрические функции просто поменяются местами, а перед образовавшимся синусом изменится знак. Изменим уравнения смещений в update():
Внимательно просмотрите все файлы полностью! Если у вас что-то оказалось не так, то потом обязательно буду ошибки, из-за которых вы сломаете голову!
С движением мы почти разобрались. Но осталось неудобство: курсор мыши может двигаться только в пределах экрана. В трехмерных шутерах можно вращать мышью сколь угодно долго и сколь угодно далеко. Сделаем также: при нажатии на экран игры (на “container”) курсор будет пропадать, и мы сможем вращать мышью без ограничений на размер экрана. Активируем захват мыши при нажатии на экран, для чего перед обработчиками нажатия клавиш поставим обработчик нажатия мыши на “container”:
Теперь совсем другое дело. Однако лучше вообще сделать так, чтобы вращение производилось только тогда, когда курсор захвачен. Введем новую переменную после переменных нажатия клавиш press…
Добавим обработчик изменения состояния захвата курсора (захвачен или нет) перед обработчиком захвата курсора (извините за тавтологию):
А в update() добавим условие вращения “pawn”:
А сам захват мыши при клике по контейнеру разрешим только тогда, когда курсор еще не захвачен:
С движением мы полностью разобрались. Перейдем к генерации мира
4. Загрузка карты
Мир в нашем случае удобнее всего представить в виде множества прямоугольников, имеющих разное местоположение, поворот, размеры и цвет. Вместо цвета также можно использовать текстуры. На самом деле, все современные трехмерные миры в играх – это набор треугольников и прямоугольников, которые называют полигонами. В крутых играх их количество может достигать десятков тысяч в одном только кадре. У нас же их будет около сотни, так как браузер сам по себе имеет невысокую графическую производительность. В предыдущих пунктах мы вставляли блоки “div” внутрь “world”. Но если таких блоков много (сотни), то вставлять каждый из них в контейнер очень утомительно. Да и уровней может быть много. Поэтому пусть эти прямоугольники вставляет javaScript, а не мы. Для него же мы будем создавать специальный массив.
Откроем index.html и удалим из блока “world” все внутренние блоки:
Теперь создадим массив прямоугольников (запихнем его, примеру, между конструктором player и переменными press… в script.js):
Можно было это сделать в виде конструктора, но пока обойдемся чисто массивом, так как запуск цикла расстановки прямоугольников проще реализовать именно через массивы, а не через конструкторы. Я же поясню, что означают цифры в нем. Массив map содержит одномерные массивы из 9 переменных: [. ]. Я думаю, вы понимаете, что первые три числа – это координаты центра прямоугольника, вторые три числа – углы поворота в градусах (относительно того же центра), затем два числа – его размеры и последнее число – фон. Причем фон может быть сплошным цветом, градиентом или фотографией. Последнее очень удобно использовать в качестве текстур.
Массив мы записали, теперь запишем функцию, которая переделает этот массив в собственно прямоугольники:
Поясню, что происходит: мы создаем новую переменную, которая указывает на только что созданный элемент. Ему мы присваиваем id и css-класс (именно это и имеется ввиду под словом класс в языке javaScript), задаем ширину с высотой, фон и трансформацию. Примечательно, что в трансформации помимо координат центра прямоугольника мы указываем смещение на 600 и 400 и половины размеров для того, чтобы центр прямоугольника точно оказался в точке с нужными координатами. Запустим генератор мира перед таймером:
Теперь мы видим площадку с розовыми стенами и серым полом. Как видите, создание карты технически несложно реализовать. А в результате ваш код в трех файлах должен получиться примерно таким:
Если все хорошо, переходим к следующему пункту.
5. Столкновения игрока с объектами мира
Мы создали технику движения, генератор мира из массива. Мы можем передвигаться по миру, который может быть красивым. Однако наш игрок еще никак не взаимодействует с ним. Чтобы это взаимодействие происходило, нам необходимо проверять, сталкивается ли игрок с каким-нибудь прямоугольником или нет? То есть, мы будем проверять наличие коллизий. Для начала вставим пустую функцию:
А вызывать ее будем в update():
Как это происходит? Представим себе, что игрок – это шар с радиусом r. И он движется в сторону прямоугольника:
Очевидно, что если расстояние от шара до плоскости прямоугольника больше r, то коллизии точно не происходит. Чтобы узнать это расстояние, можно перевести координаты игрока в систему координат прямоугольника. Напишем функцию перевода из мировой системы в систему прямоугольника:
И обратную функцию:
Вставим эти функции после функции update(). Я не буду объяснять, как это работает, потому что мне не хочется рассказывать курс аналитической геометрии. Скажу, что есть такие формулы перевода координат при вращении и мы просто ими воспользовались. С точки зрения прямоугольника наш игрок расположен вот так:
В этом случае условие коллизии становится таким: если после смещения шара на величину v (v – это вектор) координата z между –r и r, а координаты x и y лежат в пределах прямоугольника или отстоят от него на величину, не большую r, то объявляется коллизия. В этом случае координата игрока по z после смещения будет составлять r или – r (в зависимости от того, с какой стороны придет игрок). В соответствии с этим, смещение игрока изменяется. Мы специально вызываем коллизию перед тем, как в update() координаты игрока будут обновлены, чтобы вовремя изменить смещение. Таким образом, шар никогда не пересечется с прямоугольником, как бывает в других алгоритмах коллизии. Хотя физически игрок будет представлять собой, скорее, случае куб, мы не будем обращать на это внимание. Итак, реализуем это в javaScript:
x0,y0 и z0 – начальные координаты игрока в системе координат прямоугольника (без поворотов. x1,y1 и z1 – координаты игрока после смещения без учета коллизии. point0, point0, point1 и point2 – начальный радиус-вектор, радиус-вектор после смещения без коллизии и радиус-вектор с коллизией соответственно. map[i][3] и другие, если вы помните, это углы поворота прямоугольника. Заметим, что в условии мы к размерам прямоугольника прибавляем не 100, а 98. Это костыль, зачем, подумайте сами. Запустите игру и вы увидите довольно качественные столкновения.
Как видим, все эти действия происходят в цикле for для всех прямоугольников. При их большом количестве такая операция становится очень дорогой, так как тут и так есть 3 вызова функций преобразований координат, которые тоже производят достаточно много математических операций. Очевидно, что если прямоугольники находятся очень далеко от игрока, то коллизию считать не имеет смысла. Добавим это условие:
Итак, с коллизиями мы разобрались. Мы спокойно можем взбираться и по наклонным поверхностям, а возникновение багов возможно только на медленных системах, если, конечно, возможно. По сути, вся основная техническая часть на этом закончилась. Нам осталось лишь добавить частные вещи, такие как гравитация, вещи, меню, звуки, красивую графику. Но это достаточно легко сделать, а к самому движку, который мы только что сделали, это отношения не имеет. Поэтому об этом я расскажу в следующей части. А сейчас проверьте то, что у вас получилось с моим кодом:
С нуля до разработчика игр: как начать создавать видеоигры, если у вас нет опыта. Часть 1
Два года назад я была простой семнадцатилетней ученицей средней школы и я ничего не знала о программировании. Но я все равно достигла своей цели и опубликовала свою первую игру в Steam.
На сегодняшний день я выпустила более 10 игр для настольных компьютеров и мобильных устройств с возможностью онлайн игры. В совокупности в мои игры сыграли более 1,9 миллиона раз.
Независимо от вашего уровня программирования, вы тоже можете написать свою первую игру. Два года назад я думала что это невозможно, но я все равно попыталась этого достичь. Для меня — разработка игр стала самым сложным испытанием в моей жизни! Но оно того стоило! Теперь я понимаю, что разработка игр подобна любому навыку в нашей жизни: вы становитесь лучше, когда что-то делаете, терпите неудачи, получаете опыт и улучшаете свои навыки.
Я сама научилась всему тому, что знаю сейчас и теперь я постараюсь научить и вас.
Чтобы сделать игру, вы должны пройти 6 этапов разработки: Разработка идеи. Арт. Программирование. Звук. Шлифовка. Публикация.
Каждый из этапов я структурировала следующим образом:
Этап №1: Разработка идеи 📝
У вас есть отличная идея! Как вы ее запишите?
Каждый рано или поздно найдет для себя наиболее подходящий способ записи: кто-то будет писать 60-страничные проекты и документы, а кто-то, как я — писать кучу заметок на одной странице, понятные мне одной. Я не знаю, какой способ вы выберете, но я могу дать вам несколько советов о том, что нужно прописывать:
*Сложно придумать хорошую идею для игры? На этом этапе всем нам бывает очень сложно что-то придумать. Что же делать?
Когда вас неожиданно посещает муза или появляется вдохновение — отложите свои дела и запишите все мысли и идеи! И когда вы впадете в творческий ступор, вам не придется высасывать идеи из пальца.
Ресурсы🎁
Все нижеперечисленные ресурсы и программы опробованы мною лично и многими из них я пользуюсь до сих пор!
Для совместной работы (для команд):
Unity — это игровой движок, который я использую для создания своих игр и я буду очень часто упоминать его здесь. Однако не стесняйтесь — вы можете выбрать любой другой движок для своих игр.
Этап №2: Арт 🖌
Совет 🌟
Вы продумали свою игру и записали все свои идеи; Мои поздравления — это потрясающе! Теперь пора поработать над реализацией ваших задумок!
(Если вы не умеете кодить, то я советую вам для начала перейти к этапу номер 3 — программирование. Ведь вы не хотите создавать модели и концепт- арты, для того чтобы потом их просто выкинуть, потому что вы не сможете их использовать в своей игре без кода).
Вы не умеете рисовать? Не волнуйтесь. Каждый из нас может нарисовать что-то красивое, руководствуясь тремя основными принципами визуализации: цвет, форма и пространство.
Подумайте над тем, как сделать ваш UI (пользовательский интерфейс) уникальным, чтобы он имел четкую и единую цветовую тему, шрифты, формы, значки, и в то же время оставался наиболее функциональным. Подумайте, легко ли считывается информация с интерфейса? Не отвлекают ли подобранные цвета, шрифты и значки?
2D анимация
У вас есть два варианта для создания 2D анимации:
Разное
Вот несколько общих советов по оформлению игр:
Неразбитый и разбитый на плитки элементы
😲 Синее пятно увеличилось, однако его расположение осталось неизменным
Ресурсы 🎁
Программы для создания UI:
Программы для создания 2D объектов (ассетов):
Программы для создания 3D объектов: