make Item and Column use Image for their icons
This commit is contained in:
parent
bfca7a4d92
commit
5148d4a040
1 changed files with 82 additions and 65 deletions
147
src/main.zig
147
src/main.zig
|
|
@ -3,57 +3,48 @@ pub fn main() !void {
|
|||
defer _ = gpa.deinit();
|
||||
const allocator = gpa.allocator();
|
||||
|
||||
raylib.SetConfigFlags(raylib.FLAG_VSYNC_HINT | raylib.FLAG_WINDOW_RESIZABLE);
|
||||
raylib.SetConfigFlags(raylib.FLAG_VSYNC_HINT); // | raylib.FLAG_WINDOW_RESIZABLE);
|
||||
raylib.InitWindow(@intFromFloat(screen_width), @intFromFloat(screen_height), "ReX");
|
||||
defer raylib.CloseWindow();
|
||||
|
||||
// raylib.SetWindowMinSize(480, 272);
|
||||
// raylib.SetWindowMaxSize(1920, 1080);
|
||||
// scales.recalculate();
|
||||
raylib.SetWindowMinSize(480, 272);
|
||||
raylib.SetWindowMaxSize(1920, 1080);
|
||||
scales.recalculate();
|
||||
|
||||
// global_font = raylib.LoadFontEx("font/SCE-PS3-RD-R-LATIN.TTF", 32, 0, 250);
|
||||
// raylib.SetTextureFilter(global_font.texture, raylib.TEXTURE_FILTER_TRILINEAR);
|
||||
global_font = raylib.LoadFontEx("font/SCE-PS3-RD-R-LATIN.TTF", 32, 0, 250);
|
||||
raylib.SetTextureFilter(global_font.texture, raylib.TEXTURE_FILTER_TRILINEAR);
|
||||
|
||||
// var background = Background.init();
|
||||
// var column = Column.init(
|
||||
// allocator,
|
||||
// raylib.LoadTextureFromImage(raylib.GenImageChecked(64, 64, 8, 8, raylib.BLACK, raylib.WHITE)),
|
||||
// "Game",
|
||||
// );
|
||||
// defer column.deinit();
|
||||
var background = Background.init();
|
||||
var column = Column.init(
|
||||
allocator,
|
||||
raylib.LoadTextureFromImage(raylib.GenImageChecked(64, 64, 8, 8, raylib.BLACK, raylib.WHITE)),
|
||||
"Game",
|
||||
);
|
||||
defer column.deinit();
|
||||
|
||||
// var item = Item.init(
|
||||
// raylib.LoadTexture("menu/game/CometCrash/ICON0.PNG"),
|
||||
// "Comet Crash",
|
||||
// "",
|
||||
// );
|
||||
// try column.appendItem(&item);
|
||||
|
||||
var image = Image{
|
||||
.box = .{ .x = 2, .y = 2, .w = screen_width - 4, .h = screen_height - 4 },
|
||||
.texture = raylib.LoadTextureFromImage(raylib.GenImageChecked(256, 128, 8, 8, raylib.WHITE, raylib.BLACK)),
|
||||
};
|
||||
var item = Item.init(
|
||||
raylib.LoadTexture("menu/game/CometCrash/ICON0.PNG"),
|
||||
"Comet Crash",
|
||||
"",
|
||||
);
|
||||
try column.appendItem(&item);
|
||||
|
||||
raylib.SetTargetFPS(120);
|
||||
while (!raylib.WindowShouldClose()) {
|
||||
if (raylib.IsWindowResized()) {
|
||||
screen_width = @floatFromInt(raylib.GetScreenWidth());
|
||||
screen_height = @floatFromInt(raylib.GetScreenHeight());
|
||||
image.box.w = screen_width - 4;
|
||||
image.box.h = screen_height - 4;
|
||||
// scales.recalculate();
|
||||
scales.recalculate();
|
||||
}
|
||||
// if (raylib.IsKeyPressed('Z')) item.setBig(!item.large);
|
||||
if (raylib.IsKeyPressed('D')) debug_draw = !debug_draw;
|
||||
if (raylib.IsKeyPressed('Z')) item.setBig(!item.large);
|
||||
if (raylib.IsKeyPressed('S')) raylib.TakeScreenshot("screenshot.png");
|
||||
|
||||
raylib.BeginDrawing();
|
||||
defer raylib.EndDrawing();
|
||||
|
||||
// background.draw();
|
||||
// column.draw();
|
||||
|
||||
raylib.ClearBackground(raylib.BLACK);
|
||||
image.draw();
|
||||
background.draw();
|
||||
column.draw();
|
||||
|
||||
raylib.DrawFPS(1, 1);
|
||||
|
||||
|
|
@ -63,6 +54,8 @@ pub fn main() !void {
|
|||
}
|
||||
}
|
||||
|
||||
var debug_draw = true;
|
||||
|
||||
var global_font: raylib.Font = undefined;
|
||||
|
||||
var screen_width: f32 = 480;
|
||||
|
|
@ -72,8 +65,10 @@ var scales: Scales = undefined;
|
|||
|
||||
/// Cached scaling and positioning values for dynamic window resizing.
|
||||
pub const Scales = struct {
|
||||
item_icon_small_scale: f32,
|
||||
item_icon_large_scale: f32,
|
||||
item_icon_small_width: f32,
|
||||
item_icon_small_height: f32,
|
||||
// item_icon_small_scale: f32,
|
||||
// item_icon_large_scale: f32,
|
||||
item_title_font_size: f32,
|
||||
item_subtitle_font_size: f32,
|
||||
|
||||
|
|
@ -84,8 +79,10 @@ pub const Scales = struct {
|
|||
|
||||
/// Recalculate scales after screen resize.
|
||||
pub fn recalculate(self: *Scales) void {
|
||||
self.item_icon_small_scale = 0.272727;
|
||||
self.item_icon_large_scale = 0.272727;
|
||||
self.item_icon_small_width = 67;
|
||||
self.item_icon_small_height = 48;
|
||||
// self.item_icon_small_scale = 0.272727;
|
||||
// self.item_icon_large_scale = 0.272727;
|
||||
self.item_title_font_size = 16;
|
||||
|
||||
self.column_icon_scale = 0.75;
|
||||
|
|
@ -118,27 +115,32 @@ pub const Column = struct {
|
|||
}
|
||||
|
||||
pub fn draw(self: *Column) void {
|
||||
const icon_position = scales.column_position_center;
|
||||
const icon_scale = scales.column_icon_scale;
|
||||
const icon_width = @as(f32, @floatFromInt(self.icon.width)) * icon_scale;
|
||||
const icon_height = @as(f32, @floatFromInt(self.icon.height)) * icon_scale;
|
||||
var icon = Image{
|
||||
.texture = self.icon,
|
||||
.box = .{
|
||||
.x = scales.column_position_center.x,
|
||||
.y = scales.column_position_center.y,
|
||||
.w = 67,
|
||||
.h = 48,
|
||||
},
|
||||
};
|
||||
|
||||
const title_font_size = scales.column_title_font_size;
|
||||
const title_font_spacing = 1.0;
|
||||
const title_size = raylib.MeasureTextEx(global_font, @ptrCast(self.title), title_font_size, title_font_spacing);
|
||||
const title_position = raylib.Vector2{
|
||||
.x = icon_position.x + icon_width / 2.0 - title_size.x / 2.0,
|
||||
.y = icon_position.y + icon_height + 6,
|
||||
.x = icon.box.x + icon.box.w / 2.0 - title_size.x / 2.0,
|
||||
.y = icon.box.y + icon.box.h + 6,
|
||||
};
|
||||
|
||||
var y: f32 = scales.column_position_center.y + icon_height + title_size.y + 24;
|
||||
var y: f32 = scales.column_position_center.y + icon.box.h + title_size.y + 24;
|
||||
for (self.items.items) |item| {
|
||||
item.position = .{ .x = scales.column_position_center.x, .y = y };
|
||||
item.draw();
|
||||
y += 64;
|
||||
}
|
||||
|
||||
raylib.DrawTextureEx(self.icon, icon_position, 0, icon_scale, raylib.WHITE);
|
||||
icon.draw();
|
||||
raylib.DrawTextEx(global_font, @ptrCast(self.title), title_position, title_font_size, title_font_spacing, raylib.WHITE);
|
||||
}
|
||||
|
||||
|
|
@ -157,9 +159,9 @@ pub const Column = struct {
|
|||
|
||||
pub const Item = struct {
|
||||
position: raylib.Vector2 = .{ .x = 0, .y = 0 },
|
||||
icon_scale: f32,
|
||||
start_scale: f32,
|
||||
time: f32 = 0.0,
|
||||
// icon_scale: f32,
|
||||
// start_scale: f32,
|
||||
// time: f32 = 0.0,
|
||||
|
||||
icon: raylib.Texture2D,
|
||||
title: []const u8,
|
||||
|
|
@ -172,37 +174,43 @@ pub const Item = struct {
|
|||
.icon = texture,
|
||||
.title = title,
|
||||
.subtitle = subtitle,
|
||||
.icon_scale = scales.item_icon_small_scale,
|
||||
.start_scale = scales.item_icon_small_scale,
|
||||
// .icon_scale = scales.item_icon_small_scale,
|
||||
// .start_scale = scales.item_icon_small_scale,
|
||||
};
|
||||
}
|
||||
|
||||
pub fn draw(self: *Item) void {
|
||||
self.time += raylib.GetFrameTime();
|
||||
self.icon_scale = std.math.lerp(
|
||||
self.start_scale,
|
||||
if (self.large) scales.item_icon_large_scale else scales.item_icon_small_scale,
|
||||
easeOutExpo(self.time / 0.333),
|
||||
);
|
||||
// self.time += raylib.GetFrameTime();
|
||||
// self.icon_scale = std.math.lerp(
|
||||
// self.start_scale,
|
||||
// if (self.large) scales.item_icon_large_scale else scales.item_icon_small_scale,
|
||||
// easeOutExpo(self.time / 0.333),
|
||||
// );
|
||||
|
||||
const icon_position = raylib.Vector2{
|
||||
.x = self.position.x - (@as(f32, @floatFromInt(self.icon.width)) * self.icon_scale - 64),
|
||||
.y = self.position.y,
|
||||
var icon = Image{
|
||||
.texture = self.icon,
|
||||
.box = .{
|
||||
.x = self.position.x - scales.item_icon_small_width / 2.0 + 67.0 / 2.0,
|
||||
.y = self.position.y,
|
||||
.w = scales.item_icon_small_width,
|
||||
.h = scales.item_icon_small_height,
|
||||
},
|
||||
};
|
||||
|
||||
const title_size = raylib.MeasureTextEx(global_font, @ptrCast(self.title), scales.item_title_font_size, 1);
|
||||
const title_position = raylib.Vector2{
|
||||
.x = icon_position.x + 8 + @as(f32, @floatFromInt(self.icon.width)) * self.icon_scale,
|
||||
.y = icon_position.y + (@as(f32, @floatFromInt(self.icon.height)) * self.icon_scale) / 2.0 - title_size.y / 2.0,
|
||||
.x = icon.box.x + 8 + icon.box.w,
|
||||
.y = icon.box.y + icon.box.h / 2.0 - title_size.y / 2.0,
|
||||
};
|
||||
|
||||
raylib.DrawTextureEx(self.icon, icon_position, 0, self.icon_scale, raylib.WHITE);
|
||||
icon.draw();
|
||||
raylib.DrawTextEx(global_font, @ptrCast(self.title), title_position, scales.item_title_font_size, 1, raylib.WHITE);
|
||||
}
|
||||
|
||||
pub fn setBig(self: *Item, big: bool) void {
|
||||
self.large = big;
|
||||
self.time = 0;
|
||||
self.start_scale = self.icon_scale;
|
||||
// self.time = 0;
|
||||
// self.start_scale = self.icon_scale;
|
||||
}
|
||||
|
||||
fn easeOutExpo(x: f32) f32 {
|
||||
|
|
@ -324,7 +332,16 @@ pub const Image = struct {
|
|||
.right => self.box.y + self.box.h - height * scale,
|
||||
},
|
||||
};
|
||||
raylib.DrawTextureEx(self.texture, position, 0, scale, raylib.WHITE);
|
||||
if (debug_draw)
|
||||
raylib.DrawRectangleLines(
|
||||
@intFromFloat(self.box.x),
|
||||
@intFromFloat(self.box.y),
|
||||
@intFromFloat(self.box.w),
|
||||
@intFromFloat(self.box.h),
|
||||
raylib.MAROON,
|
||||
)
|
||||
else
|
||||
raylib.DrawTextureEx(self.texture, position, 0, scale, raylib.WHITE);
|
||||
}
|
||||
|
||||
pub const Mode = enum { original, fit, fill };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue