Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск

“Кто из вас в этом году быстрее всех выполнит план, тот получит от меня шоколадку.- Шеф, нам бы зарплату...- Так, начинается! Я уже купил шоколадки!” - анекдот дня


Разработка программ игр и приложений->Как создать игру. Инвентарь.

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

0

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

Дата: 14.09.2020


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


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


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


Нам понадобятся файлы кода. Реализуем их в процессе. Скрипт напишем на javascript. Кроме всего, основной необходимостью являются картинки. Можно использовать обычную функцию fillRect и fillStyle для создания квадратов и закрашивания, но в этом случае инвентарь получится абсолютно неинтересный и мрачный. Поэтому принято решение использовать картинки jpg, загрузку осуществим функцией drawImage. Какие файлы будут созданы при работе?



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

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

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

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

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

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

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


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


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


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


Слоты – код этого файла похож на предыдущий пример. Размещается группа ячеек в ряд и по вертикали.
как_создать_игру_рис3


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


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


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


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


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


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


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


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


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


DisplayManager- мы применим для размещения всех атрибутов на земле и в слотах. И не забываем использовать ItemTypes, который описан выше. Вот пример “Дисплея”.
как_создать_игру_рис9


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


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


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


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

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

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

Теперь посмотрим, как выглядит наш код, на примере.
как_создать_игру_рис12


В примере понятно, что два метода 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 файл для работы со всеми скриптами


Чтобы все прекрасно работало и каждые фрагменты кода могли взаимодействовать друг с другом, их нужно все подключить. Как показано в примере ниже.
как_создать_игру_рис13
В example добавлены комментарии описывающие переменные, поэтому повторно их расписывать не будем. Чтобы все запустилось, создадим main().
как_создать_игру_рис14


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


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


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


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


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


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


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


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


Разработка программ игр и приложений->Как создать игру. Инвентарь.


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

Просмотров: 37

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика