dendy
/
usg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP | Make it prettier and also implement Skewing

This commit is contained in:
Dusk 2022-08-13 15:43:02 +02:00
parent a46d4ede0d
commit 6163a5bbcb
3 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/MainMenu.zig
View File

@ -18,12 +18,16 @@ action_list: [5]Action = .{
Action.init(SDL.Scancode.@"return", actionSelect), // Select Action.init(SDL.Scancode.@"return", actionSelect), // Select
}, },
tab_list: [2]MenuTab = .{ tab_list: [3]MenuTab = .{
MenuTab.init("1P", .{255, 127, 0}, &.{ MenuTab.init("1P", .{245, 155, 20}, &.{
MenuSelection.init("Play", play), MenuSelection.init("Play", play),
MenuSelection.init("Print", print), MenuSelection.init("Print", print),
}), }),
MenuTab.init("Options", .{127, 0, 255}, &.{ MenuTab.init("Options", .{162, 86, 179}, &.{
MenuSelection.init("Play", play),
MenuSelection.init("Print", print),
}),
MenuTab.init("Online", .{105, 179, 86}, &.{
MenuSelection.init("Play", play), MenuSelection.init("Play", play),
MenuSelection.init("Print", print), MenuSelection.init("Print", print),
}), }),

51
src/MainMenu/Renderer.zig
View File

@ -15,10 +15,10 @@ pub fn init(renderer: *Renderer) Self {
}; };
} }
pub fn render(self: Self, main_menu: MainMenu) void { pub fn render(self: Self, main_menu: MainMenu) void {
const width = 100; const y_spacing = 20;
const spacing = 10; const x_spacing = 300;
const height = 20; const width = 200;
const height = 60;
const tabs = [_]usize{ const tabs = [_]usize{
main_menu.getPrevTab(), main_menu.getPrevTab(),
@ -26,28 +26,47 @@ pub fn render(self: Self, main_menu: MainMenu) void {
main_menu.getNextTab(), main_menu.getNextTab(),
}; };
const skew = 20;
for (tabs) |tab, tab_i| { for (tabs) |tab, tab_i| {
const curr_tab = main_menu.tab_list[tab]; const curr_tab = main_menu.tab_list[tab];
// Auxiliary variables to claculate the center of the screen
const wsize = self.renderer.getOutputSize();
const screen_width = @intCast(usize, wsize.width);
const total_spacing = (tabs.len-1) * x_spacing;
const total_width = tabs.len * width;
// Move it from the left to the center
const centering = (screen_width - (total_width + total_spacing)) / 2;
const x = @intCast(i32, tab_i * (width + x_spacing) + centering);
for (curr_tab.contents) |_, sel_i| { for (curr_tab.contents) |_, sel_i| {
self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255); const y = @intCast(i32, 10 + (height + y_spacing) * sel_i) + 100;
// TODO: The shadow should be static, it is easier like this rn tho
if (main_menu.sel == sel_i and tab_i == 1) { if (main_menu.sel == sel_i and tab_i == 1) {
self.renderer.setColor(0, 255, 0, 255); self.renderer.setColor(0, 0, 0, 30);
self.renderer.fillRectangleEx(x+10, y+10, width, height, skew);
} }
// Auxiliary variables to claculate the center of the screen self.renderer.setColor(255, 255, 255, 255);
const wsize = self.renderer.getOutputSize(); self.renderer.fillRectangleEx(x, y, width, height, skew);
const screen_width = @intCast(usize, wsize.width);
const total_spacing = (tabs.len-1) * spacing;
const total_width = (tabs.len * width);
// Move it from the left to the center self.renderer.setColor(0, 0, 0, 255);
const centering = (screen_width - (total_width + total_spacing)) / 2; if (main_menu.sel == sel_i and tab_i == 1) {
self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255);
}
const x = @intCast(i32, tab_i * (width+spacing) + centering); const margin = 20;
const y = @intCast(i32, 10 + (height + spacing) * sel_i); self.renderer.fillRectangleEx(x + margin, y + margin, width - margin*2 , height - margin*2, skew);
self.renderer.fillRectangleEx(x + width-6, y, 6, height, skew);
self.renderer.fillRectangleEx(x + width-12, y, 3, height, skew);
self.renderer.fillRectangle(x, y, width, height);
} }
self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255);
self.renderer.fillRectangleEx(x-25, 10, width+50, height+50, skew);
} }
} }

