UI overlap question

[dongju.jeong]

 

 

I'm making a UI.

The white background is the cursor, and when the cursor is moved, it is displayed as in the picture.

However, there is a problem with the marked label.

The label should not overlap with the cursor, but I don't know how to make it.

I tried to use this image below, 

 

but the hole should be variable.

Is there a better way?

[silent]

dongju.jeong

It's hard to understand what you really want to achieve. Can you show us a small video and share with us your minimal reproduction sample that you currently have so we can at least check this behavior on our side?

Thanks!

[dongju.jeong]

sorry, I Attached the action video.

We need a feature where the white bar does not cover the text area.

check 9~12 seconds. For reference, the black background is translucent.

Edited November 16, 2020 by dongju.jeong

[silent]

And can you send us your current UI implementation code that we can test and debug?

[dongju.jeong]

We haven't yet created a function to move the cursor bar.

I made only the basic frame, and I hope the background of the text on the left side of the UI is not covered like the contents of the video.

 

this is sample code and textures.

initHud()
{
	auto gui = Gui::get();

	Screen_backgroundHUD = WidgetWindow::create(gui, "I.T SCIENCE ADBoard II. Ver 1.0", 0, 0);
	Screen_backgroundHUD->setWidth(590);
	Screen_backgroundHUD->setHeight(135);	//363-225
	Screen_backgroundHUD->setTransform(Screen_backgroundHUD->getTransform() * translate(vec2(0, -135)));
	Screen_backgroundHUD->setSizeable(1);
	Screen_backgroundHUD->setMoveable(false);
	Screen_backgroundHUD->setBorderColor(vec4(0, 0, 0, 0));
	Screen_backgroundHUD->setBackgroundColor(vec4(0, 0, 0, 0.6));


	SelectMarker = WidgetSprite::create(gui, "CBRN/Textures/UI/select.png");
	Screen_backgroundHUD->addChild(SelectMarker, Gui::ALIGN_OVERLAP);
	SelectMarker->setWidth(558);
	SelectMarker->setHeight(45);
	SelectMarker->setPosition(0, 1+45);

	//==========================================================================================================================
	ScreenContrast_background = WidgetSprite::create(gui, "CBRN/Textures/UI/GuageUI.png");
	Screen_backgroundHUD->addChild(ScreenContrast_background, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenContrast_background->setWidth(548);
	ScreenContrast_background->setHeight(45);

	ScreenContrast_Bar = WidgetSprite::create(gui, "CBRN/Textures/UI/Guage.png");
	Screen_backgroundHUD->addChild(ScreenContrast_Bar, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenContrast_Bar->setWidth(282);
	ScreenContrast_Bar->setHeight(45);
	ScreenContrast_Bar->setTexCoord(vec4(0,0,1,0.5));
	ScreenContrast_Bar->setPosition(-90, 1);

	ScreenContrast_selback = WidgetSprite::create(gui, "CBRN/Textures/UI/selback.png");
	Screen_backgroundHUD->addChild(ScreenContrast_selback, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenContrast_selback->setWidth(66);
	ScreenContrast_selback->setHeight(45);
	ScreenContrast_selback->setPosition(-7, 1);

	ScreenContrast_Value = WidgetLabel::create(gui, "");
	Screen_backgroundHUD->addChild(ScreenContrast_Value, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenContrast_Value->setPosition(-17, 13);
	ScreenContrast_Value->setFont("CBRN/Textures/fontb.ttf");
	ScreenContrast_Value->setFontColor(vec4(1, 1, 1, 1));
	ScreenContrast_Value->setFontSize(25);
	ScreenContrast_Value->setTextAlign(Gui::ALIGN_CENTER);
	ScreenContrast_Value->setFontHSpacing(1);
	ScreenContrast_Value->setText("054");

	WidgetSpritePtr Contrast_Text = WidgetSprite::create(gui, "CBRN/Textures/UI/Contrast_text.png");
	Screen_backgroundHUD->addChild(Contrast_Text, Gui::ALIGN_OVERLAP | Gui::ALIGN_LEFT);
	Contrast_Text->setWidth(93);
	Contrast_Text->setHeight(24);
	Contrast_Text->setPosition(75, 11);

	//-------------------------------------------------------
	ScreenBright_background = WidgetSprite::create(gui, "CBRN/Textures/UI/GuageUI.png");
	Screen_backgroundHUD->addChild(ScreenBright_background, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenBright_background->setWidth(548);
	ScreenBright_background->setHeight(45);
	ScreenBright_background->setPosition(0, 45);

	ScreenBright_Bar = WidgetSprite::create(gui, "CBRN/Textures/UI/Guage.png");
	Screen_backgroundHUD->addChild(ScreenBright_Bar, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenBright_Bar->setWidth(282);
	ScreenBright_Bar->setHeight(45);
	ScreenBright_Bar->setTexCoord(vec4(0, 0, 1, 0.5));
	ScreenBright_Bar->setPosition(-90, 1+45);

	ScreenBright_selback = WidgetSprite::create(gui, "CBRN/Textures/UI/selback.png");
	Screen_backgroundHUD->addChild(ScreenBright_selback, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenBright_selback->setWidth(66);
	ScreenBright_selback->setHeight(45);
	ScreenBright_selback->setPosition(-7, 1+45);
	ScreenBright_selback->setHidden(true);

	ScreenBright_Value = WidgetLabel::create(gui, "");
	Screen_backgroundHUD->addChild(ScreenBright_Value, Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
	ScreenBright_Value->setPosition(-17, 13+45);
	ScreenBright_Value->setFont("CBRN/Textures/fontb.ttf");
	ScreenBright_Value->setFontColor(vec4(1, 1, 1, 1));
	ScreenBright_Value->setFontSize(25);
	ScreenBright_Value->setTextAlign(Gui::ALIGN_CENTER);
	ScreenBright_Value->setFontHSpacing(1);
	ScreenBright_Value->setText("054");

	WidgetSpritePtr Bright_Text = WidgetSprite::create(gui, "CBRN/Textures/UI/Contrast_text.png");
	Screen_backgroundHUD->addChild(Bright_Text, Gui::ALIGN_OVERLAP | Gui::ALIGN_LEFT);
	Bright_Text->setWidth(93);
	Bright_Text->setHeight(24);
	Bright_Text->setPosition(75, 11 +45);
	//====================================================================================================================

	IR_backgroundHUD = WidgetWindow::create(gui, "", 0, 0);
	IR_backgroundHUD->setWidth(590);
	IR_backgroundHUD->setHeight(262);
	IR_backgroundHUD->setTransform(IR_backgroundHUD->getTransform() * translate(vec2(0, 31)));
	IR_backgroundHUD->setSizeable(1);
	IR_backgroundHUD->setMoveable(false);

	IR_backgroundHUD->setBorderColor(vec4(0, 0, 0, 0));
	IR_backgroundHUD->setBackgroundColor(vec4(0, 0, 0, 0.6));

	//temporary
	WidgetSpritePtr ad[5];
	for (int i = 4; i < 5; i++)
	{
		ad[i] = WidgetSprite::create(gui, "CBRN/Textures/UI/GuageUI.png");
		IR_backgroundHUD->addChild(ad[i], Gui::ALIGN_OVERLAP | Gui::ALIGN_RIGHT);
		ad[i]->setWidth(522);
		ad[i]->setHeight(45);
		ad[i]->setPosition(0, i*45);
	}

	WidgetSpritePtr VideoMode_Icon = WidgetSprite::create(gui, "CBRN/Textures/UI/VideoMode_icon.png");
	IR_backgroundHUD->addChild(VideoMode_Icon, Gui::ALIGN_OVERLAP | Gui::ALIGN_LEFT);
	VideoMode_Icon->setWidth(28);
	VideoMode_Icon->setHeight(28);
	VideoMode_Icon->setPosition(185, 10);

	IR_VideoModeMark = WidgetSprite::create(gui, "CBRN/Textures/UI/VideoMode_Mark.png");
	IR_backgroundHUD->addChild(IR_VideoModeMark, Gui::ALIGN_OVERLAP | Gui::ALIGN_LEFT);
	IR_VideoModeMark->setWidth(18);
	IR_VideoModeMark->setHeight(18);
	IR_VideoModeMark->setPosition(130, 10+45);


	//====================================================================================================================

	gui->addChild(Screen_backgroundHUD, Gui::ALIGN_OVERLAP| Gui::ALIGN_BACKGROUND | Gui::ALIGN_CENTER);
	gui->addChild(IR_backgroundHUD, Gui::ALIGN_OVERLAP | Gui::ALIGN_BACKGROUND | Gui::ALIGN_CENTER);
}

UI.zip

 

 

[cash-metall]

hello!

At first i recomended rewrite you code in OOP-style with wrapped class like Menu , MenuRow and smth. without fixed position.
While your code is in one heap, it is difficult for you to understand what is happening in general.

class HUDRowBase
{
	public:

	virtual void decrease() = 0;
	virtual void increase() = 0;
	virtual void setEdited(bool v) = 0;
	virtual void setSelected(bool v) = 0;
	virtual WidgetPtr getWidget() const = 0;
};

class HUDRowSlider : public HUDRowBase
{
public:
	HUDRowSlider()
	{
		w_hbox = WidgetHBox::create(Gui::get());
		edit_sprite = WidgetSprite::create(Gui::get());
		w_hbox->addChild(edit_sprite);
		//...
	}
	void decrease() { /*...*/ }
	void increase() { /*...*/ }
	void setEdited(bool v) { edit_sprite->setHidden(!v); }
	void setSelected(bool v) { select_sprite->setHidden(!v); other_sprite->setTexCoord(...); }
	WidgetPtr getWidget() const { return w_hbox;}
  //...

private:
	WidgetHBoxPtr w_hbox;
	WidgetSpritePtr edit_sprite;
	WidgetSpritePtr select_sprite;
    //...
};

class HUDMenu
{
public:
	HUDMenu()
	{}

	void addRow(HUDRowBase * row)
	{
		rows.append(row);
		w_window->addChild(row->getWidget());
	}

	void setCurrentItem(int item)
	{
		rows[current_item]->setSelected(0);
		current_item = item;
		rows[current_item]->setSelected(1);
	}

private:
	int current_item = 0;
	Vector<HUDRowBase *> rows;
	WidgetWindowPtr w_window;
};


// and use it
HUDMenu menu;
HUDRowSlider *slider = new HUDRowSlider();
slider->setText("text");
slider->setValue(25);
slider->addCallback(...);
menu.addRow(slider)

 

 

second:

i change you code 

Bright_Text = WidgetSprite::create(gui, "CBRN/Textures/UI/Contrast_text2.png"); // instead Contrast_text.png

and right now everything look OK. without any transparent masks

if you are going to make images with text for each element - you can make two sets of images. (or use setTextCoord and one set of double images like Guage.png)

[dongju.jeong]

thank you.