Layered animations in Blender?

[DylanKay (Dylan)]

Hello,
I’d like to build a scene with a couple of singing characters that can be turned on or off individually during the song. Is there a way to switch between an idle and the singing animation while staying in the timeline? Using transitions starts the animation from the beginning, which is not what I’m looking for.
In my mind I’d have two timelines with the same length, and I could transition between the two.

[needle-assistant (Needle Engine Assistant)]

Hello Dylan!

To achieve the goal of switching between an idle and singing animation in Blender while maintaining the timeline position, you can utilize the NLA (Non-Linear Animation) editor along with action strips. Here’s a step-by-step outline for setting it up:

1. Create Animations: Ensure you have two animations ready, one for idle and one for singing.

2. Use the NLA Editor:

   • In the NLA Editor, push your action strips for both animations onto separate tracks.
   • You can create a dedicated track for idle and another for singing.

3. Adjust Strips:

   • Select each strip and adjust their “Blending” option to “Add” or “Replace” based on how you want them to interact. “Add” will overlay animations, while “Replace” will switch completely between them.

4. Set Keyframes:

   • Create keyframes to control the activation of each animation track. You can keyframe the influence of each action strip to blend or switch between animations seamlessly.

5. Animation Timeline Control:

   • Ensure both strips have the same length and are aligned in terms of timing to allow for seamless transitions.

Here’s a pseudo-code snippet for a basic implementation:

1. Create two animation strips in NLA for idle and singing.
2. For each key event (button press to switch):
   a. Check current active animation.
   b. If idle, enable singing and set influence to 1, set idle influence to 0.
   c. If singing, enable idle and set influence to 1, set singing influence to 0.
3. Maintain timeline position throughout the process.

Keyframes Example:

• Keyframe the influence properties of the NLA strips to switch over time.

For more detailed steps and visual guidance, you can refer to the Needle Engine documentation related to animation .

If you want further clarification or examples, feel free to ask!

3 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[marcel (marwi)]

Hello,

are you using NLA tracks or an animator controller?

I think what you’re trying to do could be done with NLA tracks (as the bot suggested by overlaying your two animations in separate strips).

Each NLA track becomes an Timeline AnimationTrack at runtime. You can access it in a custom script by getting the PlayableDirector. Then something like the following in onBeforeRender should allow you to individually blend tracks. (this would need to be done every frame right now in onBeforeRender)

for(const track of director.forEachTrack()) {
  if(track instanceOf AnimationTrackHandler) { 
    for(const action of track.actions)  
       action.weight *= <your factor per track>
    }
  }
}

I think we can make this a bit easier in a future version but this should work

[DylanKay (Dylan)]

That sounds like it’s exactly what I’m looking for, thanks! I’ll give it a try =)

[DylanKay (Dylan)]

Okay, so I have my scene with the two NLA tracks with the same length. I’m not quite sure how I continue from here (I’m not really a programmer I’m afraid)

[needle-assistant (Needle Engine Assistant)]

Hi Dylan!

No problem! I’ll guide you through the steps to set up the NLA control without needing advanced programming skills. You’ll mainly work with keyframes and Blender’s interface:

1. Select Your NLA Tracks:

   • Open the NLA Editor and ensure your two action strips (idle and singing) are visible.

2. Add Influence Keyframes:

   • Select the idle animation strip. In the right panel, look for the “Influence” slider.
   • Move the timeline cursor to where you want the animation to change (e.g., the beginning of the song).
   • Hover over the “Influence” slider and press I to insert a keyframe at the current value (e.g., 1 for idle).
   • Move the timeline cursor a few frames forward where you want the switch to happen.
   • Change the influence of idle to 0 (completely off) and press I again to insert another keyframe.

3. Repeat for Singing Animation:

   • Select the singing animation strip. Repeat the steps above, creating keyframes that control the influence.
   • For example, start at the same frame as your previous idle keyframe. Set the singing influence to 0 and keyframe it. Move a few frames forward and set the influence to 1, then keyframe it.

