Как писать моды для майнкрафт на javascript

javascript

О себе Возраст: 24 года Опыт работы: 5 лет и 1 месяц Дата рождения: 19.01.1997 Специализируюсь на Spigot плагинах, модах и linux серверах. Категория: Средний (Middle) Профессиональные навыки Java · Linux · PHP · Typescript · JavaScript · Node.js · ReactJS · Верстка лендингов Контакты Телефон.

• Lionic929ый
• Тема
• 13 Май 2021
• java javascript landing linux nodejs php reactjs typescript
• Ответы: 7
• Форум: Корзина

Ф-ция из ‘а страницы через Java

Время больших извращений \о/ Господа-умные-товарищи-программисты, подскажите, пожалуйста, каким образом можно вызвать из Java ф-цию, записанную в теге

• AlexSoсol
• Тема
• 30 Апр 2018
• html javascript script vk.com
• Ответы: 3
• Форум: Оффтоп

Что «пасаны», minecraft на js

Листал новостную ленту, нашел это чудо. xD Пошлите моды делать к майну-онлайн 😀 (Тип шутка) Код: GitHub — ComfyKernel/craftles: Can view on https://comfykernel.github.io/craftles

• Tenebrius
• Тема
• 7 Янв 2018
• javascript minecraft
• Ответы: 6
• Форум: Оффтоп

Minecraft Modding#

Хотите создать мод для Minecraft? Добавить в игру что-то свое: блок, сущность или целое измерение?

На этом сайте вы найдете интересный, понятный и подробный учебник по созданию собственных модов для Minecraft.

Вы думаете это сложно? На самом деле нет (с помощью этого учебника)

С чего начать?#

Первый и абсолютно необходимый навык для создания модов — знание основ программирование и Java.

Переменная, объект, класс, метод — все эти слова должны быть вам достаточно хорошо знакомы. Если вы не знаете, что это, то вам необходимо пройти самые основы языка Java.

Теперь поговорим об API.

API — набор инструментов для упрощения работы с программой (в нашем случае, с Minecraft).

К сожалению, никакого встроенного API для создания модов у Minecraft нет.

Minecraft не поддерживает моды!

Однако, исходный код игры можно получить, и многие разработчики стали разрабатывать свои неофициальные API: Forge, Sponge и так далее. О Forge вы наверняка не раз слышали. Это самое популярное на сегодня API для создания модов.

Поэтому у вас есть выбор.

Писать моды с помощью API#

Это будет проще. Но запускаться ваши моды смогут только на клиенте с заранее установленным API. Моды, написанные с помощью Forge пойдут только на Minecraft, где предварительно установлен Forge.

Большинство всех Minecraft модов написаны при помощи Forge API.

Плюсы

• Простое создание модов
• Удобный перенос на другие Minecraft версии
• Совместимость (и даже взаимодействие) с другими модами

Минусы

• Необходимость иметь установленное API на клиенте

Писать моды без помощи API#

Это несколько сложнее, так как потребует от вас глубокого понимания внутреннего устройства работы Minecraft. При написании модов без использования API вы напрямую редактируете исходный код игры. Получается, что вы словно пишете свой собственный Minecraft (или новую его версию), и никакие другие моды работать вместе с вашим скорее всего не будут.

Плюсы

• Не нужно ничего предварительно устанавливать
• Полный контроль над происходящим в игре
• Возможность менять исходные файлы игры

Минусы

• Почти абсолютная несовместимость с другими модами
• Относительная сложность написания
• Сложный перевод мода под другие Minecraft версии

Что выбрать?#

В большинстве случаев рекомендуется писать моды при помощи Forge API. Он сейчас наиболее популярен и является практически стандартом.

Большинство модов и уроков по их созданию написано с помощью этого API. Forge настолько распространен, что частенько под созданием модов для Minecraft понимается именно их создание с помощью Forge API.

У меня вопрос/проблема!#

Если что-то не работает, но должно, или (что еще хуже), что-то работает, но не должно, смело обращайтесь на форум за помощью.

Кстати, там можно не только просить о помощи, но еще и общаться с другими создателями модов, обмениваться опытом и рекламировать свои моды!

Как поделиться с другом?#

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

Разделы статьи разделяются заголовками. Наведите на заголовок курсор мышки. Справа от него появится значок ссылки. Нажмите на него правой кнопкой и выберите пункт «Копировать адрес ссылки».

Вклад в учебник#

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

О сайте#

На просторах интернета достаточно много штучных учебников под какие-то конкретные Minecraft версии. Получается, что нет единого источника информации, который поддерживается сообществом, а не единственным автором.

Здесь мы реализуем другой подход.

Сайт работает на статическом генераторе MkDocs с темой Material. Такой подход позволяет не возиться с исходниками сайта, а писать статьи в удобной markdown разметке, которая автоматически собирается в готовый и красивый сайт.

Введение в разработку модов для Inner Core / Horizon

Если вы читаете эту статью, вы наверняка установили из Google Play приложение Horizon Modding Kernel, скачали пак Inner Core или Inner Core Test и решили, что хотите написать собственный мод для Minecraft Bedrock. Что ж, вы читаете именно ту статью, которая вам нужна!

Что же необходимо знать и уметь, чтобы написать свой первый мод для Minecraft с помощью Inner Core / Horizon?

Языки и технологии

