Как создать игру. Инвентарь.

0

Добавил: Катя Самохина

Дата: 14.09.2020

При разработке игры обязательно нужно продумать сюжетную линию, действующих героев и историю местности, где разворачиваются события. Одной из сторон игры является gui (графический интерфейс пользователя). Туда чаще всего входит карта, школа магии, характеристики и инвентарь. Рюкзак, который носит с собой герой, разбит на слоты, туда складываются все вещи, подбираемые по пути, начиная от пузырьков с зельем и заканчивая оружиями и доспехами. Как создать игру вместе с инвентарем?

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

Что нужно для разработки инвентаря? Как создать игру.

1. DisplayManager. Создает объекты на холсте - инвентарь, местность, где будут размещены предметы (Level), и графические изображения мечей и топоров, которые можно добавить в рюкзак.
   Inventory – из названия следует, для чего предназначен данный файл. Он формирует и выстраивает слоты в ряд и в столбец.


2. Slot – отвечает за один слот отображаемый на canvas.


3. Level – область, где будут раскиданы все предметы.


4. Item(01-05) – каждый файл отвечает за определённый предмет, оружие или зелье. В этом файле есть свойство type, помогающее определить тип оружия.


5. Itemtypes – сам файл, который назначает тип оружия - меч, щит, копьё, посох и т.д.


6. Mouse – файл мыши, применяется для захвата и перетаскивания оружия, артефакта или зелья в слот или обратно выкидывает на землю.


7. Главный файл index.html, рисует на теге canvas все объекты и с помощью мышки взаимодействует с ними.

Перемещение происходит по оси x и y. Эти переменные указаны, в файлах, Item c номером 01-05. Остальные параметры, это ширина и высота, передаваемые в значении функции. Чтобы коду было понятно, когда начнется перетаскивание, используется переменная isDragging, а для отображения индивидуального изображения есть функция drawImage. Но вначале по умолчанию требуется создать, “ this.img = new Image();”. Дальше указываем свойство “src” переменной img. Функция Contains, проверяет щелчок мышки в квадратной области предмета. Весь код, будет выглядеть вот так.

Хотите создать еще один предмет, укажите название файла Item02, и поменяйте некоторые параметры, например ссылку на картинку в src. Если при изучении данной статьи вы не разберетесь, как создавать новые вещи и размещать на холсте, скачайте в конце текста архив с исходниками и посмотрите, как source устроен внутри.

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

В итоге вызов происходит в файле, который называется Inventory. Взглянем на этот код.

Обычно, когда нужно отобразить слоты по горизонтали и вертикали используется двойной цикл. В нашем случае мы решили применить один раз вложенный цикл, при этом в случае, когда число дойдет до трех, переносить остальные ячейки на следующую строку. Где обозначается это число? Его можно найти в DisplayManager, в методе createInventory в скобках перечисляются параметры, последним из которых и является число обозначающее, когда делать отступ на следующую строку (numberOfColumns). Про “Дисплей Менеджер”, мы поговорим позже, а сейчас продолжим тему “Инвентаря”.

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

getSlotsArray данный метод используется для вывода всего массива и пригодится в index.html, когда через цикл потребуется вывести все Slot’ы.
Полностью код отображен ниже.

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

Пару слов, про файл Item, который описан в самом начале статьи. Там можно увидеть переменную type, означает тип оружия или доспеха. Это продумано заранее, в случае если понадобиться создать полноценный инвентарь с возможностью одевать героя. Сейчас type ничего не значит, просто предусмотрительность, которая пригодится при разработке полноценного инвентаря в своей rpg игре.

Перед началом разработки приходится продумать до мельчащих деталей локации и количество уровней вниз. Это касается таких игр, где присутствуют подземелья и многоуровневые местности. Дополнительные элементы игры это класс героя- варвар, лучник, волшебница. Поэтому кроме типов оружия, изначально требуется предусмотреть классы оружия для главных действующих лиц.

Вернемся к нашему типу вещей выпадающих на землю. За это отвечает отдельный файл, называемый ItemTypes, выглядит он вот так:

Дисплей для отображения всех элементов игры.

Для понятности, в коде есть комментарии переменных. Две функции выполняют следующие действия, вызывается Inventary и функция init. Она создает и размещает ячейки на поле. В дальнейшем getInventary нам пригодится в главном index файле, чтобы получить значение переменной _inventory и выбрать число слотов используя getSlotsArray. Примерно вот так:

