本文へスキップ

Kwik App Design Book: 27 External Codes Multi Pages


Created Friday 11 September 2015

手順

  • kwik_init.lua, kwik_create.lua, kwik_show.lua と kwik_destroy.luaの4つの外部ファイルを使用します。
  • 各ページに外部コードの設定を行います。Kwikのパネルのcopy/paste機能を使用します。
  • ページ1にボタンやテキスト、アニメーションなどを作成して、 Publishを行い、 page_1.luaを更新します。
  • テキストエディター (sublime 3推奨)を使用して、page_1.lua のコードをkwik_init.lua, kwik_create.lua, kwik_create.lua kwik_destroy.lua のファイルにコピー&ペーストします。
  • Publishを行い、外部コードを各ページに反映させます。

Sample kwik project file:http://kwiksher.com/tutorials/Samples/overlay.zip

Setup

page_1には、 ホームボタン、サウンドのオン・オフのボタン、読み込み中のテキスト、次・前のページ移動のボタン、ページ番号のレイヤーが用意されています。これらの部品を外部コードにコピーして、各ページにも反映させます。

サンプルファイルのext_tmpls フォルダに kwik_init.lua, kwik_create.lua, kwik_show.lua kwik_destroy.luaのひな形ファイルが格納されています。このファイルに、page_1.luaの内容をコピー&ペーストします。

外部コードの追加します。プロジェクトとページから  外部コードをクリックします。

kwik_init.luaを描画の前に追加します。

kwik_create.luaを描画の後に追加します。

kwik_show.lua をボタンやアクションの後に追加います。

kwik_destroy.lua をページ終了時に追加します。

page_1の外部コードを残りのページに設定するために、Kwikパネルのコピーを使用します。

ペーストアイコンをクリックします。

前ページに張付けにチェックを入れてください。




パブリッシュして、動作を確認します。

各 kwik_xx.lua にはプリントのデバッグメッセージが設定されています。コンソールに表示されます。


Display objects

kwik_create.lua と page_1.lua をテキストエディターで開きます。


テキストエディターで page_1.lua とkwik_create.luaを横並びします。
page_1.luaのdisplay.newImageRect 関数を検索して見つけ、各レイヤーの画像表示のコードをkwik_create.luaにコピー&ペーストしてください。
layer.Layer_1から,

layer.onBtnを選択して、コピー&ペーストします

ペースト先は、 kwik_create.luaの下記の if 節の中となります。

  • if curPage ~= 1 then
  • — Paste here
  • end

ファイルを保存して、Publishを行ってください。

各ページにレイヤーが表示されました。

Buttons

ホームボタン、次のページ、前のページのボタンを設定します。

  • but_home,
  • but_prev
  • but_next

ホームボタンは、but_homeと命名します。page2に移動にしておきますが、後に外部コードでpage1に移動に変更します。

前のページのボタンは、but_prev と命名します。

次のページのボタンは、but_next と命名します。

Publishして、page_1.luaを更新します。

更新された page_1.lua には、ボタン関連のコードが追加されています。これらのコードを kwik_show.luaにコピー&ペーストします。先ず 'Button names' という文字列を page_1.luaで検索して見つけてください。ボタンの名称の定義をコピーして、kwik_show.luaの if curPage ~=1 then の中にペーストしてください。

次に 'Button event listeners' という文字列を検索して見つけてください。ホームボタン、次のボタン、前のボタンのコードを選択して、コピー&ペーストしてください。
onhomeBtnEven関数から,

but_next関数まで

Replace for the defined varibale

ボタンの関数の中の "page_1" と "page_2" というページ名を次の変数名に置換する必要があります。

  • homePageName
  • prevPageName
  • nextPageName

but_home

ペーストしたbut_home関数の中の "page_2" を homePageNumに置換します。
変更前: "page_2"

置換後: homePageName

but_prev

but_prevの"page_1" を prevPageNameに置換します。
変更前

置換後

but_next

but_nextの"page_2" を nextPageNameに変換します。
置換前

置換後

Publishして、動作確認を行います。

Page numbering

レイヤー pageNumを選択して、ページ番号の表示のために、レイヤー置換から、テキストに変換を使用します。

Publishして、 page_1.luaを更新します。

layer.pageNumを検索すると display.newTextに変更されていることが分かります。
変更された箇所をコピーして、 kwik_create.luaのlayer.pageNumのコードを更新してください。

次に kwik_show.lua に下記のコードを追加します。

layer.pageNum.text = curPage

Publishして、動作を確認してください。

Audio

ページ1にサウンドを設定します。

全てのページで再生にチェックは無効にしてあります。

Publishして、更新された page_1.luaのAudio listの定義である audio.loadStream関連のコードを kwik_init.lua にコピー&ペーストします。

Audiosのaudio.setVolume と audio.play関連のコードを kwik_show.lua にコピー&ペーストします。

各ページにサウンドが設定されました。

on/off BGM

サウンドのオンとオフのボタン設定です。but_offSnd にはサウンド停止(pause audio)とレイヤーの表示・非表示の切り替えを設定します。

but_onSndには、再生 resume audio)とレイヤーの表示・非表示の切り替えを設定します

Publishして、page_1.luaを更新してください。

Button namesのボタンの定義をコピー&ペーストすることを忘れないで下さい。

ボタンのイベント関数である ononBtnEventと onoffBtnEvent 関連のコードをコピーします。

ボタンの動作が記述されている but_offSnd や but_onSndをコピー&ペーストします。

Publish して動作を確認してください。

loading message and inital state

loading 中のメッセージとサウンド再生(onSnd)はページの開始時に非表示にします。非表示にするアクションを設定して、このアクションをタイマーで起動します。タイマーの起動は0秒です。

actInit というアクションを作成します。

Hide アクションを loadingTxtのレイヤーに設定

Hide アクションを onBtnに設定

Timerを作成します。

Timer を 0 秒で起動して、 1 回動作させます。

Publishして、page_1.luaを更新してください。

Action namesの定義の 'local act_init' の宣言を kwik_show.lua にコピー&ペーストします。

act_init と timer 関連のコードをコピー&ペーストします。

Loading message

loadingTxtレイヤーの線形アニメーションは1秒で表示状態となるだけの簡単なものです。回数は1回のみです。開始にはWait requestが設定されています。

but_nextとbut_prevにアニメーション再生を追加します。

Publishして、page_1.luaを更新してください。

Animationsのコードをコピー&ペーストします。

but_next と but_prev のコードにlinear_loadingが追加されています。kwik_show.luaのbut_nextとbut_prevも更新します。

最後に次のコードを kwik_show.luaに追加してみました。 nextBtnと prevBtn のレイヤーの表示を2秒遅らせるアニメーションです。これによって、ユーザが慌てて複数回のタップを行いページが進んでしまう場合が緩和されるでしょう。

  • transition.from(layer.nextBtn, {alpha =0, time= 2000, delay = 2000})
  • transition.from(layer.prevBtn, {alpha =0, time= 2000, delay = 2000})


End of the tutorial