character selector

src/lib/Dashboard.js

@@ -35,7 +35,7 @@ class DashBoard {
 
 		const dash = new Group(), hud = new Group(), hudTarget = new Group();
 		hud.visible = false;
-		let hudAnimation, hudPlane;
+		let hudAnimation, hudPlane, textPlane;
 		this.group = dash;
 		dash.add(hud);
 		hud.add(hudTarget)
@@ -62,6 +62,19 @@ class DashBoard {
 			hudPlane.position.z = -0.22;
 			hudPlane.position.y = -0.05
 			hud.add(hudPlane)
+
+			textPlane = new Mesh(
+				new PlaneGeometry(engine.aspect, 0.17), 
+				new MeshBasicMaterial({
+					map: await engine.loadTexture('/static/textures/hud.png', ''),
+					opacity: 0.52,
+					transparent:true
+				})
+			);
+			textPlane.position.z = -0.25;
+			textPlane.position.y = -0.46
+			textPlane.visible = false;
+			dash.add(textPlane)
 		})()
 
 		const text = new Text()
@@ -69,7 +82,7 @@ class DashBoard {
 			text:``, 
 			fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8,
 			textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
-			anchorX: 'center', anchorY: 0.05, depthOffset: 0.1, color: 0x000000,
+			anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000,
 			clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0]
 		})
 		text.sync();
@@ -83,9 +96,10 @@ class DashBoard {
 		})
 
 		this.updateText = function(t, textScrolledCallback){
+			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
-			text.anchorY = 0.05;
+			text.anchorY = 0.03;
 			text.sync(()=>{
 				let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1];
 				if (dh > 0){
@@ -98,7 +112,7 @@ class DashBoard {
 					}
 					engine.motionQueue.add({
 						o: text,
-						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.05 },
+						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 },
 						t: dh*177,
 						u: updateFn
 					})