Kwik Editor

you have published .psd files with kwik exporter. The images are the code for Solar2D are available in the output folder - App/book.

You can manually open Solar2D simulator with Solar2D/main.lua useually when not using kwik exporter in Photoshop.

Solar2D Welcom Window > Open Project

Select main.lua and then click Corona Simulator in the context menu

I use vscode’ extension Run Terminal to load the simualtor like this

• mac

  {"command":"\"/Applications/Corona/Corona Simulator.app/Contents/MacOS/Corona Simulator\" ./ -no-console YES",
  "name":"Solar2D"},

• win

    {
    "command": "'C:\\Program Files (x86)\\Corona Labs\\Corona\\Corona Simulator.exe' -no-console  main.lua",
    "auto": true,
    },

Simulator Skin

Kwik Editor skin is available. It has been installed by installer module in Solar2D folder automtically.

Please select it from Simulator > Window > View As

The install skin is located in the follwoing folder in Mac

main.lua

Kwik Editor in Solar2D simulator has a feature to open main.lua in Microsoft Visual Code (vscode). You can click main.lua label at the top next to the icons

You set the current page by setting env.goPage variable in main.lua. The env.mode “development” shows Kwik Editor, and env.mode = “production” won’t show Kwik Editor.

local env = require("env")
env.book   = "book"
env.goPage = "landscape"
env.lang   = ""
--
env.restore = false
--
env.mode = "development"
-- env.mode = "production"
-- env.mode = "debug" -- need kwik5-plugin src from kwiksher's repo

--
if env.mode == "development" or env.mode == "debug" then
  env.props = {
    name = env.book,
    editor = true,
    gotoPage = env.goPage,
    language = env.lang, -- empty string "" is for a single language project
    position = {x = 0, y = 0},
    gotoLastBook = false,
    unitTest = false,
    httpServer = false,
    showPageName = true,
    turnOffNativeVideo = true
  }
elseif env.mode == "production" then
  env.props = {
    name = env.book,
    editor = false,
    gotoPage = env.goPage,
    language = env.lang, -- empty string "" is for a single language project
    position = {x = 0, y = 0},
    gotoLastBook = false,
    unitTest = false,
    httpServer = false,
    showPageName = false,
    turnOffNativeVideo = false
  }
end
--
--
system.setTapDelay(0.2)
--
--
if env.setPlugin(env.mode)  then
  local kwik = require("kwiksher.kwik")
  --
  --display.setDefault( "background", 0.2, 0.2, 0.2, 0.1 )
  kwik.useGradientBackground()
  --

  if env.restore and  kwik.restore() then
    native.showAlert("kwik", "restored comment it out kwik.restore()")
    return
  end

  kwik.setCustomModule(
    "custom",
    {
      commands = {"myEvent"},
      components = {
        -- "align",
        "myComponent",
        "thumbnailNavigation",
        "index"
        -- "keyboardNavigation",
      }
    }
  )
  --
  kwik.bootstrap(env.props)
  --
end

Book & Page view

These icons switch the view to Book & Page view,component view with showing layer table view, Action table view or Asset table view.

Book & Page

• book names and page names are lsited

how to ignore a book in App folder

App/bookstore.lua, add a folder name to M.bookignored table

Component view

Layer names are listed in the layer table view

Then you can select a layer name to configure animation, button etc

Linear Animation

1. select Candice layer

1. click rocket icon at the left vertical toolbar

1. click linear icon, it shows animation properties for editing

   

2. Cancel or Save to exit

Button

1. select one of readMe layer

   

2. click Arrow icon at the left vertical toolbar

   

3. click Button icon , it shows button properties for editing

   

   _target is set with the layer name.

   

   you can click onTap property to attach an action.

Action

1. click action icon at the top tool bar, then select New

   

2. input an action name, and select Continue, you see action editing panel

   

Assets

assets folder in Solar2D project directoryy is the place you put media files like audio, particles, spritesheets, videos, www(html). In kwik editor, you set a link to it in a compnent’s properties panel.

For instance, plaing an BGM, you can put a .mp3 file into assets/audios/long folder manually, then use kwik editor > audio to create a new audio object. For video replacement, .mp4 should be put in assets/videos folder, then choose one of .mp4 files for video replacement.

audios/short for a short event sounds, they are small enough the entire file to be loaded in memory

Audio

from asset icon > Audio, you can select which audo should be used in the page.

• if autoPlay is false, you need to make an action to play audio after saving the audio properties.

Thunder is saved with Save button, and you see it in audio table of component view.

Asset Table view lists the media files in assets folder for the book. Componnet Table view shows configured audio, spritsheet etc, ready to be loaded in the page.

• Action > Audio > play

  

  • click _target property. It will show you audio table to select one of them.

    click Thunder and save it.

  

  Action command audio.play Thunder is saved

  

  Save the action

  The simulator is reloaded, and you see the new action in action table.

  

Edit button with onTap to execute an action

Finally you can set the new action to a button’s onTap event. Click onTap property of button, the action table appears for you to select one.

For edting a component, while pressing option key, mouse click the component(class) name in layer table.

1. click onTap

   

2. click audioAction

   

3. audioAction is set

Save the button.

TODO Building and Distribution

Live build, HTML5

• disiable the editor or only enable the editor simulator

  if ( system.getInfo( "environment" ) == "simulator" ) then
      print( "You're in the Solar2D Simulator." )
  end