From 87a8e07aa363787547a46266d4ddc7784e061dd3 Mon Sep 17 00:00:00 2001 From: goynov Date: Fri, 7 Nov 2025 18:08:09 +0200 Subject: [PATCH] dash hud tint --- .../InteractiveObjects/GenenricObject.js | 14 +-- .../MazeQuizGame/MazeQuizGame.js | 4 +- src/lib/CharacterControls.js | 7 +- src/lib/Dashboard.js | 99 ++++++++++++------- src/lib/GameEngine.js | 12 +-- src/lib/MotionEngine.js | 5 +- 6 files changed, 89 insertions(+), 52 deletions(-) diff --git a/src/components/InteractiveObjects/GenenricObject.js b/src/components/InteractiveObjects/GenenricObject.js index 9907463..85c1914 100644 --- a/src/components/InteractiveObjects/GenenricObject.js +++ b/src/components/InteractiveObjects/GenenricObject.js @@ -7,11 +7,9 @@ class GenericObject{ this.object = this.source.scene; if (!data.exclude){ - engine.clickable.add(this.object, e=>{ + engine.clickable.add(this.object, async e=>{ + this.object._active = !this.object._active; if (engine.dashboard){ - if (data.description){ - engine.dashboard.update({ hint: data.description }) - } if (data.hud){ if (this.object._hud ){ engine.dashboard.detach(this.object); @@ -29,10 +27,14 @@ class GenericObject{ z: scale*this.object.scale.z } } - - engine.dashboard.attach(this.object, placement, true); + await engine.dashboard.attach(this.object, placement, true, true); } } + if (data.description){ + engine.dashboard.updateText(this.object._active ? data.description : '', (d)=>{ + console.log('DONETEXT', d) + }) + } } }); } diff --git a/src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js b/src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js index c96cf00..7d0e056 100644 --- a/src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js +++ b/src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js @@ -63,9 +63,7 @@ class MazeQuizGame { } } if (ud.qid !== undefined && e.started){ - engine.dashboard.update({ - hint: ud.question.q - }) + engine.dashboard.updateText(ud.question.q) engine.dashboard.updateProgress(ud.qid / questions.length) } //console.log(e, ud, engine.hero?.animationsMap); diff --git a/src/lib/CharacterControls.js b/src/lib/CharacterControls.js index 8af4373..d92facc 100644 --- a/src/lib/CharacterControls.js +++ b/src/lib/CharacterControls.js @@ -67,6 +67,9 @@ export class CharacterControls { play = 'left' } else if (!this.currentAction.startsWith('idle')){ play = 'idle' + } else if (this.actionStart == -1){ + this.actionStart = 0; + play = 'idle'; } if (this.currentAction.startsWith('idle') && play.startsWith('idle') && this.actionStart > 10){ @@ -160,7 +163,7 @@ export class CharacterControls { } idleReset(){ - this.actionStart = 0; - this.currentAction = 'idle' + this.actionStart = -1; + //this.currentAction = 'idle' } } \ No newline at end of file diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index dc9c1e9..ab3e5d8 100644 --- a/src/lib/Dashboard.js +++ b/src/lib/Dashboard.js @@ -2,7 +2,8 @@ import { PlaneGeometry, CylinderGeometry, CanvasTexture, Group, Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide } from "three"; -import Utils from "./Utils"; + +import { Text } from "troika-three-text"; class DashBoard { constructor(engine) { let svg = p=>` @@ -58,25 +59,53 @@ class DashBoard { transparent:true }) ); - hudPlane.position.z = -0.25; - + hudPlane.position.z = -0.22; + hudPlane.position.y = -0.05 hud.add(hudPlane) })() + const text = new Text() + Object.assign(text, { + 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, + clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0] + }) + text.sync(); + text.position.y = -0.33; + dash.add(text); + engine.addEventListener('beforeRender', ()=>{ dash.quaternion.copy(engine.camera.quaternion) dash.position.copy(engine.camera.position) dash.translateZ(-1.2 * engine.camera.zoom); }) - this.update = function(p = {}){ - Object.assign(params, p); - if (updating) return false; - updating = true; - canvas.width = engine.w; - canvas.height = engine.h; - url = URL.createObjectURL(new Blob([svg(params)],{ type:"image/svg+xml;charset=utf-8" })); - img.src = url; + this.updateText = function(t, textScrolledCallback){ + engine.motionQueue.clear(text); + text.text = t; + text.anchorY = 0.05; + text.sync(()=>{ + let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1]; + if (dh > 0){ + let updateFn = ()=>{ + //text.sync(); + if (text.textRenderInfo.blockBounds[1]> text.clipRect[1] * 1.33 ){ + textScrolledCallback?.(true); + textScrolledCallback = null; + } + } + engine.motionQueue.add({ + o: text, + a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.05 }, + t: dh*177, + u: updateFn + }) + }else{ + textScrolledCallback?.(false) + } + }) } this.createProgressBar = function(){ @@ -115,22 +144,23 @@ class DashBoard { this.reset = ()=>{ this.updateProgress(0); - this.update({ - hint: '' - }); + this.updateText(''); } - this.attach = (object, dashPlacement, rotate)=>{ + this.attach = (object, dashPlacement, rotate = false, plane = false)=>{ hud.visible = true; - hudPlane.scale.set(0, .1, 1); - hudPlane.material.opacity = 0.5; - engine.motionQueue.add([{ - o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8 - },{ - o:hudPlane, a:{scale:{x:1}}, t:.4 - },{ - o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4, - }]) + hudPlane.visible = plane; + if (plane){ + hudPlane.scale.set(0, .1, 1); + hudPlane.material.opacity = 0.5; + engine.motionQueue.add([{ + o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8 + },{ + o:hudPlane, a:{scale:{x:1}}, t:.4 + },{ + o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4, + }]) + } if (occupied) return false; object._hud = { parent: object.parent, @@ -143,14 +173,17 @@ class DashBoard { hudTarget.attach(object); occupied = true; - engine.motionQueue.add({ - o: object, - a: dashPlacement || { - quaternion: { x:0, y:0, z:0, w:0 }, - position: { x:0, y:0, z:0 }, - scale: { x: 1, y:1, z:1 } - }, - t: 1 + let result = new Promise((resolve, reject)=>{ + engine.motionQueue.add({ + o: object, + a: dashPlacement || { + quaternion: { x:0, y:0, z:0, w:0 }, + position: { x:0, y:0, z:0 }, + scale: { x: 1, y:1, z:1 } + }, + t: 1, + f: resolve + }) }) if (rotate){ @@ -164,6 +197,7 @@ class DashBoard { d: 1 }) } + return result; } this.detach = object=>{ @@ -182,7 +216,6 @@ class DashBoard { } this.createProgressBar(); - this.update(); } get active(){ diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index a909ffc..59ec452 100644 --- a/src/lib/GameEngine.js +++ b/src/lib/GameEngine.js @@ -556,12 +556,12 @@ class GameEngine extends THREE.EventDispatcher{ } clearScene(){ - // this.hero?.destroy(); - // this.dashboard?.reset(); - // this.activeObjects.clear(); - // this.physics.clear(); - // this.clickable.removeAll(); - // this.motionQueue.clearAll(); + this.hero?.destroy(); + this.dashboard?.reset(); + this.activeObjects.clear(); + this.physics.clear(); + this.clickable.removeAll(); + this.motionQueue.clearAll(); } } diff --git a/src/lib/MotionEngine.js b/src/lib/MotionEngine.js index 36e15a4..5c10119 100644 --- a/src/lib/MotionEngine.js +++ b/src/lib/MotionEngine.js @@ -26,8 +26,8 @@ class MotionEngine { return target; } - // a = {o-object, a-action, t-time, f-finish event, d-delay, m-mode, r-repeat, - // rd-repeat the delay, rf-reset on finish} + // a = {o-object, a-attributes, t-time, f-finish event, d-delay, m-mode, r-repeat, + // rd-repeat the delay, rf-reset on finish, u-on update} this.add = function (a) { a = Array.isArray(a) ? a : [a]; a.forEach(e => { @@ -84,6 +84,7 @@ class MotionEngine { } } calcValues(e.o, e.a, e.iv, e.ct / e.t, e.m || 'value'); + e.u?.(); if (e.ct == e.t && e.r) { e.ct = e.m == 'offset' ? undefined : 0; if (e.rd) {