Первые шаги в Urho3D: Арканоид за 10 минут - Создание игр - Статьи по созданию игр

Меню сайта

Категории каталога

Создание игр [357]

Статьи об общих понятиях связанных с созданием игр.

Программирование [83]

Гайды по программированию на разных ЯП.

Движки и Гейммейкеры [147]

Статьи о программах для создания игр, уроки и описания.

Софт [43]

Различные программы, в том числе в помощь игроделам.

2D-графика [14]

Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.

3D-графика [17]

Уроки по моделированию, ландшафт, модели, текстурирование и пр.

Моддинг игр [5]

Модификация компьютерных игр, создание дополнений, перевод, хакинг.

Игры [167]

Статьи об играх, в том числе и сделанных на гейммейкерах.

Разное [131]

Статьи, которые не вошли в определённые разделы.

Наш опрос

Главная » Статьи » Создание игр

Первые шаги в Urho3D: Арканоид за 10 минут

Немного о движке
На сайте GcUp уже есть информация о движке, но она сильно устарела. Более актуальный список возможностей смотрите на официальном сайте.
Urho3D - это крайне производительный Unity-подобный движок, который позволяет писать игры на C++, AngelScript и LUA. Компания Xamarin (которая нынче является частью Microsoft) создала также порт движка на язык C#. Urho3D поддерживает множество платформ: Windows, Linux, Mac OS X, Android, iOS, Raspberry Pi, HTML5. При этом исходники движка доступны под лицензией MIT, разрешающей бесплатное коммерческое использование.

Шаг 1: Скачиваем движок
Движок можно без проблем самостоятельно собрать из исходников, но так как нашей целью является максимально быстрый результат, то воспользуемся уже готовыми сборками, которые доступны тут. В папке Snapshots регулярно обновляемая текущая версия движка. Так как движок активно развивается и со временем что-то может поменяться, то я буду опираться на конкретную версию: качаем эту.

Шаг 2: Смотрим примеры
Вместе с движком поставляется большое количество примеров. Каждый пример продублирован на всех 3-х языках (C++, LUA и AngelScript). В папке bin находятся скомпилированные C++-версии. Для того, чтобы запустить скриптовые версии нужно использовать лаунчер Urho3DPlayer.exe, который также находится в папке bin. Сами скрипты расположены в папках share\Urho3D\Resources\Data\Scripts\ и share\Urho3D\Resources\Data\LuaScripts\. Пример запуска скрипта (можете создать bat-файл в папке bin):

Код

Urho3DPlayer.exe Scripts/23_Water.as

Шаг 3: Минимальный скрипт
1) Создайте пустую папку для нашей игры.
2) Скопируйте в нее лаунчер Urho3DPlayer.exe.
3) Так как мы скачали SHARED-версию, то движок находится в отдельной библиотеке Urho3D.dll (в STATIC-версии движок интегрирован в исполняемый файл). Поэтому скопируйте в нашу папку также Urho3D.dll.
4) Сюда же скопируйте директории CoreData и Data из share\Urho3D\Resources\. Папка CoreData содержит стандартные ресурсы движка, а Data - в основном контент для примеров.
5) Чтобы не смешивать свой контент со стандартным, создайте папку MyData. Чтобы лаунчер увидел ресурсы из папки MyData, эту директорию нужно указать в параметрах запуска. Для этого есть два способа:
5.1) Создать bat-файл со следующим содержимым:

Код

Urho3DPlayer.exe Scripts/Main.as -p MyData;Data;CoreData -w -x 800 -y 600

5.2) Или указать параметры запуска в файле Data\CommandLine.txt

Код

Scripts/Main.as -p MyData;Data;CoreData -w -x 800 -y 600

Здесь "Scripts/Main.as" указывает скрипт, который будет исполнять лаунчер, "-p ..." - папки с ресурсами, "-w" заставляет игру запускаться в окне, а "-x 800 -y 600" определяет размеры окна (наша игра будет рассчитана именно на это разрешение для простоты).
6) В папке MyData создайте подпапку Scripts, а в ней текстовый файл Main.as со следующим содержимым:

Код

void Start()
{
}

Функция Start() является точкой входа скрипта. Список всех функций и классов, экспортированных в AngelScript можно посмотреть здесь (в верхнем правом углу страницы есть переключатель версии движка).
Чтобы не было проблем с кириллицей, сохраняйте исходник в кодировке UTF-8.
7) Теперь запустите лаунчер и вы увидите пустое черное окно. Проконтролируйте также, чтобы в логе c:\Users\ИМЯ ПОЛЬЗОВАТЕЛЯ\AppData\Roaming\urho3d\logs\Main.as.log не было сообщений об ошибках. Этот лог очень сильно поможет вам при отладке приложения.

Шаг 4: Создаем сцену со сферой
Urho3D является сцено-ориентированным движком. Сцена состоит из иерархии узлов (нод). Каждая нода имеет такие характеристики как позиция в пространстве, угол поворота, масштаб. К любой ноде можно прикрепить так называемые компоненты: 3D-модели, спрайты, камеры, скрипты, источники звука, света и так далее, а также дочерние ноды, которые будут наследовать все трансформации.

Модифируем наш скрипт:

Код

const float BALL_DIAMETER = 30.0f; // Диаметр шарика.

Scene@ scene_; // Указатель на сцену.

void Start()
{
  // Создаем новую сцену.
  scene_ = Scene();

  // Сцена является производным от ноды типом и к ней тоже можно
  // добавлять компоненты. Компонент Octree (октодерево) необходим,
  // если вы планируете отображать объекты сцены, то есть почти всегда.
  scene_.CreateComponent("Octree");

  // Создаем объекты в сцене.
  CreateZone();
  CreateBall();
  CreateCamera();
}

void CreateCamera()
{
  // Создаем для сцены дочернюю ноду и задаем ей имя MyCamera.
  // Имена нод можно использовать для того, чтобы искать нужный узел сцены.
  Node@ cameraNode = scene_.CreateChild("MyCamera");

  // Создаем камеру и прикрепляем ее к узлу.
  Camera@ camera = cameraNode.CreateComponent("Camera");
  camera.orthographic = true;

  // Координаты сцены будут соответствовать экранным пикселям.
  camera.orthoSize = graphics.height;

  // Указываем для узла с камерой положение в пространстве.
  // Координата X направлена слева направо, Y - снизу вверх, Z - от вас вглубь экрана.
  cameraNode.position = Vector3(0.0f, 0.0f, -200.0f);

  // Указываем движку какая камера какой сцены будет показана на экране.
  Viewport@ viewport = Viewport(scene_, camera);
  renderer.viewports[0] = viewport;
}

// Зона позволяет настраивать фоновое освещение, туман и фоновую текстуру.
void CreateZone()
{
  Node@ zoneNode = scene_.CreateChild("Zone");
  Zone@ zone = zoneNode.CreateComponent("Zone");

  // Задаем фоновое освещение внутри зоны.
  zone.ambientColor = Color(1.0f, 1.0f, 1.0f);

  // Увеличиваем размер зоны, чтобы она охватывала всю сцену.
  zone.boundingBox = BoundingBox(-1000.0f, 1000.0f);
}

// Создаёт шарик.
void CreateBall()
{
  // Создаем ноду для 3D-модели.
  Node@ ballNode = scene_.CreateChild("Ball");

  // Создаем компонент StaticModel - простая 3D-модель без скелета.
  StaticModel@ ballObject = ballNode.CreateComponent("StaticModel");

  // Загружаем модель из файла.
  ballObject.model = cache.GetResource("Model", "Models/Sphere.mdl");

  // Масштабируем шарик.
  ballNode.SetScale(BALL_DIAMETER);
}

Мы не задаем для сферы никакого материала, поэтому используется стандартный CoreData\Materials\DefaultGrey.xml При этом сцена освещена только равномерным фоновым освещением, поэтому 3D-сфера выглядит как плоский белый круг в центре экрана.

Шаг 5: Заставим шарик отскакивать от краев экрана
Модифицируем скрипт:

Код

...

Vector3 ballSpeed; // Текущая скорость шарика.

void Start()
{
  ...

  // Определяем функцию, которая будет вызываться каждый кадр.
  SubscribeToEvent("Update", "HandleUpdate");

  // Приводим игру в начальное состояние.
  NewGame();
}

void NewGame()
{
  InitBall();
}

// Приводит шарик в начальное состояние.
void InitBall()
{
  // Ищем шарик в сцене.
  Node@ ballNode = scene_.GetChild("Ball");

  // Помещаем шарик в центр сцены. В нашем случае центр сцены совпадет
  // с центром экрана.
  ballNode.position = Vector3(0.0f, 0.0f, 0.0f);

  // Устанавливаем начальную скорость шарика.
  ballSpeed = Vector3(500.0f, 250.0f, 0.0f);
}

// Обработчик события Update.
void HandleUpdate(StringHash eventType, VariantMap& eventData)
{
  // Сколько времени прошло с предыдущего кадра.
  float timeStep = eventData["TimeStep"].GetFloat();

  UpdateBall(timeStep);
}

// Апдейтим шарик каждый кадр. Здесь timeStep - время, прошедшее с прошлого кадра.
void UpdateBall(float timeStep)
{
  // Ищем шарик в сцене.
  Node@ ballNode = scene_.GetChild("Ball");

  // Если шарик касается левой или правой стороны экрана, то меняем его горизонтальную скорость.
  if (ballNode.position.x < -graphics.width / 2 + BALL_DIAMETER / 2)
    ballSpeed.x = Abs(ballSpeed.x);
  else if (ballNode.position.x > graphics.width / 2 - BALL_DIAMETER / 2)
    ballSpeed.x = -Abs(ballSpeed.x);

  // Если шарик касается верхней или нижней границы экрана, то меняем его вертикальную скорость.
  if (ballNode.position.y > graphics.height / 2 - BALL_DIAMETER / 2)
    ballSpeed.y = -Abs(ballSpeed.y);
  else if (ballNode.position.y < -graphics.height / 2 + BALL_DIAMETER / 2)
    ballSpeed.y = Abs(ballSpeed.y);

  // Обновляем положение шарика с учетом текущей скорости.
  ballNode.position += ballSpeed * timeStep;
}

