kwik Tutorial

TVとDesktop

Sample Project to download

http://kwiksher.com/gitbook/ch02/TVTest.zip

基本的な流れ

  • "TV Desktop"をデバイスとして、Kwikのプロジェクトを作成します。

  • キーボード・コントローラ(inputDevice)の対応を行う前に、Corona Simulatorにてマウスでボタンによるアクションや画面遷移の動作確認を行っておいてください。

    • iOS/Android -- touch
    • TV -- controller
    • Desktop -- mouse + keyboard
  • マウスによる動作確認が終了したのちに、キーボード・コントローラによるナビゲーションを可能にする 外部コードを設定します。

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

SettingとSetup ページ

Setting(設定)ページを用意して、接続しているキーボード・コントローラの一覧を表示します。Setup(セットアップ)ページにて、キーボードやコントローラのキー配置を表示します。キー配置は編集することも可能です。コントローラの一覧やキー配置の表は、以下のサンプルライブラリのファイルを利用してください。

  • 名称:controllersTable assets/extLib/controllersTableUI.lua

  • 名称:keyAssignTable assets/extLib/keyAssignTableUI.lua

アイコンとデバイス向けビルド

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

    .ico と .icns ファイルは、下記のコマンドをターミナルで実行して作成可能です。 icon_xx.png のファイルを用意してください。Windows パソコンでは、image magicがインストールされている必要があります。

  • mac_icon.command

    rm -r icon.iconset
    cp -r desktop_icon-assets icon.iconset
    cd icon.iconset
    rm icon_48x48.png
    cp icon_32x32.png icon_16x16@2x.png
    mv icon_64x64.png icon_32x32@2x.png
    cp icon_256x256.png icon_128x128@2x.png
    cp icon_512x512.png icon_256x256@2x.png
    mv icon_1024x1024.png icon_512x512@2x.png
    cd ..
    iconutil --convert icns --output Icon-osx.icns icon.iconset
    
  • win_icon.bat

    set MYDIR=desktop_icon-assets
    set ICON_FILE=Icon-win32.ico
    convert ./%MYDIR%/icon_16x16.png ./%MYDIR%/icon_32x32.png ./%MYDIR%/icon_48x48.png %ICON_FILE%
    

Image Magick http://www.imagemagick.org/

Parallax Previewer App https://developer.apple.com/library/tvos/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html#//apple_ref/doc/uid/TP40015241-CH19-SW1

Corona SDK のビルドでは .lsr ファイルは使用しません。各 Logo.png ファイルを用意してください。

PSD files - Image assets from layers https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

インストール

Apple TVのXCode simulatorでは動作確認ができません。Corona SDKでビルドしたのちは、Appple TVやFireTV本体にアプリをインストールして、動作確認を行ってください。

  • appleTV (第4世代)は、 USB-Type C のケーブルでMacに接続します。
  • corona SDK > build > tvos を選択して、ビルド後にアプリをデバイスにインストールする設定にしておきます。
  • FireTV とパソコンを同じWiFiの無線LANに接続します。
  • 設定 > 開発者オプションより、 adb debugging と不明元ソースからのアプリのインストールを許可します。
  • 設定 > バージョン情報 >ネットワーク より IP アドレスを確認しておきます。
  • .apk ファイルを Corona SDKでビルドします。ターミナルより、 adb connectコマンドと adb installコマンドでアプリをインストールします。
  • adb connect ip_address_of_fireTV:5555
  • adb install -r your_app.apk

  • OSX アプリのビルドには、 Macが必要です。

  • Windows アプリのビルドには、Windowsパソコンが必要dす。

FireTV

制限

  • AppleTVのアプリのサイズは、最大200MB です。

    https://www.macstories.net/news/interesting-apple-tv-tidbits-app-size-limits-parallax-icons-more/

  • AppleTVのローカルフォルダは制限されています。 system.DocumentsDirectory ではなく、System.CacheDirectoryが利用可能です。このCacheに変数やブックマークなどの情報が保存されます。Cacheであるために、情報が失われてしまう可能性があります。アプリ内課金に関連したデータを保存するのは控えた方が良さそうです。

    https://forums.coronalabs.com/topic/60137-file-storage/

  • ドラッグ アンド ドロップ

  • 4方向の移動
  • 複数のコントローラの利用
  • デスクトップのマウス
    • 右クリック
    • マウスホイール
  • コピー&ペースト

動画(Video)

native.newVideo() を使用することで、appleTV, fireTV, OSXにて、動画再生が可能ですが、Windowsでは動作しません。Windowsでは、 URL スキームをSystem.openURLにて指定して、別アプリを起動する必要があります。

fireTV は、 アンドロイドデバイスですので、通常のCorona SDKがサポートする機能が動作します。

video with webview

video with native.newVideo()

  • tvos ok
  • OSX ok
  • Windows not supported, media.playVideo()も動作しません。