ChiefSoftLab/GameStarter
1
0
Fork 0
Code Issues Pull Requests Releases Activity

implement loading screen

Browse Source
This commit is contained in:
LabyStudio
2022-02-03 14:50:32 +01:00
parent 356eab2b0c
commit 64b84c3f64
12 changed files with 212 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+8 -2
View File
@@ -5,8 +5,14 @@
</head> </head>
<body> <body>
<div id="canvas-container"></div>
<span id="pre-status">Loading page...</span> <div id="background" class="fullscreen"></div>
<div id="content">
<div id="canvas-container" class="fullscreen"></div>
<span id="pre-status">Loading page...</span>
</div>
</body> </body>
<script src="src/start.js"></script> <script src="src/start.js"></script>
src/js/net/minecraft/client/GameWindow.js
+34 -2
View File
@@ -1,6 +1,7 @@
window.GameWindow = class { window.GameWindow = class {
constructor(minecraft, canvasWrapperId) { constructor(minecraft, canvasWrapperId) {
this.minecraft = minecraft;
this.canvasWrapperId = canvasWrapperId; this.canvasWrapperId = canvasWrapperId;
this.mouseMotionX = 0; this.mouseMotionX = 0;
@@ -30,14 +31,31 @@ window.GameWindow = class {
// Mouse buttons // Mouse buttons
document.addEventListener('click', event => minecraft.onMouseClicked(event.button), false); document.addEventListener('click', event => minecraft.onMouseClicked(event.button), false);
// Keyboard interaction with screen
window.addEventListener('keydown', function (event) {
if (!(minecraft.currentScreen === null)) {
// Handle key type on screen
let consumed = minecraft.currentScreen.keyTyped(event.code);
if (consumed) {
// Cancel browser interaction
event.preventDefault();
}
}
});
// Create keyboard // Create keyboard
Keyboard.create(); Keyboard.create();
} }
requestFocus() {
this.renderer.canvasElement.requestPointerLock();
}
loadRenderer(renderer) { loadRenderer(renderer) {
this.renderer = renderer; this.renderer = renderer;
let canvas = renderer.canvasElement; let canvas = this.renderer.canvasElement;
// Add web renderer canvas to wrapper // Add web renderer canvas to wrapper
this.wrapper.appendChild(canvas); this.wrapper.appendChild(canvas);
@@ -46,8 +64,11 @@ window.GameWindow = class {
this.onResize(); this.onResize();
// Request focus // Request focus
let minecraft = this.minecraft;
canvas.onclick = function () { canvas.onclick = function () {
canvas.requestPointerLock(); if (minecraft.currentScreen === null) {
canvas.requestPointerLock();
}
} }
} }
@@ -66,15 +87,26 @@ window.GameWindow = class {
// Reinitialize gui // Reinitialize gui
this.renderer.initializeGui(); this.renderer.initializeGui();
// Reinitialize current screen
if (!(this.minecraft.currentScreen === null)) {
this.minecraft.currentScreen.init(this.minecraft, this.width, this.height);
}
} }
onFocusChanged() { onFocusChanged() {
this.mouseLocked = document.pointerLockElement === this.renderer.canvasElement; this.mouseLocked = document.pointerLockElement === this.renderer.canvasElement;
// Open in-game menu
if (!this.mouseLocked && this.minecraft.currentScreen === null) {
this.minecraft.displayScreen(new GuiIngameMenu());
}
} }
onMouseMove(event) { onMouseMove(event) {
this.mouseMotionX = event.movementX; this.mouseMotionX = event.movementX;
this.mouseMotionY = -event.movementY; this.mouseMotionY = -event.movementY;
this.mouseX = event.clientX; this.mouseX = event.clientX;
this.mouseY = event.clientY; this.mouseY = event.clientY;
} }
src/js/net/minecraft/client/Minecraft.js
+41 -6
View File
@@ -4,10 +4,22 @@ window.Minecraft = class {
* Create Minecraft instance and render it on a canvas * Create Minecraft instance and render it on a canvas
*/ */
constructor(canvasWrapperId) { constructor(canvasWrapperId) {
this.currentScreen = null;
this.loadingScreen = null;
// Create window and world renderer
this.window = new GameWindow(this, canvasWrapperId); this.window = new GameWindow(this, canvasWrapperId);
this.worldRenderer = new WorldRenderer(this, this.window); this.worldRenderer = new WorldRenderer(this, this.window);
this.timer = new Timer(20); this.timer = new Timer(20);
// Create current screen and overlay
this.ingameOverlay = new IngameOverlay(this.window);
// Display loading screen
this.loadingScreen = new GuiLoadingScreen();
this.loadingScreen.setTitle("Building terrain...");
this.displayScreen(this.loadingScreen);
this.frames = 0; this.frames = 0;
this.lastTime = Date.now(); this.lastTime = Date.now();
@@ -22,10 +34,6 @@ window.Minecraft = class {
this.player = new Player(this.world); this.player = new Player(this.world);
this.pickedBlock = 1; this.pickedBlock = 1;
// Create current screen and overlay
this.ingameOverlay = new IngameOverlay(this.window);
this.currentScreen = null;
// Initialize // Initialize
this.init(); this.init();
} }
@@ -80,25 +88,52 @@ window.Minecraft = class {
onRender(partialTicks) { onRender(partialTicks) {
// Player rotation // Player rotation
if (this.window.mouseLocked) { if (this.window.mouseLocked && !(this.currentScreen === "null")) {
this.player.turn(this.window.mouseMotionX, this.window.mouseMotionY); this.player.turn(this.window.mouseMotionX, this.window.mouseMotionY);
this.window.mouseMotionX = 0; this.window.mouseMotionX = 0;
this.window.mouseMotionY = 0; this.window.mouseMotionY = 0;
} }
while (this.world.updateLights()) ; // Update lights
while (this.world.updateLights()) {
// Empty
}
// Render the game // Render the game
this.worldRenderer.render(partialTicks); this.worldRenderer.render(partialTicks);
} }
displayScreen(screen) {
// Switch screen
this.currentScreen = screen;
// Initialize new screen
if (screen === null) {
this.window.requestFocus();
} else {
screen.init(this, this.window.width, this.window.height);
}
}
onTick() { onTick() {
// Tick world // Tick world
this.world.onTick(); this.world.onTick();
// Tick the player // Tick the player
this.player.onTick(); this.player.onTick();
// Update loading progress
if (!(this.loadingScreen === null)) {
let progress = Math.max(0, 1 - this.world.lightUpdateQueue.length / 10000);
this.loadingScreen.setProgress(progress);
// Finish loading
if (progress >= 1) {
this.loadingScreen = null;
this.displayScreen(null);
}
}
} }
onMouseClicked(button) { onMouseClicked(button) {
src/js/net/minecraft/client/gui/Gui.js
+27 -2
View File
@@ -1,10 +1,23 @@
window.Gui = class { window.Gui = class {
drawRect(stack, left, top, right, bottom, color, alpha = 1) { drawRect(stack, left, top, right, bottom, color, alpha = 1) {
stack.save();
stack.fillStyle = color; stack.fillStyle = color;
stack.globalAlpha = alpha; stack.globalAlpha = alpha;
stack.fillRect(left, top, right - left, bottom - top); stack.fillRect(left, top, right - left, bottom - top);
stack.globalAlpha = alpha; stack.restore();
}
drawString(stack, string, x, y, color) {
this._drawString(stack, string, x, y, color, 0, false);
}
_drawString(stack, string, x, y, color, alignment, bold) {
let size = 24;
stack.font = (bold ? "bold" : "normal") + " " + size + "px Minecraftia";
stack.fillStyle = color;
stack.textAlign = alignment === 0 ? "center" : alignment < 0 ? "left" : "right";
stack.fillText(string, x, y);
} }
drawTexture(stack, texture, x, y, width, height, alpha = 1.0) { drawTexture(stack, texture, x, y, width, height, alpha = 1.0) {
@@ -12,9 +25,21 @@ window.Gui = class {
} }
drawSprite(stack, texture, spriteX, spriteY, spriteWidth, spriteHeight, x, y, width, height, alpha = 1.0) { drawSprite(stack, texture, spriteX, spriteY, spriteWidth, spriteHeight, x, y, width, height, alpha = 1.0) {
stack.save();
stack.globalAlpha = alpha; stack.globalAlpha = alpha;
stack.drawImage(texture, spriteX, spriteY, spriteWidth, spriteHeight, x, y, width, height); stack.drawImage(texture, spriteX, spriteY, spriteWidth, spriteHeight, x, y, width, height);
stack.globalAlpha = 1.0; stack.restore();
}
drawBackground(stack, texture, width, height, scale = 8) {
let pattern = stack.createPattern(texture, "repeat");
stack.save();
stack.filter = "brightness(50%)";
stack.scale(scale, scale);
stack.rect(0, 0, width / scale, height / scale);
stack.fillStyle = pattern;
stack.fill();
stack.restore();
} }
loadTexture(path) { loadTexture(path) {
src/js/net/minecraft/client/gui/GuiScreen.js
+17 -1
View File
@@ -1,5 +1,21 @@
window.GuiScreen = class { window.GuiScreen = class extends Gui {
init(minecraft, width, height) {
this.minecraft = minecraft;
this.width = width;
this.height = height;
}
drawScreen(stack, mouseX, mouseY, partialTicks) {
}
keyTyped(code) {
if (code === "Escape") {
this.minecraft.displayScreen(null);
return true;
}
return false;
}
} }
src/js/net/minecraft/client/gui/screens/GuiIngameMenu.js
+11
View File
@@ -0,0 +1,11 @@
window.GuiIngameMenu = class extends GuiScreen {
constructor() {
super();
}
drawScreen(stack, mouseX, mouseY, partialTicks) {
}
}
src/js/net/minecraft/client/gui/screens/GuiLoadingScreen.js
+48
View File
@@ -0,0 +1,48 @@
window.GuiLoadingScreen = class extends GuiScreen {
constructor() {
super();
this.textureBackground = this.loadTexture("background.png");
}
drawScreen(stack, mouseX, mouseY, partialTicks) {
// Render dirt background
this.drawBackground(stack, this.textureBackground, this.width, this.height);
// Render title
this.drawString(stack, this.title, this.width / 2, this.height / 2 - 20, '#FFFFFF');
let progressWidth = 300;
let progressHeight = 5;
// Render background of progress
this.drawRect(
stack,
this.width / 2 - progressWidth / 2,
this.height / 2 - progressHeight / 2,
this.width / 2 + progressWidth / 2,
this.height / 2 + progressHeight / 2,
'#808080',
);
// Render progress
this.drawRect(
stack,
this.width / 2 - progressWidth / 2,
this.height / 2 - progressHeight / 2,
this.width / 2 - progressWidth / 2 + progressWidth * this.progress,
this.height / 2 + progressHeight / 2,
'#80ff80',
);
}
setTitle(title) {
this.title = title;
}
setProgress(progress) {
this.progress = progress;
}
}
src/js/net/minecraft/client/render/WorldRenderer.js
+5
View File
@@ -120,6 +120,11 @@ window.WorldRenderer = class {
let mouseY = this.minecraft.window.mouseY; let mouseY = this.minecraft.window.mouseY;
this.minecraft.ingameOverlay.render(this.stack2d, mouseX, mouseY, partialTicks); this.minecraft.ingameOverlay.render(this.stack2d, mouseX, mouseY, partialTicks);
// Render current screen
if (!(this.minecraft.currentScreen === null)) {
this.minecraft.currentScreen.drawScreen(this.stack2d, mouseX, mouseY, partialTicks);
}
// Render actual scene and hud // Render actual scene and hud
this.webRenderer.render(this.scene, this.camera); this.webRenderer.render(this.scene, this.camera);
this.webRenderer.render(this.scene2d, this.camera2d); this.webRenderer.render(this.scene2d, this.camera2d);
src/resources/background.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

src/resources/font.ttf
BIN
View File
Binary file not shown.
src/start.js
+2
View File
@@ -62,6 +62,8 @@ loadScripts([
"src/js/net/minecraft/client/gui/Gui.js", "src/js/net/minecraft/client/gui/Gui.js",
"src/js/net/minecraft/client/gui/GuiScreen.js", "src/js/net/minecraft/client/gui/GuiScreen.js",
"src/js/net/minecraft/client/gui/IngameOverlay.js", "src/js/net/minecraft/client/gui/IngameOverlay.js",
"src/js/net/minecraft/client/gui/screens/GuiLoadingScreen.js",
"src/js/net/minecraft/client/gui/screens/GuiIngameMenu.js",
"src/js/net/minecraft/client/GameWindow.js", "src/js/net/minecraft/client/GameWindow.js",
"src/js/net/minecraft/client/world/block/Block.js", "src/js/net/minecraft/client/world/block/Block.js",
"src/js/net/minecraft/client/world/block/BlockStone.js", "src/js/net/minecraft/client/world/block/BlockStone.js",
style.css
+19 -5
View File
@@ -1,6 +1,17 @@
@font-face {
font-family: "Minecraftia";
src: url(src/resources/font.ttf);
}
body { body {
margin: 0; margin: 0;
background-color: black; }
#background {
background-image: url(background.png);
background-size: 128px 128px;
image-rendering: pixelated;
filter: brightness(0.5);
} }
#pre-status { #pre-status {
@@ -16,19 +27,22 @@ body {
-khtml-user-select: none; /* Konqueror HTML */ -khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */ -moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently user-select: none;
supported by Chrome, Edge, Opera and Firefox */ /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
/* No overflow */ /* No overflow */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
/* Font */ /* Font */
font-size: 25px; font-size: 25px;
font-family: "FoundryGridnik", serif; font-family: "Minecraftia", sans-serif;
color: white; color: white;
} }
#canvas-container { .fullscreen {
position: absolute;
float: left;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;