本文へスキップ

Kwik App Design Book: 27 External Codes Multi Pages


Created Friday 11 September 2015

Overall steps

  • 4 external files are used, kwik_init.lua, kwik_create.lua, kwik_show.lua and kwik_destroy.lua
  • all pages use the 4 external-codes files. Use copy/paste on Kwik panel to paste them all pages
  • create buttons, text, audio and animations on page_1 by Kwik and Publish to make page_1.lua
  • Using text editor (sublime recommended), copy the codes on page_1.lua to kwik_init.lua, kwik_create.lua, kwik_create.lua and kwik_destroy.lua
  • Publish by Kwik to insert the updated external codes to each lua pages.

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

Setup

page_1 has home button, music on/off buttons, loading message text, next/previous buttons and page number text. These componetns will be generated to the rest of pages by the extenal codes

In the sample, you find ext_tmpls folder that contains kwik_init.lua, kwik_create.lua, kwik_show.lua and kwik_destroy.lua. These files are skelton and don't have specific codes yet.

Add external codes Project and Pages> Add External Code

kwik_init.lua for Before layers

kwik_create for After layers

kwik_show.lua for After buttons and actions

kwik_destroy.lua for Disposal

Copy interactions

Paste interactions to all the pages





Publish to check all pages

Each kwik_xx.lua has print debug and you see print messages in the console app


Display objects

open kwik_create.lua and page_1.lua by text edtior


Make the layout 2 column to show page_1.lua side by kwik_create.lua
Find display.newImageRect functions on page_1.lua and copy them all.
From layer.Layer_1,

To layer.onBtn.

Past them the inside if on kwik_create.lua and save the file.

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

Publish again

You will see the display objects are copied to page_2, page_3 and page_4

Buttons

On page_1, add but_home, but_prev and but_next.
but_home is set to go to page2. This will be replaced to goto page1 in the extenal codes later.

but_prev to go back previous page

but_next to go to next page

Publish to update page_1.lua

updated page_1.lua has the codes for the buttons. Let's copy them to kwik_show.lua
you can find 'Button names' on page_1.lua with search on text editor
copy and paste them under if curPage ~=1 then on kwik_show.lua

'Button event listeners' to be copied and pasted
Selecting From onhomeBtnEven,

To but_next

Replace for the defined varibale

Pasted codes on kwik_show.lua, "page_1" and "page_2" must be replaced for the following defined variables.

  • homePageName
  • prevPageName
  • nextPageName

but_home

but_home go to page_1. So modify "page_2" to homePageNum
Select "page_2"

Replaced as homePageName

but_prev

replace "page_1" for prevPageName


but_next

replace "page_2" for nextPageName


Publish and check the buttons

Page numbering

layer replacement > Text replacement

Publish to update page_1.lua

Now layer.pageNum is display.newText on page_1.lua
Copy the codes for layer.pageNum and replace the previous codes for layer.pageNum on kwik_create.lua

And kwik_show.lua add the following lines

layer.pageNum.text = curPage

That's all and Publish to check each page showing the page number


Audio

add audio on page_1.lua

Play in all pages is off

copy audio.loadStream to kwik_init.lua

copy audio.setVolume and audio.play to kwik_show.lua

Now the audio is played in all pages.

on/off BGM

but_offSnd to pause audio and toggle show/hide offBtn and onBtn layer

but_onSnd to resume audio and toggle show/hide offBtn and onBtn layer

Publish to update page_1.lua

When you create new buttons, don't forget to update 'Button names' to kwik_show.lua

Copy ononBtnEvent and onoffBtnEvent functions to kwik_show.lua

Copy but_offSnd and but_onSnd to kwik_show.lua

Publish and test them

loading message and inital state

loading message and onSnd button should be hidden when the page starts
So create an Action to hide them and set a timer with the action which starts without waiting.

actInit is created

Hide action for loadingTxt

Hide action for onBtn

Timer

Timer with 0 seconds delay and play 1 time

Publish to update page_1.lua

Copy 'local act_init' declaration to kwik_show.lua

Copy act_init and timer codes to kwik_show.lua

Loading message

loading messag animation is just for 1 second to popup the "loading" by 1 time

Add Play animations to but_next and but_prev

Publish to update page_1.lua

Copy the animatios to kwik_show.lua

Update but_next and but_prev codes with liner_loading to those of kwik_show.lua

Finally the following codes are inserted to kwik_show.lua. nextBtn and prevBtn is displayed after 2 seconds to avoid chidlren from tapping mutiple times to go to next page.

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


End of the tutorial