UI colors and replaced layout with RectCut method.

This commit is contained in:
Kapendev 2025-01-09 02:24:26 +02:00
parent b89bec38e1
commit 5a3d3133d9
9 changed files with 104 additions and 251 deletions

View file

@ -1,21 +1,21 @@
/// This example shows how to create custom UI items.
/// This example shows how to create a custom UI button.
import parin;
auto atlas = TextureId();
bool myButton(IStr text) {
bool myButton(Rect area, IStr text) {
// Create a button without drawing anything.
auto result = updateUiButton(Vec2(80, 30), text);
auto result = updateUiButton(area, text);
// Draw the button above.
if (isUiItemActive) {
drawTextureArea(atlas, Rect(uiItemSize), uiItemPoint, DrawOptions(gray3));
drawTextureArea(atlas, Rect(area.size), area.position, DrawOptions(gray3));
} else if (isUiItemHot) {
drawTextureArea(atlas, Rect(uiItemSize), uiItemPoint, DrawOptions(gray2));
drawTextureArea(atlas, Rect(area.size), area.position, DrawOptions(gray2));
} else {
drawTextureArea(atlas, Rect(uiItemSize), uiItemPoint, DrawOptions(gray1));
drawTextureArea(atlas, Rect(area.size), area.position, DrawOptions(gray1));
}
drawUiText(uiItemSize, text, uiItemPoint, UiOptions(Alignment.left, 6));
drawUiText(area, text, UiOptions(Alignment.left, 4));
return result;
}
@ -27,9 +27,7 @@ void ready() {
bool update(float dt) {
prepareUi();
setUiFocus(0);
setUiStartPoint(Vec2(8));
if (myButton("My Button 1")) println("Boom 1!");
if (myButton("My Button 2")) println("Boom 2!");
if (myButton(Rect(8, 8, 100, 25), "My Button")) println("Boom!");
return false;
}

View file

@ -2,8 +2,8 @@
import parin;
char[32] textBuffer;
Str text;
char[32] textBuffer;
void ready() {
lockResolution(320, 180);
@ -12,12 +12,8 @@ void ready() {
bool update(float dt) {
prepareUi();
setUiFocus(0);
setUiStartPoint(Vec2());
// Create the text field and print if enter is pressed.
// Text field combos: ctrl+backspace, ctrl+x
if (uiTextField(resolution, text, textBuffer)) {
println(text);
}
// Create the text field and print if enter is pressed. Combos: ctrl+backspace, ctrl+x
if (uiTextField(Rect(resolution), text, textBuffer)) println(text);
return false;
}

View file

@ -2,7 +2,7 @@
import parin;
auto handlePosition = Vec2(120, 60);
auto handleArea = Rect(40, 60, 60, 60);
auto handleOptions = UiOptions();
void ready() {
@ -12,15 +12,13 @@ void ready() {
bool update(float dt) {
prepareUi();
setUiFocus(0);
setUiStartPoint(Vec2(8));
// Toggle the limit of the drag handle.
if (uiButton(Vec2(120, 24), "Limit: {}".format(handleOptions.dragLimit))) {
if (handleOptions.dragLimit) handleOptions.dragLimit = UiDragLimit.none;
else handleOptions.dragLimit = UiDragLimit.viewport;
if (uiButton(Rect(8, 8, 120, 25), handleOptions.dragLimit.toStr())) {
handleOptions.dragLimit = handleOptions.dragLimit ? UiDragLimit.none : UiDragLimit.viewport;
}
// Create the drag handle and print if it is dragged.
if (uiDragHandle(Vec2(60), handlePosition, handleOptions)) {
println(handlePosition);
if (uiDragHandle(handleArea, handleOptions)) {
println(handleArea.position);
}
return false;
}

View file

@ -2,8 +2,6 @@
import parin;
auto buttonText = "Hello world!";
void ready() {
lockResolution(320, 180);
}
@ -13,12 +11,8 @@ bool update(float dt) {
prepareUi();
// Disable the UI focus for this frame. Focus is only needed for UIs that support keyboard controls.
setUiFocus(0);
// Set the starting point for subsequent UI items.
setUiStartPoint(Vec2(8));
// Create a button and print if it is clicked.
if (uiButton(Vec2(80, 30), buttonText)) {
println(buttonText);
}
if (uiButton(Rect(8, 8, 100, 25), "Hello world!")) println("World: Hi!");
return false;
}

View file

@ -2,8 +2,10 @@
import parin;
auto textSize = Vec2(90, 24);
auto buttonSize = Vec2(20);
auto groupHeight = 20;
auto groupMargin = 2;
auto buttonWidth = 20;
auto textWidth = 90;
void ready() {
lockResolution(320, 180);
@ -12,15 +14,19 @@ void ready() {
bool update(float dt) {
prepareUi();
setUiFocus(0);
setUiStartPoint(Vec2(8));
// Create a horizontal layout for arranging subsequent UI items.
useUiLayout(Layout.h);
uiText(textSize, "Cool Button", UiOptions(Alignment.left));
if (uiButton(buttonSize, "")) println("Cool");
// Create a new horizontal layout under the previous layout.
useUiLayout(Layout.h);
uiText(textSize, "Super Button", UiOptions(Alignment.left));
if (uiButton(buttonSize, "")) println("Super");
// Create an area for arranging UI items.
auto area = Rect(Vec2(8), resolution - Vec2(8));
auto group = Rect();
// Group 1.
group = area.subTop(groupHeight);
uiText(group.subLeft(textWidth), "Cool Button", UiOptions(Alignment.left));
if (uiButton(group.subLeft(buttonWidth), "")) println("Cool");
// Margin.
area.subTop(groupMargin);
// Group 2.
group = area.subTop(groupHeight);
uiText(group.subLeft(textWidth), "Super Button", UiOptions(Alignment.left));
if (uiButton(group.subLeft(buttonWidth), "")) println("Super");
return false;
}

View file

@ -2,8 +2,10 @@
import parin;
auto buttonSize = Vec2(70, 24);
auto activeMenu = 0;
auto buttonWidth = 70;
auto buttonHeight = 25;
auto buttonMargin = 2;
IStr[4] mainMenu = [
"Start",
@ -12,9 +14,8 @@ IStr[4] mainMenu = [
"Quit",
];
IStr[3] continueMenu = [
IStr[2] continueMenu = [
"Save 1",
"Save 2",
"Back",
];
@ -36,18 +37,20 @@ bool update(float dt) {
if (activeMenu == 1) menu = continueMenu[];
else if (activeMenu == 2) menu = settingsMenu[];
// Draw the menu.
auto menuPoint = resolution * Vec2(0.5);
menuPoint.x -= buttonSize.x * 0.5;
menuPoint.y -= (buttonSize.y * menu.length + uiMargin * (menu.length - 1)) * 0.5;
setUiStartPoint(menuPoint);
auto area = Rect(
resolution * Vec2(0.5),
buttonWidth,
buttonHeight * menu.length + buttonMargin * (menu.length - 1),
).area(Hook.center);
foreach (item; menu) {
if (uiButton(buttonSize, item)) {
if (uiButton(area.subTop(buttonHeight), item)) {
println(item);
if (activeMenu == 0 && item == "Continue") activeMenu = 1;
if (activeMenu == 0 && item == "Settings") activeMenu = 2;
if (item == "Back") activeMenu = 0;
if (item == "Quit") return true;
}
area.subTop(buttonMargin);
}
return false;
}

View file

@ -1,39 +0,0 @@
/// This example shows almost every UI item of Parin.
import parin;
char[20] textFieldBuffer;
Str textFieldText;
auto handleSize = Vec2(140, 7);
auto buttonSize = Vec2(60, 20);
auto textSize = Vec2(140, 12);
auto uiPoint = Vec2();
void ready() {
lockResolution(320, 180);
}
bool update(float dt) {
prepareUi();
setUiFocus(0);
if (Keyboard.f11.isPressed) toggleIsFullscreen();
useUiLayout(Layout.h);
uiDragHandle(handleSize, uiPoint);
useUiLayout(Layout.h);
if (uiButton(buttonSize, "Button")) println("Button");
useUiLayout(Layout.h);
uiText(textSize, "Hello world!");
useUiLayout(Layout.h);
uiTextField(textSize, textFieldText, textFieldBuffer);
return false;
}
void finish() { }
mixin runGame!(ready, update, finish);

View file

@ -17,9 +17,8 @@ bool update(float dt) {
// Set the viewport state for subsequent UI items.
setUiViewportState(viewportPosition, viewport.size, viewportScale);
viewport.attach();
setUiStartPoint(Vec2(8));
foreach (i; 0 .. 3) {
if (uiButton(Vec2(19), i.toStr())) println(i);
if (uiButton(Rect(8, 8 + i * 22, 20, 20), i.toStr())) println(i);
}
viewport.detach();
drawViewport(viewport, viewportPosition, DrawOptions(viewportScale));