|
Okay, so let's get over the face that the top bar can't be removed. It's just one of those things we have to simply accept and move on, y'know what I mean? It's truly pointless. HOWEVER, there is, to a point, at which we can customize the top bar.
Let me explain.
So you can modify the transparency, it can be fully visible, or half visible. This will be how we do a few h4xxy tricks at customizing the top bar. Leave it at it's default, half visible.
So next we need to make a frame which goes BEHIND it. This is the core of our customization. The important properties here are Size and Position. This is what they should be:
Size: UDim2.new(1, 0, 0, 36) To set in properties menu: {1, 0}, {0, 36}
Position: UDim2.new(0, 0, 0, -36) To set in properties menu: {0, 0}, {0, -36}
Good, we've effectively gotten rid of the transparency of the top bar, it's fully visible. No; this is not all of the tutorial. Now we can color it. Keep in mind that this gui is, in reality, covered by the CoreGui, so it will be shaded by Color3.new(31/255, 31/255, 31/255) this means you cannot get a color any lighter than Color3.new(143/255, 143/255, 143/255) on either red, green, or blue. Here's a useful script for determining what color background you need in order to get a set result:
function MultiplyColor3ByNumber(C3, n)
return Color3.new(C3.r*n, C3.g*n, C3.b*n)
end
function SubtractColor3s(C31, C32)
return Color3.new(C31.r-C32.r, C31.g-C32.g, C31.b-C32.b)
end
function GetBackground(C3, cover)
return SubtractColor3s(MultiplyColor3ByNumber(C3, 2), cover)
end
function GetBackgroundTopBar(C3)
return GetBackground(C3, Color3.new(31/255, 31/255, 31/255))
end
Good job! You've colored your top bar! You should have a result like one of these now:
www.yogile.com/i5nko6xq#41m
But we're not finished! No no no, we're adding MORE! We can add our own buttons. These buttons will also be shaded, keep that in mind while designing the images for the buttons. You need to have very good graphical design skills in order to design buttons effectively.
How to add the buttons? Okay, add an ImageButton to our Frame, the properties that should be changed are Size, Position, BackgroundColor3, Transparency, Image
Size: UDim2.new(0, 50, 0, 36) To set in properties menu: {0, 50}, {0, 36}
Position: UDim2.new(0, 50*slot, 0, 0) To set in properties menu: {0, 50*slot}, {0, 0}
BackgroundColor3: Color3.new(163/255, 162/255, 165/255) To set in properties menu: 163, 162, 165
Transparency: 1
Image: ""
50*slot means which slot you want it in, for example slot 1 is taken by the escape menu button, slot 2 is taken by backpack.
Good, keep Image blank, add an ImageLabel to that ImageButton, properties:
Size: UDim2.new(0, 32, 0, 25) To set in properties menu: {0, 32},{0, 25}
Position: UDim2.new(0.5, -16, 0.5, -12) To set in properties menu: {0.5, -16},{0.5, -12}
BackgroundColor3: Color3.new(163/255, 162/255, 165/255) To set in properties menu: 163, 162, 165
Transparency: 1
Image: "THE URL TO YOUR IMAGE GOES HERE"
Put that URL in and you're good! You've now added your own buttons, but you can't click them!!!!!!!!!!!!!
How to add clicking? You need a LocalScript which uses:
http://wiki.roblox.com/index.php?title=API:Class/UserInputService/InputBegan
http://wiki.roblox.com/index.php?title=API:Class/InputObject/UserInputType
http://wiki.roblox.com/index.php?title=API:Class/InputObject/Position
When they click, detect if they clicked inside the button boundaries. Something like this:
local UIS = game:GetService("UserInputService")
function Call(slot)
if slot == 3 then
--Custom button code for slot 3
elseif slot == 4
--Custom button code for slot 4
elseif slot == 5
--etc.
end
end
UIS.InputBegan:connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseButton1 then
local x,y = input.Position.x, input.Position.y
if y <= 0 then
local slot = ((x+50)-(x%50))/50
Call(slot)
end
end
end)
This should effectively allow you to track clicks to your buttons. Once done you should have something like this:
http://postimg.org/image/svqgc84rt/
with fully working buttons!
I hope this tutorial was fairly comprehensive. Any opinions are welcome. |
|
KingJackoJoin Date: 2008-06-20
Post Count: 3944 |
Nice idea, havent even thought of something about this top bar. |
|
|
"Okay, so let's get over the face that the top bar can't be removed."
fact* (before someone corrects me) |
|
iiEssenceJoin Date: 2014-06-18
Post Count: 3467 |
I like it
I don't need a siggy |
|
|
lostendJoin Date: 2011-08-21
Post Count: 8265 |
noice! |
|
|
Does this work for all native resolutions, even mobile? |
|
|
TimeTicksJoin Date: 2011-04-27
Post Count: 27115 |
@war please have my babies. <3
"Talk is cheap. Show me the code." - Linus Torvalds |
|
|
@Dyn Not sure, I would assume the topbar would have a different size on mobile, so you'd have to determine the how big it is on mobile and use that size.
I might be wrong however.
Does anybody know the size of the topbar and it's buttons on mobile? |
|
|
@Time I'll take that as a compliment, but no matter how I spin it, it's still creepy. |
|
lordramboJoin Date: 2009-06-16
Post Count: 20628 |
"Leave it at it's default..."
its*
Better me than someone else, right?
Anyway, nice job with the direct color setting, even though it has to be within some arbitrary range. |
|
|
"Better me than someone else, right?"
I suppose so. I keep forgetting you cannot use ' for possession when it's the word its.
"it's the word its"
Confusing O_o
Anyhow, thanks. I think adding button support was big though. It was so trivial to do, but I hadn't thought about it until I was talking to Maxomega3 about adding further customization. XD |
|
lordramboJoin Date: 2009-06-16
Post Count: 20628 |
It also doesn't apply to "yours". |
|
|
I know that... Surprisingly XD |
|
chimmihcJoin Date: 2014-09-01
Post Count: 17143 |
Nice work, I never would have thought of doing buttons XD |
|
|
LuaLlamaJoin Date: 2014-01-25
Post Count: 1123 |
This gives me some many ideas, thank you so much!
(Not sharing incase someone might steal it D:)
"We are but a whisper to the crowd." |
|
|
Ooh! Now I'm curious! Please share! (Or at least PM it to me qq. I like to know the ideas people get that stem from my own.) |
|
iiEssenceJoin Date: 2014-06-18
Post Count: 3467 |
(share wit me)
I don't need a siggy |
|
lostendJoin Date: 2011-08-21
Post Count: 8265 |
For topbar, just do this:
gui.Size=UDim2.new(1,0,1,0)
gui.Position=UDim2.new(0,0,-1,0)
The origin (0,0), assuming that is what it is called
is right below the topbar, so that would work on mobile too. |
|
|
I already told you that it's stupid to put buttons UNDER a frame. |
|
|
@COOL
That's fair enough. |
|
|
@nQ With proper contrasting colors it could look pretty cool :P |
|
maxomega3Join Date: 2010-06-11
Post Count: 10668 |
time to redo all the coreGUIs just to make another button match
Hello World! |
|