Introduction

Modified

UXP

• Open

  kwik4	kwik5
  the psd files are under Kwik/{Project Name} folder.	Please choose a folder that has the psf files to be published

• Solar2D Project

  this tells where to publish images of a PSD to a solar2D project Kwik4 was under build4 folder and no choice was available

  • New

    creates a book folder under App folder. A book has scenes(pages). Each scene is genereted from each psd file.

  • Select

    you can select a book where a psd is published as a scene(page).

    • App/{bookName}

Folder structure

• Book > scene (page) > layer

  names of psd files are used to create a scene lua file for Solar2D composer instead of the fixed sequence page01, page02 .. in kwik4

  
  

  kwik4	kwik5
  pageOne.psd is refered to “page01” - assets/images/p1 - components/page01 - commands/page01 - views/page01Scene.lua.	pageOne.psd is “pageOne” - assets/images/pageOne - components/pageOne - commands/pageOne - components/pageOne/index.lua

• dist folder

  kwik4	kwik5
  build4 - assets/images/p1 - components/page01 - commands/page01 - views/page01Scene.lua.	App/{bookName} - assets/images/pageOne - components/pageOne - commands/pageOne - components/pageOne/index.lua commands/common components/common components/bookstore

  bookshelf is renamed to bookstore that is an enhancement of the kwik4’s bookshefl imlementation (it was provided with kwikshelf.plugin)

Lua

• main.lua

  you can load a book project with the following code.

  require("controller.index").bootstrap({name="bookFree", sceneIndex = 1 })
  

  sceneIndex is defined in App/{bookName}/index.lua

  local scenes = {
      "page1",
      "page2",
  }
  return scenes
  

• App/{bookName}/components/{pageName}/layers/{layerName}.lua

  a component or layer lua file is retrived from composer library of Solar2D.

  kwik4	kwik5
  UI.layer local bg = UI.layer.bg	UI.scene.view local bg = UI.scene.view.bg

  kwik4’s UI.layer is obsolete.

  Kwik5 holds all layers in UI.layers as an array, and also UI.scene.view contains all the layers with it.

  function M:create(UI)
    local sceneGroup = UI.scene.view
    -- layers is a array
    local layers = UI.layers
    for i=1, #layers do
      print(layers[i].name)
    end
    -- sceneGroup is a hash table
    local bg = sceneGroup["bg"]
    print(bg.name)
  end
  

New Features

UXP

• Validate Names: layer names in Japanese Kana

  • symbols are converted to ‘_’
  • ‘レイヤー 1’ is converted to ‘reiya_1’

• Layer Groups: publish images of a nested layer group.

Kwik Editor in Solar2D

animation, button, layer repleacements(spritesheet,video, particles) are editied with Kwik Editor in Solar2D.

It helpes to change values of components properties easily, or add/attach a component class to a layer visually for designers to do a no-code editing

Kwik5 is aimed to be a low code tool faster to work with .lua code easily and directly. See the next Lua section

Lua

Kwik4 had .kwk xml to hold a properties/values of a Kwik project. Kwik5 uses .lua mainly

• App/{bookName}/index.lua

  you can add your own(custom) page to the index.lua

  local scenes = {
  "page1",
  "page2",
  "yourPageName"
  }
  return scenes
  

• App/{bookName}/components/{pageName}/index.lua

  layers form photoshop(images) and other resouces are separated.

  • you can add your own(custom) layers to the layers table

    • nested layres are supported

      layers = {
        ...
        { title = {}},
        {
          customLayeTop = {
            {panelOne ={ }},
            {panelTwo = { {buttonOne={} }, {buttonTwo={} }} }
        }
      }
      

  • you can add your own(custom) components to the components table

    page sceneName = ...
    --
    local scene = require('controller.scene'page(sceneName, {
        name = "page1",
        components = {
          layers = {
              {  bg={} },
              {  gotoBtn={} },
              {  title={} },
              {  customLayerName={} },
    
           },
          audios = {  },
          groups = {  },
          timers = {  },
          variables = {  },
          pages = { "yourComponentName"  }
        },
        commnands = {  },
        onInit = function(scene) print("onInit") end
    })
    --
    return scene
    

• layer has a class

  Kwik4’s animation, button, layer replacements(spritesheet,video, particles,,) equal to a class in kwik5

  you may add your own custom class to a layer

  layers = {
    ...
    { title = {}, class={"animation", "button", "yourClass"}},
  }
  

• components

  Kwik4’s audio, group, timer, varaible are treated as components in a scene in Kwik5

  components = {
    layers = {
        {  bg={} },
        {  gotoBtn={} },
        {  title={} },
    },
    audios = {
      long  = {"longOne", "longTwo" },
      short ={"shortOne","shortTwo"} ,
      sync  = {"syncOne", "syncTtwo", en={"helloen"}, jp={"hellojp"}}
    }
    groups = {"groupOne","groupTwo"},
    timers = {"timerOne", "timerTwo"},
    variables = {"varOne", "varTwo"},
  },
  

• common component examples

  • navigation
    • WASD key navigation
    • swipes
    • thumbnails
  • bookstore navigation

• Commands

  App/{bookName}/components/{pageName}/index.lua has commnands for events.

  For example, panelOne.OK event that comes from a button in panelOne. It fires OK event, and actions code in panelOne.OK.lua in App/{bookName}/commnads/{pageName} will be exectued.

  page sceneName = ...
  --
  local scene = require('controller.scene'page(sceneName, {
      name = "page1",
      layers = {
            {  bg={} },
      ...
      },
      components = {
      ...
      },
      commnands = {
        "panelOne.OK",
        "panelOne.Cancel",
        "timerOne",
        "actionOne",
        },
      onInit = function(scene) print("onInit") end
  })
  --
  return scene
  

Bookstore

• portrait view for library
• book table view

  • each book status: isFree, isPurchased, isDownloadable, isDownloaded

    • online icon

    See the section of bookstore/components/#Photoshop files table.psd

  • restore & download all