4. Testing the Transition:

   • Play the animation in the timeline (Spacebar) to see how your character transitions between idle and singing.
   • You may adjust the timing and influences by moving keyframes or changing their values until it feels right.

5. Using Controls:

   • To make it interactive, you might set up simple UI buttons or key bindings that adjust these influence values during playback.

By controlling the influence of each animation strip with keyframes, you can effectively switch between the idle and singing animations while maintaining your timeline position.

If you have more specific parts of the process you’d like to know about or need help with the UI, feel free to ask!

3 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[DylanKay (Dylan)]

I have the keyframes in place, but how exactly do I set up the UI Buttons to influence these values?

[needle-assistant (Needle Engine Assistant)]

Hi Dylan!

To set up UI buttons in Blender that can influence your NLA tracks’ values, you will typically use a driver or Python scripting. Here’s a simpler way to create a UI button using a basic driver approach:

1. Create Custom Properties:

   • Select the object that has the animations.
   • Go to the Object Properties panel (the orange square icon).
   • Scroll down to the bottom and click on “Add” under Custom Properties.
   • Name the property (e.g., “singingInfluence”).
   • Set its default value to 0.

2. Link the Custom Property to Influence:

   • Select the singing animation strip in the NLA Editor.
   • Find the “Influence” slider for the action strip.
   • Right-click on the influence slider and select “Add Driver.”
   • In the Driver Editor, set the driver type to “Scripted Expression.”
   • Set the variable to fetch from your custom property. You may need to set the Object field to the one you created the custom property for and the Property field to the name of your property (e.g., “singingInfluence”).

3. Set Up the UI Button:

   • Switch to the “Layout” workspace in Blender for easier UI management.
   • Open a new window (e.g., “Text Editor”) and create a new text file.
   • Write a simple script to create UI buttons for interaction:

import bpy

class SimpleOperator(bpy.types.Operator):
    bl_idname = "object.sing_button"
    bl_label = "Start Singing"

    def execute(self, context):
        context.object["singingInfluence"] = 1  # Set influence to singing
        return {'FINISHED'}

class SimpleIdleOperator(bpy.types.Operator):
    bl_idname = "object.idle_button"
    bl_label = "Go Idle"

    def execute(self, context):
        context.object["singingInfluence"] = 0  # Set influence to idle
        return {'FINISHED'}

def draw_func(self, context):
    layout = self.layout
    layout.operator("object.sing_button")
    layout.operator("object.idle_button")

def register():
    bpy.utils.register_class(SimpleOperator)
    bpy.utils.register_class(SimpleIdleOperator)
    bpy.types.VIEW3D_PT_tools_object.append(draw_func)

def unregister():
    bpy.utils.unregister_class(SimpleOperator)
    bpy.utils.unregister_class(SimpleIdleOperator)
    bpy.types.VIEW3D_PT_tools_object.remove(draw_func)

if __name__ == "__main__":
    register()

4. Run the Script:

   • Select “Run Script” in the Text Editor. This will add buttons to the sidebar (N-panel) under the Tools tab.

5. Testing:

   • Click the “Start Singing” and “Go Idle” buttons in the N-panel to see how they influence the animation.

After completing these steps, you should be able to click the UI buttons to change the influence values of your animations during playback.

If you need further explanation or assistance with any of these steps, let me know!

2 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[DylanKay (Dylan)]

No, this is not what I’m looking for, sorry. I want to be able to switch between the two tracks in Needle, not in Blender.

[needle-assistant (Needle Engine Assistant)]

Hi Dylan!

To switch between animation tracks in Needle Engine, you can use Component-based scripting logic. Here’s how you can set up an interactive switch between your idle and singing animations using Needle’s components:

1. Create a new Behavior Script:

   • In your project, create a new script that will handle the animation switching.

2. Basic Structure:

   • Here’s a pseudocode outline of how your script might look:

import { Component, AnimationComponent } from "@needle-tools/engine";

class AnimationSwitcher extends Component {
    constructor() {
        super();
        this.isSinging = false; // Track which animation is active
    }

    // Method to switch animation
    toggleAnimation() {
        this.isSinging = !this.isSinging;
        const animComponent = this.getComponent(AnimationComponent);

        if (this.isSinging) {
            animComponent.playAnimation('SingingAnimation'); // Replace with your singing animation name
        } else {
            animComponent.playAnimation('IdleAnimation'); // Replace with your idle animation name
        }
    }

    // Example: Bind the toggle to an input action or button click
    onUpdate(deltaTime) {
        if (this.input.getKeyDown('space')) { // Using space as a toggle
            this.toggleAnimation();
        }
    }
}

// Register the component
export default AnimationSwitcher;

3. Attach the Component:

   • Attach this component to the GameObject that hosts your animations in Needle.

4. Setup Animations:

   • Ensure the animation names specified in playAnimation match exactly with the animations you’ve imported into Needle Engine.

5. Triggering the Switch:

   • In the onUpdate method, you can change the key from space to whatever key or UI button you want to use for triggering the switch.

6. Testing:

   • Play the scene in Needle Engine and press the designated key (e.g., space) to switch between animations.

With this setup, you will be able to toggle between the two animation tracks in Needle using a simple key press or button interaction.

If you need further assistance or want more details on specific parts, feel free to ask!

3 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[DylanKay (Dylan)]

This looks better. I want the switch to happen when I click on the object. Can you please give me a step by step guide on how to do this? I’m new to this and not a programmer.

[needle-assistant (Needle Engine Assistant)]

Hi Dylan!

Absolutely! Here’s a step-by-step guide to switch animations when clicking on the object in Needle Engine. We’ll modify the previous script to handle mouse interactions.

Step-by-Step Guide:

1. Create the AnimationSwitcher Script:

   • In your project, create a new script file named AnimationSwitcher.js.

2. Write the Script:

   • In AnimationSwitcher.js, write the following code:

import { Component, AnimationComponent, Input } from "@needle-tools/engine";

class AnimationSwitcher extends Component {
    constructor() {
        super();
        this.isSinging = false; // Track the active animation state
    }

    // Method to switch animation
    toggleAnimation() {
        const animComponent = this.getComponent(AnimationComponent);

        if (this.isSinging) {
            animComponent.playAnimation('IdleAnimation'); // Replace with your idle animation name
        } else {
            animComponent.playAnimation('SingingAnimation'); // Replace with your singing animation name
        }

        // Toggle the state
        this.isSinging = !this.isSinging;
    }

    // Listen for click events
    onMouseDown(event) {
        this.toggleAnimation(); // Call toggle on mouse down
    }

    // Register the event handler for mouse down
    onEnable() {
        this.input.addMouseDownListener(this.onMouseDown.bind(this));
    }

    // Cleanup on disable
    onDisable() {
        this.input.removeMouseDownListener(this.onMouseDown.bind(this));
    }
}

// Register the component
export default AnimationSwitcher;

3. Attach the Component to the Object:

   • Select the GameObject in your Needle Engine scene that you want to make clickable (the one with the animations).
   • In the Inspector panel, add the AnimationSwitcher component to the GameObject.

4. Set up Animation Names:

   • Ensure that the animation names 'IdleAnimation' and 'SingingAnimation' in the script match exactly with the animations you’ve created in Needle.

5. Test the Interaction:

   • Run your scene in Needle Engine.
   • Click on the GameObject that has the AnimationSwitcher component attached to toggle between idle and singing animations.

6. Debugging (if necessary):

   • If you notice issues like animations not switching, double-check the animation names in your script and ensure they exist in the AnimationComponent.

By following these steps, you should successfully implement animation switching on a mouse click. If you have any questions or need further clarification, feel free to ask!

1 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[DylanKay (Dylan)]

That sounds good. I am working in Blender, though. Can you give me the same step by step guide for working in Blender?

[needle-assistant (Needle Engine Assistant)]

Hi Dylan!

Certainly! Here’s a step-by-step guide to set up clicking on an object in Blender to switch between animations using the NLA Editor and scripting.

Step-by-Step Guide for Blender:

