Eyo how can i make a GUI/UI on tier 1 games

also i mean on the title is how to make a UI on the screen player and also does it need like CSS to do that? or HTML?

also kyle69 if ur gonna reply just reply on mah discord pls KillUa#4553 already added u tho and add me in ur disc server p l e a s e

ok first off you can NOT!!
I repeat CAN NOT!
Use UI on the home page for tier 1 games…
but you could use a custom model when people join to achieve a similar effect when people join it won’t be as good but it’s the best you are going to get for modd.io tier 1

ye i know i can’t but im asking what u use so that u can make a UI is it HTML or CSS?

HTML is what you use

ohhh ok but does it need a little bit of CSS?

no not at all… not any

Isn’t CSS pretty much HTML but with a few additions?

well css you can use to “style” the HTML
Like fonts and borders ext
you can make it look better than with normal HTML
it’s like an addon.
you will see it a lot with websites that rely on pure HTML or
just to make something look better.

u can if u do a modal that says

<div id="mygameui">
Sussy Backiss
</div>
<style>
#mygameui{
position: absolute;
left: 100; //switch with screen pos of ur choosing(X)
right: 100; //switch with screen pos of ur choosing(Y)
z-index: 10000000;
font-size: 10px;
color: black; //text col
background-color: white; //highlight of text
}
</style>

and then it will display Sussy Backiss with black text and a white background
to change it with JS u just gotta do this kinda script

<script>
function changeGUI(value){
document.getElementById("mygameui").innerHTML = value;
}
function goToPosition(x,y){
document.getElementById("mygameui").style.left = x;
document.getElementById("mygameui").style.top = y;
}
function changeColors(txt,bg){
document.getElementById("mygameui").style.backgroundColor = bg;
document.getElementById("mygameui").style.color = txt;
}
function changeFontSize(value){
document.getElementById("mygameui").style.fontSize = value;
}
</script>

to run this is simple

changeGUI("You Are A Real Sussy Backiss");
goToPosition(1000,600);
changeColors("red","black");
changeFontSize("100px");

and thats all that’s needed to make GUI in html in moddio u will need to make 4 global variables tho because moddio blocked the <script> element so u have to make them with the value <scr, ipt>, </scr, ipt> all of those are different global variables and u have to use concatenate to use them in a modal you can just have 2 different variables to identify the scripts and to identify the HTML

eyo wth imma try :>:>:>:>

wait what do u mean 2 global var so im gonna put the html one in the 1 global var and the js one im gonna put it on the 1 global var and go to when player join script and make new action called show custom input modal to player and on the blah blah blah make a contacenate and put the first var and the 2nd var there?
image

:> lol

yea just like that… but you want to make a global variable that goes in between the 4 variables like (GUI)(GUIV1)(GUISCRIPTS)(GUI2)(GUI3) and if u want it to run u put in a modal that’s not input… well u can do input but it’s not reccomended if u want it to run forever do this

<div id="forever">
</div>
<script>
let forever = document.getElementById("forever");
document.body.appendChild(forever);
</script>

but of course since moddio blocks the <script> element ur gonna have to reuse the 4 variables and do the same thing u did with the first set with the second

basically @Just_A-Nub-Scripter use CSS,JS & HTML to make custom UI in HTML

ye im currently learning CSS

but where should i do the HTML Css and JS that i did to make the UI

the reason why u can’t edit the menu is cuz the menu area is its own page while the game is a canvas so the canvas runs its own HTML,CSS & JS like it’s its own page so you can’t edit the menu but u can make ur own that opens through dialogue by using this HTML snippet

<div class="editorElem toggleHide shown menu" oncontextmenu="return false;">
	{{if header}}
	<ul class="header">
		<li><span class="halflings-icon white {{:header.icon}}"></span>{{:header.text}}</li>
	</ul>
	{{/if}}
	{{if search}}
	<div class="searchForm">
		<input type="text" class="searchInput" placeholder="Search..." />
		<div class="searchClear"><span class="halflings-icon white remove"></span></div>
	</div>
	{{/if}}
	<ul class="items">
		{{for groups}}
			{{for ~forEach(#data)}}
				{{for #data}}
					<li onclick="{{:action}}; ige.editor.ui.menus.closeAll(); ige.editor.ui.menus.toggle();" id="{{:id}}" class="{{if sep}}separator{{/if}}" data-val="{{:text}}"><span class="halflings-icon white {{:icon}}"></span> <span class="text">{{:text}}</span></li>
				{{/for}}
			{{/for}}
		{{/for}}
	</ul>
</div>

in a normal modal that isnt input then close that modal right after opening like with a timeout of 100ms

oh ok so its not open custom input modal xd