kwik Tutorial

Step2

"TV Desktop" のKwikプロジェクトは InputDevice API (keyboard, game controller etc)が使用可能です。外部コードを使用して、APIを利用します。

概要

前章の "Step1"で、読上げアプリを作成しました。キーボードやコントローラからのイベントを検出して、各ボタンにカーソル(焦点)を当ててる設定を行います。設定ページ (page3)では、接続されているキーボードやコントローラの一覧を表示します。またはキー配置(page4)では、キー配置を表示します。

page1

  • タイトル文字列
  • Read to me ボタン page2に移動
  • Read myself ボタン page2に移動
  • Setting ボタン 設定に移動
  • NaviBtn ボタン サムネイル画像が表示
  • act_init アクション が ページ起動のtimerで動作、langValue 変数をチェック
  • settingボタン page3)に移動

page2

  • "Hello Kwik" 音声とテキスト同期、英語と日本語
  • Kwik Rocket イメージ
  • Back ボタン

設定 setting(page3)

  • Back ボタン
  • language ボタン Englishと日本語の切替え langValue変数に格納
  • Controller ボタンで、コントローラ一覧を表示する。
  • Key Assignment ボタンで キー配置 setup(page4)に移動

キー配置 setup(page4)

  • Back ボタン
  • Edit ボタン to change key assignment of controller

ボタンにカーソルを当てる移動を行うには、下記のような外部コードを設定する必要があります。setButton()関数にレイヤー変数を設定してください。 for page1

kInputDevices:initGroup()
kInputDevices:setButton(layer.btn1)
kInputDevices:setButton(layer.btn2)
kInputDevices:setButton(layer.Settings)
kInputDevices:setButton(layer.NaviBtn)
  • page2, 読上げのレイヤにカーソルを移動可能にするには、下記のsetReadmeSentenceを利用します。

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

    レイヤー名の先頭に' b_ ' が付いています。これは、複数言語が設定されていることを意味します。

  • page3 コントローラ一覧を表示するコードです。 controllersTableUI.luaを使用してください。

    controllersTable:init(sceneGroup, layer.Rect1.x, layer.Rect1.y,layer.Rect1.width, layer.Rect1.height )
    controllersTable:close()
    
  • page4 キー配置の表示と編集を行うためには、 keyAssignTableUI.lua を利用します。

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

外部ライブラリ

外部ライブラリをKwikパネルから設定しておきます。 kwik パネル > プロジェクトとページ > 外部ライブラリの追加。上記のcontrollersTableUI.luaと keyAssignTableUI.luaを追加します。

  • 名称: controllersTable

    • File: assets/extLib/controllersTableUI.lua

  • 名称: keyAssignTable

    • File: assets/extLib/keyAssignTableUI.lua

手動で、下記のファイルを./build フォルダーにコピー&ペーストしてください。

  • 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 がキーボードやコントローラからのイベントを受信するコアモジュールとなっています。現在は、上下の2方向のみに対応しています。

コントローラ一覧やキー配置の表のヘッダー色やフォントサイズなどを変更するには、直接 controllersTableUI.lua と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

外部コードの追加

下記の外部コードを各ページに追加します。kwik パネル > プロジェクトとページ > 外部コードの追加

page1

ボタンやアクションの後

  • 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

ボタンやアクションの後

  • 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)

サンプルプロジェクトでは、 Kwik_Iconに物理設定とボタン設定がされています。

settings

ボタンやアクションの後

  • 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)
    

ページ終了時

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

settings - language と controller ボタン

languageボタンに追加

  • 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)
    

controllersボタンに追加

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

setup

ボタンやアクションの後

  • 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
    

ページ終了時

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

setup - edit ボタン

Editボタンに追加

  • assets/extCode/page_4_table_edit.lua

アイコンなど

手動で下記の png ファイルを ./build フォルダにコピー・ペーストしてください。

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

以上です。パブリッシュして、Corona SDKを開き、デバイス用にビルドしてください。