dash hud tint
This commit is contained in:
@@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
+66
-33
@@ -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=>`<?xml version="1.0" encoding="UTF-8"?>
|
||||
@@ -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(){
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user