diff --git a/build.zig b/build.zig index ce1f8e2..c95e571 100755 --- a/build.zig +++ b/build.zig @@ -223,6 +223,11 @@ pub fn build(b: *std.Build) !void { .path = "examples/textures/sprite_anim.zig", .desc = "Animate a sprite", }, + .{ + .name = "textures_background_scrolling", + .path = "examples/textures/textures_background_scrolling.zig", + .desc = "Background scrolling & parallax demo", + }, // .{ // .name = "models_loading", // .path = "examples/models/models_loading.zig", @@ -301,7 +306,7 @@ pub fn build(b: *std.Build) !void { const run_cmd = b.addRunArtifact(exe); const run_step = b.step(ex.name, ex.desc); - + run_step.dependOn(&run_cmd.step); examples_step.dependOn(&exe.step); } diff --git a/examples/textures/textures_background_scrolling.zig b/examples/textures/textures_background_scrolling.zig new file mode 100644 index 0000000..2616303 --- /dev/null +++ b/examples/textures/textures_background_scrolling.zig @@ -0,0 +1,123 @@ +//! # raylib-zig [textures] example - background scrolling +//! +//! Example licensed under an unmodified zlib/libpng license, which is an +//! OSI-certified, BSD-like license that allows static linking with closed +//! source software +//! +//! Copyright (c) Nikolas Wipper 2024 + +const rl = @import("raylib"); + +const screen_width = 800; +const screen_height = 450; + +pub fn main() anyerror!void { + + // Initialization + //-------------------------------------------------------------------------------------- + rl.initWindow(screen_width, screen_height, "raylib [textures] example - background scrolling"); + defer rl.closeWindow(); // Close window and OpenGL context + + // NOTE: Be careful, background width must be equal or bigger than screen width + // if not, texture should be draw more than two times for scrolling effect + const background = rl.loadTexture("resources/textures/cyberpunk_street_background.png"); + const midground = rl.loadTexture("resources/textures/cyberpunk_street_midground.png"); + const foreground = rl.loadTexture("resources/textures/cyberpunk_street_foreground.png"); + defer rl.unloadTexture(background); // Unload background texture + defer rl.unloadTexture(midground); // Unload midground texture + defer rl.unloadTexture(foreground); // Unload foreground texture + + var scrolling_back: f32 = 0; + var scrolling_mid: f32 = 0; + var scrolling_fore: f32 = 0; + + rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second + //-------------------------------------------------------------------------------------- + + // Main game loop + while (!rl.windowShouldClose()) { // Detect window close button or ESC key + // Update + //---------------------------------------------------------------------------------- + scrolling_back -= 0.1; + scrolling_mid -= 0.5; + scrolling_fore -= 1.0; + + // NOTE: Texture is scaled twice its size, so it sould be considered on scrolling + if (scrolling_back <= @as(f32, @floatFromInt(-background.width * 2))) scrolling_back = 0; + if (scrolling_mid <= @as(f32, @floatFromInt(-midground.width * 2))) scrolling_mid = 0; + if (scrolling_fore <= @as(f32, @floatFromInt(-foreground.width * 2))) scrolling_fore = 0; + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + { + rl.beginDrawing(); + defer rl.endDrawing(); + + rl.clearBackground(rl.getColor(0x052c46ff)); + // Draw background image twice + // NOTE: Texture is scaled twice its size + rl.drawTextureEx( + background, + rl.Vector2.init(scrolling_back, 20.0), + 0.0, + 2.0, + rl.Color.white, + ); + rl.drawTextureEx( + background, + rl.Vector2.init(@as(f32, @floatFromInt(background.width * 2)) + scrolling_back, 20), + 0.0, + 2.0, + rl.Color.white, + ); + + // Draw midground image twice + rl.drawTextureEx( + midground, + rl.Vector2.init(scrolling_mid, 20.0), + 0.0, + 2.0, + rl.Color.white, + ); + rl.drawTextureEx( + midground, + rl.Vector2.init(@as(f32, @floatFromInt(midground.width * 2)) + scrolling_mid, 20), + 0.0, + 2.0, + rl.Color.white, + ); + + // Draw foreground image twice + rl.drawTextureEx( + foreground, + rl.Vector2.init(scrolling_fore, 70.0), + 0.0, + 2.0, + rl.Color.white, + ); + rl.drawTextureEx( + foreground, + rl.Vector2.init(@as(f32, @floatFromInt(foreground.width * 2)) + scrolling_fore, 70), + 0.0, + 2.0, + rl.Color.white, + ); + + rl.drawText( + "BACKGROUND SCROLLING & PARALLAX", + 10, + 10, + 20, + rl.Color.red, + ); + rl.drawText( + "(c) Cyberpunk Street Environment by Luis Zuno (@ansimuz)", + screen_width - 330, + screen_height - 20, + 10, + rl.Color.ray_white, + ); + } + } +} diff --git a/resources/textures/cyberpunk_street_background.png b/resources/textures/cyberpunk_street_background.png new file mode 100644 index 0000000..838d08a Binary files /dev/null and b/resources/textures/cyberpunk_street_background.png differ diff --git a/resources/textures/cyberpunk_street_foreground.png b/resources/textures/cyberpunk_street_foreground.png new file mode 100644 index 0000000..528b4ae Binary files /dev/null and b/resources/textures/cyberpunk_street_foreground.png differ diff --git a/resources/textures/cyberpunk_street_midground.png b/resources/textures/cyberpunk_street_midground.png new file mode 100644 index 0000000..73f24fe Binary files /dev/null and b/resources/textures/cyberpunk_street_midground.png differ