From 85c62325c1c93b45a7fd2cc001ac2d477e31fb3f Mon Sep 17 00:00:00 2001 From: LabyStudio Date: Thu, 3 Feb 2022 11:07:53 +0100 Subject: [PATCH] implement gui --- src/js/net/minecraft/client/GameWindow.js | 19 +++++-- src/js/net/minecraft/client/Minecraft.js | 6 ++- src/js/net/minecraft/client/gui/Gui.js | 10 ++++ src/js/net/minecraft/client/gui/GuiScreen.js | 5 ++ .../net/minecraft/client/gui/IngameOverlay.js | 7 +++ .../minecraft/client/render/WorldRenderer.js | 53 +++++++++++++++++-- src/start.js | 3 ++ 7 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 src/js/net/minecraft/client/gui/Gui.js create mode 100644 src/js/net/minecraft/client/gui/GuiScreen.js create mode 100644 src/js/net/minecraft/client/gui/IngameOverlay.js diff --git a/src/js/net/minecraft/client/GameWindow.js b/src/js/net/minecraft/client/GameWindow.js index aaff7f4..054c68b 100644 --- a/src/js/net/minecraft/client/GameWindow.js +++ b/src/js/net/minecraft/client/GameWindow.js @@ -47,13 +47,22 @@ window.GameWindow = class { onResize() { // Get canvas size let canvasElement = document.getElementById(this.canvasWrapperId); - this.canvasWidth = canvasElement.offsetWidth; - this.canvasHeight = canvasElement.offsetHeight; + this.width = canvasElement.offsetWidth; + this.height = canvasElement.offsetHeight; // Adjust camera - this.renderer.camera.aspect = this.canvasWidth / this.canvasHeight; + this.renderer.camera.aspect = this.width / this.height; this.renderer.camera.updateProjectionMatrix(); - this.renderer.webRenderer.setSize(this.canvasWidth, this.canvasHeight); + this.renderer.webRenderer.setSize(this.width, this.height); + + // Update HUD camera + this.renderer.camera2D.left = -this.width / 2; + this.renderer.camera2D.right = this.width / 2; + this.renderer.camera2D.top = this.height / 2; + this.renderer.camera2D.bottom = -this.height / 2; + this.renderer.camera2D.updateProjectionMatrix(); + + console.log("Resize"); } onFocusChanged() { @@ -63,5 +72,7 @@ window.GameWindow = class { onMouseMove(event) { this.mouseMotionX = event.movementX; this.mouseMotionY = -event.movementY; + this.mouseX = event.clientX; + this.mouseY = event.clientY; } } \ No newline at end of file diff --git a/src/js/net/minecraft/client/Minecraft.js b/src/js/net/minecraft/client/Minecraft.js index 8fa9cca..2fac032 100644 --- a/src/js/net/minecraft/client/Minecraft.js +++ b/src/js/net/minecraft/client/Minecraft.js @@ -4,7 +4,7 @@ window.Minecraft = class { * Create Minecraft instance and render it on a canvas */ constructor(canvasWrapperId) { - this.worldRenderer = new WorldRenderer(this); + this.worldRenderer = new WorldRenderer(this, canvasWrapperId); this.window = new GameWindow(this, this.worldRenderer, canvasWrapperId); this.timer = new Timer(20); @@ -22,6 +22,10 @@ window.Minecraft = class { this.player = new Player(this.world); this.pickedBlock = 1; + // Create current screen and overlay + this.ingameOverlay = new IngameOverlay(); + this.currentScreen = null; + // Initialize this.init(); } diff --git a/src/js/net/minecraft/client/gui/Gui.js b/src/js/net/minecraft/client/gui/Gui.js new file mode 100644 index 0000000..1c62031 --- /dev/null +++ b/src/js/net/minecraft/client/gui/Gui.js @@ -0,0 +1,10 @@ +window.Gui = class { + + drawRect(stack, left, top, right, bottom, color, alpha = 1) { + stack.fillStyle = color; + stack.globalAlpha = alpha; + stack.fillRect(left, top, right - left, bottom - top); + stack.globalAlpha = alpha; + } + +} \ No newline at end of file diff --git a/src/js/net/minecraft/client/gui/GuiScreen.js b/src/js/net/minecraft/client/gui/GuiScreen.js new file mode 100644 index 0000000..f723ed1 --- /dev/null +++ b/src/js/net/minecraft/client/gui/GuiScreen.js @@ -0,0 +1,5 @@ +window.GuiScreen = class { + + + +} \ No newline at end of file diff --git a/src/js/net/minecraft/client/gui/IngameOverlay.js b/src/js/net/minecraft/client/gui/IngameOverlay.js new file mode 100644 index 0000000..698648d --- /dev/null +++ b/src/js/net/minecraft/client/gui/IngameOverlay.js @@ -0,0 +1,7 @@ +window.IngameOverlay = class extends Gui { + + render(stack, mouseX, mouseY, partialTicks) { + this.drawRect(stack, 0, 0, 10, 10, '#0000FF'); + } + +} \ No newline at end of file diff --git a/src/js/net/minecraft/client/render/WorldRenderer.js b/src/js/net/minecraft/client/render/WorldRenderer.js index d3f48ed..5ec0a65 100644 --- a/src/js/net/minecraft/client/render/WorldRenderer.js +++ b/src/js/net/minecraft/client/render/WorldRenderer.js @@ -2,18 +2,28 @@ window.WorldRenderer = class { static RENDER_DISTANCE = 4; - constructor(minecraft) { + constructor(minecraft, canvasWrapperId) { this.minecraft = minecraft; + this.canvas2D = document.createElement('canvas'); + // Get canvas size + let canvasElement = document.getElementById(canvasWrapperId); + this.canvasWidth = canvasElement.offsetWidth; + this.canvasHeight = canvasElement.offsetHeight; + + this.stack2D = null; + this.hudTexture = null; + this.supportWebGL = !!WebGLRenderingContext && (!!document.createElement('canvas').getContext('experimental-webgl') || !!document.createElement('canvas').getContext('webgl')); - // Create cameras + // Create world camera this.camera = new THREE.PerspectiveCamera(0, 1, 0.001, 1000); this.camera.rotation.order = 'ZYX'; this.camera.up = new THREE.Vector3(0, 0, 1); + // Frustum this.frustum = new THREE.Frustum(); // Create scene @@ -47,6 +57,33 @@ window.WorldRenderer = class { this.blockRenderer = new BlockRenderer(this); this.chunkSectionUpdateQueue = []; + + this.initializeHud(); + } + + initializeHud() { + + // Create canvas context for screen rendering + this.stack2D = this.canvas2D.getContext('2d'); + this.hudTexture = new THREE.Texture(this.stack2D); + this.hudTexture.needsUpdate = true; + + // Create HUD material. + let material = new THREE.MeshBasicMaterial({map: this.hudTexture}); + material.map.minFilter = THREE.LinearFilter; + material.transparent = true; + + // Create plane to render the HUD. This plane fill the whole screen. + let planeGeometry = new THREE.PlaneGeometry( this.canvas2D.width, this.canvas2D.height); + let plane = new THREE.Mesh(planeGeometry, material); + + // Create HUD + this.hud = new THREE.Scene(); + // this.hud.matrixAutoUpdate = false; + this.hud.add(plane); + + // Create camera for HUD + this.camera2D = new THREE.OrthographicCamera(0, 0, 0, 0, 0, 30); } render(partialTicks) { @@ -59,8 +96,18 @@ window.WorldRenderer = class { let cameraChunkZ = Math.floor(player.z >> 4); this.renderChunks(cameraChunkX, cameraChunkZ); - // Render window + // Render in-game overlay + let mouseX = this.minecraft.window.mouseX; + let mouseY = this.minecraft.window.mouseY; + //this.minecraft.ingameOverlay.render(this.stack2D, mouseX, mouseY, partialTicks); + + // Render actual scene this.webRenderer.render(this.scene, this.camera); + + // Render actual HUD + if (this.stack2D !== null && this.hudTexture !== null && this.hudTexture.image.naturalWidth !== 0) { + this.webRenderer.render(this.hud, this.camera2D); + } } orientCamera(partialTicks) { diff --git a/src/start.js b/src/start.js index a5ff9ca..b716e6a 100644 --- a/src/start.js +++ b/src/start.js @@ -59,6 +59,9 @@ loadScripts([ "src/js/net/minecraft/util/MathHelper.js", "src/js/net/minecraft/util/BoundingBox.js", "src/js/net/minecraft/util/Keyboard.js", + "src/js/net/minecraft/client/gui/Gui.js", + "src/js/net/minecraft/client/gui/GuiScreen.js", + "src/js/net/minecraft/client/gui/IngameOverlay.js", "src/js/net/minecraft/client/GameWindow.js", "src/js/net/minecraft/client/world/block/Block.js", "src/js/net/minecraft/client/world/block/BlockStone.js",