diff --git a/examples/multiple.rs b/examples/multiple.rs
index eccefcc..2b161f2 100644
--- a/examples/multiple.rs
+++ b/examples/multiple.rs
@@ -44,89 +44,76 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         ..default()
     })
     .insert(Player(50.));
+
     // Spawn Virtual Joystick on left
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Horizontal_Outline_Arrows.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Horizontal_Outline_Arrows.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: JoystickController::MovementX,
             axis: VirtualJoystickAxis::Horizontal,
             behaviour: VirtualJoystickType::Fixed,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
             left: Val::Px(35.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
-    )
-    .insert(BackgroundColor(Color::ORANGE_RED.with_a(0.2)))
-    .insert(VirtualJoystickInteractionArea);
+        },
+    );
 
     // Spawn Virtual Joystick on Right
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Vertical_Outline_Arrows.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Vertical_Outline_Arrows.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: JoystickController::MovementY,
             axis: VirtualJoystickAxis::Vertical,
             behaviour: VirtualJoystickType::Fixed,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
             right: Val::Px(35.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
-    )
-    .insert(BackgroundColor(Color::ORANGE_RED.with_a(0.2)))
-    .insert(VirtualJoystickInteractionArea);
+        },
+    );
 }
 
 fn update_joystick(
     mut joystick: EventReader<VirtualJoystickEvent<JoystickController>>,
-    mut joystick_color: Query<(&mut TintColor, &VirtualJoystickNode<JoystickController>)>,
     mut player: Query<(&mut Transform, &Player)>,
-    time_step: Res<FixedTime>,
+    time_step: Res<Time>,
 ) {
     let (mut player, player_data) = player.single_mut();
 
-    for j in joystick.iter() {
+    for j in joystick.read() {
         let Vec2 { x, y } = j.snap_axis(None);
 
-        match j.get_type() {
-            VirtualJoystickEventType::Press | VirtualJoystickEventType::Drag => {
-                for (mut color, node) in joystick_color.iter_mut() {
-                    if node.id == j.id() {
-                        *color = TintColor(Color::WHITE);
-                    }
-                }
-            }
-            VirtualJoystickEventType::Up => {
-                for (mut color, node) in joystick_color.iter_mut() {
-                    if node.id == j.id() {
-                        *color = TintColor(Color::WHITE.with_a(0.2));
-                    }
-                }
-            }
-        }
-
         match j.id() {
             JoystickController::MovementX => {
-                player.translation.x += x * player_data.0 * time_step.period.as_secs_f32();
+                player.translation.x += x * player_data.0 * time_step.delta_seconds();
             }
             JoystickController::MovementY => {
-                player.translation.y += y * player_data.0 * time_step.period.as_secs_f32();
+                player.translation.y += y * player_data.0 * time_step.delta_seconds();
             }
         }
     }
diff --git a/examples/multiple_joysticks_mobile/src/lib.rs b/examples/multiple_joysticks_mobile/src/lib.rs
index 3839451..cd68add 100644
--- a/examples/multiple_joysticks_mobile/src/lib.rs
+++ b/examples/multiple_joysticks_mobile/src/lib.rs
@@ -51,89 +51,76 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         ..default()
     })
     .insert(Player(100.));
+
     // Spawn Virtual Joystick on left
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Horizontal_Outline_Arrows.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Horizontal_Outline_Arrows.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: JoystickController::MovementX,
             axis: VirtualJoystickAxis::Horizontal,
             behaviour: VirtualJoystickType::Fixed,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
             left: Val::Px(35.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
-    )
-    .insert(BackgroundColor(Color::ORANGE_RED.with_a(0.2)))
-    .insert(VirtualJoystickInteractionArea);
+        },
+    );
 
     // Spawn Virtual Joystick on Right
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Vertical_Outline_Arrows.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Vertical_Outline_Arrows.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: JoystickController::MovementY,
             axis: VirtualJoystickAxis::Vertical,
             behaviour: VirtualJoystickType::Fixed,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
             right: Val::Px(35.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
-    )
-    .insert(BackgroundColor(Color::ORANGE_RED.with_a(0.2)))
-    .insert(VirtualJoystickInteractionArea);
+        },
+    );
 }
 
 fn update_joystick(
     mut joystick: EventReader<VirtualJoystickEvent<JoystickController>>,
     mut player: Query<(&mut Transform, &Player)>,
-    mut joystick_color: Query<(&mut TintColor, &VirtualJoystickNode<JoystickController>)>,
-    time_step: Res<FixedTime>,
+    time_step: Res<Time>,
 ) {
     let (mut player, player_data) = player.single_mut();
 
-    for j in joystick.iter() {
-        let Vec2 { x, y } = j.axis();
-
-        match j.get_type() {
-            VirtualJoystickEventType::Press | VirtualJoystickEventType::Drag => {
-                for (mut color, node) in joystick_color.iter_mut() {
-                    if node.id == j.id() {
-                        *color = TintColor(Color::WHITE);
-                    }
-                }
-            }
-            VirtualJoystickEventType::Up => {
-                for (mut color, node) in joystick_color.iter_mut() {
-                    if node.id == j.id() {
-                        *color = TintColor(Color::WHITE.with_a(0.2));
-                    }
-                }
-            }
-        }
+    for j in joystick.read() {
+        let Vec2 { x, y } = j.snap_axis(None);
 
         match j.id() {
             JoystickController::MovementX => {
-                player.translation.x += x * player_data.0 * time_step.period.as_secs_f32();
+                player.translation.x += x * player_data.0 * time_step.delta_seconds();
             }
             JoystickController::MovementY => {
-                player.translation.y += y * player_data.0 * time_step.period.as_secs_f32();
+                player.translation.y += y * player_data.0 * time_step.delta_seconds();
             }
         }
     }
diff --git a/examples/simple.rs b/examples/simple.rs
index 8c92e67..3fe9e01 100644
--- a/examples/simple.rs
+++ b/examples/simple.rs
@@ -22,6 +22,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         transform: Transform::from_xyz(0., 0., 5.0),
         ..default()
     });
+    // Fake Player
     cmd.spawn(SpriteBundle {
         transform: Transform {
             translation: Vec3::new(0., 0., 0.),
@@ -36,57 +37,44 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         ..default()
     })
     .insert(Player(50.));
-    // Spawn Virtual Joystick at horizontal center
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Outline.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+
+    // Spawn Virtual Joystick at horizontal center using helper function
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Outline.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: "UniqueJoystick".to_string(),
             axis: VirtualJoystickAxis::Both,
             behaviour: VirtualJoystickType::Floating,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
             left: Val::Percent(50.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
-    )
-    .insert(BackgroundColor(Color::ORANGE_RED.with_a(0.3)))
-    .insert(VirtualJoystickInteractionArea);
+        },
+    );
 }
 
 fn update_joystick(
     mut joystick: EventReader<VirtualJoystickEvent<String>>,
-    mut joystick_color: Query<(&mut TintColor, &VirtualJoystickNode<String>)>,
     mut player: Query<(&mut Transform, &Player)>,
-    time_step: Res<FixedTime>,
+    time_step: Res<Time>,
 ) {
     let (mut player, player_data) = player.single_mut();
 
-    for j in joystick.iter() {
+    for j in joystick.read() {
         let Vec2 { x, y } = j.axis();
-        match j.get_type() {
-            VirtualJoystickEventType::Press | VirtualJoystickEventType::Drag => {
-                let (mut color, node) = joystick_color.single_mut();
-                if node.id == j.id() {
-                    *color = TintColor(Color::WHITE);
-                }
-            }
-            VirtualJoystickEventType::Up => {
-                let (mut color, node) = joystick_color.single_mut();
-                if node.id == j.id() {
-                    *color = TintColor(Color::WHITE.with_a(0.2));
-                }
-            }
-        }
-
-        player.translation.x += x * player_data.0 * time_step.period.as_secs_f32();
-        player.translation.y += y * player_data.0 * time_step.period.as_secs_f32();
+        player.translation.x += x * player_data.0 * time_step.delta_seconds();
+        player.translation.y += y * player_data.0 * time_step.delta_seconds();
     }
 }
diff --git a/examples/simple_mobile/src/lib.rs b/examples/simple_mobile/src/lib.rs
index 47ea8c1..183bf89 100644
--- a/examples/simple_mobile/src/lib.rs
+++ b/examples/simple_mobile/src/lib.rs
@@ -43,71 +43,43 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         ..default()
     })
     .insert(Player(100.));
-    // Spawn Interactable Zone
-    cmd.spawn(NodeBundle {
-        background_color: BackgroundColor(Color::ORANGE_RED.with_a(0.15)),
-        style: Style {
-            width: Val::Percent(100.),
-            height: Val::Percent(50.),
-            position_type: PositionType::Absolute,
-            left: Val::Px(0.),
-            bottom: Val::Px(0.),
-            ..default()
-        },
-        ..default()
-    })
-    // Insert interactable Zone component
-    .insert(VirtualJoystickInteractionArea);
-    // Spawn Virtual Joystick at horizontal center
-    cmd.spawn(
-        VirtualJoystickBundle::new(VirtualJoystickNode {
-            border_image: asset_server.load("Outline.png"),
-            knob_image: asset_server.load("Knob.png"),
-            knob_size: Vec2::new(80., 80.),
+    // Spawn Virtual Joystick at horizontal center using helper function
+    create_joystick(
+        &mut cmd,
+        asset_server.load("Knob.png"),
+        asset_server.load("Outline.png"),
+        None,
+        None,
+        Some(Color::ORANGE_RED.with_a(0.3)),
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        VirtualJoystickNode {
             dead_zone: 0.,
             id: "UniqueJoystick".to_string(),
             axis: VirtualJoystickAxis::Both,
-            behaviour: VirtualJoystickType::Fixed,
-        })
-        .set_color(TintColor(Color::WHITE.with_a(0.2)))
-        .set_style(Style {
+            behaviour: VirtualJoystickType::Floating,
+        },
+        Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
             position_type: PositionType::Absolute,
-            // Center X position
-            left: Val::Percent(35.),
+            left: Val::Percent(50.),
             bottom: Val::Percent(15.),
             ..default()
-        }),
+        },
     );
 }
 
 fn update_joystick(
     mut joystick: EventReader<VirtualJoystickEvent<String>>,
-    mut joystick_color: Query<(&mut TintColor, &VirtualJoystickNode<String>)>,
     mut player: Query<(&mut Transform, &Player)>,
-    time_step: Res<FixedTime>,
+    time_step: Res<Time>,
 ) {
     let (mut player, player_data) = player.single_mut();
 
-    for j in joystick.iter() {
+    for j in joystick.read() {
         let Vec2 { x, y } = j.axis();
-        match j.get_type() {
-            VirtualJoystickEventType::Press | VirtualJoystickEventType::Drag => {
-                let (mut color, node) = joystick_color.single_mut();
-                if node.id == j.id() {
-                    *color = TintColor(Color::WHITE);
-                }
-            }
-            VirtualJoystickEventType::Up => {
-                let (mut color, node) = joystick_color.single_mut();
-                if node.id == j.id() {
-                    *color = TintColor(Color::WHITE.with_a(0.2));
-                }
-            }
-        }
-
-        player.translation.x += x * player_data.0 * time_step.period.as_secs_f32();
-        player.translation.y += y * player_data.0 * time_step.period.as_secs_f32();
+        player.translation.x += x * player_data.0 * time_step.delta_seconds();
+        player.translation.y += y * player_data.0 * time_step.delta_seconds();
     }
 }