Шаг 6: Добавляем платформу
Дополните скрипт:

Код

...
const Vector3 PLATFORM_SIZE = Vector3(120.0f, 10.0f, 60.f); // Размер платформы.

void Start()
{
  ...
  CreatePlatform();
  ...
}

// Создаёт платформу.
void CreatePlatform()
{
  Node@ platformNode = scene_.CreateChild("Platform");

  // Прикрепляем к ноде куб размером 1x1x1.
  StaticModel@ batBotObject = platformNode.CreateComponent("StaticModel");
  batBotObject.model = cache.GetResource("Model", "Models/Box.mdl");

  // Растягиваем куб до нужных размеров.
  platformNode.scale = PLATFORM_SIZE;
}

void NewGame()
{
  ...
  InitPlatform();
}

// Инициализирует платформу.
void InitPlatform()
{
  Node@ platformNode = scene_.GetChild("Platform");
  platformNode.position = Vector3(0.0f, -300.0f, 0.0f);
}

// Обработчик события Update.
void HandleUpdate(StringHash eventType, VariantMap& eventData)
{
  ...
  UpdatePlatform();
  ...
}

void UpdatePlatform()
{
  // Горизонтальное смещение мыши с прошлого кадра.
  Vector3 delta = Vector3(input.mouseMoveX, 0.0f, 0.0f);

  Node@ platformNode = scene_.GetChild("Platform");
  platformNode.Translate(delta);
}

Теперь платформа движется внизу экрана, когда пользователь перемещает мышку (но никак не взаимодействует с шариком).

Шаг 7: Добавляем интерфейс
Добавьте в скрипт:

Код

...
int score = 0; // Текущий счет.

void Start()
{
  ...
  // Создаем пользовательский интерфейс.
  CreateUI();
  ...
}

void CreateUI()
{
  // Создаем текстовый элемент для отображения счета.
  // UI не принадлежит сцене, сцена может вообще отсутствовать.
  Text@ scoreElement = ui.root.CreateChild("Text", "Score");
  scoreElement.SetFont(cache.GetResource("Font", "Fonts/Anonymous Pro.ttf"), 60);
  scoreElement.position = IntVector2(12, 0);
}

void NewGame()
{
  ...
  score = 0;
  UpdateScoreElement();
}

void UpdateScoreElement()
{
  Text@ scoreElement = ui.root.GetChild("Score");
  scoreElement.text = "Счёт: " + score;
}

Теперь игра отображает текущий счет (пока что он все время нулевой).

Шаг 8: Заставляем шарик взаимодействовать с платформой
Модифицируйте функцию UpdateBall(). Отскоки шарика от верхней и боковых сторон экрана не трогаем, но изменяем обработку касания шарика с нижней границей:

Код

void UpdateBall(float timeStep)
{
  Node@ platformNode = scene_.GetChild("Platform");
  ...

  // Если шарик касается верхней границы экрана, то меняем его вертикальную скорость.
  if (ballNode.position.y > graphics.height / 2 - BALL_DIAMETER / 2)
    ballSpeed.y = -Abs(ballSpeed.y);
  // Если шарик касается нижней стороны экрана,
  else if (ballNode.position.y < -graphics.height / 2 + BALL_DIAMETER / 2)
  {
    // и если платформа далеко от шарика,
    if (Abs(platformNode.position.x - ballNode.position.x) > PLATFORM_SIZE.x * 0.5f + BALL_DIAMETER * 0.5f)
    {
      // то начинаем игру заново.
      NewGame();
      return;
    }
    else
    {
      // Шарик отскакивает от платформы, увеличиваем счет.
      ballSpeed.y = Abs(ballSpeed.y);
      score++;

      // Обновляем UI-элемент, отображающий текущий счет.
      UpdateScoreElement();
    }
  }

  // Обновляем положение шарика с учетом текущей скорости.
  ballNode.position += ballSpeed * timeStep;
}

Игра готова! Финальную версию скрипта можно посмотреть тут.

Что дальше?
Для дальнейшего погружения в Urho3D обратитесь к циклу туториалов.
Некоторые готовые игры на движке:
https://github.com/1vanK/FlappyUrho
https://github.com/1vanK/PuddleSimulator
https://github.com/1vanK/Soulmates

Категория: Создание игр | Добавил: 1vanK (13 Июля 2017)

Просмотров: 8805 | Комментарии: 1 | Рейтинг: 4.7/18 |
Теги: Unity, арканоид, AngelScript, Создание игры, движок, Urho3D, C#, C++, LUA, первые шаги

Дополнительные опции:

Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:

Если вас заинтересовал материал «Первые шаги в Urho3D: Арканоид за 10 минут», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы:

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

Всего комментариев: 1

Порядок вывода комментариев: