diff --git a/basic-examples/src/app.ts b/basic-examples/src/app.ts index a8f02de..64cee24 100644 --- a/basic-examples/src/app.ts +++ b/basic-examples/src/app.ts @@ -65,7 +65,7 @@ export class App { async init() { const curURL = new URL(window.location.href); - if(!this.memoryAvailableEle && curURL.searchParams.get('mem')) { + if (!this.memoryAvailableEle && curURL.searchParams.get('mem')) { await loadJolt({}); this.memoryAvailableEle = setupMemoryAvailable(Jolt); } @@ -73,7 +73,7 @@ export class App { const engine = this.engine = new Engine(this.canvas, true); const scene = this.scene = new Scene(engine); this.ui = AdvancedDynamicTexture.CreateFullscreenUI('gui'); - + scene.enablePhysics(new Vector3(0, -9.8, 0), await JoltJSPlugin.loadPlugin()) if (!(this.config && this.config.getCamera)) { @@ -94,13 +94,13 @@ export class App { light.intensity = 0.7; const maybeCallback = this.createScene(scene); - const callback = maybeCallback instanceof Promise ? await maybeCallback: maybeCallback; + const callback = maybeCallback instanceof Promise ? await maybeCallback : maybeCallback; let last = performance.now(); // run the main render loop engine.runRenderLoop(() => { const scene = this.scene; - if(scene) { + if (scene) { if (callback) { const now = performance.now(); callback(now, now - last); diff --git a/basic-examples/src/scene/vehicle_motorcycle.ts b/basic-examples/src/scene/vehicle_motorcycle.ts index 190dc35..0f96f82 100644 --- a/basic-examples/src/scene/vehicle_motorcycle.ts +++ b/basic-examples/src/scene/vehicle_motorcycle.ts @@ -28,8 +28,6 @@ export default async (scene: Scene): Promise => { const material = new StandardMaterial('tile'); material.diffuseTexture = tiledTexture; - await loadTrack(scene); - const physicSetting: PhysicsImpostorParameters = { mass: 300, restitution: 0, friction: 0, centerOffMass: new Vector3(0, -.3, 0), disableBidirectionalTransformation: true }; const car = createBox(new Vector3(0, 2, 0), Quaternion.FromEulerAngles(0, Math.PI, 0), new Vector3(0.1, .3, 0.4), physicSetting, '#FF0000'); car.box.material!.wireframe = true; @@ -38,6 +36,8 @@ export default async (scene: Scene): Promise => { const vehicleInput = new DefaultMotorcycleInput(car.physics.physicsBody); const controller = new MotorcycleController(car.physics, wheeledConfig, vehicleInput); + + await loadTrack(scene); const carWheels: Mesh[] = [] wheeledConfig.wheels.forEach((o, i) => { const mesh = MeshBuilder.CreateCylinder('cylinder', { diameter: o.radius * 2, height: o.width, tessellation: 16 }); @@ -53,7 +53,7 @@ export default async (scene: Scene): Promise => { setupTachometer(controller, scene); camera.getRoot().parent = followPoint; - let stdTorque = controller.engine.maxTorque; + let stdInertia = controller.engine.inertia; const rotateVector = new Vector3(); return (_time: number, _delta: number) => { @@ -61,9 +61,9 @@ export default async (scene: Scene): Promise => { vehicleInput.input.right = input.direction.x; vehicleInput.input.handBrake = input.handbrake; - const newTorque = input.boost ? 1.1*stdTorque : stdTorque; - if(controller.engine.maxTorque != newTorque) { - controller.engine.maxTorque = newTorque; + const newInertia = input.boost ? 0.25 * stdInertia : stdInertia; + if (controller.engine.inertia != newInertia) { + controller.engine.inertia = newInertia; } followPoint.position.copyFrom(car.box.position); diff --git a/basic-examples/src/scene/vehicle_tracked.ts b/basic-examples/src/scene/vehicle_tracked.ts index e8785a2..d81ea53 100644 --- a/basic-examples/src/scene/vehicle_tracked.ts +++ b/basic-examples/src/scene/vehicle_tracked.ts @@ -1,4 +1,4 @@ -import { MeshBuilder, SceneCallback, createBox, createFloor } from '../util/example'; +import { MeshBuilder, SceneCallback, createBox } from '../util/example'; import { DefaultTrackedInput, TrackededVehicleController, Vehicle, createBasicTracked } from '@phoenixillusion/babylonjs-jolt-plugin/vehicle'; import { SceneConfig } from '../app'; import { Camera } from '@babylonjs/core/Cameras/camera'; @@ -52,7 +52,7 @@ export default async (scene: Scene): Promise => { setupTachometer(controller, scene); camera.getRoot().parent = followPoint; - let stdTorque = controller.engine.maxTorque; + let stdInertia = controller.engine.inertia; const rotateVector = new Vector3(); return (_time: number, _delta: number) => { @@ -60,9 +60,9 @@ export default async (scene: Scene): Promise => { vehicleInput.input.right = input.direction.x; vehicleInput.input.handBrake = input.handbrake; - const newTorque = input.boost ? 1.1*stdTorque : stdTorque; - if(controller.engine.maxTorque != newTorque) { - controller.engine.maxTorque = newTorque; + const newInertia = input.boost ? 0.25 * stdInertia : stdInertia; + if (controller.engine.inertia != newInertia) { + controller.engine.inertia = newInertia; } followPoint.position.copyFrom(car.box.position); diff --git a/basic-examples/src/scene/vehicle_wheeled.ts b/basic-examples/src/scene/vehicle_wheeled.ts index cda8e3e..1886ea0 100644 --- a/basic-examples/src/scene/vehicle_wheeled.ts +++ b/basic-examples/src/scene/vehicle_wheeled.ts @@ -1,4 +1,4 @@ -import { MeshBuilder, SceneCallback, createBox, createFloor } from '../util/example'; +import { MeshBuilder, SceneCallback, createBox } from '../util/example'; import { DefaultWheeledVehicleInput, WheeledVehicleController, Vehicle, createBasicCar } from '@phoenixillusion/babylonjs-jolt-plugin/vehicle'; import { SceneConfig } from '../app'; import { FollowCamera } from '@babylonjs/core/Cameras/followCamera'; @@ -66,7 +66,7 @@ export default async (scene: Scene): Promise => { vehicleInput.input.handBrake = input.handbrake; const newInertia = input.boost ? 0.25 * stdInertia : stdInertia; - if(controller.engine.inertia != newInertia) { + if (controller.engine.inertia != newInertia) { controller.engine.inertia = newInertia; } diff --git a/basic-examples/src/util/camera.ts b/basic-examples/src/util/camera.ts index fb411d2..661fbe0 100644 --- a/basic-examples/src/util/camera.ts +++ b/basic-examples/src/util/camera.ts @@ -3,6 +3,7 @@ import { Matrix, Vector3 } from "@babylonjs/core/Maths/math.vector"; import { TransformNode } from "@babylonjs/core/Meshes/transformNode"; import { CameraCombinedInput } from "./controller"; import { Scene } from "@babylonjs/core/scene"; +import { BaseKeyCodes } from "./controller/keyboard"; export class CameraSetup { @@ -33,7 +34,7 @@ export class CameraSetup { this.camera = new FreeCamera("cam", new Vector3(0, 0, -50), scene); this.camera.fov = 0.47350045992678597; this.camera.parent = yTilt; - } + } public setDistance(dist: number) { this.camera.position.z = this._targetDistance = -dist; @@ -64,7 +65,7 @@ export class CameraSetup { return this.camera.getViewMatrix(); } - public setController(input: CameraCombinedInput) { + public setController(input: CameraCombinedInput) { this.camera.inputs.clear(); this.camera.attachControl(); this.camera.inputs.add(input); diff --git a/basic-examples/src/util/controller.ts b/basic-examples/src/util/controller.ts index 52f330e..228a70b 100644 --- a/basic-examples/src/util/controller.ts +++ b/basic-examples/src/util/controller.ts @@ -11,7 +11,7 @@ import { BaseCameraPointersInput } from "@babylonjs/core/Cameras/Inputs/BaseCame import { Camera } from "@babylonjs/core/Cameras/camera"; import { App } from "../app"; -type OnInputCheck = (camera: T, joystickState: Vector2, keyboardState: KeyCodeState) => void; +type OnInputCheck = (camera: T, joystickState: Vector2, keyboardState: KeyCodeState) => void; export class CameraCombinedInput extends BaseCameraPointersInput { SWIPE_SENSIBILITY = 1.5; @@ -28,7 +28,7 @@ export class CameraCombinedInput exten getSimpleName = () => "joystick" - constructor(private _onInputCheck: OnInputCheck, private cameraSetup: CameraSetup, keycodes: K) { + constructor(private _onInputCheck: OnInputCheck, private cameraSetup: CameraSetup, keycodes: K) { super(); this.joystick = new JoystickControl(App.instance.ui!); this.keyboard = new KeyboardControl(keycodes); @@ -61,11 +61,11 @@ export class CameraCombinedInput exten } checkInputs() { - let engine = EngineStore.LastCreatedEngine!; - if (this.keyboard.state.ROTATE_LEFT) this.cameraSetup.rotate(-this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); - if (this.keyboard.state.ROTATE_RIGHT) this.cameraSetup.rotate(this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); - if (this.keyboard.state.ROTATE_UP) this.cameraSetup.changeTiltY(-this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); - if (this.keyboard.state.ROTATE_DOWN) this.cameraSetup.changeTiltY(this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); + let engine = EngineStore.LastCreatedEngine!; + if (this.keyboard.state.ROTATE_LEFT) this.cameraSetup.rotate(-this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); + if (this.keyboard.state.ROTATE_RIGHT) this.cameraSetup.rotate(this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); + if (this.keyboard.state.ROTATE_UP) this.cameraSetup.changeTiltY(-this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); + if (this.keyboard.state.ROTATE_DOWN) this.cameraSetup.changeTiltY(this.SWIPE_SENSIBILITY * engine.getDeltaTime() / 500); this._onInputCheck(this.camera, this.joystick.joystickDelta, this.keyboard.state) } diff --git a/basic-examples/src/util/controller/keyboard.ts b/basic-examples/src/util/controller/keyboard.ts index 0573fd9..2245e95 100644 --- a/basic-examples/src/util/controller/keyboard.ts +++ b/basic-examples/src/util/controller/keyboard.ts @@ -17,12 +17,12 @@ export class BaseKeyCodes { ROTATE_DOWN: KeyboardEventTypes[] = ['KeyC']; } -export type KeyCodeState = {[key in keyof T]: boolean}; +export type KeyCodeState = { [key in keyof T]: boolean }; export class KeyState { state: KeyCodeState; constructor(keycodes: T) { - const state: {[k: string]: boolean} = {}; + const state: { [k: string]: boolean } = {}; Object.keys(keycodes).forEach(key => { state[key] = false; }); @@ -59,8 +59,8 @@ export class KeyboardControl { if (!evt.metaKey) { if (info.type === KeyboardEventTypes.KEYDOWN || info.type === KeyboardEventTypes.KEYUP) { const set_state = info.type === KeyboardEventTypes.KEYDOWN ? true : false; - Object.entries(this.keys).forEach(([k,v])=> { - if(v.indexOf(key)>=0) { + Object.entries(this.keys).forEach(([k, v]) => { + if (v.indexOf(key) >= 0) { this.state[k as keyof T] = set_state; } }) diff --git a/basic-examples/src/util/custom-ele-util.ts b/basic-examples/src/util/custom-ele-util.ts index cb28201..e33194c 100644 --- a/basic-examples/src/util/custom-ele-util.ts +++ b/basic-examples/src/util/custom-ele-util.ts @@ -2,7 +2,7 @@ export interface IDynamicProp { update(): void; } export class DynamicProp implements IDynamicProp { - constructor(public ele: T, private onUpdate: (ele: T)=> void) {} + constructor(public ele: T, private onUpdate: (ele: T) => void) { } update() { this.onUpdate(this.ele); } diff --git a/basic-examples/src/util/memory-available.ts b/basic-examples/src/util/memory-available.ts index 0b0286d..bde789d 100644 --- a/basic-examples/src/util/memory-available.ts +++ b/basic-examples/src/util/memory-available.ts @@ -48,10 +48,10 @@ export class MemoryAvailableElement extends HTMLElement { time = NOW; const freeMem = this.jolt.JoltInterface.prototype.sGetFreeMemory(); const totalMem = this.jolt.JoltInterface.prototype.sGetTotalMemory(); - const percentUsed = (100 * (totalMem-freeMem - this.base) / totalMem).toFixed(2) + '%'; + const percentUsed = (100 * (totalMem - freeMem - this.base) / totalMem).toFixed(2) + '%'; barInner.style.width = percentUsed; barInner.innerText = percentUsed; - memoryText.innerText = `${totalMem-freeMem - this.base} (+ ${this.base}) / ${totalMem}`; + memoryText.innerText = `${totalMem - freeMem - this.base} (+ ${this.base}) / ${totalMem}`; } })); const dispose = document.createElement('button'); diff --git a/basic-examples/src/util/tachometer.ts b/basic-examples/src/util/tachometer.ts index f9400b1..d5393da 100644 --- a/basic-examples/src/util/tachometer.ts +++ b/basic-examples/src/util/tachometer.ts @@ -1,7 +1,7 @@ import { IBaseVehicleController } from "@phoenixillusion/babylonjs-jolt-plugin/vehicle"; import { DynamicProp, IDynamicProp } from "./custom-ele-util"; -function deg(d: number) { return d/360 * 2 * Math.PI } +function deg(d: number) { return d / 360 * 2 * Math.PI } export class TachometerElement extends HTMLElement { public controller?: IBaseVehicleController @@ -17,8 +17,8 @@ export class TachometerElement extends HTMLElement { const shadow = this.attachShadow({ mode: "open" }); const style = document.createElement('style'); - style.innerHTML = -`:host { + style.innerHTML = + `:host { position: relative; padding: 10px 0; width: 200px; @@ -72,7 +72,7 @@ export class TachometerElement extends HTMLElement { :host .gears .active ,:host .modes .active { color: red; } -`; +`; shadow.appendChild(style); const tachometerBase = document.createElement('div'); tachometerBase.className = "base"; @@ -99,9 +99,9 @@ export class TachometerElement extends HTMLElement { maxRPMDrawn = 10; private getRadialPoint(angle: number, dist: number) { - const x = 100 + Math.cos(deg(angle))*dist; - const y = 100 + Math.sin(deg(angle))*dist; - return [x,y]; + const x = 100 + Math.cos(deg(angle)) * dist; + const y = 100 + Math.sin(deg(angle)) * dist; + return [x, y]; } private calculateRPMAngle(rpm: number): number { @@ -109,8 +109,8 @@ export class TachometerElement extends HTMLElement { const startAngle = this.startAngle; const endAngle = this.endAngle; - const percent = rpm/maxRPMDrawn; - return startAngle + (endAngle-startAngle) * percent; + const percent = rpm / maxRPMDrawn; + return startAngle + (endAngle - startAngle) * percent; } private renderBackground() { @@ -125,9 +125,9 @@ export class TachometerElement extends HTMLElement { ctx.arc(100, 100, 90, deg(startAngle), deg(endAngle)); ctx.stroke(); - const maxRPMDrawn = this.maxRPMDrawn = Math.ceil(controller.engine.maxRPM/1000) * 1000; - const numHatch = maxRPMDrawn/1000 * 2; - const hatchAngle = (endAngle-startAngle)/numHatch; + const maxRPMDrawn = this.maxRPMDrawn = Math.ceil(controller.engine.maxRPM / 1000) * 1000; + const numHatch = maxRPMDrawn / 1000 * 2; + const hatchAngle = (endAngle - startAngle) / numHatch; //redline const redlineStart = this.calculateRPMAngle(controller.transmission.shiftUpRPM); @@ -141,20 +141,20 @@ export class TachometerElement extends HTMLElement { ctx.strokeStyle = 'white'; ctx.textBaseline = "middle"; ctx.font = "14px Arial" - for(let i=0; i <=numHatch; i++) { + for (let i = 0; i <= numHatch; i++) { const angle = startAngle + hatchAngle * i; let hatchStart = 80; let lineWidth = 2; - if(i % 2 == 0) { + if (i % 2 == 0) { hatchStart = 72; lineWidth = 3; - const [xT,yT] = this.getRadialPoint(angle, 60); + const [xT, yT] = this.getRadialPoint(angle, 60); ctx.lineWidth = 1.5; - const text = ""+i/2; - ctx.strokeText(text, xT - ctx.measureText(text).width/2, yT); + const text = "" + i / 2; + ctx.strokeText(text, xT - ctx.measureText(text).width / 2, yT); } - const [xS,yS] = this.getRadialPoint(angle, hatchStart) - const [xE,yE] = this.getRadialPoint(angle, 90+lineWidth/2) + const [xS, yS] = this.getRadialPoint(angle, hatchStart) + const [xE, yE] = this.getRadialPoint(angle, 90 + lineWidth / 2) ctx.lineWidth = lineWidth; ctx.beginPath(); @@ -179,10 +179,10 @@ export class TachometerElement extends HTMLElement { const speedMPH = document.createElement('div'); speedMPH.className = 'value' speed.appendChild(speedMPH); - this.dynamicItems.push(new DynamicProp(speedMPH, + this.dynamicItems.push(new DynamicProp(speedMPH, (x) => { x.innerText = `${this.toMPH(this.controller!.getLinearVelocity().length())}` - })) + })) const label = document.createElement('div'); label.innerText = 'mph' label.className = 'label' @@ -210,9 +210,9 @@ export class TachometerElement extends HTMLElement { const gears = document.createElement('div'); gears.className = 'gears'; - const gearNames = ['R','N']; + const gearNames = ['R', 'N']; this.controller!.transmission.gearRatios.forEach((_o, i) => { - gearNames.push(''+(1+i)); + gearNames.push('' + (1 + i)); }); const allGears: HTMLDivElement[] = []; gearNames.forEach(name => { @@ -225,7 +225,7 @@ export class TachometerElement extends HTMLElement { this.dynamicItems.push(new DynamicProp(gears, () => { const currentGear = this.controller!.transmission.gear; allGears.forEach((gear, i) => { - gear.classList.toggle('active', (i-1) === currentGear); + gear.classList.toggle('active', (i - 1) === currentGear); }) })); return gears; @@ -237,8 +237,8 @@ export class TachometerElement extends HTMLElement { ctx.beginPath(); const angle = this.calculateRPMAngle(this.controller!.engine.rpm); - const [xS,yS] = this.getRadialPoint(angle, 6) - const [xE,yE] = this.getRadialPoint(angle, 50) + const [xS, yS] = this.getRadialPoint(angle, 6) + const [xE, yE] = this.getRadialPoint(angle, 50) ctx.strokeStyle = 'red'; ctx.lineWidth = 3; diff --git a/basic-examples/src/util/vehicle-utils.ts b/basic-examples/src/util/vehicle-utils.ts index 97ff2bc..f3fb1c1 100644 --- a/basic-examples/src/util/vehicle-utils.ts +++ b/basic-examples/src/util/vehicle-utils.ts @@ -14,9 +14,9 @@ import { loadImage, getImagePixels, createTexture, createHeightField } from "./e import { Texture } from "@babylonjs/core/Materials/Textures/texture"; export interface VehicleInput { - direction: Vector3, - handbrake: boolean, - boost: boolean; + direction: Vector3, + handbrake: boolean, + boost: boolean; } class VehicleKeyCodes extends BaseKeyCodes { @@ -33,9 +33,9 @@ export async function loadTrack(scene: Scene) { const buffer = getImagePixels(svg); const terrainMaterial = new TerrainMaterial('terrain', scene); - terrainMaterial.mixTexture = await createTexture( await loadImage('race_track_mix.svg', 824, 824), Texture.NEAREST_NEAREST); + terrainMaterial.mixTexture = await createTexture(await loadImage('race_track_mix.svg', 824, 824), Texture.NEAREST_NEAREST); const t1 = terrainMaterial.diffuseTexture1 = new Texture('textures/dirt.jpg'); - const t2 = terrainMaterial.diffuseTexture2 = new Texture('textures/grass.jpg'); + const t2 = terrainMaterial.diffuseTexture2 = new Texture('textures/grass.jpg'); const t3 = terrainMaterial.diffuseTexture3 = new Texture('textures/bush.jpg'); t1.uScale = t1.vScale = t2.uScale = t2.vScale = t3.uScale = t3.vScale = 50; const heightField = createHeightField(buffer, terrainMaterial, 824, 0.5, 0, 30); @@ -43,8 +43,8 @@ export async function loadTrack(scene: Scene) { } function createCommandButton(text: string, index: number) { - const state = { pressed: false}; - const button = Button.CreateSimpleButton('button-'+text, text); + const state = { pressed: false }; + const button = Button.CreateSimpleButton('button-' + text, text); button.color = "white"; button.background = "green"; const screenSize = CameraCombinedInput.getScreenSize(); @@ -85,10 +85,10 @@ export function setupVehicleInput(scene: Scene): { input: VehicleInput, camera: if (keyboard.BACKWARD) input.direction.z -= 1; if (keyboard.BRAKE) input.handbrake = true; if (keyboard.BOOST) input.boost = true; - if(breakButtonDown.pressed) { + if (breakButtonDown.pressed) { input.handbrake = true; } - if(boostButtonDown.pressed) { + if (boostButtonDown.pressed) { input.boost = true; }