Last active
July 1, 2022 16:30
-
-
Save caillef/89e3269eacb3e28731fee0221679b593 to your computer and use it in GitHub Desktop.
V0.1 of a simple UI Kit to place texts and icons in Particubes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- UI KIT ---------------------------------- | |
-- ADD IN YOUR ITEMS "caillef.empty" | |
-- (and if you try the example, you need to add "caillef.coin") | |
-- EXAMPLES AT THE END TO UNDERSTAND HOW TO USE THE UIKIT | |
-- V0.1 - SIMPLE TEXTS, ICONS and ANIMATIONS | |
-- 17 Apr. 2022 | |
-- @caillef#4956 on Discord | |
-- ALIASES --------------------------------- | |
local EMPTY = Items.caillef.empty | |
local ADD,MS,FLR = table.insert, MutableShape, math.floor | |
local FOREACH = function(l,c) for k,o in ipairs(l) do c(o,k) end end | |
local DEL_IN_LIST = function(l,a) for k,b in ipairs(l)do if a==b then table.remove(l,k) return true end end return false end | |
local DEBUG_POS = function(p) print(p.X,p.Y,p.Z) end | |
-- END ALIASES --------------------------------- | |
-- COLORS ---------------------------------- | |
local WHITE = 229 | |
local BLACK = 211 | |
local BROWN = 235 | |
local BEIGE = 97 | |
local GREEN = 133 | |
-- END COLORS ------------------------------ | |
local FONT = { | |
0, 0, 0, 0, 0, 0, 0, 0, 0, | |
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
0, 0, 0, 4329476, 10813440, 11512810, 0, 0, 0, 4325376, -- 30 | |
2232450, 8523912, 10627072, 145536, 136, 14336, 4, 2167048, 15018318, 12718222, -- 40 | |
14760206, 14760014, 10827842, 14956622, 14956878, 14747714, 15022414, 15022158, 131200, 131208, -- 50 | |
3555715, 459200, 25363672, 14749700, 0, 15022410, 12925262, 14950670, 12921166, 14954766, -- 60 | |
14954760, 14952782, 10828106, 14815374, 14815372, 10889546, 8659214, 18732593, 18667121, 15018318, -- 70 | |
15022344, 15018317, 15020362, 6568012, 14815364, 10824014, 10824004, 18536123, 10817866, 10827908, -- 80 | |
14749966, 6426758, 8654914, 12718220, 4521984, 14, 8519680, 15022410, 12925262, 14950670, -- 90 | |
12921166, 14954766, 14954760, 14952782, 10828106, 14815374, 14815372, 10889546, 8659214, 18732593, -- 100 | |
18667121, 15018318, 15022344, 15018317, 15020362, 6568012, 14815364, 10824014, 10824004, 18536123, -- 110 | |
10817866, 10827908, 14749966, 6434950, 4329604, 12720268, 283712 -- 120 | |
} | |
local uiKit_Animated = {} | |
local uiKit_Texts = {} | |
local uiKit_Icons = {} | |
local uiKit_RotatingIcons = {} | |
local uiKit_WIDE = 1082401 | |
local uiKit_FSIZE = 5 | |
local uiKit_LEFT = 1 | |
local uiKit_CENTER = 2 | |
local uiKit_RIGHT = 3 | |
uiKit_2dPosTo3d = function(p) return Number3(p[1]*8, p[2]*4.5, 10) end | |
uiKit_textSize = function(t) local s=0 for i=1,#t do s=s+4 if(FONT[string.byte(t:sub(i,i))]&uiKit_WIDE)>0 then s=s+2 end end return s end | |
uiKit_getShift = function(t,a)if a==uiKit_CENTER then return -uiKit_textSize(t)/2 elseif a==uiKit_RIGHT then return -uiKit_textSize(t)end return 0 end | |
uiKit_createText = function(key, pos, scale, color, defaultValue, align, bgColor) | |
defaultValue = defaultValue or "" | |
align = align or uiKit_LEFT | |
uiKit_Texts[key] = {pos=pos,scale=scale,color=color,bgColor=bgColor,align=align} | |
uiKit_updateText(key, defaultValue) | |
return uiKit_Texts[key].obj | |
end | |
uiKit_updateText = function(key, text) | |
text = tostring(text) | |
local data=uiKit_Texts[key] | |
local localPosition,localRotation | |
if data.obj then | |
if data.text == text then return data.obj end | |
localPosition = data.obj.LocalPosition | |
localRotation = data.obj.LocalRotation | |
data.obj:RemoveFromParent() | |
end | |
if #text == 0 then data.text = text return end | |
local s,o=uiKit_getShift(text,data.align),MS(EMPTY) | |
o:GetBlock({0,0,0}):Remove() | |
o.IsUnlit = true | |
local bgColor = data.bgColor | |
if bgColor then | |
for j=-3,3 do | |
for i=-1,uiKit_textSize(text)+1 do o:AddBlock(bgColor, {s+i,j,1}) end | |
end | |
end | |
local c = data.color | |
for i=1,#text do | |
local v = FONT[string.byte(text:sub(i,i))] | |
if (v&uiKit_WIDE)>0 then s=s+1 end | |
for j=0,uiKit_FSIZE*uiKit_FSIZE-1 do | |
if ((v >> j) & 1) > 0 then o:AddBlock(c,{-(j+1)%uiKit_FSIZE+s,FLR(j/uiKit_FSIZE)-2, 0}) end | |
end | |
s=s+4 | |
if (v&uiKit_WIDE)>0 then s=s+1 end | |
end | |
o.Scale = data.scale | |
data.obj = o | |
data.text = text | |
if not localPosition then | |
uiKit_updateTextPosition(key, data.pos) | |
else | |
o.LocalPosition = localPosition | |
o.localRotation = localRotation | |
end | |
Camera:AddChild(o) | |
return o | |
end | |
uiKit_updateTextPosition = function(key, pos) | |
local data = uiKit_Texts[key] | |
if not data then return end | |
local obj = data.obj | |
data.pos = pos | |
obj.LocalPosition = uiKit_2dPosTo3d(pos) | |
obj.Forward = obj.LocalPosition | |
end | |
uiKit_updateIconPosition = function(iconKey, pos) | |
local icon = uiKit_Icons[iconKey] | |
if not icon then return end | |
icon.LocalPosition = uiKit_2dPosTo3d(pos) | |
icon.Right = -icon.LocalPosition - Number3(3,4,0) | |
end | |
uiKit_createIcon = function(key, itemName, pos, scale, rotatingSpeed) | |
local icon = Shape(itemName) | |
icon.IsUnlit = true | |
uiKit_Icons[key] = icon | |
icon.iconKey = key | |
Camera:AddChild(icon) | |
icon.Scale = scale | |
uiKit_updateIconPosition(key, pos) | |
if rotatingSpeed then | |
icon.rotatingSpeed = rotatingSpeed | |
ADD(uiKit_RotatingIcons,icon) | |
end | |
return icon | |
end | |
uiKit_handleAnimation = function(o, dt) | |
o.currentTime = o.currentTime + dt | |
if o.currentTime > o.animationDuration then | |
if o.callback then o.callback() end | |
DEL_IN_LIST(uiKit_Animated, o) | |
o:RemoveFromParent() | |
return | |
end | |
local delta = o.currentTime / o.animationDuration | |
uiKit_updateIconPosition(o.iconKey, { o.start[1]+delta*o.deltaPos[1], o.start[2]+delta*o.deltaPos[2] }) | |
end | |
uiKit_update = function(dt) | |
FOREACH(uiKit_RotatingIcons, function(o) | |
o:RotateLocal({ 0, dt * o.rotatingSpeed, 0 }) | |
end) | |
FOREACH(uiKit_Animated, function(o) | |
uiKit_handleAnimation(o,dt) | |
end) | |
end | |
uiKit_startAnim = function(itemName, scale, start, final, duration, callback) | |
local key = tostring(math.random()) | |
local icon = uiKit_createIcon(key, itemName, start, scale) | |
icon.currentTime = 0 | |
icon.animationDuration = duration | |
icon.start = start | |
icon.deltaPos = { final[1] - start[1], final[2] - start[2] } | |
icon.callback = callback | |
ADD(uiKit_Animated, icon) | |
end | |
-- END UI KIT | |
--[[ | |
EXAMPLE | |
Client.OnStart = function() | |
init_UI() | |
-- ... the rest of your code | |
end | |
Client.Tick = function(dt) | |
uiKit_update(dt) | |
-- ... the rest of your code | |
end | |
--]] | |
-- This is your function, you can modify the content | |
init_UI = function() | |
-- a Position in the UIKit is defined by two numbers { X, Y }. Examples: { 0, 1 } { -1, 0.5 } { -0.2, 1 } | |
-- X=-1 is left, X=0 is middle, X=1 is right | |
-- Y=-1 is bottom, Y=0 is middle, Y=1 is top | |
-- SPAWN TEXT | |
-- the first parameter is the key to find that object when updating the text (uiKit_updateText("nbCoins", "0001")) | |
-- then the position X=0.9, Y=1 and the scale 0.1 | |
-- WHITE is an alias for the color 229, see other colors at the top of the package | |
-- then the default value and the align value (uiKit_LEFT by default). If uiKit_RIGHT, then the position of the text is the end of the text | |
uiKit_createText("nbCoins", { 0.9, 1 }, 0.1, WHITE, "0000", uiKit_RIGHT) | |
uiKit_createText("testTxt", { -0.4, 0.7 }, 0.15, GREEN, "Test", uiKit_CENTER, BLACK) -- the last parameter can be the background color | |
-- UPDATE TEXT | |
uiKit_updateText("testTxt", "A new text") | |
-- SPAWN AN ICON | |
-- Spawn a coin icon at the center of the screen (X=0,Y=0), with a scale of 0.1 (you can increase this value) | |
-- "coins" is the key to keep a reference to that coin for the next example updateIconPosition | |
uiKit_createIcon("coins", Items.caillef.coin, { 0, 0 }, 0.1) | |
-- MOVE AN EXISTING ICON INSTANTLY | |
-- After 2 seconds, teleport the icon at the top | |
Timer(2, function() | |
-- Place the icon in the middle (X=0) and at the top of the screen (Y=1) | |
uiKit_updateIconPosition("coins", { 0, 1 }) | |
end) | |
-- ROTATING ICON | |
-- Spawn another icon at the top right hand corner (X=1, Y=1) with a scale of 0.2 and rotating at a speed of 1 | |
uiKit_createIcon("rotatingIcon", Items.caillef.coin, { 1, 1 }, 0.2, 1) | |
-- SPAWN AN ICON AND START AN ANIMATION | |
-- After 5 seconds, start an animation to move a coin from the middle to the top of the screen | |
Timer(5, function() | |
-- Spawn 1 coin in the middle of the screen, scale 0.1, starting at (0,0), ending at top middle (0,1), in 3 seconds | |
-- the last parameter is a callback called at the end of the animation, here changing the amount of coins | |
uiKit_startAnim(Items.caillef.coin, 0.2, { 0, 0 }, { 1, 1 }, 1, function() | |
uiKit_updateText("nbCoins", "0001") | |
end) | |
end) | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment