feat: touch movement controls

Justfile

@@ -41,4 +41,4 @@ samply:
 
 # Build the project for Emscripten
 web:
-    bun run web.build.ts
+    bun run web.build.ts; caddy file-server --root dist

src/game.rs

@@ -13,15 +13,18 @@ use crate::systems::blinking::Blinking;
 use crate::systems::components::{GhostAnimation, GhostState, LastAnimationState};
 use crate::systems::movement::{BufferedDirection, Position, Velocity};
 use crate::systems::profiling::SystemId;
+use crate::systems::render::touch_ui_render_system;
 use crate::systems::render::RenderDirty;
-use crate::systems::{self, ghost_collision_system, present_system, Hidden, LinearAnimation, MovementModifiers, NodeId};
 use crate::systems::{
-    audio_system, blinking_system, collision_system, debug_render_system, directional_render_system, dirty_render_system,
-    eaten_ghost_system, ghost_movement_system, ghost_state_system, hud_render_system, item_system, linear_render_system, profile,
-    render_system, AudioEvent, AudioResource, AudioState, BackbufferResource, Collider, DebugState, DebugTextureResource,
-    DeltaTime, DirectionalAnimation, EntityType, Frozen, Ghost, GhostAnimations, GhostBundle, GhostCollider, GlobalState,
-    ItemBundle, ItemCollider, MapTextureResource, PacmanCollider, PlayerBundle, PlayerControlled, Renderable, ScoreResource,
-    StartupSequence, SystemTimings,
+    self, combined_render_system, ghost_collision_system, present_system, Hidden, LinearAnimation, MovementModifiers, NodeId,
+};
+use crate::systems::{
+    audio_system, blinking_system, collision_system, directional_render_system, dirty_render_system, eaten_ghost_system,
+    ghost_movement_system, ghost_state_system, hud_render_system, item_system, linear_render_system, profile, AudioEvent,
+    AudioResource, AudioState, BackbufferResource, Collider, DebugState, DebugTextureResource, DeltaTime, DirectionalAnimation,
+    EntityType, Frozen, Ghost, GhostAnimations, GhostBundle, GhostCollider, GlobalState, ItemBundle, ItemCollider,
+    MapTextureResource, PacmanCollider, PlayerBundle, PlayerControlled, Renderable, ScoreResource, StartupSequence,
+    SystemTimings,
 };
 use crate::texture::animated::{DirectionalTiles, TileSequence};
 use crate::texture::sprite::AtlasTile;
@@ -106,9 +109,9 @@ impl Game {
             EventType::ControllerTouchpadDown,
             EventType::ControllerTouchpadMotion,
             EventType::ControllerTouchpadUp,
-            EventType::FingerDown,
-            EventType::FingerUp,
-            EventType::FingerMotion,
+            // EventType::FingerDown,  // Enable for touch controls
+            // EventType::FingerUp,    // Enable for touch controls
+            // EventType::FingerMotion, // Enable for touch controls
             EventType::DollarGesture,
             EventType::DollarRecord,
             EventType::MultiGesture,
@@ -128,9 +131,8 @@ impl Game {
             EventType::Window,
             EventType::MouseWheel,
             // EventType::MouseMotion,
-            EventType::MouseButtonDown,
-            EventType::MouseButtonUp,
-            EventType::MouseButtonDown,
+            // EventType::MouseButtonDown,  // Enable for desktop touch testing
+            // EventType::MouseButtonUp,    // Enable for desktop touch testing
             EventType::AppDidEnterBackground,
             EventType::AppWillEnterForeground,
             EventType::AppWillEnterBackground,
@@ -157,7 +159,7 @@ impl Game {
         // Create debug texture at output resolution for crisp debug rendering
         let output_size = canvas.output_size().unwrap();
         let mut debug_texture = texture_creator
-            .create_texture_target(None, output_size.0, output_size.1)
+            .create_texture_target(Some(sdl2::pixels::PixelFormatEnum::ARGB8888), output_size.0, output_size.1)
             .map_err(|e| GameError::Sdl(e.to_string()))?;
 
         // Debug texture is copied over the backbuffer, it requires transparency abilities
@@ -315,6 +317,7 @@ impl Game {
         world.insert_resource(DebugState::default());
         world.insert_resource(AudioState::default());
         world.insert_resource(CursorPosition::default());
+        world.insert_resource(systems::input::TouchState::default());
         world.insert_resource(StartupSequence::new(
             constants::startup::STARTUP_FRAMES,
             constants::startup::STARTUP_TICKS_PER_FRAME,
@@ -352,9 +355,7 @@ impl Game {
         let directional_render_system = profile(SystemId::DirectionalRender, directional_render_system);
         let linear_render_system = profile(SystemId::LinearRender, linear_render_system);
         let dirty_render_system = profile(SystemId::DirtyRender, dirty_render_system);
-        let render_system = profile(SystemId::Render, render_system);
         let hud_render_system = profile(SystemId::HudRender, hud_render_system);
-        let debug_render_system = profile(SystemId::DebugRender, debug_render_system);
         let present_system = profile(SystemId::Present, present_system);
         let unified_ghost_state_system = profile(SystemId::GhostStateAnimation, ghost_state_system);
 
@@ -386,9 +387,9 @@ impl Game {
                 directional_render_system,
                 linear_render_system,
                 dirty_render_system,
-                render_system,
+                combined_render_system,
                 hud_render_system,
-                debug_render_system,
+                touch_ui_render_system,
                 present_system,
             )
                 .chain(),

src/platform/emscripten.rs

@@ -29,6 +29,7 @@ pub fn requires_console() -> bool {
     false
 }
 
+#[allow(dead_code)]
 pub fn get_canvas_size() -> Option<(u32, u32)> {
     let mut width = 0.0;
     let mut height = 0.0;

src/systems/debug.rs

@@ -1,12 +1,12 @@
 //! Debug rendering system
 use std::cmp::Ordering;
 
-use crate::constants::BOARD_PIXEL_OFFSET;
+use crate::constants::{BOARD_PIXEL_OFFSET, CANVAS_SIZE};
 use crate::map::builder::Map;
 use crate::systems::{Collider, CursorPosition, NodeId, Position, SystemTimings};
 use crate::texture::ttf::{TtfAtlas, TtfRenderer};
 use bevy_ecs::resource::Resource;
-use bevy_ecs::system::{NonSendMut, Query, Res};
+use bevy_ecs::system::{Query, Res};
 use glam::{IVec2, UVec2, Vec2};
 use sdl2::pixels::Color;
 use sdl2::rect::{Point, Rect};
@@ -203,140 +203,135 @@ fn render_timing_display(
 
 #[allow(clippy::too_many_arguments)]
 pub fn debug_render_system(
-    mut canvas: NonSendMut<&mut Canvas<Window>>,
-    mut debug_texture: NonSendMut<DebugTextureResource>,
-    mut ttf_atlas: NonSendMut<TtfAtlasResource>,
-    batched_lines: Res<BatchedLinesResource>,
-    debug_state: Res<DebugState>,
-    timings: Res<SystemTimings>,
-    map: Res<Map>,
-    colliders: Query<(&Collider, &Position)>,
-    cursor: Res<CursorPosition>,
+    canvas: &mut Canvas<Window>,
+    ttf_atlas: &mut TtfAtlasResource,
+    batched_lines: &Res<BatchedLinesResource>,
+    debug_state: &Res<DebugState>,
+    timings: &Res<SystemTimings>,
+    map: &Res<Map>,
+    colliders: &Query<(&Collider, &Position)>,
+    cursor: &Res<CursorPosition>,
 ) {
     if !debug_state.enabled {
         return;
     }
-    let scale =
-        (UVec2::from(canvas.output_size().unwrap()).as_vec2() / UVec2::from(canvas.logical_size()).as_vec2()).min_element();
+    let output = UVec2::from(canvas.output_size().unwrap()).as_vec2();
+    let logical = CANVAS_SIZE.as_vec2();
+    let scale = (output / logical).min_element();
 
     // Create debug text renderer
     let text_renderer = TtfRenderer::new(1.0);
 
-    let cursor_world_pos = match *cursor {
+    let cursor_world_pos = match &**cursor {
         CursorPosition::None => None,
         CursorPosition::Some { position, .. } => Some(position - BOARD_PIXEL_OFFSET.as_vec2()),
     };
 
-    // Draw debug info on the high-resolution debug texture
-    canvas
-        .with_texture_canvas(&mut debug_texture.0, |debug_canvas| {
-            // Clear the debug canvas
-            debug_canvas.set_draw_color(Color::RGBA(0, 0, 0, 0));
-            debug_canvas.clear();
+    // Clear the debug canvas
+    canvas.set_draw_color(Color::RGBA(0, 0, 0, 0));
+    canvas.clear();
 
-            // Find the closest node to the cursor
-            let closest_node = if let Some(cursor_world_pos) = cursor_world_pos {
-                map.graph
-                    .nodes()
-                    .map(|node| node.position.distance(cursor_world_pos))
-                    .enumerate()
-                    .min_by(|(_, a), (_, b)| a.partial_cmp(b).unwrap_or(Ordering::Less))
-                    .map(|(id, _)| id)
-            } else {
-                None
-            };
+    // Find the closest node to the cursor
+    let closest_node = if let Some(cursor_world_pos) = cursor_world_pos {
+        map.graph
+            .nodes()
+            .map(|node| node.position.distance(cursor_world_pos))
+            .enumerate()
+            .min_by(|(_, a), (_, b)| a.partial_cmp(b).unwrap_or(Ordering::Less))
+            .map(|(id, _)| id)
+    } else {
+        None
+    };
 
-            debug_canvas.set_draw_color(Color::GREEN);
-            {
-                let rects = colliders
-                    .iter()
-                    .map(|(collider, position)| {
-                        let pos = position.get_pixel_position(&map.graph).unwrap();
+    canvas.set_draw_color(Color::GREEN);
+    {
+        let rects = colliders
+            .iter()
+            .map(|(collider, position)| {
+                let pos = position.get_pixel_position(&map.graph).unwrap();
 
-                        // Transform position and size using common methods
-                        let pos = (pos * scale).as_ivec2();
-                        let size = (collider.size * scale) as u32;
+                // Transform position and size using common methods
+                let pos = (pos * scale).as_ivec2();
+                let size = (collider.size * scale) as u32;
 
-                        Rect::from_center(Point::from((pos.x, pos.y)), size, size)
-                    })
-                    .collect::<SmallVec<[Rect; 100]>>();
-                if rects.len() > rects.capacity() {
-                    warn!(
-                        capacity = rects.capacity(),
-                        count = rects.len(),
-                        "Collider rects capacity exceeded"
-                    );
-                }
-                debug_canvas.draw_rects(&rects).unwrap();
-            }
+                Rect::from_center(Point::from((pos.x, pos.y)), size, size)
+            })
+            .collect::<SmallVec<[Rect; 100]>>();
+        if rects.len() > rects.capacity() {
+            warn!(
+                capacity = rects.capacity(),
+                count = rects.len(),
+                "Collider rects capacity exceeded"
+            );
+        }
+        canvas.draw_rects(&rects).unwrap();
+    }
 
-            debug_canvas.set_draw_color(Color {
-                a: f32_to_u8(0.6),
-                ..Color::RED
-            });
-            debug_canvas.set_blend_mode(sdl2::render::BlendMode::Blend);
+    canvas.set_draw_color(Color {
+        a: f32_to_u8(0.6),
+        ..Color::RED
+    });
+    canvas.set_blend_mode(sdl2::render::BlendMode::Blend);
 
-            // Use cached batched line segments
-            batched_lines.render(debug_canvas);
+    // Use cached batched line segments
+    batched_lines.render(canvas);
 
-            {
-                let rects: Vec<_> = map
-                    .graph
-                    .nodes()
-                    .enumerate()
-                    .filter_map(|(id, node)| {
-                        let pos = transform_position_with_offset(node.position, scale);
-                        let size = (2.0 * scale) as u32;
-                        let rect = Rect::new(pos.x - (size as i32 / 2), pos.y - (size as i32 / 2), size, size);
-
-                        // If the node is the one closest to the cursor, draw it immediately
-                        if closest_node == Some(id) {
-                            debug_canvas.set_draw_color(Color::YELLOW);
-                            debug_canvas.fill_rect(rect).unwrap();
-                            return None;
-                        }
-
-                        Some(rect)
-                    })
-                    .collect();
-
-                if rects.len() > rects.capacity() {
-                    warn!(
-                        capacity = rects.capacity(),
-                        count = rects.len(),
-                        "Node rects capacity exceeded"
-                    );
-                }
-
-                // Draw the non-closest nodes all at once in blue
-                debug_canvas.set_draw_color(Color::BLUE);
-                debug_canvas.fill_rects(&rects).unwrap();
-            }
-
-            // Render node ID if a node is highlighted
-            if let Some(closest_node_id) = closest_node {
-                let node = map.graph.get_node(closest_node_id as NodeId).unwrap();
+    {
+        let rects: Vec<_> = map
+            .graph
+            .nodes()
+            .enumerate()
+            .filter_map(|(id, node)| {
                 let pos = transform_position_with_offset(node.position, scale);
+                let size = (2.0 * scale) as u32;
+                let rect = Rect::new(pos.x - (size as i32 / 2), pos.y - (size as i32 / 2), size, size);
 
-                let node_id_text = closest_node_id.to_string();
-                let text_pos = Vec2::new((pos.x + 10) as f32, (pos.y - 5) as f32);
+                // If the node is the one closest to the cursor, draw it immediately
+                if closest_node == Some(id) {
+                    canvas.set_draw_color(Color::YELLOW);
+                    canvas.fill_rect(rect).unwrap();
+                    return None;
+                }
 
-                text_renderer
-                    .render_text(
-                        debug_canvas,
-                        &mut ttf_atlas.0,
-                        &node_id_text,
-                        text_pos,
-                        Color {
-                            a: f32_to_u8(0.4),
-                            ..Color::WHITE
-                        },
-                    )
-                    .unwrap();
-            }
+                Some(rect)
+            })
+            .collect();
 
-            // Render timing information in the top-left corner
-            render_timing_display(debug_canvas, &timings, &text_renderer, &mut ttf_atlas.0);
-        })
-        .unwrap();
+        if rects.len() > rects.capacity() {
+            warn!(
+                capacity = rects.capacity(),
+                count = rects.len(),
+                "Node rects capacity exceeded"
+            );
+        }
+
+        // Draw the non-closest nodes all at once in blue
+        canvas.set_draw_color(Color::BLUE);
+        canvas.fill_rects(&rects).unwrap();
+    }
+
+    // Render node ID if a node is highlighted
+    if let Some(closest_node_id) = closest_node {
+        let node = map.graph.get_node(closest_node_id as NodeId).unwrap();
+        let pos = transform_position_with_offset(node.position, scale);
+
+        let node_id_text = closest_node_id.to_string();
+        let text_pos = Vec2::new((pos.x + 10) as f32, (pos.y - 5) as f32);
+
+        text_renderer
+            .render_text(
+                canvas,
+                &mut ttf_atlas.0,
+                &node_id_text,
+                text_pos,
+                Color {
+                    a: f32_to_u8(0.4),
+                    ..Color::WHITE
+                },
+            )
+            .unwrap();
+    }
+
+    // Render timing information in the top-left corner
+    render_timing_display(canvas, timings, &text_renderer, &mut ttf_atlas.0);
 }

src/systems/input.rs

@@ -25,6 +25,59 @@ pub enum CursorPosition {
     },
 }
 
+#[derive(Resource, Default, Debug)]
+pub struct TouchState {
+    pub active_touch: Option<TouchData>,
+}
+
+#[derive(Debug, Clone)]
+pub struct TouchData {
+    pub finger_id: i64,
+    pub start_pos: Vec2,
+    pub current_pos: Vec2,
+    pub current_direction: Option<Direction>,
+}
+
+impl TouchData {
+    pub fn new(finger_id: i64, start_pos: Vec2) -> Self {
+        Self {
+            finger_id,
+            start_pos,
+            current_pos: start_pos,
+            current_direction: None,
+        }
+    }
+
+    pub fn update_position(&mut self, new_pos: Vec2) -> Option<Direction> {
+        self.current_pos = new_pos;
+        let delta = new_pos - self.start_pos;
+
+        // Minimum threshold for direction detection (in pixels)
+        const THRESHOLD: f32 = 20.0;
+
+        if delta.length() < THRESHOLD {
+            self.current_direction = None;
+            return None;
+        }
+
+        // Determine primary direction based on larger component
+        let direction = if delta.x.abs() > delta.y.abs() {
+            if delta.x > 0.0 {
+                Direction::Right
+            } else {
+                Direction::Left
+            }
+        } else if delta.y > 0.0 {
+            Direction::Down
+        } else {
+            Direction::Up
+        };
+
+        self.current_direction = Some(direction);
+        Some(direction)
+    }
+}
+
 #[derive(Resource, Debug, Clone)]
 pub struct Bindings {
     key_bindings: HashMap<Keycode, GameCommand>,
@@ -131,6 +184,7 @@ pub fn input_system(
     mut writer: EventWriter<GameEvent>,
     mut pump: NonSendMut<EventPump>,
     mut cursor: ResMut<CursorPosition>,
+    mut touch_state: ResMut<TouchState>,
 ) {
     let mut cursor_seen = false;
     // Collect all events for this frame.
@@ -159,6 +213,47 @@ pub fn input_system(
                     remaining_time: 0.20,
                 };
                 cursor_seen = true;
+
+                // Handle mouse motion as touch motion for desktop testing
+                if let Some(ref mut touch_data) = touch_state.active_touch {
+                    if let Some(direction) = touch_data.update_position(Vec2::new(x as f32, y as f32)) {
+                        writer.write(GameEvent::Command(GameCommand::MovePlayer(direction)));
+                    }
+                }
+            }
+            // Handle mouse events as touch for desktop testing
+            Event::MouseButtonDown { x, y, .. } => {
+                let pos = Vec2::new(x as f32, y as f32);
+                touch_state.active_touch = Some(TouchData::new(0, pos)); // Use ID 0 for mouse
+            }
+            Event::MouseButtonUp { .. } => {
+                touch_state.active_touch = None;
+            }
+            // Handle actual touch events for mobile
+            Event::FingerDown { finger_id, x, y, .. } => {
+                // Convert normalized coordinates (0.0-1.0) to screen coordinates
+                let screen_x = x * crate::constants::CANVAS_SIZE.x as f32;
+                let screen_y = y * crate::constants::CANVAS_SIZE.y as f32;
+                let pos = Vec2::new(screen_x, screen_y);
+                touch_state.active_touch = Some(TouchData::new(finger_id, pos));
+            }
+            Event::FingerMotion { finger_id, x, y, .. } => {
+                if let Some(ref mut touch_data) = touch_state.active_touch {
+                    if touch_data.finger_id == finger_id {
+                        let screen_x = x * crate::constants::CANVAS_SIZE.x as f32;
+                        let screen_y = y * crate::constants::CANVAS_SIZE.y as f32;
+                        if let Some(direction) = touch_data.update_position(Vec2::new(screen_x, screen_y)) {
+                            writer.write(GameEvent::Command(GameCommand::MovePlayer(direction)));
+                        }
+                    }
+                }
+            }
+            Event::FingerUp { finger_id, .. } => {
+                if let Some(ref touch_data) = touch_state.active_touch {
+                    if touch_data.finger_id == finger_id {
+                        touch_state.active_touch = None;
+                    }
+                }
             }
             Event::KeyDown { keycode, repeat, .. } => {
                 if let Some(key) = keycode {

src/systems/render.rs

@@ -1,9 +1,11 @@
 use crate::constants::CANVAS_SIZE;
 use crate::error::{GameError, TextureError};
 use crate::map::builder::Map;
+use crate::systems::input::TouchState;
 use crate::systems::{
-    DebugState, DebugTextureResource, DeltaTime, DirectionalAnimation, LinearAnimation, Position, Renderable, ScoreResource,
-    StartupSequence, Velocity,
+    debug_render_system, BatchedLinesResource, Collider, CursorPosition, DebugState, DebugTextureResource, DeltaTime,
+    DirectionalAnimation, LinearAnimation, Position, Renderable, ScoreResource, StartupSequence, SystemId, SystemTimings,
+    TtfAtlasResource, Velocity,
 };
 use crate::texture::sprite::SpriteAtlas;
 use crate::texture::text::TextTexture;
@@ -18,6 +20,7 @@ use sdl2::pixels::Color;
 use sdl2::rect::{Point, Rect};
 use sdl2::render::{BlendMode, Canvas, Texture};
 use sdl2::video::Window;
+use std::time::Instant;
 
 #[derive(Resource, Default)]
 pub struct RenderDirty(pub bool);
@@ -25,6 +28,13 @@ pub struct RenderDirty(pub bool);
 #[derive(Component)]
 pub struct Hidden;
 
+/// Enum to identify which texture is being rendered to in the combined render system
+#[derive(Debug, Clone, Copy)]
+enum RenderTarget {
+    Backbuffer,
+    Debug,
+}
+
 #[allow(clippy::type_complexity)]
 pub fn dirty_render_system(
     mut dirty: ResMut<RenderDirty>,
@@ -105,6 +115,79 @@ pub struct MapTextureResource(pub Texture);
 /// A non-send resource for the backbuffer texture. This just wraps the texture with a type so it can be differentiated when exposed as a resource.
 pub struct BackbufferResource(pub Texture);
 
+/// Renders touch UI overlay for mobile/testing.
+pub fn touch_ui_render_system(
+    mut backbuffer: NonSendMut<BackbufferResource>,
+    mut canvas: NonSendMut<&mut Canvas<Window>>,
+    touch_state: Res<TouchState>,
+    mut errors: EventWriter<GameError>,
+) {
+    if let Some(ref touch_data) = touch_state.active_touch {
+        let _ = canvas.with_texture_canvas(&mut backbuffer.0, |canvas| {
+            // Set blend mode for transparency
+            canvas.set_blend_mode(BlendMode::Blend);
+
+            // Draw semi-transparent circle at touch start position
+            canvas.set_draw_color(Color::RGBA(255, 255, 255, 100));
+            let center = Point::new(touch_data.start_pos.x as i32, touch_data.start_pos.y as i32);
+
+            // Draw a simple circle by drawing filled rectangles (basic approach)
+            let radius = 30;
+            for dy in -radius..=radius {
+                for dx in -radius..=radius {
+                    if dx * dx + dy * dy <= radius * radius {
+                        let point = Point::new(center.x + dx, center.y + dy);
+                        if let Err(e) = canvas.draw_point(point) {
+                            errors.write(TextureError::RenderFailed(format!("Touch UI render error: {}", e)).into());
+                            return;
+                        }
+                    }
+                }
+            }
+
+            // Draw direction indicator if we have a direction
+            if let Some(direction) = touch_data.current_direction {
+                canvas.set_draw_color(Color::RGBA(0, 255, 0, 150));
+
+                // Draw arrow indicating direction
+                let arrow_length = 40;
+                let (dx, dy) = match direction {
+                    crate::map::direction::Direction::Up => (0, -arrow_length),
+                    crate::map::direction::Direction::Down => (0, arrow_length),
+                    crate::map::direction::Direction::Left => (-arrow_length, 0),
+                    crate::map::direction::Direction::Right => (arrow_length, 0),
+                };
+
+                let end_point = Point::new(center.x + dx, center.y + dy);
+                if let Err(e) = canvas.draw_line(center, end_point) {
+                    errors.write(TextureError::RenderFailed(format!("Touch arrow render error: {}", e)).into());
+                }
+
+                // Draw arrowhead (simple approach)
+                let arrow_size = 8;
+                match direction {
+                    crate::map::direction::Direction::Up => {
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x - arrow_size, end_point.y + arrow_size));
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x + arrow_size, end_point.y + arrow_size));
+                    }
+                    crate::map::direction::Direction::Down => {
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x - arrow_size, end_point.y - arrow_size));
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x + arrow_size, end_point.y - arrow_size));
+                    }
+                    crate::map::direction::Direction::Left => {
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x + arrow_size, end_point.y - arrow_size));
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x + arrow_size, end_point.y + arrow_size));
+                    }
+                    crate::map::direction::Direction::Right => {
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x - arrow_size, end_point.y - arrow_size));
+                        let _ = canvas.draw_line(end_point, Point::new(end_point.x - arrow_size, end_point.y + arrow_size));
+                    }
+                }
+            }
+        });
+    }
+}
+
 /// Renders the HUD (score, lives, etc.) on top of the game.
 pub fn hud_render_system(
     mut backbuffer: NonSendMut<BackbufferResource>,
@@ -172,59 +255,138 @@ pub fn hud_render_system(
 
 #[allow(clippy::too_many_arguments)]
 pub fn render_system(
+    canvas: &mut Canvas<Window>,
+    map_texture: &NonSendMut<MapTextureResource>,
+    atlas: &mut SpriteAtlas,
+    map: &Res<Map>,
+    dirty: &Res<RenderDirty>,
+    renderables: &Query<(Entity, &Renderable, &Position), Without<Hidden>>,
+    errors: &mut EventWriter<GameError>,
+) {
+    if !dirty.0 {
+        return;
+    }
+
+    // Clear the backbuffer
+    canvas.set_draw_color(sdl2::pixels::Color::BLACK);
+    canvas.clear();
+
+    // Copy the pre-rendered map texture to the backbuffer
+    if let Err(e) = canvas.copy(&map_texture.0, None, None) {
+        errors.write(TextureError::RenderFailed(e.to_string()).into());
+    }
+
+    // Render all entities to the backbuffer
+    for (_, renderable, position) in renderables
+        .iter()
+        .sort_by_key::<(Entity, &Renderable, &Position), _>(|(_, renderable, _)| renderable.layer)
+        .rev()
+    {
+        let pos = position.get_pixel_position(&map.graph);
+        match pos {
+            Ok(pos) => {
+                let dest = Rect::from_center(
+                    Point::from((pos.x as i32, pos.y as i32)),
+                    renderable.sprite.size.x as u32,
+                    renderable.sprite.size.y as u32,
+                );
+
+                renderable
+                    .sprite
+                    .render(canvas, atlas, dest)
+                    .err()
+                    .map(|e| errors.write(TextureError::RenderFailed(e.to_string()).into()));
+            }
+            Err(e) => {
+                errors.write(e);
+            }
+        }
+    }
+}
+
+/// Combined render system that renders to both backbuffer and debug textures in a single
+/// with_multiple_texture_canvas call for reduced overhead
+#[allow(clippy::too_many_arguments)]
+pub fn combined_render_system(
     mut canvas: NonSendMut<&mut Canvas<Window>>,
     map_texture: NonSendMut<MapTextureResource>,
     mut backbuffer: NonSendMut<BackbufferResource>,
+    mut debug_texture: NonSendMut<DebugTextureResource>,
     mut atlas: NonSendMut<SpriteAtlas>,
+    mut ttf_atlas: NonSendMut<TtfAtlasResource>,
+    batched_lines: Res<BatchedLinesResource>,
+    debug_state: Res<DebugState>,
+    timings: Res<SystemTimings>,
     map: Res<Map>,
     dirty: Res<RenderDirty>,
     renderables: Query<(Entity, &Renderable, &Position), Without<Hidden>>,
+    colliders: Query<(&Collider, &Position)>,
+    cursor: Res<CursorPosition>,
     mut errors: EventWriter<GameError>,
 ) {
     if !dirty.0 {
         return;
     }
-    // Render to backbuffer
-    canvas
-        .with_texture_canvas(&mut backbuffer.0, |backbuffer_canvas| {
-            // Clear the backbuffer
-            backbuffer_canvas.set_draw_color(sdl2::pixels::Color::BLACK);
-            backbuffer_canvas.clear();
 
-            // Copy the pre-rendered map texture to the backbuffer
-            if let Err(e) = backbuffer_canvas.copy(&map_texture.0, None, None) {
-                errors.write(TextureError::RenderFailed(e.to_string()).into());
+    // Prepare textures and render targets
+    let textures = [
+        (&mut backbuffer.0, RenderTarget::Backbuffer),
+        (&mut debug_texture.0, RenderTarget::Debug),
+    ];
+
+    // Record timing for each system independently
+    let mut render_duration = None;
+    let mut debug_render_duration = None;
+
+    let result = canvas.with_multiple_texture_canvas(textures.iter(), |texture_canvas, render_target| match render_target {
+        RenderTarget::Backbuffer => {
+            let start_time = Instant::now();
+
+            render_system(
+                texture_canvas,
+                &map_texture,
+                &mut atlas,
+                &map,
+                &dirty,
+                &renderables,
+                &mut errors,
+            );
+
+            render_duration = Some(start_time.elapsed());
+        }
+        RenderTarget::Debug => {
+            if !debug_state.enabled {
+                return;
             }
 
-            // Render all entities to the backbuffer
-            for (_, renderable, position) in renderables
-                .iter()
-                .sort_by_key::<(Entity, &Renderable, &Position), _>(|(_, renderable, _)| renderable.layer)
-                .rev()
-            {
-                let pos = position.get_pixel_position(&map.graph);
-                match pos {
-                    Ok(pos) => {
-                        let dest = Rect::from_center(
-                            Point::from((pos.x as i32, pos.y as i32)),
-                            renderable.sprite.size.x as u32,
-                            renderable.sprite.size.y as u32,
-                        );
+            let start_time = Instant::now();
 
-                        renderable
-                            .sprite
-                            .render(backbuffer_canvas, &mut atlas, dest)
-                            .err()
-                            .map(|e| errors.write(TextureError::RenderFailed(e.to_string()).into()));
-                    }
-                    Err(e) => {
-                        errors.write(e);
-                    }
-                }
-            }
-        })
-        .err()
-        .map(|e| errors.write(TextureError::RenderFailed(e.to_string()).into()));
+            debug_render_system(
+                texture_canvas,
+                &mut ttf_atlas,
+                &batched_lines,
+                &debug_state,
+                &timings,
+                &map,
+                &colliders,
+                &cursor,
+            );
+
+            debug_render_duration = Some(start_time.elapsed());
+        }
+    });
+
+    if let Err(e) = result {
+        errors.write(TextureError::RenderFailed(e.to_string()).into());
+    }
+
+    // Record timings for each system independently
+    if let Some(duration) = render_duration {
+        timings.add_timing(SystemId::Render, duration);
+    }
+    if let Some(duration) = debug_render_duration {
+        timings.add_timing(SystemId::DebugRender, duration);
+    }
 }
 
 pub fn present_system(