react-three-game 0.0.87 → 0.0.88

package/dist/tools/prefabeditor/components/SoundComponent.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { useThree } from '@react-three/fiber';
 import { SoundPicker } from '../../assetviewer/page';
-import { sound as soundManager } from '../../../helpers/SoundManager';
 import { useAssetRuntime, useEntityRuntime } from '../assetRuntime';
 import { gameEvents } from '../GameEvents';
 import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
@@ -78,6 +76,17 @@ function payloadMatchesNode(nodeId, payload) {
     ].filter((value) => typeof value === 'string');
     return relatedNodeIds.length > 0 ? relatedNodeIds.includes(nodeId) : true;
 }
+function playBufferedAudio(audio, buffer, properties) {
+    void audio.listener.context.resume();
+    if (audio.isPlaying) {
+        audio.stop();
+    }
+    audio.setBuffer(buffer);
+    audio.setLoop(Boolean(properties.loop));
+    audio.setPlaybackRate(getPitchValue(properties));
+    audio.setVolume(getVolumeValue(properties));
+    audio.play();
+}
 function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const clips = Array.isArray(component.properties.clips)
         ? component.properties.clips.map((clip) => typeof clip === 'string' ? clip : '')
@@ -99,7 +108,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const removeClip = (index) => {
         setClips(clips.filter((_, clipIndex) => clipIndex !== index));
     };
-    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "player:footstep" }), _jsx(FieldRenderer, { fields: [
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "player:footstep" }), _jsx(BooleanField, { name: "autoplay", label: "Autoplay", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(BooleanField, { name: "loop", label: "Loop", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(FieldRenderer, { fields: [
                     {
                         name: 'clipMode',
                         label: 'Clip Mode',
@@ -133,8 +142,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
 function SoundComponentView({ properties, children }) {
     const { getSound } = useAssetRuntime();
     const { editMode, nodeId } = useEntityRuntime();
-    const { camera } = useThree();
-    const { eventName, positional = false, refDistance = 1, maxDistance = 24, rolloffFactor = 1, distanceModel = 'inverse' } = properties;
+    const { eventName, autoplay = false, positional = false, refDistance = 1, maxDistance = 24, rolloffFactor = 1, distanceModel = 'inverse' } = properties;
     const sequenceIndexRef = useRef(0);
     const listenerRef = useRef(null);
     const positionalAudioRef = useRef(null);
@@ -142,35 +150,16 @@ function SoundComponentView({ properties, children }) {
     if (!listenerRef.current) {
         listenerRef.current = getSharedAudioListener();
     }
-    useEffect(() => {
-        var _a;
-        if (!positional) {
-            return;
-        }
-        const listener = listenerRef.current;
-        if (!listener) {
-            return;
-        }
-        if (listener.parent !== camera) {
-            (_a = listener.parent) === null || _a === void 0 ? void 0 : _a.remove(listener);
-            camera.add(listener);
-        }
-        return () => {
-            if (listener.parent === camera) {
-                camera.remove(listener);
-            }
-        };
-    }, [camera, positional]);
     useEffect(() => {
         const audio = positionalAudioRef.current;
         if (!audio) {
             return;
         }
-        audio.setRefDistance(refDistance);
-        audio.setMaxDistance(maxDistance);
-        audio.setRolloffFactor(rolloffFactor);
-        audio.setDistanceModel(distanceModel);
-    }, [distanceModel, maxDistance, refDistance, rolloffFactor]);
+        audio.setRefDistance(positional ? refDistance : Math.max(refDistance, 1));
+        audio.setMaxDistance(positional ? maxDistance : 1000000);
+        audio.setRolloffFactor(positional ? rolloffFactor : 0);
+        audio.setDistanceModel(positional ? distanceModel : 'inverse');
+    }, [distanceModel, maxDistance, positional, refDistance, rolloffFactor]);
     useEffect(() => {
         if (editMode || paths.length === 0 || !eventName) {
             return;
@@ -182,38 +171,35 @@ function SoundComponentView({ properties, children }) {
             const clip = pickClip(paths, mode, sequenceIndexRef);
             if (!clip)
                 return;
-            const pitch = getPitchValue(properties);
-            const volume = getVolumeValue(properties);
-            if (!positional) {
-                const loadedBuffer = getSound(clip);
-                if (loadedBuffer && !soundManager.hasBuffer(clip)) {
-                    soundManager.setBuffer(clip, loadedBuffer);
-                }
-                if (soundManager.hasBuffer(clip)) {
-                    soundManager.playSync(clip, { pitch, volume });
-                    return;
-                }
-                void soundManager.play(clip, { pitch, volume });
-                return;
-            }
             const audio = positionalAudioRef.current;
-            const listener = listenerRef.current;
             const buffer = getSound(clip);
-            if (!audio || !listener || !buffer) {
+            if (!audio || !buffer) {
                 return;
             }
-            void listener.context.resume();
-            if (audio.isPlaying) {
+            playBufferedAudio(audio, buffer, properties);
+        });
+    }, [editMode, eventName, getSound, mode, nodeId, paths, properties]);
+    useEffect(() => {
+        if (editMode || !autoplay || paths.length === 0) {
+            return;
+        }
+        const clip = pickClip(paths, mode, sequenceIndexRef);
+        if (!clip) {
+            return;
+        }
+        const audio = positionalAudioRef.current;
+        const buffer = getSound(clip);
+        if (!audio || !buffer) {
+            return;
+        }
+        playBufferedAudio(audio, buffer, properties);
+        return () => {
+            if (audio === null || audio === void 0 ? void 0 : audio.isPlaying) {
                 audio.stop();
             }
-            audio.setBuffer(buffer);
-            audio.setLoop(false);
-            audio.setPlaybackRate(pitch);
-            audio.setVolume(volume);
-            audio.play();
-        });
-    }, [editMode, eventName, getSound, mode, nodeId, paths, positional, properties]);
-    return (_jsxs(_Fragment, { children: [positional && listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
+        };
+    }, [autoplay, editMode, getSound, mode, paths, properties]);
+    return (_jsxs(_Fragment, { children: [listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
 }
 const SoundComponent = {
     name: 'Sound',
@@ -221,6 +207,8 @@ const SoundComponent = {
     View: SoundComponentView,
     defaultProperties: {
         eventName: '',
+        autoplay: false,
+        loop: false,
         clips: [],
         clipMode: 'single',
         positional: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.87",
+  "version": "0.0.88",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",