Для того, чтобы быстро и эффективно писать моды для Minecraft с помощью Inner Core / Horizon, вам надо знать хотя бы основы языка JavaScript либо TypeScript (желательно также хотя бы поверхностное понимание английского). Изучить JavaScript можно, например, на сайте learn.javascript.ru, но мы советуем объединять теорию с практикой: написать свой первый мод, просмотреть исходный код открытых модов, список таких модов можете найти тут. Особое внимание стоит обратить на исходный код BuildCraft (в первую очередь, поскольку он проще) и Industrial Craft 2 — в этих модах есть примеры большей части механик, которые вы можете захотеть реализовать в своём. Обратите внимание, что писать моды на TypeScript можно только с компьютера, с использованием официального набора инструментов разработки, о чём подробнее речь пойдёт ниже.

Документация и инструменты

Для создания модов с компьютера мы рекомендуем использовать InnerCore-Mod-Toolchain — набор инструментов разработки, позволяющий эффективно писать моды на компьютере в современном редакторе Visual Studio Code и отправлять их на устройство, подключенное USB-кабелем. Инструкция по использованию этого набора инструментов есть в файле readme.md, и она достаточно подробна, поэтому дублировать её тут не будем.

Если вы не имеете доступа к компьютеру и хотите разрабатывать моды прямо с телефона (что не так удобно, но всё же возможно) — воспользуйтесь генератором шаблона мода. Данный генератор создаёт базовую структуру мода и позволяет вам быстро начать писать код мода. В качестве редактора можете выбрать одно из приложений, представленных на странице Инструменты разработки, в частности, мы рекомендуем вам редактор Code Editor. Разрабатываемый мод следует расположить по пути games/horizon/packs/%PACK_NAME%/innercore/mods/ (для сборки модов по умолчанию, подробности читайте в статье о системе сборок Inner Core / Horizon).

Официальную документацию можно найти на сайте docs.mineprogramming.org, но самые свежие правки всегда доступны в репозитории документации. Некоторое количество более старой (но по большей части всё ещё применимой) информации можно также найти на открытой Вики по разработке модов.

Кроме документации, вы можете найти ряд полезных видео и статей на сайте #mineprogramming в категории Inner Core, а также на YouTube-канале создателя #mineprogramming. Рекомендуем ознакомиться с примером анализа исходного кода существующих модов, незаконченным видеокурсом #mineprogramming, а также с видеозаписями с #mineprogramming Winter Coding School 2019.

Поддержка и сообщество

Большая часть активного сообщества Inner Core / Horizon находится в социальной сети ВКонтакте. В первую очередь, это официальная страница Horizon Modding Kernel, а также группа #mineprogramming, в которой вы можете задавать вопросы, касающиеся создания модов для Inner Core / Horizon. Кроме того, для вас существует сервер Discord и страница Reddit, посвящённые данной среде моддинга Minecraft.

Публикация мода

Для публикации модов авторизуйтесь либо зарегистрируйтесь на сайте Inner Core Mods. Убедитесь, что мод соответствует правилам использования библиотеки модов Inner Core Mods. Затем перейдите в личный кабинет, нажав на свой ник в верхнем правом углу экрана, и нажмите на кнопку «Добавить мод». Загрузите файл архива мода, сгенерированный с помощью набора инструментов (либо архив директории с модов, если вы пишете с телефона). Заполните все поля (предпочтительно на английском языке). Если ваш мод зависит от других, укажите уникальные цифровые идентификаторы (ID) этих модов в поле «Зависимости». Получить ID можно из строки адреса на странице соответствующего мода на странице:

Сразу после публикации мод станет доступен в приложении Horizon / Inner Core. Администрация сайта оставляет за собой право удалять моды либо изменять их описание, если это необходимо для обеспечения качества контента.

Делаем свой minecraft на JavaScript

Добро пожаловать в самую запутанную архитектуру проекта. Да я умею писать вступление.

Попробуем сделать небольшую демку minecraft в браузере. Пригодятся знания JS и three.js.

Немного условностей. Я не претендую на звание лучшее приложение столетия. Это всего лишь моя реализация для данной задачи. Также есть видео версия для тех кому лень читать(там тот же смысл, но другими словами).

Вот здесь видеоверсия

В конце статьи есть все нужные ссылки. Постараюсь как можно меньше воды в тексте. Объяснять работу каждой строки не буду. Вот теперь можно начать.

Для начала чтобы понимать какой будет итог, то вот демка игры.

Разделим статью на несколько частей:

1. Структура проекта
2. Игровой цикл
3. Настройки игры
4. Генерация карты
5. Камера и управление

Структура проекта

Вот так выглядит структура проекта.

index.html — Расположение канваса, немного интерфейса и подключение стилей, скриптов.
style.css — Стили только для внешнего вида. Самое важное это кастомный курсор для игры который располагается в центре экрана.

texture — Здесь лежат текстуры для курсора и блока земли для игры.
core.js — Основной скрипт где происходит инициализация проекта.
perlin.js — Это библиотека для шума Перлина.
PointerLockControls.js — Камера от three.js.
controls.js — Управление камерой и игроком.
generationMap.js — Генерация мира.
three.module.js — Сам three.js в виде модуля.
settings.js — Настройки проекта.

        
 
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); >> > 

Ссылки

Как и обещал. Весь материал который пригодится.

Если есть желание, то на можете добавить свой функционал к проекту на гитхаб.