kwik Tutorial

Step2

Make sure you chosen "TV Desktop" from Device when you created the project in Step1. It enables InputDevice API (keyboard, game controller etc)

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

  • Title as static image
  • Read to me (button1) to go to page2
  • Read myself (button2) to go to page2
  • Setting button to goto setting page
  • Navigation panel button to show thumbnail image
  • act_init action and timer with 0 sec to check langValue variable of setting(page3)

page2

  • "Hello Kwik" Sync Audio text with multi lingual for English and Japanese
  • Kwik Rocket image
  • Back button

setting(page3)

  • Back button language to switch English or Japanese and save the choice to langValue variable
  • Controller to show the list of connected controllers
  • Key Assignment to go to setup(page4) of key assignment

setup(page4)

  • Back button
  • Edit button to change key assignment of controller

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

kInputDevices:initGroup()
kInputDevices:setButton(layer.btn1)
kInputDevices:setButton(layer.btn2)
kInputDevices:setButton(layer.Settings)
kInputDevices:setButton(layer.NaviBtn)
  • page2, the sentence of 'read to me' is navigatable 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()
    

External Libraries

Add the following external libraries. kwik panel > Project Page > Add External Library. They are the table UI for setting page and setup page.

  • Name: controllersTable

    • File: assets/extLib/controllersTableUI.lua

  • Name: keyAssignTable

    • File: assets/extLib/keyAssignTableUI.lua

copy them manually to ./build folder

  • assets/extLib/click.aac
  • assets/extLib/click.ogg
  • assets/extLib/control_presets_android.json
  • assets/extLib/control_presets_ios.json
  • assets/extLib/control_presets_osx.json
  • assets/extLib/control_presets_tvos.json
  • assets/extLib/control_presets_windows.json
  • assets/extLib/kInputDevices.lua
  • assets/extLib/kOnKeyListener.lua
  • assets/extLib/kOnKeyListenerForEdit.lua
  • assets/extLib/presetcontrols.lua

kOnkeyListener.lua is the core module to handle key or joystic axis event for navigating buttons and currently suppots 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

  • assets/extCode/page_1_buttons.lua

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

page2

After buttons and actions

  • assets/extCode/page_2_buttons.lua

kInputDevices:initGroup()
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

  • assets/extCode/page_3_buttons.lua
  • assets/extCode/page_3_table_init.lua
    kInputDevices:initGroup()
    kInputDevices:setButton(layer.Back)
    kInputDevices:setButton(layer.languages)
    kInputDevices:setButton(layer.controllers)
    kInputDevices:setButton(layer.keyAssign)
    

Disposal

  • assets/extCode/page_3_table_close.lua
    controllersTable:close()
    

settings - language and controller button

button "language" action

  • assets/extCode/page_3_lang.lua
    kInputDevices:initGroup()
    kInputDevices:setButton(layer.enBtn)
    kInputDevices:setButton(layer.jpBtn)
    
  • assets/extCode/page_3_table_hide.lua
    controllersTable:setAlpha(0)
    

button "controllers" action

  • assets/extCode/page_3_table_show.lua
    controllersTable:setAlpha(1)
    

setup

After buttons and actions

  • assets/extCode/page_4_buttons.lua
    kInputDevices:initGroup()
    kInputDevices:setButton(layer.Back)
    kInputDevices:setButton(layer.Edit)
    
  • assets/extCode/page_4_table_init.lua
    keyAssignTable:willShow()
    if keyAssignTable:init(sceneGroup, layer.Rect1.x, layer.Rect1.y+100,layer.Rect1.width, layer.Rect1.height) then
    print("")
    kInputDevices:initGroup()
    keyAssignTable:didShow()
    else
    kInputDevices:initGroup()
    kInputDevices:setButton(layer.Back)
    kInputDevices:setButton(layer.Edit)
    end
    

Disposal

  • assets/extCode/page_4_table_close.lua
    keyAssignTable:willHide()
    keyAssignTable:didHide()
    

setup - edit button

button "Edit"

  • assets/extCode/page_4_table_edit.lua

Icons and Launch images etc

Copy these png files to ./build folders

android(FireTV)

  • assets/tvAsset/Default-Landscape-assets/Default-Landscape.png
  • assets/tvAsset/tvosLaunch-assets/Banner-xhdpi.png

tvos(appleTV)

  • assets/tvAsset/tvosLaunch-assets/Icon-tvOS-Launch.png
  • assets/tvAsset/tvosLaunch-assets/Icon-tvOS-TopShelf.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Large-Background.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Large-LogoA.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Large-LogoB.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Large-LogoC.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Large-LogoD.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Small-Background.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Small-LogoA.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Small-LogoB.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Small-LogoC.png
  • assets/tvAsset/tvosPallax-assets/Icon-tvOS-Small-LogoD.png

Windows

  • assets/DeskTopIcon/Icon-win32.ico

OSX

  • assets/DeskTopIcon/Icon-osx.icns

Done. Publish and Build for device with Corona Simulator.