Widget Link button question.

[ghoflvhxj]

	gui = Leadwerks::GUI::Create(Leadwerks::Context::GetCurrent());
	Leadwerks::Widget* base = gui->GetBase();

	btn_start = Leadwerks::Widget::Button("start", 100, 100, 100, 50, base);
	btn_start->SetString("style", "Link");

hi.

I'm trying to make UI that will apply to my game. but, it does not work out from beginning. haha

I had make simple 'Link' button. but it looks wrong. how can i fix it?

I would appreciate your reply. 

[Josh]

Scripts\Menu.lua has a working example of what you are trying to do.

[ghoflvhxj]

I think i did what Josh said. 

this code make 'Link' button in scripts/menu.lua

	local gui = GUI:Create(context)
      
	--Create a link button
	GameMenu.newbutton = Widget:Button("NEW GAME",100,gui:GetBase():GetSize().y/2-60,300,20,gui:GetBase())
	GameMenu.newbutton:SetString("style","Link")
	GameMenu.newbutton:SetAlignment(1,0,0,0)

	GameMenu.options = Widget:Button("OPTIONS",100,gui:GetBase():GetSize().y/2-10,300,20,gui:GetBase())
	GameMenu.options:SetString("style","Link")
	GameMenu.options:SetAlignment(1,0,0,0)

	GameMenu.quit = Widget:Button("QUIT",100,gui:GetBase():GetSize().y/2+40,300,20,gui:GetBase())
	GameMenu.quit:SetString("style","Link")
	GameMenu.quit:SetAlignment(1,0,0,0)

i write this code in c++. 

	gui = Leadwerks::GUI::Create(Leadwerks::Context::GetCurrent());
	Leadwerks::Widget* base = gui->GetBase();

	btn_start = Leadwerks::Widget::Button("start", 100, 100, 100, 50, base);
	btn_start->SetString("style", "Link");

Could i know what i did worng?

[Josh]

If you post a main.cpp file I can run I will try it out.

[ghoflvhxj]

31 minutes ago, Josh said:

If you post a main.cpp file I can run I will try it out.

sorry i code at app.cpp and app.h 

i upload this two files.

App.h

App.cpp

 

when i set btn's parent to 'gui->GetBase()' the button look wrong.
but i set btn's parent to 'panel' the button look normal.

[GorzenDev]

gui->GetBase() will give you the base widget which is usually the size of the entire window.
a position of 100, 100 with base as parent will end up 100, 100 in the window.
but a position of 100, 100 with panel as parent will end up 100 + panelX, 100 + panelY inside your window.

as for the Link button everything looks like it should.
a Link button ignores any style or text align so wanting to center a link widget will have to manually reposition it.

in my honest opinion do not use Link unless you actually want it to act like a Link.



 

[Josh]

This is occurring because the button gets draw onto the GUI base widget when it is created, but since the base widget has no script it does not get redrawn when the button changes, leaving an area of "corrupt" pixels. The solution is to add the panel script to the base widget. You can make it completely transaparent with alpha and it will be invislbe, but it will still clean up the old pixels:

#include "App.h"
//#include "Player.h"

using namespace Leadwerks;

App::App() : window(nullptr), context(nullptr), world(nullptr), camera(nullptr){}

App::~App() { delete world; delete context;  delete window; }

bool App::Start()
{
	window = Leadwerks::Window::Create("test", 400, 0);
	context = Leadwerks::Context::Create(window);
	world = Leadwerks::World::Create();
	camera = Leadwerks::Camera::Create();
	gui = Leadwerks::GUI::Create(context);

	gui->GetBase()->SetScript("Scripts/GUI/Panel.lua");
	gui->GetBase()->SetObject("backgroundcolor", new Vec4(0.0, 0.0, 0.0, 0.0));

	Leadwerks::Widget* btn = Leadwerks::Widget::Button("btn_test 1", 0, 0, 100, 100, gui->GetBase());
	btn->SetString("style", "Link");
	btn->SetAlignment(1, 0, 0, 0);

	Leadwerks::Widget* panel = Leadwerks::Widget::Panel(200, 200, 400, 100, gui->GetBase());
	Leadwerks::Widget* btn2 = Leadwerks::Widget::Button("btn_test 2", 100, 50, 100, 100, panel);
	btn2->SetString("style", "Link");
	
	return true;
}

bool App::Loop()
{
	if (window->KeyHit(Leadwerks::Key::Escape))
		return false;

	camera->SetClearColor(0.0, 0.0, 1.0);

	camera->SetDebugPhysicsMode(false);
	if (window->KeyDown(Leadwerks::Key::F))
		camera->SetDebugPhysicsMode(true);

	Leadwerks::Time::Update();
	
	world->Update();
	world->Render();

	context->Sync(true);

	return true;
}

In the default script, the panel has 0.5 alpha so it creates a dark overlay on the 3D scene.

[ghoflvhxj]

4 hours ago, GorzenDev said:

gui->GetBase() will give you the base widget which is usually the size of the entire window.
a position of 100, 100 with base as parent will end up 100, 100 in the window.
but a position of 100, 100 with panel as parent will end up 100 + panelX, 100 + panelY inside your window.

as for the Link button everything looks like it should.
a Link button ignores any style or text align so wanting to center a link widget will have to manually reposition it.

in my honest opinion do not use Link unless you actually want it to act like a Link.



 

i'm talk about something different you said.

look this image.

if i made 'link' button which parent set to 'base', general button appear.

but i set 'link' button's parent to panel it appear good. no general button.

i want to know how to disappear that.

 

[ghoflvhxj]

2 hours ago, Josh said:

This is occurring because the button gets draw onto the GUI base widget when it is created, but since the base widget has no script it does not get redrawn when the button changes, leaving an area of "corrupt" pixels. The solution is to add the panel script to the base widget. You can make it completely transaparent with alpha and it will be invislbe, but it will still clean up the old pixels:

#include "App.h"
//#include "Player.h"

using namespace Leadwerks;

App::App() : window(nullptr), context(nullptr), world(nullptr), camera(nullptr){}

App::~App() { delete world; delete context;  delete window; }

bool App::Start()
{
	window = Leadwerks::Window::Create("test", 400, 0);
	context = Leadwerks::Context::Create(window);
	world = Leadwerks::World::Create();
	camera = Leadwerks::Camera::Create();
	gui = Leadwerks::GUI::Create(context);

	gui->GetBase()->SetScript("Scripts/GUI/Panel.lua");
	gui->GetBase()->SetObject("backgroundcolor", new Vec4(0.0, 0.0, 0.0, 0.0));

	Leadwerks::Widget* btn = Leadwerks::Widget::Button("btn_test 1", 0, 0, 100, 100, gui->GetBase());
	btn->SetString("style", "Link");
	btn->SetAlignment(1, 0, 0, 0);

	Leadwerks::Widget* panel = Leadwerks::Widget::Panel(200, 200, 400, 100, gui->GetBase());
	Leadwerks::Widget* btn2 = Leadwerks::Widget::Button("btn_test 2", 100, 50, 100, 100, panel);
	btn2->SetString("style", "Link");
	
	return true;
}

bool App::Loop()
{
	if (window->KeyHit(Leadwerks::Key::Escape))
		return false;

	camera->SetClearColor(0.0, 0.0, 1.0);

	camera->SetDebugPhysicsMode(false);
	if (window->KeyDown(Leadwerks::Key::F))
		camera->SetDebugPhysicsMode(true);

	Leadwerks::Time::Update();
	
	world->Update();
	world->Render();

	context->Sync(true);

	return true;
}

In the default script, the panel has 0.5 alpha so it creates a dark overlay on the 3D scene.

thank you josh!