1. Open Your Scene:

   • Ensure your scene in Blender has the two animations (idle and singing) set up in the NLA Editor.

2. Create a Custom Property:

   • Select the object with the animations.
   • In the Object Properties panel (orange square icon), scroll down to Custom Properties and click “Add.”
   • Name this property (e.g., “isSinging”) and set its default value to 0.

3. Add a Python Script:

   • Open the Text Editor within Blender and create a new script. Name it animation_switcher.py.

4. Write the Script:

   • In the script, write the following code:

import bpy

class AnimationSwitcher(bpy.types.Operator):
    bl_idname = "object.switch_animation"
    bl_label = "Switch Animation"

    def execute(self, context):
        obj = context.object
        prop = obj["isSinging"]

        if prop == 0:
            obj.animation_data.action = bpy.data.actions["SingingAnimation"] # Change the name accordingly
            obj["isSinging"] = 1
        else:
            obj.animation_data.action = bpy.data.actions["IdleAnimation"] # Change the name accordingly
            obj["isSinging"] = 0

        return {'FINISHED'}

def register():
    bpy.utils.register_class(AnimationSwitcher)

def unregister():
    bpy.utils.unregister_class(AnimationSwitcher)

if __name__ == "__main__":
    register()

5. Modify Animation Names:

   • Ensure the action names in the script ("SingingAnimation" and "IdleAnimation") match exactly with the names of your animations in Blender.

6. Add a Mouse Event:

   • In the same Text Editor, create another script or integrate the following code at the bottom of the previous script:

def mouse_click_event(scene):
    if scene.frame_current == 1:  # or another condition to check if the object is selected
        bpy.ops.object.switch_animation()

bpy.app.handlers.depsgraph_update_post.append(mouse_click_event)

7. Bind the Operator to Mouse Click:

   • This code should check for a click—the interaction might be limited, and you may need to set up a modal operator if you want dedicated click handling.

8. Run the Script:

   • Press “Run Script” in the Text Editor to register the operator.
   • Click on the object in your 3D Viewport after running the script to trigger the animation switch.

Testing:

• Play the animation timeline, and click on your object to toggle between idle and singing animations.

This setup lets you switch animations in Blender when clicking the specified object. If you need further assistance or details on specific parts, just let me know!

0 replies left
thread_vDZduYk1LD5D1ShPY3JDtQz8
Reply to this message to continue the conversation

[DylanKay (Dylan)]

Thank you, but I would like a step by step guide how to set up switching between Animations in Needle using Blender. The animations should be switched by clicking on the object.

[needle-assistant (Needle Engine Assistant)]

Hi DylanKay, I’m sorry but I can’t help you right now. You have reached the maximum number of replies. . Please try again later.

[DylanKay (Dylan)]

Please give me a step by step guide how to have a clickable object that switches between two animation timelines in Needle, using Blender.

[needle-assistant (Needle Engine Assistant)]

Hello Dylan! To create a clickable object that switches between two animation timelines in Needle Engine using Blender, follow these steps:

Step-by-Step Guide

1. Model the Object in Blender:

   • Create or use an existing object (e.g., a cube or a character) in your Blender scene.

2. Create Animation Timelines:

   • Go to the Animation workspace in Blender.
   • Create two separate animations for the object using keyframes (e.g., “Animation1” and “Animation2”).

3. Export the Model:

   • Once both animations are set and the object is ready, export it as a glTF or GLB file using File > Export > glTF 2.0 (.glb/.gltf).
   • Ensure animations are included in the export settings.

4. Import in Needle Engine:

   • Import the exported glTF/GLB file into your Needle project.
   • Drag the imported object into the scene.

5. Create a Clickable Component:

   • In Needle, create a new component that will handle mouse clicks. Use the following pseudocode:

     let currentAnimation = 0; // 0 for Animation1, 1 for Animation2
     
     function onClick() {
         currentAnimation = (currentAnimation + 1) % 2; // Toggle between 0 and 1
         switchAnimation(currentAnimation);
     }
     
     function switchAnimation(index) {
         if (index === 0) {
             // Play Animation1
         } else {
             // Play Animation2
         }
     }
     
     // Add event listener
     yourObject.addEventListener('click', onClick);
     

6. Implement the Animation Logic:

   • Make sure the switchAnimation function properly triggers the correct animation timeline using Needle’s API. You’ll use import like:

   import { Animation } from "@needle-tools/engine";
   

7. Test the Clickable Animation:

   • Run your project in Needle Engine. When you click the object, it should toggle between the two animations.

8. Adjust and Fine-tune:

   • Adjust any parameters or animation speeds as necessary.

Sample Code

Here’s how you could implement it:

import { Animation } from "@needle-tools/engine";

class ClickableAnimationSwitch {
    constructor(object) {
        this.object = object;
        this.currentAnimation = 0;

        this.object.addEventListener('click', this.onClick.bind(this));
    }

    onClick() {
        this.currentAnimation = (this.currentAnimation + 1) % 2;
        this.switchAnimation(this.currentAnimation);
    }

    switchAnimation(index) {
        if (index === 0) {
            Animation.play(this.object, "Animation1");
        } else {
            Animation.play(this.object, "Animation2");
        }
    }
}

// Usage
const myObject = scene.getObjectByName("MyClickableObject");
new ClickableAnimationSwitch(myObject);

Feel free to adjust the names and logic as per your actual project needs! If you have any further questions or need assistance, let me know!

3 replies left
thread_3Tl5ToXiyoqpJMWXUxyRe9Au
Reply to this message to continue the conversation

[DylanKay (Dylan)]

Thank you, but I want to do it all in Blender, using Needle Engine for Blender. Please give me step by step instruction for this.

[needle-assistant (Needle Engine Assistant)]

Hello Dylan! To create a clickable object that switches between two animation timelines directly in Blender using Needle Engine for Blender, follow these detailed steps:

Step-by-Step Instructions

1. Open Blender and Configure:

   • Make sure you have the Needle Engine for Blender add-on installed and enabled.

2. Create Your Object:

   • Create or select an object in Blender that you want to animate (e.g., a cube or a character).

3. Set Up Animations:

   • Switch to the Animation workspace.
   • Create two animations for your object:
     • Animation 1: Set keyframes for the first animation.
     • Animation 2: On a different timeline or sequence, set keyframes for the second animation.
   • Ensure that both animations are assigned properly in the Action Editor.

4. Configure Object Properties:

   • Select your object and go to the Object Properties tab.
   • Find the Needle Engine panel (if available) and make sure your object is set to be interactive.

5. Create Animation Action Properties:

   • In the Needle Engine panel, add properties to define the animations:
     • Create a string property for the first animation (e.g., “Animation1”).
     • Create another string property for the second animation (e.g., “Animation2”).

6. Setup Click Event:

   • Under the Logic Editor, add a mouse click event:
     • Create a new Event node and set it to detect mouse clicks on the object.
     • Connect this node to a Trigger Action node that you will configure.

7. Switching Mechanism:

   • In the Trigger Action node, set up logic to switch between the animations:
     • Use a state variable (like a boolean) that toggles on every click.
     • Depending on the state, set the animation to either Animation1 or Animation2.

8. Export Settings:

   • Ensure that both animations are included in your glTF/GLB export settings.

9. Test in Needle Engine:

   • Export your project with the configured animations.
   • Load up the scene in Needle Engine and test clicking on the object. It should toggle between the defined animations.

Example of Animation Setup in Logic Editor

You might create something like this in the Logic Editor:

• Event Node: On Mouse Click
• Condition Node: Check State (e.g., if isAnimationOne is true)
• Action Node: Set Animation (choose Animation1 or Animation2 based on the state)

Notes

• Ensure you have assigned the animations correctly and set up the interactive properties in the Needle panel.
• Be sure to save your work frequently.

If you encounter any issues or have further questions, feel free to ask!

3 replies left
thread_3Tl5ToXiyoqpJMWXUxyRe9Au
Reply to this message to continue the conversation