Русский
Русский
English
Статистика
Реклама

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

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


image

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

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

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


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

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

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

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


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



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

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

index.html
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style/style.css"><title>Minecraft clone</title></head><body><canvas id="game" tabindex="1"></canvas><div class="game-info"><div><span><b>WASD: </b>Передвижение</span><span><b>ЛКМ: </b> Поставить блок</span><span><b>ПКМ: </b> Удалить блок</span></div><hr><div id="debug"><span><b></b></span></div></div><div id="cursor"></div><script src="scripts/perlin.js"></script><script src="scripts/core.js" type="module"></script></body></html>

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 также стандарт для работы с канвасом(это реализация адаптива)

core.js
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.jsconst 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({canvas});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, но я сделал без них и сейчас здесь лишь пара параметров отвечающие за размер блоков.

settings.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 у камеры, параметры которые принимает метод это скорость.

controls.js
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);}}}

Ссылки


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

perlin.js
three.js
GitHub
Источник: habr.com
К списку статей
Опубликовано: 03.01.2021 20:22:24
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Javascript

Webgl

Minecraft

Three.js

Gamedev

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru