Allow to set effects as initially disabled

Core/GDCore/Project/Effect.cpp

@@ -15,7 +15,9 @@ void Effect::SerializeTo(SerializerElement& element) const {
   element.SetAttribute("name", GetName());
   element.SetAttribute("effectType", GetEffectType());
   if (IsFolded()) element.SetBoolAttribute("folded", true);
-
+  if (!IsEnabled()) {
+    element.SetBoolAttribute("disabled", true);
+  }
   SerializerElement& doubleParametersElement =
       element.AddChild("doubleParameters");
   for (auto& parameter : doubleParameters)
@@ -45,6 +47,7 @@ void Effect::UnserializeFrom(const SerializerElement& element) {
       // end of compatibility code
       ));
   SetFolded(element.GetBoolAttribute("folded", false));
+  SetEnabled(!element.GetBoolAttribute("disabled", false));
 
   doubleParameters.clear();
   const SerializerElement& doubleParametersElement =

Core/GDCore/Project/Effect.h

@@ -34,6 +34,11 @@ class GD_CORE_API Effect {
   void SetFolded(bool fold = true) { folded = fold; }
   bool IsFolded() const { return folded; }
 
+  void SetEnabled(bool isEnabled_) {
+    isEnabled = isEnabled_;
+  }
+  bool IsEnabled() const { return isEnabled; }
+
   void SetDoubleParameter(const gd::String &name, double value) {
     doubleParameters[name] = value;
   }
@@ -105,6 +110,7 @@ class GD_CORE_API Effect {
   bool folded;
   gd::String name;        ///< The name of the layer.
   gd::String effectType;  ///< The name of the effect to apply.
+  bool isEnabled = true; ///< Enable the effect at the beginning of the scene, at its object creation or in the editor.
   std::map<gd::String, double> doubleParameters; ///< Values of parameters being doubles, keyed by names.
   std::map<gd::String, gd::String> stringParameters; ///< Values of parameters being strings, keyed by names.
   std::map<gd::String, bool> booleanParameters; ///< Values of parameters being booleans, keyed by names.

GDJS/Runtime/RuntimeLayer.ts

@@ -115,7 +115,11 @@ namespace gdjs {
       );
       this.show(!this._hidden);
       for (let i = 0; i < layerData.effects.length; ++i) {
-        this.addEffect(layerData.effects[i]);
+        const effectData = layerData.effects[i];
+        this.addEffect(effectData);
+        if (effectData.disabled) {
+          this.enableEffect(effectData.name, false);
+        }
       }
     }
 

GDJS/Runtime/debugger-client/hot-reloader.ts

@@ -1252,10 +1252,19 @@ namespace gdjs {
                 hotReloadSucceeded =
                   runtimeObject.updateAllEffectParameters(newEffectData) &&
                   hotReloadSucceeded;
+                if (oldEffectData.disabled !== newEffectData.disabled) {
+                  runtimeObject.enableEffect(
+                    newEffectData.name,
+                    !newEffectData.disabled
+                  );
+                }
               } else {
                 // Another effect type was applied
                 runtimeObject.removeEffect(oldEffectData.name);
                 runtimeObject.addEffect(newEffectData);
+                if (newEffectData.disabled) {
+                  runtimeObject.enableEffect(newEffectData.name, false);
+                }
               }
             });
             if (!hotReloadSucceeded) {
@@ -1279,6 +1288,9 @@ namespace gdjs {
           runtimeObjects.forEach((runtimeObject) => {
             hotReloadSucceeded =
               runtimeObject.addEffect(newEffectData) && hotReloadSucceeded;
+            if (newEffectData.disabled) {
+              runtimeObject.enableEffect(newEffectData.name, false);
+            }
           });
           if (!hotReloadSucceeded) {
             this._logs.push({
@@ -1470,6 +1482,9 @@ namespace gdjs {
               // Effect changed type, consider it was removed and added back.
               runtimeLayer.removeEffect(name);
               runtimeLayer.addEffect(newEffectData);
+              if (newEffectData.disabled) {
+                runtimeLayer.enableEffect(newEffectData.name, false);
+              }
             } else {
               this._hotReloadRuntimeLayerEffect(
                 oldEffectData,
@@ -1489,6 +1504,9 @@ namespace gdjs {
         if (!oldEffectData && !runtimeLayer.hasEffect(name)) {
           // Effect was added
           runtimeLayer.addEffect(newEffectData);
+          if (newEffectData.disabled) {
+            runtimeLayer.enableEffect(newEffectData.name, false);
+          }
         }
       });
     }
@@ -1499,6 +1517,9 @@ namespace gdjs {
       runtimeLayer: gdjs.RuntimeLayer,
       effectName: string
     ): void {
+      if (oldEffectData.disabled !== newEffectData.disabled) {
+        runtimeLayer.enableEffect(newEffectData.name, !newEffectData.disabled);
+      }
       // We consider oldEffectData.effectType and newEffectData.effectType
       // are the same - it's responsibility of the caller to verify this.
       for (let parameterName in newEffectData.booleanParameters) {

GDJS/Runtime/runtimeobject.ts

@@ -248,11 +248,15 @@ namespace gdjs {
       this._totalForce = new gdjs.Force(0, 0, 0);
       this._behaviorsTable = new Hashtable();
       for (let i = 0; i < objectData.effects.length; ++i) {
+        const effectData = objectData.effects[i];
         this._runtimeScene
           .getGame()
           .getEffectsManager()
-          .initializeEffect(objectData.effects[i], this._rendererEffects, this);
-        this.updateAllEffectParameters(objectData.effects[i]);
+          .initializeEffect(effectData, this._rendererEffects, this);
+        this.updateAllEffectParameters(effectData);
+        if (effectData.isDisabled) {
+          this.enableEffect(effectData.name, false);
+        }
       }
       //Also contains the behaviors: Used when a behavior is accessed by its name ( see getBehavior ).
       for (let i = 0, len = objectData.behaviors.length; i < len; ++i) {
@@ -360,11 +364,15 @@ namespace gdjs {
 
       // Reinitialize effects.
       for (let i = 0; i < objectData.effects.length; ++i) {
+        const effectData = objectData.effects[i];
         this._runtimeScene
           .getGame()
           .getEffectsManager()
-          .initializeEffect(objectData.effects[i], this._rendererEffects, this);
-        this.updateAllEffectParameters(objectData.effects[i]);
+          .initializeEffect(effectData, this._rendererEffects, this);
+        this.updateAllEffectParameters(effectData);
+        if (effectData.disabled) {
+          this.enableEffect(effectData.name, false);
+        }
       }
 
       // Make sure to delete existing timers.

GDJS/Runtime/types/project-data.d.ts

@@ -497,6 +497,7 @@ declare interface CameraData {
 declare interface EffectData {
   effectType: string;
   name: string;
+  disabled?: boolean;
   doubleParameters: {
     [name: string]: number;
   };

GDevelop.js/Bindings/Bindings.idl

@@ -1064,6 +1064,8 @@ interface Effect {
 
   void SetFolded(boolean val);
   boolean IsFolded();
+  void SetEnabled(boolean val);
+  boolean IsEnabled();
 
   void SetDoubleParameter([Const] DOMString name, double value);
   double GetDoubleParameter([Const] DOMString name);

GDevelop.js/types.d.ts

@@ -872,6 +872,8 @@ export class Effect extends EmscriptenObject {
   getEffectType(): string;
   setFolded(val: boolean): void;
   isFolded(): boolean;
+  setEnabled(val: boolean): void;
+  isEnabled(): boolean;
   setDoubleParameter(name: string, value: number): void;
   getDoubleParameter(name: string): number;
   hasDoubleParameter(name: string): boolean;

GDevelop.js/types/gdeffect.js

@@ -7,6 +7,8 @@ declare class gdEffect {
   getEffectType(): string;
   setFolded(val: boolean): void;
   isFolded(): boolean;
+  setEnabled(val: boolean): void;
+  isEnabled(): boolean;
   setDoubleParameter(name: string, value: number): void;
   getDoubleParameter(name: string): number;
   hasDoubleParameter(name: string): boolean;

newIDE/app/src/EffectsList/CompactEffectPropertiesEditor.js

@@ -16,11 +16,13 @@ export const CompactEffectPropertiesEditor = ({
   effect,
   effectMetadata,
   resourceManagementProps,
+  onPropertyModified,
 }: {|
   project: gdProject,
   effect: gdEffect,
   effectMetadata: ?EnumeratedEffectMetadata,
   resourceManagementProps: ResourceManagementProps,
+  onPropertyModified: () => void,
 |}) => {
   if (!effectMetadata) return null;
 
@@ -31,6 +33,7 @@ export const CompactEffectPropertiesEditor = ({
       instances={[effect]}
       resourceManagementProps={resourceManagementProps}
       onRefreshAllFields={noRefreshOfAllFields}
+      onInstancesModified={onPropertyModified}
     />
   );
 };

newIDE/app/src/EffectsList/index.js

@@ -56,6 +56,9 @@ import ResponsiveFlatButton from '../UI/ResponsiveFlatButton';
 import { Accordion, AccordionHeader, AccordionBody } from '../UI/Accordion';
 import { type Field } from '../CompactPropertiesEditor';
 import { ProjectScopedContainersAccessor } from '../InstructionOrExpression/EventsScope';
+import InlineCheckbox from '../UI/InlineCheckbox';
+import VisibilityIcon from '../UI/CustomSvgIcons/Visibility';
+import VisibilityOffIcon from '../UI/CustomSvgIcons/VisibilityOff';
 
 const gd: libGDevelop = global.gd;
 
@@ -302,6 +305,24 @@ const Effect = React.forwardRef(
                   </SelectField>
                 </Line>
               </ResponsiveLineStackLayout>
+              <InlineCheckbox
+                id="effect-visibility"
+                paddingSize="small"
+                checkedIcon={<VisibilityIcon />}
+                uncheckedIcon={<VisibilityOffIcon />}
+                checked={effect.isEnabled()}
+                onCheck={(e, checked) => {
+                  effect.setEnabled(checked);
+                  forceUpdate();
+                }}
+                tooltipOrHelperText={
+                  effect.isEnabled() ? (
+                    <Trans>Hide effect</Trans>
+                  ) : (
+                    <Trans>Show effect</Trans>
+                  )
+                }
+              />
               <ElementWithMenu
                 element={
                   <IconButton size="small">