29
src/Renderer.zig
View File

@ -93,7 +93,7 @@ pub fn init() !Self {
gl.vertexAttribPointer(1, 4, .float, false, @sizeOf(f32) * 6, @sizeOf(f32) * 2); gl.vertexAttribPointer(1, 4, .float, false, @sizeOf(f32) * 6, @sizeOf(f32) * 2);
gl.enableVertexAttribArray(1); gl.enableVertexAttribArray(1);
gl.clearColor(0.91, 0.97, 1.00, 1.00); gl.clearColor(0.91, 0.85, 0.65, 1.00);
// TODO: See if there's a more optimal solution to this, maybe activating only when necessary // TODO: See if there's a more optimal solution to this, maybe activating only when necessary
gl.enable(.blend); gl.enable(.blend);
@ -154,10 +154,11 @@ pub fn drawRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
pub fn fillRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { pub fn fillRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
//const indices = [_]u8{ 1, 3, 0, 1, 3, 2 }; //const indices = [_]u8{ 1, 3, 0, 1, 3, 2 };
self.renderRectangle(x, y, w, h); self.fillRectangleEx(x, y, w, h, 0);
} }
fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { pub fn fillRectangleEx(self: *Self, x: i32, y: i32, w: i32, h: i32, skew_x: i32) void {
// TODO: Is this still necessary?
self.test_counter += 1; self.test_counter += 1;
//gl.uniform4fv(self.color_loc, &.{self.color}); //gl.uniform4fv(self.color_loc, &.{self.color});
@ -167,24 +168,26 @@ fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
var wf = @intToFloat(f32, w); var wf = @intToFloat(f32, w);
var hf = @intToFloat(f32, h); var hf = @intToFloat(f32, h);
const skew_x_offset = @intToFloat(f32, skew_x) * hf / 100;
const i = self.vbo_index; const i = self.vbo_index;
const vertex_data = [36]f32{ const vertex_data = [36]f32{
xf, yf, // up-left xf + skew_x_offset, yf, // up-left
self.color[0], self.color[1],
self.color[2], self.color[3],
xf + wf + skew_x_offset, yf, // up-right
self.color[0], self.color[1], self.color[0], self.color[1],
self.color[2], self.color[3], self.color[2], self.color[3],
xf + wf, yf, // up-right xf - skew_x_offset, yf + hf, // down-left
self.color[0], self.color[1], self.color[0], self.color[1],
self.color[2], self.color[3], self.color[2], self.color[3],
xf, yf + hf, xf + wf - skew_x_offset, yf + hf, // down-right
self.color[0], self.color[1], self.color[0], self.color[1],
self.color[2], self.color[3], self.color[2], self.color[3],
xf + wf, yf + hf, // down-right xf + wf + skew_x_offset, yf, // up-right
self.color[0], self.color[1], self.color[0], self.color[1],
self.color[2], self.color[3], self.color[2], self.color[3],
xf + wf, yf, xf - skew_x_offset, yf + hf, // down-left
self.color[0], self.color[1],
self.color[2], self.color[3],
xf, yf + hf, // down-left
self.color[0], self.color[1], self.color[0], self.color[1],
self.color[2], self.color[3], self.color[2], self.color[3],
}; };
@ -192,6 +195,10 @@ fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
self.vbo_index += 36; self.vbo_index += 36;
} }
fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
self.renderRectangleEx(x, y, w, h, 0);
}
pub const OutputSize = struct { width: c_int, height: c_int }; pub const OutputSize = struct { width: c_int, height: c_int };
pub fn getOutputSize(self: Self) OutputSize { pub fn getOutputSize(self: Self) OutputSize {
var wsize = self.window.getSize(); var wsize = self.window.getSize();