added texture rendering to the example

This commit is contained in:
2026-01-19 22:03:07 +13:00
parent f2190fb781
commit de7ca42f7a
2 changed files with 191 additions and 171 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

View File

@@ -109,6 +109,8 @@ pub fn main() anyerror!void {
rl.initWindow(screenWidth, screenHeight, "raylib-zig [core] example - basic window"); rl.initWindow(screenWidth, screenHeight, "raylib-zig [core] example - basic window");
defer rl.closeWindow(); // Close window and OpenGL context defer rl.closeWindow(); // Close window and OpenGL context
const image = try rl.loadImage("res/image.png");
const image_texture = try rl.Texture.fromImage(image);
rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second
//-------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------
@@ -151,180 +153,189 @@ pub fn main() anyerror!void {
}, },
}), }),
UI.Element(.{ // UI.Element(.{
.name = "child", // .name = "child",
.style = .{ .background_colour = .{ // .style = .{ .background_colour = .{
.b = 255, // .b = 255,
}, .padding = .{ .bottom = 5 } }, // }, .padding = .{ .bottom = 5 } },
.children = &[_]UI.Node{ // .children = &[_]UI.Node{
UI.Element(.{ // UI.Element(.{
.name = "branch1", // .name = "branch1",
// .rect = .{ .w = 200 }, // // .rect = .{ .w = 200 },
.style = .{ // .style = .{
.size_x = .grow, // .size_x = .grow,
.padding = .{ // .padding = .{
.bottom = 5, // .bottom = 5,
.left = 5, // .left = 5,
.top = 5, // .top = 5,
.right = 5, // .right = 5,
}, // },
// .layout = .right_to_left, // // .layout = .right_to_left,
.child_gap = 5, // .child_gap = 5,
}, // },
.children = &[_]UI.Node{ // .children = &[_]UI.Node{
UI.Element(.{ // UI.Element(.{
.name = "branch11", // .name = "branch11",
.style = .{ // .style = .{
.background_colour = .{ // .background_colour = .{
.g = 128, // .g = 128,
.b = 128, // .b = 128,
.r = 128, // .r = 128,
}, // },
.size_x = .grow, // .size_x = .grow,
}, // },
.rect = .{ // .rect = .{
.h = 40, // .h = 40,
.w = 40, // .w = 40,
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch12", // .name = "branch12",
.style = .{ // .style = .{
.background_colour = .{ // .background_colour = .{
.g = 128, // .g = 128,
.r = 128, // .r = 128,
}, // },
.size_x = .grow, // .size_x = .grow,
}, // },
.rect = .{ // .rect = .{
.h = 40, // .h = 40,
.w = 40, // .w = 40,
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch13", // .name = "branch13",
.rect = .{ // .rect = .{
.h = 40, // .h = 40,
.w = 40, // .w = 40,
}, // },
.style = .{ // .style = .{
.background_colour = .{ // .background_colour = .{
.g = 90, // .g = 90,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch2", // .name = "branch2",
.style = .{ // .style = .{
.background_colour = .{ // .background_colour = .{
.r = 255, // .r = 255,
.g = 128, // .g = 128,
}, // },
.layout = .right_to_left, // .layout = .right_to_left,
.child_gap = 4, // .child_gap = 4,
.padding = .{ // .padding = .{
.left = 10, // .left = 10,
.bottom = 10, // .bottom = 10,
.right = 10, // .right = 10,
.top = 10, // .top = 10,
}, // },
}, // },
.children = &[_]UI.Node{ // .children = &[_]UI.Node{
UI.Element(.{ // UI.Element(.{
.name = "branch21", // .name = "branch21",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 255, // .r = 255,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch22", // .name = "branch22",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 90, // .r = 90,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch21", // .name = "branch21",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 255, // .r = 255,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch22", // .name = "branch22",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 90, // .r = 90,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch21", // .name = "branch21",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 255, // .r = 255,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
UI.Element(.{ // UI.Element(.{
.name = "branch22", // .name = "branch22",
.rect = .{ // .rect = .{
.h = 30, // .h = 30,
.w = 30, // .w = 30,
}, // },
.style = .{ // .style = .{
.rounded = 40, // .rounded = 40,
.background_colour = .{ // .background_colour = .{
.r = 90, // .r = 90,
.b = 150, // .b = 150,
}, // },
}, // },
}), // }),
}, // },
}), // }),
// },
// }),
button(),
button(),
UI.Image(.{
.texture = image_texture,
.rect = .{
.h = @floatFromInt(image_texture.height),
.w = @floatFromInt(image_texture.width),
}, },
}), }),
button(),
button(),
}; };
// root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).NodeTypes
// root.Shoots(root.TextType(raylib.Font,(function 'getTextWidth'),(function 'getTextheight')),root.TextureType(raylib.Texture)).Node
const root = UI.Element(.{ const root = UI.Element(.{
.name = "root", .name = "root",
.pos = .{ .pos = .{
@@ -383,6 +394,7 @@ pub fn main() anyerror!void {
}); });
const commands = try UI.getRenderCommands(sized, al.allocator()); const commands = try UI.getRenderCommands(sized, al.allocator());
std.debug.print("{f}\n", .{sized});
// std.debug.print("layout time : {}ms\n", .{ // std.debug.print("layout time : {}ms\n", .{
// @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)), // @as(f32, @floatFromInt(timer.lap())) / @as(f32, @floatFromInt(std.time.ns_per_ms)),
// }); // });
@@ -431,7 +443,15 @@ pub fn main() anyerror!void {
t.text.colour.a, t.text.colour.a,
)); ));
}, },
.texture => continue, .texture => |tex| {
// std.debug.print("{}\n", .{tex.texture.texture});
rl.drawTexture(
tex.texture.texture,
@as(i32, @intFromFloat(tex.pos.x)),
@as(i32, @intFromFloat(tex.pos.y)),
.white,
);
},
} }
} }