Разработка программ игр и приложений->Как создать игру. Инвентарь. Как создать игру. Инвентарь.Добавил: Катя Самохина Дата: 14.09.2020 |
При разработке игры обязательно нужно продумать сюжетную линию, действующих героев и историю местности, где разворачиваются события. Одной из сторон игры является gui (графический интерфейс пользователя). Туда чаще всего входит карта, школа магии, характеристики и инвентарь. Рюкзак, который носит с собой герой, разбит на слоты, туда складываются все вещи, подбираемые по пути, начиная от пузырьков с зельем и заканчивая оружиями и доспехами. Как создать игру вместе с инвентарем? По сути, любой инвентарь состоит из массива, каждый слот это ячейка. Когда туда попадает взятый с земли артефакт или снадобье, то одна ячейка array, становится заполненной. Что нужно для разработки инвентаря? Как создать игру.Нам понадобятся файлы кода. Реализуем их в процессе. Скрипт напишем на javascript. Кроме всего, основной необходимостью являются картинки. Можно использовать обычную функцию fillRect и fillStyle для создания квадратов и закрашивания, но в этом случае инвентарь получится абсолютно неинтересный и мрачный. Поэтому принято решение использовать картинки jpg, загрузку осуществим функцией drawImage. Какие файлы будут созданы при работе?
![]() Перемещение происходит по оси 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, выглядит он вот так: Дисплей для отображения всех элементов игры.DisplayManager- мы применим для размещения всех атрибутов на земле и в слотах. И не забываем использовать ItemTypes, который описан выше. Вот пример “Дисплея”. ![]() Для понятности, в коде есть комментарии переменных. Две функции выполняют следующие действия, вызывается Inventary и функция init. Она создает и размещает ячейки на поле. В дальнейшем getInventary нам пригодится в главном index файле, чтобы получить значение переменной _inventory и выбрать число слотов используя getSlotsArray. Примерно вот так: Об этом поговорим, когда дойдем до основного файла, а сейчас продолжим разбирать наш дисплей. Следующее, это создание уровня, куда буду размещены наши артефакты, боевые молоты, зелья, щиты и другие вещи. Здесь тоже нет ничего сложного, вот как выглядит createLevel. Как создать игру. Размещение предметов. Расположение боевых атрибутов в инвентаре и на земле.Чтобы указать заполнение рюкзака, а остальное разбросать по земле, существуют три функции.
Теперь посмотрим, как выглядит наш код, на примере. ![]() В примере понятно, что два метода createItemInLevel, createItemInSlot, вызываются для создания объектов в игре, в зависимости от заранее заданных параметров. Предположим, герой изначально при себе должен иметь перечень атрибутов, для обороны против полчищ врагов. В его личный арсенал, как правило, входит меч, щит, доспехи, одежда и все. Остальное он раздобудет по пути - амулеты, кольца и лучшее обмундирование. Основная функция, отвечающая именно за создание (createItemGraphics). В неё передается ряд параметров.
Узнали инициализацию переменной itemtypes, в теле функции? Мы про неё писали выше, самое время её обозначить и отправить в дальнейшем в метод Item. Теперь switch…case, кто не в курсе, что это рекомендую почитать эту статью. Здесь мы обозначаем количество условий, когда мы будем передавать значение в switch (itemId), то будет проверка в case и при выпадении BitmapItem c номером от 01-05, сработает создание предмета. Главный html файл для работы со всеми скриптамиЧтобы все прекрасно работало и каждые фрагменты кода могли взаимодействовать друг с другом, их нужно все подключить. Как показано в примере ниже. ![]() В example добавлены комментарии описывающие переменные, поэтому повторно их расписывать не будем. Чтобы все запустилось, создадим main(). ![]() Первое, на что стоит обратить внимание, это то, как здесь создаются объекты. Переменные obj, разместятся на уровне, а objItem в инвентаре, но самое главное все объекты сохраняются в одну переменную массив item. Поэтому если мы захотим с ними взаимодействовать, то достаточно выбрать item и сделать выборку нужных элементов через цикл. Итак, что мы видим из примера, созданы шесть элементов, четыре из которых разбросаны по земле, а остальные два находятся в инвентаре. В конце три метода взаимодействия с мышью. Посмотрим на них подробнее. Эта функция срабатывает, в том случае, если игрок нажал на оружие и стал его переносить. Dragok является всегда false, до тех пор, пока не стало происходить действие. mousePosition – срабатывает при щелчке мыши. В цикле contains, проверяется, что область по которому был произведен щелчок соответствует заданным параметрам. В selectItem сохраняется наш выбранный элемент, он пригодится для дальнейшего использования. Dragok и встроенное свойство в “Итем” isDragging присваивается true. Попытавшись переместить элемент, вы столкнетесь с одной проблемой. Если случайно одна картинка попадет на другую, и вы попытаетесь сделать захват в области пересечения, вы увидите, что два изображения перемещаются вместе. Впервые такая проблема была при создании puzzla. Решение пришло довольно быстро. Кстати онлайн пазлы собирать бесплатно без регистрации вы сможете, перейдя по ссылке. Последние строчки это сохранение стартовых позиций мыши. Мы создаем переменную, где ссылаемся на другой файл и выбираем все слоты инвентаря, потом через цикл пропускаем и производим сравнение, при отпускании мыши, если по Оси(x,y) предмет равен слоту со смешение 40 пикселей, артефакт автоматически ставится в слот, занимая место одной ячейки. Последняя функция это “myMove”. Суть проста, за мышью должен следовать захваченный рисунок. И последнее заключительная часть как создать игру, все это вывести на экран. Если внимательно смотрели main, то могли увидеть setTimeout c draw и второе значение 100. Это означает быстрый вызов draw. Без него показа интерфейса не будет. Выглядит полностью скрипт следующим образом. Очищается холст с помощью clear, а потом уже начинается отрисовка рюкзака и уровней. Разработка программ игр и приложений->Как создать игру. Инвентарь. Перейти на главнуюВагон игр Назад Просмотров: 1306 |
Комментарий к этой заметки:
Добавить ваш камментарий: