sirlilpanda/shoots
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sirlilpanda:df53fb0d8dc06cdc5b523399bba79f5ca88d7667
Branches Tags
sirlilpanda:main
..
compare: sirlilpanda:de7ca42f7ae3e937b9115814a6888fc1a323bde2
Branches Tags
sirlilpanda:main

3 Commits
df53fb0d8d ... de7ca42f7a

Author SHA1 Message Date
sirlilpanda
de7ca42f7a added texture rendering to the example 2026-01-19 22:03:07 +13:00
sirlilpanda
f2190fb781 fixed texture rendering 2026-01-19 22:02:41 +13:00
sirlilpanda
f5236a9148 gotta do some more 2026-01-19 22:02:28 +13:00
4 changed files with 245 additions and 188 deletions
Expand all files Collapse all files

3
TODO.md
View File

@@ -7,3 +7,6 @@
- [ ] allow text rendering to support new lines - [ ] allow text rendering to support new lines
- [ ] possibly allow a more dearimgui approch to rendering - [ ] possibly allow a more dearimgui approch to rendering
- [ ] min and max width - [ ] min and max width
- [ ] scrollable Node
- [ ] add ui logic to allow most of it to be hidden
- [ ] add text input fields

BIN
examples/raylib-example/res/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

360
examples/raylib-example/src/main.zig
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,
// .child_gap = 5,
// },
// .children = &[_]UI.Node{
// UI.Element(.{
// .name = "branch11",
// .style = .{
// .background_colour = .{
// .g = 128,
// .b = 128,
// .r = 128,
// },
// .size_x = .grow,
// },
// .rect = .{
// .h = 40,
// .w = 40,
// },
// }),
// UI.Element(.{
// .name = "branch12",
// .style = .{
// .background_colour = .{
// .g = 128,
// .r = 128,
// },
// .size_x = .grow,
// },
// .rect = .{
// .h = 40,
// .w = 40,
// },
// }),
// UI.Element(.{
// .name = "branch13",
// .rect = .{
// .h = 40,
// .w = 40,
// },
// .style = .{
// .background_colour = .{
// .g = 90,
// .b = 150,
// },
// },
// }),
// },
// }),
// UI.Element(.{
// .name = "branch2",
// .style = .{
// .background_colour = .{
// .r = 255,
// .g = 128,
// },
// .layout = .right_to_left, // .layout = .right_to_left,
.child_gap = 5, // .child_gap = 4,
}, // .padding = .{
.children = &[_]UI.Node{ // .left = 10,
UI.Element(.{ // .bottom = 10,
.name = "branch11", // .right = 10,
.style = .{ // .top = 10,
.background_colour = .{ // },
.g = 128, // },
.b = 128, // .children = &[_]UI.Node{
.r = 128, // UI.Element(.{
}, // .name = "branch21",
.size_x = .grow, // .rect = .{
}, // .h = 30,
.rect = .{ // .w = 30,
.h = 40, // },
.w = 40, // .style = .{
}, // .rounded = 40,
}), // .background_colour = .{
UI.Element(.{ // .r = 255,
.name = "branch12", // .b = 150,
.style = .{ // },
.background_colour = .{ // },
.g = 128, // }),
.r = 128, // UI.Element(.{
}, // .name = "branch22",
.size_x = .grow, // .rect = .{
}, // .h = 30,
.rect = .{ // .w = 30,
.h = 40, // },
.w = 40, // .style = .{
}, // .rounded = 40,
}), // .background_colour = .{
UI.Element(.{ // .r = 90,
.name = "branch13", // .b = 150,
.rect = .{ // },
.h = 40, // },
.w = 40, // }),
}, // UI.Element(.{
.style = .{ // .name = "branch21",
.background_colour = .{ // .rect = .{
.g = 90, // .h = 30,
.b = 150, // .w = 30,
}, // },
}, // .style = .{
}), // .rounded = 40,
}, // .background_colour = .{
}), // .r = 255,
UI.Element(.{ // .b = 150,
.name = "branch2", // },
.style = .{ // },
.background_colour = .{ // }),
.r = 255, // UI.Element(.{
.g = 128, // .name = "branch22",
}, // .rect = .{
.layout = .right_to_left, // .h = 30,
.child_gap = 4, // .w = 30,
.padding = .{ // },
.left = 10, // .style = .{
.bottom = 10, // .rounded = 40,
.right = 10, // .background_colour = .{
.top = 10, // .r = 90,
}, // .b = 150,
}, // },
.children = &[_]UI.Node{ // },
UI.Element(.{ // }),
.name = "branch21", // UI.Element(.{
.rect = .{ // .name = "branch21",
.h = 30, // .rect = .{
.w = 30, // .h = 30,
}, // .w = 30,
.style = .{ // },
.rounded = 40, // .style = .{
.background_colour = .{ // .rounded = 40,
.r = 255, // .background_colour = .{
.b = 150, // .r = 255,
}, // .b = 150,
}, // },
}), // },
UI.Element(.{ // }),
.name = "branch22", // UI.Element(.{
.rect = .{ // .name = "branch22",
.h = 30, // .rect = .{
.w = 30, // .h = 30,
}, // .w = 30,
.style = .{ // },
.rounded = 40, // .style = .{
.background_colour = .{ // .rounded = 40,
.r = 90, // .background_colour = .{
.b = 150, // .r = 90,
}, // .b = 150,
}, // },
}), // },
UI.Element(.{ // }),
.name = "branch21", // },
.rect = .{ // }),
.h = 30, // },
.w = 30, // }),
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 255,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch22",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 90,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch21",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 255,
.b = 150,
},
},
}),
UI.Element(.{
.name = "branch22",
.rect = .{
.h = 30,
.w = 30,
},
.style = .{
.rounded = 40,
.background_colour = .{
.r = 90,
.b = 150,
},
},
}),
},
}),
},
}),
button(), button(),
button(), button(),
UI.Image(.{
.texture = image_texture,
.rect = .{
.h = @floatFromInt(image_texture.height),
.w = @floatFromInt(image_texture.width),
},
}),
}; };
// 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,
);
},
} }
} }

60
src/root.zig
View File

@@ -176,6 +176,16 @@ pub const Colour = struct {
a: u8 = 255, a: u8 = 255,
}; };
const Dir = enum {
x,
y,
};
pub const Scrollable = struct {
offset: *Real,
dir: Dir,
};
pub const MouseState = struct { pub const MouseState = struct {
pos: Pos, pos: Pos,
left: bool, left: bool,
@@ -229,6 +239,11 @@ pub fn Shoots(
try printWithLevel(writer, level + 1, "on_click : {?},\n", .{node.element.on_click}); try printWithLevel(writer, level + 1, "on_click : {?},\n", .{node.element.on_click});
try printWithLevel(writer, level + 1, "rect : {any},\n", .{node.element.rect}); try printWithLevel(writer, level + 1, "rect : {any},\n", .{node.element.rect});
try printWithLevel(writer, level + 1, "style : .{{\n", .{}); try printWithLevel(writer, level + 1, "style : .{{\n", .{});
try printWithLevel(writer, level + 1, "on_click : {any},\n", .{node.element.on_click});
try printWithLevel(writer, level + 1, "allow_on_click_when_occluded : {any},\n", .{node.element.allow_on_click_when_occluded});
try printWithLevel(writer, level + 1, "on_hover : {any},\n", .{node.element.on_hover});
try printWithLevel(writer, level + 1, "allow_on_hover_when_occluded : {any},\n", .{node.element.allow_on_hover_when_occluded});
try printWithLevel(writer, level + 1, "scrollable : {?},\n", .{node.element.scrollable});
try node.element.style.printStyle(writer, level + 1); try node.element.style.printStyle(writer, level + 1);
try printWithLevel(writer, level + 1, "children : {{\n", .{}); try printWithLevel(writer, level + 1, "children : {{\n", .{});
for (node.element.children, 0..) |_, i| { for (node.element.children, 0..) |_, i| {
@@ -272,6 +287,8 @@ pub fn Shoots(
// the on hover call back will be ran // the on hover call back will be ran
allow_on_hover_when_occluded: bool = true, allow_on_hover_when_occluded: bool = true,
allow_on_click_when_occluded: bool = false, allow_on_click_when_occluded: bool = false,
scrollable: ?Scrollable = null,
}; };
pub const Interact = struct { pub const Interact = struct {
@@ -284,6 +301,8 @@ pub fn Shoots(
rect, rect,
text, text,
texture, texture,
// clip_start,
// clip_end,
}; };
pub const RenderCommand = union(RenderCommandType) { pub const RenderCommand = union(RenderCommandType) {
@@ -301,20 +320,18 @@ pub fn Shoots(
}, },
texture: struct { texture: struct {
texture: Texture, texture: Texture,
pos: Pos,
z_index: usize = 0, z_index: usize = 0,
pos: Pos,
}, },
// clip_start: struct {
// pos: Pos,
// z_index: usize = 0,
// rect: Rect,
// rounding: ?Real,
// },
// clip_end: struct {},
}; };
// focused: *Node,
// /// highly suggested that you use an area for the alloc
// pub fn init() Self {
// return Self{
// .alloc = alloc,
// };
// }
pub inline fn ElementWborder( pub inline fn ElementWborder(
boarder_width: Padding, boarder_width: Padding,
boarder_colour: Colour, boarder_colour: Colour,
@@ -358,6 +375,16 @@ pub fn Shoots(
); );
} }
pub inline fn Image(texture: Texture) Node {
return Element(
.{
.children = &[_]Node{.{
.texture = texture,
}},
},
);
}
pub fn closeElement(node: *Node, parent: *Node) void { pub fn closeElement(node: *Node, parent: *Node) void {
switch (node.*) { switch (node.*) {
.element => { .element => {
@@ -392,7 +419,12 @@ pub fn Shoots(
parent.element.rect.w += node.text.getTextWidth(); parent.element.rect.w += node.text.getTextWidth();
// std.debug.print("parent.element.rect.w : {}\n", .{parent.element.rect.w}); // std.debug.print("parent.element.rect.w : {}\n", .{parent.element.rect.w});
}, },
.texture => return, .texture => {
std.debug.print("before {any}\n", .{parent.element.rect});
parent.element.rect.h += node.texture.rect.h;
parent.element.rect.w += node.texture.rect.w;
std.debug.print("after {any}\n", .{parent.element.rect});
},
} }
} }
@@ -459,11 +491,13 @@ pub fn Shoots(
.text = text, .text = text,
.z_index = node.element.z_index, .z_index = node.element.z_index,
} }), } }),
.texture => |texture| try command_list.append(alloc, .{ .texture = .{ .texture => |texture| try command_list.append(alloc, .{
.texture = .{
.pos = node.element.pos, .pos = node.element.pos,
.texture = texture, .texture = texture,
.z_index = node.element.z_index, .z_index = node.element.z_index,
} }), },
}),
} }
} }
}, },