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?
2 Likes
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
2 Likes
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
1 Like
ye i know i can’t but im asking what u use so that u can make a UI is it HTML or CSS?
2 Likes
HTML is what you use
2 Likes
ohhh ok but does it need a little bit of CSS?
2 Likes
no not at all… not any
2 Likes
Isn’t CSS pretty much HTML but with a few additions?
1 Like
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.
2 Likes
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
2 Likes
eyo wth imma try :>:>:>:>
2 Likes
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?
:> lol
2 Likes
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
2 Likes
ye im currently learning CSS
2 Likes
but where should i do the HTML Css and JS that i did to make the UI
3 Likes
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>
3 Likes
in a normal modal that isnt input then close that modal right after opening like with a timeout of 100ms
3 Likes
oh ok so its not open custom input modal xd
3 Likes