UI Basics

• Image - Normal images (logo, etc.),

• UI - Buttons, menus (options button, pause menu, etc.),

• Text - Dynamic text (ball count, highest distance, etc.),

• Canvas - Other UI elements can be drawn on canvases for simultaneous manipulation.

function init() --ui elements are usually initalized in the init() function

...

coolImage = mgCreateImage("cool.png") --specify image path

perfectUi = mgCreateUi("perfect.xml") --specify ui path

niceText = mgCreateText("numbers",true) --specify font (fonts folder) and size (false for 8x8, true for 4x4)

beautifulCanvas = mgCreateCanvas(2048, 768) --specify size

...

end

function draw() --mgDraw calls must be in the draw() function

...

mgDraw(coolImage) --put mgDraw calls in the order you want

mgDraw(perfectUi) --elements will be drawn on top of elements that came before it

mgDraw(niceText)

if tonumber(mgGet("player.ballcount")) > 50 then --example of  conditional draw (if ballcount > 50)

mgDraw(beautifulCanvas)

end

...

end

Both main.lua files contain a function called initGlobals(), in which position variables are set.

function initGlobals()

top = tonumber(mgGet("display.visibleTop"))

left = tonumber(mgGet("display.visibleLeft"))

right = tonumber(mgGet("display.visibleRight"))

bottom = tonumber(mgGet("display.visibleBottom"))

centerX = (left+right)*0.5

centerY = (top+bottom)*0.5

end

They are useful for making sure UI is at a correct position on devices with different screen aspect ratios.

For example:

mgSetPos(niceText,left+100,bottom-100,"linear",1.0) - Move niceText linearly to position left+100, bottom-100 over 1 second

• Making a button

• Making a menu

• Custom text display

• Using a canvas