Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Приветствую тебя мой читатель. Хотел научиться делать игру? Тогда тебе сюда!. Играя в rpg или стрелялку вы могли задумываться, а как создать свою собственную игру? Какие знания требуются, и сколько займёт время? В этой статье я расскажу, как создать игру на компьютере самому с нуля и вы получите для скачивание ГОТОВЫЕ исходники кода для запуска игры на своем ПК.

Много лет назад, когда компьютеры были слабыми и не было нормального ПО, над одним проектом работали целые команды, теперь всё это ушло в прошлое. Чтобы создать свою игру нужны идея, желание и усидчивость. Не просто что-то сделать в одиночку и добиться монетизации, на это потребуется время.

Как создать игру на компьютере самому с нуля: пошагово
В статье вы узнаете как создать игру на компьютере самому с нуля с помощью блокнота (Картинки рисую в фотошопе исходники в группе ВК).

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

Как создать игру на ПК: с чего же начать?





В первую очередь определитесь, под какую платформу будет ваш продукт: на ПК, для мобильных устройств, браузерная.

У каждого варианта свои преимущество и недостатки.

  1. ПК – плюсы запускается на компьютере без выхода в интернет, минусы, чтобы продвинуть – нужно вложиться. Например, вы прошли обучение и знаете, как делать игры на ПК, даже удалось сделать гонки или rpg игру, но чтобы получить деньги нужно купить платный аккаунт на одном из специальных сайтов. Читайте, как купить аккаунт ниже?Браузерная игра для ПК
  2. Мобильные устройства – здесь преимущество заключается в быстро растущей популярности смартфонов. Выпустив интересную игру, есть шанс на ней заработать. Недостаток в том, чтобы её заметили, придётся воспользоваться сторонним ресурсом, а они чаще всего платные.Игра для мобильных устройств
  3. Браузерные – создаются с помощью html и javascript, плюс – не обязательно скачивать и покупать программы, достаточно открыть текстовый редактор и на нём начать писать, если же нужно подключить дополнительные библиотеки, они находятся в интернете и абсолютно бесплатно.Браузерная игра

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

Минус – вам придётся потратить время на продвижение, раскрутку сайта или же найти сторонний ресурс и там опубликовать игру.

Сколько я смогу заработать?

Всё зависит от вашей фантазии и свободного времени. Точную цифру вам никто не назовёт, но мне приходилось встречать разработчиков, которые за небольшой промежуток времени, чуть больше месяца, удавалось собрать примерно десять тысяч долларов, игра была на андроид. Это довольно мотивирует, чтобы начать интересоваться вопросом, как создать свою игру на компьютере?

Площадки для размещения проектов.

Далее речь пойдёт о ресурсах, где можно добавить завершённую игру.

  1. Google Play – требуется создать аккаунт разработчика. Необходимо заплатить 25 $. После чего вы получите доступ для публикации своих игр. Как и на других площадках откроется форма, для заполнения.

Подготовка маркетингового материала занимает время и требуется придерживаться следующих ограничений.

  • Название не должно превышать 30 символов.
  • Количество фотографий минимум 2, максимум 8
  • Полный текст не более 4000 знаков.
  • Краткое описание – 80 символов.

Созданное приложение после уроков как делать игры на пк, это часть успеха, для получения большого количества установок, необходимо написать интересное описание, вот рекомендации как это сделать.

  1. Добавьте скриншоты, своего приложения, самые удачные на ваш взгляд. Если программа работает не только под смартфоны, но и под планшеты. Картинки под эти устройства так же должны быть размещены.
  2. Напишите интересный текст – небольшую сюжетную линию, с неожиданным поворотом. Главное не переусердствуйте, со спойлерами, в игре должна быть интрига.
  3. Мотивируйте пользователя для получения высоких оценок и комментариев приложения. Например, игровому персу не хватает денег, для получения брони, напишите, если игроки поставят лайк и оставят комментарии, то получат внутриигровую валюту.
  1. Steam – не очень привлекательный сервис, для новичков. Оплата здесь гораздо выше, чем у гугла. Но если и у вас за спиной уже несколько прибыльных проектов, то можете попробовать этот сервис. Итак, как разместить свою игру в Стим?

Заходим на специальную страницу партнёров, и заполняем анкету. Указывая свои платежные данные, нужно заплатить взнос в размере 100 $, за каждый выпущенный вами продукт. Например, разместили гонки, оплатили сто долларов, при релизе следующей игры, стоит подготовить заранее такую же сумму. После выполнения всех условий системы и загрузки программы, подождите 5 дней. Сотрудники Стима проверят работоспособность приложения. Цену своей игры вы проставляете сами.

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

Что из себя представляет данная технология?

Существует официальное определение, что HTML 5 – это последняя версия языка разметки для web страниц, которая официально используется во всем мире. Теперь она стала ещё более усовершенствованной, появились новые теги и функции JavaScript, позволяющие добавлять картинки. Изображения – основная составляющая при геймдизайне.

Фоновые локации, персонажи, окружающий мир, всё это загружается специальной функцией. Герои, вооруженные мечами, атакуют врагов и взаимодействуют с окружающим миром, за счёт столкновения картинок по оси координат X и Y. Как это сделать будет описано ниже.

Как создать игру на компьютере самому с нуля: пошаговая инструкция на примере html5?

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Сейчас разберём простенький пример, который создается в блокноте, и вы поймёте, как создать игру на компьютере самому с нуля. Главный герой убегает от преследователя, который идёт по пятам, если антагонист настигнет героя, то нанесёт урон. Выглядит всё довольно просто. В примере действующие лица, будут два кружка. За отрисовку примитивов отвечают методы. В нашем случае используем “arc”. Он принимает несколько значений: x, y, радиус и два последних начальный и конечный угол. Приступим, для начала добавим героя на холст. Предположительно, тег canvas уже присутствует в вашем документе с идентификатором id. Теперь осталось на него сослаться canvas = document.getElementById(“canvas”); и вернуть контекст для рисования. ctx = canvas.getContext(“2d”);




Забудете указать canvas с id, контекст вернет null. Когда всё сделано правильно, можно нарисовать первую фигуру и оставить надпись сверху.

fillText, отображает текущее здоровье.

beginPath и closePath –  начинает и завершает контур зарисовки.

Fill – заливает цветом эллипс, который указан fillStyle. Главный герой должен уметь двигаться, чтобы выполнять задания и сражаться с врагами. Напишем несколько переменных down, up, right и left.

Они срабатывают в методах myDown и myUp, когда происходит перемещение героя по холсту. Ещё одна переменная массив, obj, туда мы добавим всех персонажей нашей игры.

Полностью код, можно увидеть ниже.

Как создать игру на компьютере самому с нуля: код для верстки шаблона игры
Код игры с шариками.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Добавим противника с координатами х=350 и y=250. Просто скопируйте строчку obj.push, в коде и поменяйте параметры x и y. Измените, метод draw, чтобы он соответствовал рисунку.

Как создать игру код программы

Если всё сделано правильно, то при запуске в браузере, отобразиться два эллипса. Во время битвы, атака происходит непосредственно вблизи, на расстояния вытянутой руки или мечами. При условии, что это не лучник, а предположим, преследователь обычный бандит и вооружён кинжалом, а значит атака в ближнем бою. Высчитывается радиус в 2d играх, с помощью математики. Метод sqrt производит необходимые расчёты.

Запишем в код перед draw, два метода diff и dist и вызови dist в конце функции

update.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Dist принимает четыре параметра, первые два X и Y героя, последние два – координаты противника. Чтобы увидеть результат нужно прописать условие, при котором будут срабатывать действия, в нашем случае, элементарное перекрашивание противника в красный цвет. В начале функции укажите координаты соперника

  • x2 = obj[1].x
  • y2 = obj[1].y,

и запишите вот так.

Создаем координаты объектов в игре

Совет: большинство новичков допускают ошибки, в коде из-за чего перекрашивается один объект, и меняют цвета ещё несколько. В нашем случае произошло тоже самое, и вместе с кругом врага поменялся и цвет текста. Save restore – могут исправить положение. Просто окружите ими цикл for в функции draw и при запуске вы увидите следующее.

Как создать игру на компьютере со стукивающимися шариками

Далее переделаем код так, чтобы нашего героя преследовал враг. Здесь же мы воспользуемся несколькими математическими функциями atan2, sin, cos и создадим ещё одну updatePointer. Заранее добавьте переменные в начале кода GameOver = false и a,b,c.

В целом должно получиться вот так:

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Для запуска преследования немного переделаем update. Раньше упоминалось, условие, где противник перекрашивается, в красный цвет. Теперь запишем в тело else updatePointer();.

После этого противник начнёт свою охоту, за героем.




Осталось сделать атаку и поражение. Добавим ещё две новых переменных

  • attack = false, i = 0.
  • Attack – проверяет нужно атаковать героя или нет,

I  – высчитывает интервал между атаками например 1 секунда указано в значении массива intervalAttack. Когда пройдёт одна секунда значение i обнуляется. Пример:

Интервал Атака в создаваемой игре

Запускаем  в начале update.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

 

В условие где перекрашивание объекта добавляем  if(…){ attack = true;…} else {attack = false …}. При поражении хорошо бы вывести сообщение “Ваш герой погиб, конец игры”. Воспользуемся fillText, и изменим функцию draw.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Попробуем разобраться как создать игру на компьютере самому с нуля c картинками Flappy Bitd.

Как создать игру самому на компьютере Flappy Bitd

Задача: управляя жёлтой птичкой, уворачиваться от зелёных труб. При условии, что птица постоянно падает. В коде будут задействованы, новые методы загрузки картинок, звуковых эффектов и сохранения счёта. Весь необходимый материал находится в папках audio и img.

Перечислю новые классы и методы.

  • Image() – создаёт новый экземпляр класса, для отображения картинки
  • Audio() – проигрывание звука.
  • drawImage – отрисовка изображения принимает девять параметров. Первый ссылка на изображение. Остальные восемь работают, в зависимости от заданных значений. Например, если использовать только четыре параметра, то задастся месторасположение по оси координат и высота и ширина. Добавив ещё четыре, они так же будут отвечать за расположение и размер картинки, только первые 4 изменят свое предназначение и теперь с помощью их можно передвинуть картинку в любое направление в пределах границ и задать размер этой картинки. Таким образом создаётся анимация спрайтовых картинок.
  • Play – воспроизводит звук.
  • translate – ретранслирует объект в новое место окна.
  • rotate – поворачивает графический объект. Задавайте это значение перед drawImage.
  • requestAnimationFrame – задаёт анимацию повторения, где в скобках указывается функция для повтора.
  • strokeText – рисует контур текста, свойство lineWidth задаёт толщину линий, strokeStyle – цвет.
  • localStorage – служит как хранилище данных, очень удобно для хранения рекордов пользователя по завершению игры.
  • setItem – устанавливает значение которое надо сохранить и ключ вызова значения например. localStorage.setItem(“best”, score.best);
  • getItem – вызывает данные из хранилища localStorage.getItem(“best”)

Все документы, связанные со скриптами, лучше всего хранить отдельно от html. Поэтому создадим game.js и добавим следующие константы.

Добавление константы

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

Вот так:

var img = new Image();

img.onload = function(){

drawImage(…)

}

Учитывайте это при создании будущих игр в html5.

Контроль игры, взаимодействие с объектами осуществляется с помощью кнопок мыши или клавиатуры.

Контроль созданной игры в коде

Проверка: если нажатая кнопка старт, сбрасывает значение объектов pipes – трубы, bird – птица, score – очки, и ставим флажок getReady. Запускается case с флагом state.game, и начинают проигрываться звуки полёта.

Задний и передний план, отображает облака и землю.

Задний фон для игры
Код заднего фона для вставки в игру.

Полёт птицы, и проигрыш в случае падения на землю. Весь код прокомментирован.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Стартовое и конец игры сообщения.

Стартовое сообщение

Следующее, что нужно сделать это появление труб на локации, они должны быть разной длины, а так же обозначить, что при столкновении птица падает.Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Обязательно следует отобразить очки, как сверху над птицей, так и по завершению игры.

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

Заключительный этап показ всех элементов на холсте.

Отрисовка элементов Игры
Отрисовка элементов Игры

Чтобы всё заработала, в html документе создайте, следующий код:

Как создать игру на компьютере самому с нуля: делаем мини игру про птичек + исходники кода с игрой

СКАЧАТЬ ИСХОДНИКИ ИГРЫ И САМИ ИГРЫ МОЖЕТЕ ПО ССЫЛКЕ НИЖЕ:

В заключении хотелось бы отметить. Как заработать на html играх. Самый действенный способ разместить, рекламу, перед загрузкой игры. Платят за переходы. Ещё можно придумать, платные фишки. Если игрок заплатит, то получит дополнительные предметы, артефакты и доступ к секретным уровням. World of Warcraft, зарабатывает именно таким образом. На этом у меня всё, исходники прилагаются.
Если материал был интересен не забывайте сделать репост и поставить лайк. Всех благ!!!

Рейтинг
( 1 оценка, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: