babylon.quarks-editor 0.28.0 → 0.29.0

package/src/react/ValueField.tsx

@@ -1,4 +1,5 @@
 import type {ValueGenerator} from 'babylon.quarks';
+import {RandomBetweenCurves} from 'babylon.quarks';
 import React from 'react';
 import {
     AnyGenerator,
@@ -8,6 +9,7 @@ import {
     buildScalar,
     readPieces,
     readScalar,
+    withCurves,
 } from '../core/values.js';
 import {CurveEditor} from './CurveEditor.js';
 import {NumberField, Row, SelectField} from './fields.js';
@@ -51,13 +53,15 @@ function isValueGenerator(generator: ScalarGenerator): generator is ValueGenerat
 }
 
 /**
- * Unity-like value field: Constant | Random Between Two Constants | Curve, bound to a quarks value
- * generator. With `curve={false}` it offers only the first two, for settings sampled once.
+ * Unity-like value field: Constant | Random Between Two Constants | Curve | Random Between Two
+ * Curves, bound to a quarks value generator. With `curve={false}` it offers only the first two,
+ * for settings sampled once.
  */
 export function ValueField(props: CurveValueFieldProps | ConstantValueFieldProps): React.ReactElement {
     const read = readScalar(props.generator);
     // A setting without curves shows a curve it was loaded with as a constant, so an edit replaces it.
-    const state: ScalarValueState = props.curve === false && read.mode === 'curve' ? {...read, mode: 'constant'} : read;
+    const curved = read.mode === 'curve' || read.mode === 'curves';
+    const state: ScalarValueState = props.curve === false && curved ? {...read, mode: 'constant'} : read;
 
     const emit = (generator: ScalarGenerator) => {
         if (props.curve !== false) {
@@ -76,9 +80,19 @@ export function ValueField(props: CurveValueFieldProps | ConstantValueFieldProps
                     options={[
                         {value: 'constant', label: 'Constant'},
                         {value: 'random', label: 'Random between two'},
-                        ...(props.curve !== false ? [{value: 'curve' as const, label: 'Curve'}] : []),
+                        ...(props.curve !== false
+                            ? [
+                                  {value: 'curve' as const, label: 'Curve'},
+                                  {value: 'curves' as const, label: 'Random between two curves'},
+                              ]
+                            : []),
                     ]}
-                    onChange={(mode) => commit({mode})}
+                    onChange={(mode) =>
+                        // Between one curve and two, every segment is kept; other switches start afresh.
+                        (mode === 'curve' || mode === 'curves') && curved
+                            ? emit(withCurves(props.generator, mode))
+                            : commit({mode})
+                    }
                 />
             </Row>
             {state.mode === 'constant' && (
@@ -105,6 +119,32 @@ export function ValueField(props: CurveValueFieldProps | ConstantValueFieldProps
                     />
                 </div>
             )}
+            {state.mode === 'curves' && (
+                <>
+                    {(['lower', 'upper'] as const).map((bound, index) => (
+                        <div key={bound} style={{marginTop: 6}}>
+                            <span style={captionStyle}>{bound}</span>
+                            <CurveEditor
+                                pieces={readPieces(props.generator, index === 1)}
+                                maxValue={props.curveMax}
+                                onChange={(pieces) =>
+                                    emit(
+                                        index === 0
+                                            ? new RandomBetweenCurves(
+                                                  buildCurve(pieces),
+                                                  buildCurve(readPieces(props.generator, true))
+                                              )
+                                            : new RandomBetweenCurves(
+                                                  buildCurve(readPieces(props.generator)),
+                                                  buildCurve(pieces)
+                                              )
+                                    )
+                                }
+                            />
+                        </div>
+                    ))}
+                </>
+            )}
         </>
     );
 }

package/src/react/behaviorModules.tsx

@@ -29,17 +29,19 @@ import {
     TextureSequencer,
     TurbulenceField,
     Vector3,
+    Vector3Function,
     VelocityOverLife,
     WidthOverLength,
 } from 'babylon.quarks';
 import React from 'react';
 import {EffectBinding} from '../core/binding.js';
 import {buildGradient, DEFAULT_GRADIENT_STOPS, findBehavior, readGradientStops} from '../core/colors.js';
-import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values.js';
-import {CurveEditor} from './CurveEditor.js';
+import {buildScalar, readScalar} from '../core/values.js';
+import {AxesCurveField} from './AxesCurveField.js';
 import {CheckboxField, NumberField, Row, SelectField} from './fields.js';
 import {GradientEditor} from './GradientEditor.js';
 import {iconStyle} from './icons.js';
+import {LifeCurveField} from './LifeCurveField.js';
 import type {TextureOption} from './modules.js';
 import {ModuleSection, type ModuleProps} from './ModuleSection.js';
 import {theme} from './theme.js';
@@ -94,10 +96,10 @@ export function SpeedOverLifeModule({binding}: ModuleProps) {
         >
             {(behavior) => (
                 <div style={{marginTop: 6}}>
-                    <CurveEditor
-                        pieces={readPieces(behavior.speed)}
+                    <LifeCurveField
+                        generator={behavior.speed}
                         maxValue={2}
-                        onChange={(pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces)))}
+                        onChange={(curve) => binding.apply(() => (behavior.speed = curve))}
                     />
                 </div>
             )}
@@ -119,12 +121,24 @@ export function LimitSpeedOverLifeModule({binding}: ModuleProps) {
             {(behavior) => (
                 <>
                     <div style={{marginTop: 6}}>
-                        <CurveEditor
-                            pieces={readPieces(behavior.speed)}
+                        <AxesCurveField
+                            generator={behavior.speed}
                             maxValue={8}
-                            onChange={(pieces) => binding.apply(() => (behavior.speed = buildCurve(pieces)))}
+                            onChange={(speed) => binding.apply(() => (behavior.speed = speed))}
                         />
                     </div>
+                    {behavior.speed instanceof Vector3Function && (
+                        <Row label="Space" hint="The axes each limit is measured along: the emitter's or the world's.">
+                            <SelectField
+                                value={behavior.space}
+                                options={[
+                                    {value: 'local', label: 'Local'},
+                                    {value: 'world', label: 'World'},
+                                ]}
+                                onChange={(v) => binding.apply(() => (behavior.space = v))}
+                            />
+                        </Row>
+                    )}
                     <Row label="Dampen">
                         <NumberField
                             value={behavior.dampen}
@@ -942,10 +956,10 @@ export function SizeBySpeedModule({binding}: ModuleProps) {
             {(behavior) => (
                 <>
                     <div style={{marginTop: 6}}>
-                        <CurveEditor
-                            pieces={readPieces(behavior.size)}
+                        <AxesCurveField
+                            generator={behavior.size}
                             maxValue={2}
-                            onChange={(pieces) => binding.apply(() => (behavior.size = buildCurve(pieces)))}
+                            onChange={(size) => binding.apply(() => (behavior.size = size))}
                         />
                     </div>
                     <SpeedRangeRows binding={binding} behavior={behavior} />
@@ -1015,10 +1029,10 @@ export function WidthOverTrailModule({binding}: ModuleProps) {
             {(behavior) => (
                 <>
                     <div style={{marginTop: 6}}>
-                        <CurveEditor
-                            pieces={readPieces(behavior.width)}
+                        <LifeCurveField
+                            generator={behavior.width}
                             maxValue={2}
-                            onChange={(pieces) => binding.apply(() => (behavior.width = buildCurve(pieces)))}
+                            onChange={(curve) => binding.apply(() => (behavior.width = curve))}
                         />
                     </div>
                     {/* Off: the curve multiplies the particle size. On: it is the width in world units (files from 0.21 and earlier). */}
@@ -1265,10 +1279,10 @@ export function TextureSheetModule({binding}: ModuleProps) {
                         )}
                     </Row>
                     <div style={{marginTop: 6}}>
-                        <CurveEditor
-                            pieces={readPieces(frameBehavior.frame)}
+                        <LifeCurveField
+                            generator={frameBehavior.frame}
                             maxValue={Math.max(1, tiles - 1)}
-                            onChange={(pieces) => binding.apply(() => (frameBehavior.frame = buildCurve(pieces)))}
+                            onChange={(curve) => binding.apply(() => (frameBehavior.frame = curve))}
                         />
                     </div>
                 </>

package/src/react/inspectorHints.ts

@@ -33,7 +33,7 @@ const INSPECTOR_HINTS: Record<string, string> = {
     Looping: 'When enabled, the effect restarts from the beginning after duration ends.',
     'World space': 'Simulates in world coordinates so moving the emitter does not drag existing particles.',
     'Scaling mode':
-        'What the emitter’s scale does to a world-space system: only the shape and sizes, or speeds and forces too (Unity’s Scaling Mode).',
+        'Which scale reaches the effect (Unity’s Scaling Mode): Local, the emitter’s own; Hierarchy, its parents’ too; Shape, the whole scale on the emission shape alone.',
     Prewarm: 'Simulates the effect once at start so it already looks mid-playback when play begins.',
     'Warm-up time':
         'Seconds of the cycle simulated before the first frame of a looping system (Niagara’s Warmup Time); 0 warms up a whole cycle, as Unity does.',

package/src/react/modules.tsx

@@ -20,10 +20,12 @@ import {
     BoxEmitFrom,
     ColorOverLife,
     ColorRange,
+    ConeEmitFrom,
     ConstantColor,
     ConstantValue,
     EulerGenerator,
     Gradient,
+    GridSampling,
     IntervalValue,
     RandomColor,
     RandomColorBetweenGradient,
@@ -56,8 +58,8 @@ import {
     getShapeType,
     readShapeParams,
 } from '../core/shapes.js';
-import {buildCurve, buildScalar, readPieces, readScalar} from '../core/values.js';
-import {CurveEditor} from './CurveEditor.js';
+import {buildCurve, buildScalar, readScalar} from '../core/values.js';
+import {AxesCurveField} from './AxesCurveField.js';
 import {GradientEditor} from './GradientEditor.js';
 import {InspectorInfoIcon} from './InspectorInfoIcon.js';
 import {ModuleSection, type ModuleProps} from './ModuleSection.js';
@@ -113,6 +115,7 @@ const PARAM_LABELS: {[key: string]: string} = {
     column: 'Columns',
     row: 'Rows',
     depth: 'Depth',
+    length: 'Length',
     speed: 'Speed (lengths/s)',
 };
 
@@ -260,18 +263,17 @@ export function MainModule({binding}: ModuleProps) {
             <Row label="World space">
                 <CheckboxField value={system.worldSpace} onChange={(v) => binding.apply((s) => (s.worldSpace = v))} />
             </Row>
-            {system.worldSpace && (
-                <Row label="Scaling mode">
-                    <SelectField<ScalingMode>
-                        value={system.scalingMode}
-                        options={[
-                            {value: 'shape', label: 'Shape (sizes and shape only)'},
-                            {value: 'hierarchy', label: 'Hierarchy (motion scales too)'},
-                        ]}
-                        onChange={(mode) => binding.apply((s) => (s.scalingMode = mode))}
-                    />
-                </Row>
-            )}
+            <Row label="Scaling mode">
+                <SelectField<ScalingMode>
+                    value={system.scalingMode}
+                    options={[
+                        {value: 'local', label: 'Local (own scale only)'},
+                        {value: 'hierarchy', label: 'Hierarchy (parents too)'},
+                        {value: 'shape', label: 'Shape (shape only)'},
+                    ]}
+                    onChange={(mode) => binding.apply((s) => (s.scalingMode = mode))}
+                />
+            </Row>
             <Row label="Prewarm">
                 <CheckboxField value={system.prewarm} onChange={(v) => binding.apply((s) => (s.prewarm = v))} />
             </Row>
@@ -318,6 +320,20 @@ export function MainModule({binding}: ModuleProps) {
                     onChange={(mode) => binding.apply((s) => (s.cullingMode = mode as CullingMode))}
                 />
             </Row>
+            <Row
+                label="Stop action"
+                hint="What the system does once it has finished, as Unity's Stop Action. The editor saves it but does not apply it, so previews replay."
+            >
+                <SelectField
+                    value={system.stopAction}
+                    options={[
+                        {value: 'none', label: 'None'},
+                        {value: 'disable', label: 'Disable'},
+                        {value: 'destroy', label: 'Destroy'},
+                    ]}
+                    onChange={(v) => binding.apply((s) => (s.stopAction = v))}
+                />
+            </Row>
             <ValueField
                 label="Start delay"
                 generator={system.startDelay}
@@ -725,17 +741,20 @@ export function ShapeModule({binding}: ModuleProps) {
                     onChange={(next) => binding.apply((s) => (s.emitterShape = createShape(next, params)))}
                 />
             </Row>
-            {keys.map((key) => (
-                <Row key={key} label={PARAM_LABELS[key]}>
-                    <NumberField
-                        value={params[key] as number}
-                        min={0}
-                        onChange={(v) =>
-                            binding.apply((s) => (s.emitterShape = createShape(type, {...params, [key]: v})))
-                        }
-                    />
-                </Row>
-            ))}
+            {keys
+                // A cone's Length only shapes Emit from Volume; Unity shows it for Cone Volume alone.
+                .filter((key) => key !== 'length' || params.coneEmitFrom === ConeEmitFrom.Volume)
+                .map((key) => (
+                    <Row key={key} label={PARAM_LABELS[key]}>
+                        <NumberField
+                            value={params[key] as number}
+                            min={0}
+                            onChange={(v) =>
+                                binding.apply((s) => (s.emitterShape = createShape(type, {...params, [key]: v})))
+                            }
+                        />
+                    </Row>
+                ))}
             {type === 'mesh_surface' && (
                 <Row label="Source mesh">
                     <SelectField
@@ -767,6 +786,34 @@ export function ShapeModule({binding}: ModuleProps) {
                     />
                 </Row>
             )}
+            {type === 'cone' && (
+                <Row label="Emit from">
+                    <SelectField
+                        value={params.coneEmitFrom}
+                        options={[
+                            {value: ConeEmitFrom.Base, label: 'Base'},
+                            {value: ConeEmitFrom.Volume, label: 'Volume'},
+                        ]}
+                        onChange={(coneEmitFrom) =>
+                            binding.apply((s) => (s.emitterShape = createShape(type, {...params, coneEmitFrom})))
+                        }
+                    />
+                </Row>
+            )}
+            {type === 'grid' && (
+                <Row label="Sampling">
+                    <SelectField
+                        value={params.sampling}
+                        options={[
+                            {value: GridSampling.Random, label: 'Random'},
+                            {value: GridSampling.Sequential, label: 'Sequential'},
+                        ]}
+                        onChange={(sampling) =>
+                            binding.apply((s) => (s.emitterShape = createShape(type, {...params, sampling})))
+                        }
+                    />
+                </Row>
+            )}
             {!SHAPES_WITHOUT_MODE_SPREAD.has(type) && (
                 <>
                     <Row label="Emit mode">
@@ -824,13 +871,13 @@ export function SizeOverLifeModule({binding}: ModuleProps) {
             }
         >
             <div style={{marginTop: 6}}>
-                <CurveEditor
-                    pieces={behavior ? readPieces(behavior.size) : [{start: 0, p: curve}]}
+                <AxesCurveField
+                    generator={behavior ? behavior.size : buildCurve([{start: 0, p: curve}])}
                     maxValue={2}
-                    onChange={(pieces) =>
+                    onChange={(size) =>
                         binding.apply((s) => {
                             removeBehavior(s, 'SizeOverLife');
-                            s.addBehavior(new SizeOverLife(buildCurve(pieces)));
+                            s.addBehavior(new SizeOverLife(size));
                         })
                     }
                 />
@@ -1629,6 +1676,48 @@ export function RendererModule({
                     />
                 )}
             </Row>
+            {system.maxParticles !== undefined && system.renderMode !== RenderMode.Trail && (
+                <Row
+                    label="Ring buffer"
+                    hint="What a full system does with new particles, as Unity's Ring Buffer Mode."
+                >
+                    <SelectField
+                        value={system.ringBufferMode}
+                        options={[
+                            {value: 'disabled', label: 'Disabled'},
+                            {value: 'pauseUntilReplaced', label: 'Pause until replaced'},
+                            {value: 'loopUntilReplaced', label: 'Loop until replaced'},
+                        ]}
+                        onChange={(v) => binding.apply((s) => (s.ringBufferMode = v))}
+                    />
+                </Row>
+            )}
+            {system.maxParticles !== undefined &&
+                system.renderMode !== RenderMode.Trail &&
+                system.ringBufferMode === 'loopUntilReplaced' && (
+                    <Row label="Loop range" hint="The part of its life a particle plays again, from 0 to 1.">
+                        <div style={{display: 'flex', gap: 6}}>
+                            {(['x', 'y'] as const).map((end) => (
+                                <NumberField
+                                    key={end}
+                                    value={system.ringBufferLoopRange[end]}
+                                    min={0}
+                                    step={0.05}
+                                    onChange={(v) =>
+                                        binding.apply((s) => {
+                                            const next = s.ringBufferLoopRange.clone();
+                                            next[end] = Math.min(1, Math.max(0, v));
+                                            s.ringBufferLoopRange = new Vector2(
+                                                Math.min(next.x, next.y),
+                                                Math.max(next.x, next.y)
+                                            );
+                                        })
+                                    }
+                                />
+                            ))}
+                        </div>
+                    </Row>
+                )}
             {system.renderMode !== RenderMode.Mesh && system.renderMode !== RenderMode.Trail && (
                 <Row label="Pivot">
                     <div style={{display: 'flex', gap: 6}}>
@@ -1730,6 +1819,12 @@ export function RendererModule({
             <Row label="Apply fog">
                 <CheckboxField value={system.applyFog} onChange={(v) => binding.apply((s) => (s.applyFog = v))} />
             </Row>
+            <Row label="Image processing">
+                <CheckboxField
+                    value={system.applyImageProcessing}
+                    onChange={(v) => binding.apply((s) => (s.applyImageProcessing = v))}
+                />
+            </Row>
             <Row label="Soft particles">
                 <CheckboxField
                     value={system.softParticles}