Об этом поговорим, когда дойдем до основного файла, а сейчас продолжим разбирать наш дисплей. Следующее, это создание уровня, куда буду размещены наши артефакты, боевые молоты, зелья, щиты и другие вещи. Здесь тоже нет ничего сложного, вот как выглядит createLevel.

Мы добрались до основной части.

Как создать игру. Размещение предметов. Расположение боевых атрибутов в инвентаре и на земле.

• createItemInLevel – уровень, или проще говоря земля. Тут находятся выпавшие из монстров вещи.


• createItemGraphic – является методом, занимавшимся именно созданием объектов, независимо где, будь это инвентарь или местность, где герой случайно нашел ценную вещь.


• createItemInSlot – добавляет в слоты, найденные интересные вещи.

В примере понятно, что два метода createItemInLevel, createItemInSlot, вызываются для создания объектов в игре, в зависимости от заранее заданных параметров. Предположим, герой изначально при себе должен иметь перечень атрибутов, для обороны против полчищ врагов. В его личный арсенал, как правило, входит меч, щит, доспехи, одежда и все. Остальное он раздобудет по пути - амулеты, кольца и лучшее обмундирование.

Основная функция, отвечающая именно за создание (createItemGraphics). В неё передается ряд параметров.

• itemID – отвечает за предмет id. Можно использовать любое название на английском языке. Мой вариант, просто BitmapItem c цифрой от 01-05.


• X,y – размещение объекта по оси координат.


• Width, height – ширина и высота картинки предмета.

Узнали инициализацию переменной itemtypes, в теле функции? Мы про неё писали выше, самое время её обозначить и отправить в дальнейшем в метод Item. Теперь switch…case, кто не в курсе, что это рекомендую почитать эту статью. Здесь мы обозначаем количество условий, когда мы будем передавать значение в switch (itemId), то будет проверка в case и при выпадении BitmapItem c номером от 01-05, сработает создание предмета.

Главный html файл для работы со всеми скриптами

Первое, на что стоит обратить внимание, это то, как здесь создаются объекты. Переменные obj, разместятся на уровне, а objItem в инвентаре, но самое главное все объекты сохраняются в одну переменную массив item. Поэтому если мы захотим с ними взаимодействовать, то достаточно выбрать item и сделать выборку нужных элементов через цикл. Итак, что мы видим из примера, созданы шесть элементов, четыре из которых разбросаны по земле, а остальные два находятся в инвентаре.
“i1 и i2” – уникальный номер слота инвентаря.

В конце три метода взаимодействия с мышью. Посмотрим на них подробнее.

Эта функция срабатывает, в том случае, если игрок нажал на оружие и стал его переносить. Dragok является всегда false, до тех пор, пока не стало происходить действие. mousePosition – срабатывает при щелчке мыши. В цикле contains, проверяется, что область по которому был произведен щелчок соответствует заданным параметрам. В selectItem сохраняется наш выбранный элемент, он пригодится для дальнейшего использования. Dragok и встроенное свойство в “Итем” isDragging присваивается true.

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

Последние строчки это сохранение стартовых позиций мыши.
Переходим к myUp – что будет происходить, если отпустить кнопку мыши? В этом случае переменные isDragging и dragok, сново станут false.

Мы создаем переменную, где ссылаемся на другой файл и выбираем все слоты инвентаря, потом через цикл пропускаем и производим сравнение, при отпускании мыши, если по Оси(x,y) предмет равен слоту со смешение 40 пикселей, артефакт автоматически ставится в слот, занимая место одной ячейки. Последняя функция это “myMove”. Суть проста, за мышью должен следовать захваченный рисунок.

И последнее заключительная часть как создать игру, все это вывести на экран. Если внимательно смотрели main, то могли увидеть setTimeout c draw и второе значение 100. Это означает быстрый вызов draw. Без него показа интерфейса не будет. Выглядит полностью скрипт следующим образом.

Очищается холст с помощью clear, а потом уже начинается отрисовка рюкзака и уровней.
На этом все, надеюсь, статья была полезной, и вы поняли, как создать игру. Скачайте исходные_коды, если что непонятно. Дальше будет интереснее, в ближайшее время я покажу, как создать изометрический ландшафт, вместе с героем на js. Пишите в комментариях, если что непонятно и не забудьте поставить лайк.

Перейти на главнуюВагон игр Назад