Update 0.1.6

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.1.6
+- Add basic support for Json Entity Models ( [https://github.com/sp614x/optifine/blob/master/OptiFineDoc/doc/cem_model.txt](Format used by Optifine, a Minecraft Mod) ). For now only few properties are used by game.
+- Added nametags
+- Fixed item tooltips
+
 # 0.1.5
 - Added "tab" screen. It is controlled fully by server
 - Added chat color support

README.md

@@ -14,5 +14,6 @@ Server files, check this repo: https://github.com/Patbox/voxelsrv-server
 
 # Assets used in this project (graphics/sounds):
 - Pixel Perfection Community  Edition (https://github.com/Athemis/PixelPerfectionCE)
+- Json Entity Models by ewanhowell5195 (https://www.curseforge.com/minecraft/texture-packs/template-cem)
 - Art of silence by uniq
 - Some remixes by bulby

docs/style.css

@@ -125,11 +125,14 @@
 
 .item_tooltip {
 	display: none;
-	position: relative;
+	position: absolute;
 	font-family: 'lato';
 	font-weight: normal;
 	pointer-events: none;
 	background-color: #22222277;
+	padding: 5px;
+	font-size: 24px;
+	z-index: 10;
 }
 
 .cube_face-top  { 

src/gui/info.js

@@ -1,5 +1,5 @@
 
-export function setupInfo(noa, server) {
+export function setupInfo(noa, server, dataLogin) {
 	var eid = noa.playerEntity
 	var dat = noa.entities.getPositionData(eid)
 
@@ -16,7 +16,7 @@ export function setupInfo(noa, server) {
 	div.appendChild(version)
 
 	var world = document.createElement('span') //World
-	world.innerHTML = '<br>Server: ' + server
+	world.innerHTML = '<br>Server: ' + dataLogin.name + ' [' + server + ']'
 	div.appendChild(world)
 
 	var pos = document.createElement('span') //Coordinates

src/gui/inventory.js

@@ -41,7 +41,7 @@ var inventoryscreen
 
 export async function setupInventory(noa, socket) { // Opens inventory
 	var inventory = noa.ents.getState(1, 'inventory')
-	var items = Object.entries(inventory.main)
+	var invItems = Object.entries(inventory.main)
 	var inv = inventory.main
 	inventory.bin = {}
 
@@ -84,7 +84,7 @@ export async function setupInventory(noa, socket) { // Opens inventory
 	screen.appendChild(tempslot)
 
 
-	for (var x = 0; x < (items.length/9)-1; x++) { // Inventory slots (backpack)
+	for (var x = 0; x < (invItems.length/9)-1; x++) { // Inventory slots (backpack)
 		var row = document.createElement('tr')
 		backpack.appendChild(row)
 		for (var y = 0; y < 9; y++) {
@@ -120,18 +120,20 @@ export async function setupInventory(noa, socket) { // Opens inventory
 	screen.appendChild(tooltip)
 
 
+
 	window.addEventListener("mousemove", function(e){ //Moving items at cursor
 		if (screen.style.display != 'none') {
 			tempslot.style.left = e.x + 'px'
 			tempslot.style.top = e.y + 'px'
 
 			var slot = document.elementFromPoint(e.x, e.y).id
+			var inv2 = noa.ents.getState(1, 'inventory').main
 
-			if (inv[slot] != undefined && inv[slot].id != undefined) {
-				tooltip.style.left = e.x + 'px'
-				tooltip.style.top = e.y + 'px'
+			if (inv2[slot] != undefined && inv2[slot].id != undefined) {
+				tooltip.style.left = e.x + 20 + 'px'
+				tooltip.style.top = e.y - 10 + 'px'
 
-				tooltip.innerHTML = inv[slot].id
+				tooltip.innerHTML = items[inv2[slot].id].name
 				tooltip.style.display = 'initial'
 			}
 			else tooltip.style.display = 'none'

src/gui/setup.js

@@ -5,8 +5,8 @@ import { setupHand } from './hand'
 import { setupTab } from './tab'
 
 
-export function setupGuis(noa, server, socket, data) {
-	setupInfo(noa, server)
+export function setupGuis(noa, server, socket, dataPlayer, dataLogin) {
+	setupInfo(noa, server, dataLogin)
 	setupCross()
 	setupHotbar()
 	setupInventory(noa, socket)

src/index.js

@@ -112,14 +112,14 @@ socket.on('login-request', function(dataLogin) {
 		var lastPos = {}
 		var lastRot = 0
 
-		registerBlocks(noa, dataLogin.blocks, dataLogin.blockIDs)
-		registerItems(noa, dataLogin.items)
+		registerBlocks(noa, dataPlayer.blocks, dataPlayer.blockIDs)
+		registerItems(noa, dataPlayer.items)
 		defineModelComp(noa)
 
 		setupControls(noa, socket)
 		setupPlayer(noa, dataPlayer.inv)
 
-		setupGuis(noa, server, socket, dataPlayer)
+		setupGuis(noa, server, socket, dataPlayer, dataLogin)
 
 		socket.on('chunkdata', function(data) {
 			var chunkdata = cruncher.decode(Object.values(data.chunk), new Uint16Array(24 * 120 * 24))
@@ -154,8 +154,9 @@ socket.on('login-request', function(dataLogin) {
 		socket.on('entity-spawn', async function(data) {
 			if (entityIgnore != data.id) {
 				entityList[data.id] = noa.ents.add(Object.values(data.data.position), 1, 2, null, null, false, true)
-
-				applyModel(entityList[data.id], data.data.model, data.data.texture)
+
+				applyModel(entityList[data.id], data.data.model, data.data.texture, data.data.offset, data.data.nametag, data.data.name)
+
 			}
 		})
 
@@ -173,7 +174,7 @@ socket.on('login-request', function(dataLogin) {
 			if (entityList[data.id] != undefined) {
 				var pos = Object.values(data.data.pos)
 				noa.ents.getState(entityList[data.id], 'position').newPosition = data.data.pos
-				noa.ents.getState(entityList[data.id], 'position').rotation = data.data.rot
+				noa.ents.getState(entityList[data.id], 'position').rotation = data.data.rot * 2
 			}
 		})
 
@@ -186,7 +187,7 @@ socket.on('login-request', function(dataLogin) {
 
 		noa.on('tick', function() {
 			timerPos = timerPos + 1
-			if (timerPos == 2) {
+			if (timerPos == 1) {
 				timerPos = 0
 				var pos = noa.ents.getState(noa.playerEntity, 'position').position
 				var rot = noa.camera.heading
@@ -198,23 +199,25 @@ socket.on('login-request', function(dataLogin) {
 				}
 			}
 		})
-		/*noa.on('beforeRender', async function() {
+		noa.on('beforeRender', async function() {
 			Object.values(entityList).forEach(async function (id) {
 				var pos = noa.ents.getState(id, 'position').position
 				var newPos = noa.ents.getState(id, 'position').newPosition
-				if (newPos != undefined && pos != undefined) {
+				if (noa.ents.getState(id, noa.entities.names.mesh) != undefined && newPos != undefined && pos != undefined) {
 					var move = vec3.create()	
-					vec3.lerp(move, pos, newPos, 0.2)			
-					//noa.ents.setPosition(id, [ pos[0] + move[0]/2, pos[1] + move[1]/2, pos[2] + move[2]/2])
-					var rot = JSON.parse( JSON.stringify(noa.ents.getState(id, noa.entities.names.mesh).mesh.rotation.y) )
-					var newRot = noa.ents.getState(id, 'position').rotation
+					vec3.lerp(move, pos, newPos, 0.1)			
+					var rot = noa.ents.getState(id, 'position').rotation
 					noa.ents.setPosition(id, move)
-					noa.ents.getState(id, noa.entities.names.mesh).mesh.rotation.y = (2*rot + newRot)/4
-				}
+					noa.ents.getState(id, noa.entities.names.mesh).mesh.rotation.y = rot/2
 
+					if (noa.ents.getState(id, 'model').nametag != undefined) {
+						noa.ents.getState(id, 'model').nametag.rotation.y = noa.camera.heading - rot/2
+						noa.ents.getState(id, 'model').nametag.rotation.x = noa.camera.pitch
 
+					}
+				}
 			})
-		})*/
+		})
 
 	})
 })

src/model.js

@@ -13,10 +13,13 @@ export function defineModelComp(noa2) {
 	})
 }
 
-export function applyModel(eid, model, texture, offset) {
+export function applyModel(eid, model, texture, offset, nametag, name) {
 	if (models[model] == undefined) {
 		fetch('./models/' + model + '.jem').then(response => response.json()).then(function(data) {
 			var builded = buildModel(data, texture)
+
+			if (nametag) builded.nametag = addNametag(builded.main, name, noa.ents.getPositionData(eid).height)
+
 			noa.ents.addComponent(eid, 'model', builded)
 
 			noa.entities.addComponent(eid, noa.entities.names.mesh, {
@@ -26,30 +29,25 @@ export function applyModel(eid, model, texture, offset) {
 		})
 	} else {
 		var builded = buildModel(models[model], texture)
+		if (nametag) builded.nametag = addNametag(builded.main, name, noa.ents.getPositionData(eid).height)
+
 		noa.ents.addComponent(eid, 'model', builded)
 
+
 		noa.entities.addComponent(eid, noa.entities.names.mesh, {
 			mesh: builded.main,
 			offset: offset
 		})
 	}
 
-
-
-	/*var mesh = BABYLON.MeshBuilder.CreateBox("player", {height: 1.85, width: 0.5, depth: 0.5}, scene)
-
-	noa.entities.addComponent(eid, noa.entities.names.mesh, {
-		mesh: mesh,
-		offset: [0, 0.9, 0]
-	})*/
 }
 
 
 
 function buildModel(model, texture) {
 	console.log('Building model...')
 
-	var scale = 12
+	var scale = 1
 
 	var scene = noa.rendering.getScene()
 	var txtSize = model.textureSize
@@ -62,18 +60,14 @@ function buildModel(model, texture) {
 
 	for(var x = 0; x < modeldata.length; x++  ) {
 		var mdata = modeldata[x]
-		var bone = new BABYLON.Mesh(mdata.id, scene)
-		bone.parent = main
-
-		noa.rendering.addMeshToScene(bone, false)
+		var pivot = mdata.translate
 
 		//bone.setPositionWithLocalVector(new BABYLON.Vector3(mdata.translate[0]/scale, mdata.translate[1]/scale, mdata.translate[2]/scale));
 
-
-		meshlist[mdata.id] = {bone: bone}
-
 		var box = mdata.boxes
 
+		var part = new Array(box.length)
+
 		for(var y = 0; y < box.length; y++  ) {
 			var add = 0
 			if (box[y].sizeAdd != undefined) add = box[y].sizeAdd
@@ -91,37 +85,87 @@ function buildModel(model, texture) {
 			faceUV[4] = new BABYLON.Vector4( ( cords[3] + cords[5] + off[0] ) / txtSize[0], (txtSize[1] - cords[5] - off[1]) / txtSize[1], ( off[0] + cords[5] ) / txtSize[0], ( txtSize[1] - off[1] )/ txtSize[1])
 			faceUV[5] = new BABYLON.Vector4( ( cords[3]*2 + cords[5] + off[0] ) / txtSize[0], (txtSize[1] - cords[5] - off[1]) / txtSize[1], ( off[0] + cords[5] + cords[3] ) / txtSize[0], ( txtSize[1] - off[1] )/ txtSize[1])
 
-			console.log(mdata.id, faceUV)
-
-			var part = new BABYLON.MeshBuilder.CreateBox('part-' + mdata.id + '-' + y, {
-				height: (box[y].coordinates[4] + add)/scale,
-				width: (box[y].coordinates[3] + add)/scale,
-				depth: (box[y].coordinates[5] + add)/scale,
+			part[y] = new BABYLON.MeshBuilder.CreateBox('part-' + mdata.id + '-' + y, {
+				height: (cords[4] + add*2)/scale,
+				width: (cords[3] + add*2)/scale,
+				depth: (cords[5] + add*2)/scale,
 				faceUV: faceUV,
 				wrap: true
 			}, scene)
 
-			part.setPositionWithLocalVector(new BABYLON.Vector3((box[y].coordinates[0] + add/2)/scale, (box[y].coordinates[1] + add/2)/scale, (box[y].coordinates[2] + add/2)/scale));
+			part[y].setPivotMatrix(BABYLON.Matrix.Translation(pivot[0], pivot[1], pivot[2]))
+
+			//part.locallyTranslate(new BABYLON.Vector3((cords[0] + add/2)/scale, (cords[1] + add/2)/scale, (cords[2] + add/2)/scale));
+			part[y].setPositionWithLocalVector(new BABYLON.Vector3((cords[0] + cords[3]/2 + add/2)/scale, (cords[1] + cords[4]/2 + add/2)/scale, (cords[2] + cords[5]/2 + add/2)/scale));
+
 
 			var mat = noa.rendering.makeStandardMaterial('modelmaterial-' + mdata.id + '-' + y)
-			part.material = mat
+			part[y].material = mat
 			mat.diffuseTexture = new BABYLON.Texture('textures/' + texture + '.png', scene, true, true, BABYLON.Texture.NEAREST_SAMPLINGMODE)
 
+			part[y].opaque = false
+			mat.diffuseTexture.hasAlpha = true
+
+		}
 
+		var mesh = BABYLON.Mesh.MergeMeshes(part, true, true, undefined, true, true);
 
-			part.opaque = false
-			mat.opacityTexture = mat.diffuseTexture
-			//mat.needDepthPrePass = true
+		mesh.setParent(main)
 
+		mesh.scaling = new BABYLON.Vector3(0.06, 0.06, 0.06)
 
-			part.parent = bone
-			meshlist[mdata.id][y] = part
+		meshlist[mdata.id] = mesh
 
-			noa.rendering.addMeshToScene(part, false)
+		noa.rendering.addMeshToScene(mesh)
 
-		}
 	}
 
-
 	return {main: main, models: meshlist}
+}
+
+
+function addNametag(mainMesh, name, height) {
+	var scene = noa.rendering.getScene()
+
+	var font_size = 96
+	var font = "bold " + font_size + "px 'lato'"
+
+	//Set height for plane
+    var planeHeight = 0.3
+
+    //Set height for dynamic texture
+    var DTHeight = 1.5 * font_size //or set as wished
+
+    //Calcultae ratio
+    var ratio = planeHeight/DTHeight
+
+	//Use a temporay dynamic texture to calculate the length of the text on the dynamic texture canvas
+    var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene)
+	var tmpctx = temp.getContext()
+	tmpctx.font = font
+    var DTWidth = tmpctx.measureText(name).width + 8
+
+    //Calculate width the plane has to be 
+    var planeWidth = DTWidth * ratio
+
+    //Create dynamic texture and write the text
+    var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene, false)
+    var mat = noa.rendering.makeStandardMaterial('nametag')
+	mat.diffuseTexture = dynamicTexture
+	mat.emissiveTexture = mat.diffuseTexture
+	mat.diffuseTexture.hasAlpha = true
+	mat.opacityTexture = mat.diffuseTexture
+    dynamicTexture.drawText(name, null, null, font, "#eeeeee", "#00000066", true)
+
+    //Create plane and set dynamic texture as material
+    var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene)
+    plane.material = mat
+
+	plane.setPositionWithLocalVector(new BABYLON.Vector3(0, height + 0.2, 0))
+	plane.opaque = false
+
+	plane.setParent(mainMesh)
+	noa.rendering.addMeshToScene(plane)
+
+	return plane
 }

src/player.js

@@ -113,6 +113,18 @@ export function setupControls(noa, socket) {
 		document.getElementById('game_tab').style.display = 'none'
 	})
 
+	var debug = false
+	var scene = noa.rendering.getScene()
+    noa.inputs.bind('debug', 'Z')
+    noa.inputs.down.on('debug', () => {
+        // inspector is very heavy, so load it via dynamic import
+        import('@babylonjs/inspector').then(data => {
+            debug = !debug
+            if (debug) scene.debugLayer.show()
+            else scene.debugLayer.hide()
+        })
+    })
+
 	// each tick, consume any scroll events and use them to zoom camera
 	noa.on('tick', async function () {
 		var scroll = noa.inputs.state.scrolly