☰
Navigation :

Step 2

Step2

Make sure you enable Key Navigation in General of Project Properties. It enables InputDevice API (keyboard, game controller etc). It is available in Kwik 4.0.7

Overview.

By last chapter “Step1”, a simple app has been created. Let’s add InputDevice navigation, Controllers list on page3 and key assigment table on page4

page1

page2

setting(page3)

setup(page4)

each page needs an external code for button navigation. Set the button layer names

for page1

kInputDevices:setButton(layer.btn1)
kInputDevices:setButton(layer.btn2)
kInputDevices:setButton(layer.Settings)
kInputDevices:setButton(layer.NaviBtn)

page2, the sentence of ‘read to me’ comes with the following code

kInputDevices:setReadmeSentence(layer.b_helloEn, true)
-- true for each word, false speaker icon only

Be aware helloEn layer has prefix ' b_ ‘. It is an identification of multi language layer

page3 shows the list of controllers connected. Use controllersTableUI.lua

controllersTable:init(sceneGroup, layer.Rect1.x, layer.Rect1.y,layer.Rect1.width, layer.Rect1.height )
controllersTable:close()

page4 shows and edits the key assignment of controllers. Use

keyAssignTableUI.lua

keyAssignTable:willShow()
keyAssignTable:init(sceneGroup, layer.Rect1.x, layer.Rect1.y+100,layer.Rect1.width, layer.Rect1.height)
keyAssignTable:willHide()
keyAssignTable:didHide()

extlib/tv

you can find the following lua files in extlib/tv folder if you want to customize the look&feel

you also find kOnkeyListener.lua that is the core module to handle key or joystick axis event for navigating buttons and currently supports 2-way direction(up or down) only.

To change the color or text font, edit the lua codes in controllersTableUI.lua or keyAssignTableUI.lua.

local _headerColor     = { 0.42, 0.42, 0.42, 0.9 }
local _headerLabel     = "current controllers"
local _backgroundColor = { 0.8, 0.8, 0.8, 0.3 }
local _rowColor        = { 1, 1, 1, 0.05 }
local _fontSize        = 20*768/320*2
local _rowHeight       = 50*768/320

External codes

Add the following external code to each page. kwik panel > Project Page > Add External Code.

page1

After buttons and actions

kInputDevices:setButton(layer.btn1)
kInputDevices:setButton(layer.btn2)
kInputDevices:setButton(layer.Settings)
kInputDevices:setButton(layer.NaviBtn)

page2

After buttons and actions

kInputDevices:setReadmeSentence(layer.b_helloEn, true) 
-- true for each word, false speaker icon only

kInputDevices:setButton(layer.layer.Kwik_Icon_276_2)
kInputDevices:setButton(layer.backEn)

See sample project file for Kwik_Icon. It has set as physics body

settings

After buttons and actions

kInputDevices:setButton(layer.Back)
kInputDevices:setButton(layer.languages)
kInputDevices:setButton(layer.controllers)
kInputDevices:setButton(layer.keyAssign)

Disposal

controllersTable:close()

settings - language and controller button

button “language” action

kInputDevices:setButton(layer.enBtn)
kInputDevices:setButton(layer.jpBtn)

hiding the table

controllersTable:setAlpha(0)

button “controllers” action

controllersTable:setAlpha(1)

setup

After buttons and actions

kInputDevices:setButton(layer.Back)
kInputDevices:setButton(layer.Edit)

initiating the table

keyAssignTable:willShow()
if keyAssignTable:init(sceneGroup, layer.Rect1.x, layer.Rect1.y+100,layer.Rect1.width, layer.Rect1.height) then
  print("")
  keyAssignTable:didShow()
else
  kInputDevices:setButton(layer.Back)
  kInputDevices:setButton(layer.Edit)
end

Disposal

  keyAssignTable:willHide()
  keyAssignTable:didHide()

setup - edit button

button “Edit”

Icons and Launch images etc

Copy these png files to ./build folders

android(FireTV)

tvos(appleTV)

Windows

OSX

Done. Publish and Build for device with Corona Simulator.