Делаем свой minecraft на JavaScript
Добро пожаловать в самую запутанную архитектуру проекта. Да я умею писать вступление.
Попробуем сделать небольшую демку minecraft в браузере. Пригодятся знания JS и three.js.
Немного условностей. Я не претендую на звание лучшее приложение столетия. Это всего лишь моя реализация для данной задачи. Также есть видео версия для тех кому лень читать(там тот же смысл, но другими словами).
Вот здесь видеоверсия
В конце статьи есть все нужные ссылки. Постараюсь как можно меньше воды в тексте. Объяснять работу каждой строки не буду. Вот теперь можно начать.
Для начала чтобы понимать какой будет итог, то вот демка игры.
Разделим статью на несколько частей:
- Структура проекта
- Игровой цикл
- Настройки игры
- Генерация карты
- Камера и управление
Структура проекта
Вот так выглядит структура проекта.
index.html — Расположение канваса, немного интерфейса и подключение стилей, скриптов.
style.css — Стили только для внешнего вида. Самое важное это кастомный курсор для игры который располагается в центре экрана.
texture — Здесь лежат текстуры для курсора и блока земли для игры.
core.js — Основной скрипт где происходит инициализация проекта.
perlin.js — Это библиотека для шума Перлина.
PointerLockControls.js — Камера от three.js.
controls.js — Управление камерой и игроком.
generationMap.js — Генерация мира.
three.module.js — Сам three.js в виде модуля.
settings.js — Настройки проекта.
Minecraft clone WASD: Передвижение ЛКМ: Поставить блок ПКМ: Удалить блок
style.css
body < margin: 0px; width: 100vw; height: 100vh; >#game < width: 100%; height: 100%; display: block; >#game:focus < outline: none; >.game-info < position: absolute; left: 1em; top: 1em; padding: 1em; background: rgba(0, 0, 0, 0.9); color: white; font-family: monospace; pointer-events: none; >.game-info span < display: block; >.game-info span b < font-size: 18px; >#cursor < width: 16px; height: 16px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("../texture/cursor.png"); background-repeat: no-repeat; background-size: 100%; filter: brightness(100); >
Игровой цикл
В core.js нужно провести инициализацию three.js, настроить его и добавить все нужные модули от игры + обработчики событий… ну и игровой цикл запустить. В учет того, что все настройки стандартные, то объяснять их нет смысла. Поговорить можно про map (он принимает сцену игры для добавления блоков) и contorls т.к. он принимает несколько параметров. Первый это камера от three.js, сцену для добавления блоков и карту чтобы можно было взаимодействовать с ней. update отвечает за обновление камеры, GameLoop — игровой цикл, render- стандарт от three.js для обновления кадра, событие resize также стандарт для работы с канвасом (это реализация адаптива).
import * as THREE from './components/three.module.js'; import < PointerLockControls >from './components/PointerLockControls.js'; import < Map >from "./components/generationMap.js"; import < Controls >from "./components/controls.js"; // стандартные настройки three.js const canvas = document.querySelector("#game"); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x00ffff); scene.fog = new THREE.Fog(0x00ffff, 10, 650); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(50, 40, 50); // Создание карты let mapWorld = new Map(); mapWorld.generation(scene); let controls = new Controls( new PointerLockControls(camera, document.body), scene, mapWorld ); renderer.domElement.addEventListener( "keydown", (e)=> < controls.inputKeydown(e); >); renderer.domElement.addEventListener( "keyup", (e)=> < controls.inputKeyup(e); >); document.body.addEventListener( "click", (e) => < controls.onClick(e); >, false ); function update()< // передвижение/камера controls.update(); >; GameLoop(); // Игровой цикл function GameLoop() < update(); render(); requestAnimationFrame(GameLoop); >// Рендер сцены(1 кадра) function render() < renderer.render(scene, camera); >// обновление размера игры window.addEventListener("resize", function() < camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); >);
Настройки
В настройки можно было вынести и другие параметры, например, настройки three.js, но я сделал без них и сейчас здесь лишь пара параметров отвечающие за размер блоков.
export class Settings < constructor() < // площадь блока this.blockSquare = 5; // размер и площадь чанка this.chunkSize = 16; this.chunkSquare = this.chunkSize * this.chunkSize; >>
Генерация карты
В классе Map у нас есть несколько свойство которые отвечают за кеш материалов и параметры для шума Перлина. В методе generation мы загружаем текстуры, создаем геометрию и меш. noise.seed отвечает за стартовое зерно для генерации карты. Можно рандом заменить на статичное значение чтобы карты всегда была одинаковая. В цикле по X и Z координатам начинаем расставлять кубы. Y координата генерируется за счет библиотеки pretlin.js. В конечном итоге мы добавляем куб с нужными координатами на сцену через scene.add( cube );
generationMap.js
import * as THREE from './three.module.js'; import < Settings >from "./settings.js"; export class Map < constructor()< this.materialArray; this.xoff = 0; this.zoff = 0; this.inc = 0.05; this.amplitude = 30 + (Math.random() * 70); >generation(scene) < const settings = new Settings(); const loader = new THREE.TextureLoader(); const materialArray = [ new THREE.MeshBasicMaterial( < map: loader.load("../texture/dirt-side.jpg") >), new THREE.MeshBasicMaterial( < map: loader.load('../texture/dirt-side.jpg') >), new THREE.MeshBasicMaterial( < map: loader.load('../texture/dirt-top.jpg') >), new THREE.MeshBasicMaterial( < map: loader.load('../texture/dirt-bottom.jpg') >), new THREE.MeshBasicMaterial( < map: loader.load('../texture/dirt-side.jpg') >), new THREE.MeshBasicMaterial( < map: loader.load('../texture/dirt-side.jpg') >) ]; this.materialArray = materialArray; const geometry = new THREE.BoxGeometry( settings.blockSquare, settings.blockSquare, settings.blockSquare); noise.seed(Math.random()); for(let x = 0; x < settings.chunkSize; x++) < for(let z = 0; z < settings.chunkSize; z++) < let cube = new THREE.Mesh(geometry, materialArray); this.xoff = this.inc * x; this.zoff = this.inc * z; let y = Math.round(noise.perlin2(this.xoff, this.zoff) * this.amplitude / 5) * 5; cube.position.set(x * settings.blockSquare, y, z * settings.blockSquare); scene.add( cube ); >> > >
Камера и управление
Я уже говорил, что controls принимает параметры в виде камеры, сцены и карты. Также в конструкторе мы добавляем массив keys для клавиш и movingSpeed для скорости. Для мыши у нас есть 3 метода. onClick определяет какая кнопка нажата, а onRightClick и onLeftClick уже отвечают за действия. Правый клик(удаление блока) происходит через raycast и поиска пересеченных элементов. Если их нет, то прекращаем работу, если есть, то удаляем первый элеент. Левый клик работает по схожей системе. Для начала создаем блок. Запускаем рейкаст и если есть блок который пересек луч, то получаем координаты этого блока. Далее определяем с какой стороны произошел клик. Меняем координаты для созданного куба в соответствии со стороной к которой мы добавляем блок. градация в 5 единиц т.к. это размер блока(да здесь можно было использовать свойство из settings).
Как работает управление камерой?! У нас есть три метода inputKeydown, inputKeyup и update. В inputKeydown мы добавляем кнопку в массив keys. inputKeyup отвечает за очистку кнопок из массива которые отжали. В update идет проверка keys и вызывается moveForward у камеры, параметры которые принимает метод это скорость.
import * as THREE from "./three.module.js"; import < Settings >from "./settings.js"; export class Controls < constructor(controls, scene, mapWorld)< this.controls = controls; this.keys = []; this.movingSpeed = 1.5; this.scene = scene; this.mapWorld = mapWorld; >// клик onClick(e) < e.stopPropagation(); e.preventDefault(); this.controls.lock(); if (e.button == 0) < this.onLeftClick(e); >else if (e.button == 2) < this.onRightClick(e); >> onRightClick(e) < // Удаление элемента по клику const raycaster = new THREE.Raycaster(); raycaster.setFromCamera( new THREE.Vector2(), this.controls.getObject() ); let intersects = raycaster.intersectObjects( this.scene.children ); if (intersects.length < 1) return; this.scene.remove( intersects[0].object ); >onLeftClick(e) < const raycaster = new THREE.Raycaster(); const settings = new Settings(); // Поставить элемент по клику const geometry = new THREE.BoxGeometry(settings.blockSquare, settings.blockSquare, settings.blockSquare); const cube = new THREE.Mesh(geometry, this.mapWorld.materialArray); raycaster.setFromCamera( new THREE.Vector2(), this.controls.getObject() ); const intersects = raycaster.intersectObjects( this.scene.children ); if (intersects.length < 1) return; const psn = intersects[0].object.position; switch(intersects[0].face.materialIndex) < case 0: cube.position.set(psn.x + 5, psn.y, psn.z); break; case 1: cube.position.set(psn.x - 5, psn.y, psn.z); break; case 2: cube.position.set(psn.x, psn.y + 5, psn.z); break; case 3: cube.position.set(psn.x, psn.y - 5, psn.z); break; case 4: cube.position.set(psn.x, psn.y, psn.z + 5); break; case 5: cube.position.set(psn.x, psn.y, psn.z - 5); break; >this.scene.add(cube); > // нажали на клавишу inputKeydown(e) < this.keys.push(e.key); >// отпустили клавишу inputKeyup(e) < let newArr = []; for(let i = 0; i < this.keys.length; i++)< if(this.keys[i] != e.key)< newArr.push(this.keys[i]); >> this.keys = newArr; > update() < // Движение камеры if ( this.keys.includes("w") || this.keys.includes("ц") ) < this.controls.moveForward(this.movingSpeed); >if ( this.keys.includes("a") || this.keys.includes("ф") ) < this.controls.moveRight(-1 * this.movingSpeed); >if ( this.keys.includes("s") || this.keys.includes("ы") ) < this.controls.moveForward(-1 * this.movingSpeed); >if ( this.keys.includes("d") || this.keys.includes("в") ) < this.controls.moveRight(this.movingSpeed); >> >
Ссылки
Как и обещал. Весь материал который пригодится.
Если есть желание, то на можете добавить свой функционал к проекту на гитхаб.
Изучение Java кода.
Я тут решил заняться изучение программирования на java с нуля. Поискал сайты, посмотрел, где это можно этому научиться. Решил попробовать на JavaRush.ru.
Короче, посоветуйте платформы/сайты/статьи/учебники (желательно с ссылкой), где можно начать обучаться джаве С НУЛЯ.
Анимирую модели мобов
https://vk.com/minejavamodels — моя группа по моделированию =)
———————
Это не панацея. Ограничение выделяемой памяти защитит от одной проблемы когда их десятки. Выполнять пользовательский java код на своем сервере это все равно что хранить полоний под кроватью. @RedEnergy
tox1cozZ
aka Agravaine
8,444 597 2,879
Смотрел его лекции:
https://www.youtube.com/user/ytkach
XuPuPG
Я с самого начала моддинга джавы не знал,по разным сайтам и статьям смотрел что да как.
И на джава раш не надо идти.Уроки в середине не понятные,и большинство заданий «выведи текст на экран».Все чему можно там научится это System.out.print/println .А после 15 лвл вообще платные уроки.(наверно с тем же заданием выведи текст на экран).
GloomyFolken
Лично я просто посмотрел несколько часов базовых видеоуроков по джаве и начал говнокодить плагины с модами. До этого был только небольшой опыт программирования на других языках. По всем вопросам — лез в гугл, преимущественно на stackoverflow. Спустя полгода-год код стал более-менее приемлемым.
Drovosek
GloomyFolken написал(а):
Лично я просто посмотрел несколько часов базовых видеоуроков по джаве и начал говнокодить плагины с модами. До этого был только небольшой опыт программирования на других языках. По всем вопросам — лез в гугл, преимущественно на stackoverflow. Спустя полгода-год код стал более-менее приемлемым.
А где смотрел ?
Анимирую модели мобов
https://vk.com/minejavamodels — моя группа по моделированию =)
———————
Это не панацея. Ограничение выделяемой памяти защитит от одной проблемы когда их десятки. Выполнять пользовательский java код на своем сервере это все равно что хранить полоний под кроватью. @RedEnergy
GloomyFolken
cucugag
А я книжки читал.Герберт Шилтд — Java the full reference
Dragon2488
GloomyFolken написал(а):
Лично я просто посмотрел несколько часов базовых видеоуроков по джаве и начал говнокодить плагины с модами. До этого был только небольшой опыт программирования на других языках. По всем вопросам — лез в гугл, преимущественно на stackoverflow. Спустя полгода-год код стал более-менее приемлемым.
Глуми, плюсик. Так же делал.
TaoGunner
Изучил Java написав первый мод. Слишком изи + напоминает C# и Visual Basic.
А основная проблема новопришедших не в Java, а в Forge, имхо.
Самая крутая вещь в С++ — это не писать на нем, а показывать всем в онлайне, что Java говно.
В некроверсиях ниже 1.10 не разбираюсь
Develance
TaoGunner написал(а):
А основная проблема новопришедших не в Java, а в Forge, имхо.
+, поддерживаю.
Хочу кофе аж работаю.
Crowbar
Может быть, но иногда им дают готовый метод с названием и скобками, а они его в другой метод пихают и удивляются, что не работает.
Develance
XDDD, ну ты сказанул!
P.S — Скиньте код.
Хочу кофе аж работаю.
Oldestkon
1,990 18 105
Drovosek написал(а):
JavaRush.ru.
У меня было так:
5 лет моддинга WC3 (визуальное программирование), появился интернет, пара месяцев паскаля, увидел кубач, полез делать моды, попутно разобрал сурсы простенькой игрушки, и за полгода вылез на полное понимание всего того, что я делаю вообще. Код стал более-менее приемлемым через год-два. Хотя я и сейчас смотрю на свой код, и хочется всё переписать к едрене фене.
Книжек не читал (лень, хотя и понимаю, что книжки очень полезны).
Уууууууууу
Skarlet
Я уже вроде писала в другой теме
я пришла на форум первый раз без знаний джавы, зато знала немного C# и С++(который я успешно уже забыла :c), с самыми базовыми знаниями процедурного программирования, и непониманием ООП.
И моддинг отлично подтянул мне не только синтаксис джавы, но и дал мне знания практического применения классов и т.д.
Но в начале конечно сидела и сверяла каждую строчку с примером. Вот такие вот дела.
Сообщение в сраче оформлять так: тезис, ваше мнение, примеры из публицистики или литературы, вывод.
Оцениваются знание простейших правил русского языка, логика текста, аргументация мнения, этика.
P.S. А может просто не будем сраться?
Есть ли какие либо библиотеки/способы, чтобы программа, которую я хочу написать могла зайти на сервер в майнкрафт?
Я хочу написать бота для майнкрафта. Мне нужна какая то библиотека или гайд для того, чтобы моя программа могла задать себе ник (как в TLauncher), зайти на сервер майнкрафта (по айпи) и управлять персонажем на нем. Очень желательно чтобы все это было без открытия окна майнкрафта, мне нужен только персонаж. Язык программирования не критичен, но приветствуются Rust, C++ и Java. Буду благодарен даже если просто укажете направление в котором мне искать такое
Отслеживать
задан 16 дек 2020 в 11:48
USSURATONCAHI USSURATONCAHI
93 8 8 бронзовых знаков
а можно указать программе, куда ей тыкать чтобы открыть майнкрафт?
16 дек 2020 в 12:56
Нет, такой способ не подходит
16 дек 2020 в 14:15
То что вы хотите это по сути клиент для игры, просто клиент с отсутствующей графикой и более самостоятельный (с функцией бота). А так поищите спецификации по которым работает сервер и по ним писать или второй вариант реверс инженеринг. В любом случае все это долго и тяжко. С открытым окном то проблем меньше но перехват данных от клиента.
16 дек 2020 в 14:23
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Все правильно, как сказал @Kers в комментариях. Есть также более продвинутые боты, когда происходит верификация клиента и нужно использовать именно игровой клиент, а не самописный. Тут 2 варианта:
Читать память клиента и на основе этого делать ввод (это если бот простой нужен, например боты помощники вроде триггер-ботов, которые быстро выполняют действия при выполнении какого-то условия).
Если нужен серьезный самостоятельный бот, тогда нужно копать в сторону OpenCV (либа, которая поможет парить растр игрового клиента боту и видеть его как 3д пространство с элементами, а не как 2d картинку). И после на основе этого симулировать ввод с клавиатуры/мышки/чего угодно еще. Но это, конечно, довольно серьезная работа и обычно такие боты коммерциализируются и их делает не 1 человек.
Также хочу порекомендовать поиск фреймворков для написания ботов по майнкрафту. Сам с Minecraft знаком не супер сильно, но это популярная игра, поэтому наверняка будут готовые бот фреймворки, которые будут иметь базовый набор функций для упрощения передвижения, взаимодействия с миром и т.п., что может сделать написание бота более выполнимой задачей.
Как обновить Java для Minecraft
Minecraft — популярная игра, которая использует язык программирования Java для работы. Чтобы играть в «Майнкрафт», вам нужно установить на свой компьютер последнюю версию Java — это улучшит оптимизацию, графику игры, исправит и сократит ошибки. В этом гайде мы расскажем, как обновить джаву для «Майнкрафт».
Что такое Minecraft: Java Edition
Minecraft: Java Edition — официальное название игры. Когда вы запускаете «Майнкрафт», в главном меню написано полное наименование. Мы привыкли к разговорному и упрощенному неймингу «Майнкрафт» или «майн».
Как обновить Minecraft: Java Edition
Первым делом, откройте приложение Xbox на вашем компьютере и введите в поисковой строке запрос «Minecraft Launcher» или перейдите по ссылке здесь.
Нажмите на кнопку «Установить», если есть подписка Game pass. Или «Получить бесплатно». У вас уже есть это приложение? Кликайте по кнопке «Обновить». После установки или обновления запустите приложение. Теперь можно играть на последней версии. Обычно такие обновления устанавливаются автоматически.
Как узнать какая версия Java установлена
Актуальная версия Java — это та версия, которая содержит последние обновления и исправления от разработчиков.
На Windows используйте командную строку. Открыть ее можно сочетанием клавиш Windows + R. В строке «Открыть» напишите cmd. В появившемся окне наберите команду java -version и нажмите Enter. Вы увидите сообщение с номером версии Java, например, «java version «1.8.0_291″».
На Mac используйте терминал. Для этого откройте «Приложения» > «Утилиты» и выберите «Терминал». Введите команду java -version и нажмите Enter. Все, теперь вам выведет сообщение, в котором будет написан номер версии Java.
Как обновить и где скачать Java на Windows и MAC
Скорее всего, у вас уже есть это приложение, но если нет, то установить java можно с официального сайта.
Процесс обновления программы на Windows и MAC очень схож и отличается только визуалом операционных систем. Откройте панель управления Java: это можно сделать, нажав на иконку на рабочем столе, или через поиск ОС по одноименному запросу. В появившемся окне перейдите к Update или «Обновить». Теперь кликайте Update now или «Обновить сейчас». А еще на этой вкладке написано, когда было последнее обновление. Пригодится тем, кто отслеживает автообновления.
Вы увидите уведомление с запросом на разрешение запуска программы, нажмите «Разрешить». Откроется новое окно Java, щелкните Install или «Установить». Дождитесь окончания загрузки. Возможно, вам потребуется перезапустить компьютер, чтобы завершить обновление. Теперь вы знаете как обновлять программу «Джава» для «Майнкрафт».
Помните, если на вашем компьютере установлена 64-разрядная операционная система, то для повышения производительности рекомендуется установить 64-разрядную версию Java!
Почему важно следить за обновлением Java
Обновления Java для Minecraft могут исправлять ошибки, улучшать безопасность и добавлять новые функции, влияющие на работу игры и модов для нее. Своевременные апдейты улучшают совместимость новых версий «майна» с операционными системами компьютеров. Некоторые обновления помогают улучшить производительность на слабых ПК, потому что происходит оптимизация кода, а это уменьшает нагрузку на «железо» компьютера.
Геймерам, которые держат сервер в «Майнкрафте», особенно важно следить за обновлениями Java. Самая банальная причина — из-за «разнобоя» версии игры и джавы вы не сможете запустить Minecraft.
Не будем забывать и про безопасность сервера, ведь в обновлениях программ исправляются различные ошибки и уязвимости кода. Ну и конечно, последняя Java будет поддерживать новые моды и плагины. У геймеров часто возникают проблемы из-за того, что модификации «ломают игру», и чаще всего, причина — неверная версия программы.
Надеемся, вы нашли решение своей проблемы в этом гайде. Если остались вопросы — пишите в гугле java for minecraft, а еще лучше — напишите свой вопрос в комментариях.
Заглавное фото: fiverr.com