Component & Asset

First of all, you need to put media files into each folder under App/book/assets. Use Finder(Mac) or File Explore (Win), and copy&paste your pre-made files into them. The folder names under App/book/assets are fixed for kwik editor to use them, so don’t change it.

• App/book/asset

  kwik editor lists media files under App/book/assets folder

  

  you may create a sub folder, for instance “myvideo” folder in videos folder

  

• kwik edior > asset view

  Click kwik editor > Asset Icon, then you can select one of them

  

  then you will see the following asset types

  • Audio
  • Particles
  • Sprites
  • Synctext
  • Video
  

Audio

1. App/book/assets/audios/long/GentleRain.mp3

2. App/book/components/page3/index.lua

   local sceneName = ...
   --
   local scene = require('controller.scene').new(sceneName, {
       name = "page3",
       components = {
         layers = { },
         audios = {
           long  = {"GentleRain", "Tranquility" },
           short ={} ,
         },
         groups = {},
         timers = {},
         variables = {},
         page = { }
       },
       commands = { "onComplete", "play" },
       onInit = function(scene) print("onInit") end
   })
   --
   return scene

3. App/book/components/page3/audios/long/GentelRain.lua

   local name = ...
   
   local props = {
     name     = "GentleRain",
     type     = "stream",
     autoPlay = false,
     channel  = 1,
     folder   = nil,
     filename = "GentleRain.mp3",
   }
   
   local M = {
     -- name        = {{aname}},
     -- type        = {{atype}},
     -- language    = nil  -- or {"en", "jp"},
     -- filename    = "{{fileName}}",
     -- folder      = nil
     -- allowRepeat = false,
     -- autoPlay    = {{aplay}},
     -- deplay      = {{adelay}},
     -- volume      = {{avol}},
     -- channel     = {{achannel}}
     -- loops       = {{aloop}},
     -- fadein      = {{tofade}},
     -- retain      = {{akeep}}
   }
   -- you can play it with UI.audios[self.name]:play()
   
   return require("components.kwik.page_audio").set(props)

layer replacement

• particles

  

• spritesheet

  

• sync audo&text

  

• video

  

• www(html)

TODO reame controls to asset?

Spritesheet

1. Asset icon > Sprite

   the properties are default. You need to set appropriate values of your spritesheet image.

   

2. click sheetInfo property, then click sheet image name (.png) again in assetTable.

   Kwik will look for .lua with the same name, and read the frames properties

   

   A spritesheet consists of a paire of an imagesheet png and sheetInfo lua in assets/sprites folder, properties like sequence data are defined in the sheetInfo lua.

   • Image Sheets

   • Texture Packer - CodeAndWeb

   A frames table in a sheetInfo lua

    {
        frames =
        {
            {   -- frame 1
                x = 0,
                y = 0,
                width = 232,
                height = 276
            },
            {   -- frame 2
                x = 232,
                y = 0,
                width = 277,
                height = 276
            }
        }
    }

   a spritesheet consists of an imagesheet png in assets/sprites folder, properties like sequence data are defined in layerA_sprite.lua in components/page/layers folder, and components/page/index.lua declears the sprite class for layerA

3. select default sprite, and you need to set a correct number of frame count. For instance, uma.png has 8 frames.

   

code

• App/book/assets/sprites/imagesheet.png

  spritesheet.lua in the same folder has the sheetInfo properites.

• App/book/components/index.lua

  local scene = require('controller.scene').new(sceneName, {
      name = "page1",
      components = {
        layers = {
              {  bg={} },
              {  layerA={class={"sprite"}} },
        },
        audios = {},
        groups = {},
        timers = {},
        variables = {},
        page = {}
      },
      commands = {},
      onInit = function(scene) print("onInit") end
  })

• App/book/components/layers/layerA.lua

    -- layer properties
    local Props = {
      blendMode = "normal",
      height    = 100,
      width     = 100,
      kind      = pixel,
      name      = "layerA",
      x         = display.contentCenterX,
      y         = display.contentCenterY,
      alpha     = 100/100,
    }

• App/book/components/layers/layerA_sprite.lua

  > sheetInfo "spritesheet" loads spritesheet.lua in the same folder
  
  ```lua
    local M = {
    name = "spritesheet",
    class = "spritesheet",
    type  = "uniform-sized", -- TexturePacker, Animate
    properties = {
      sheetType  = "uniform-sized", -- TexturePacker, Animate
      filename = "imagesheet.png",
      sheetInfo = NIL,
      sheetContentWidth  = 376, -- same size or loaded from sheetInfo
      sheetContentHeight = 188, -- same size or loaded from sheetInfo
      numFrames          = 2,   -- same size or loaded from sheetInfo
      width              = 188, -- same size, disable for TP, Aniamte
      height             = 188, -- same size, disable for TP, Animate
     },
    sequenceData = {
      {
          name = "default",
          count = 2,
          loopCount = 0,
          loopDirection = "forward", -- reverse after last frame
          pause = false,
          start = 1,
          time = 1000,
      },
      {
        name = "test",
        frames = {1,2},
        loopCount = 0,
        loopDirection = "forward", -- reverse after last frame
        pause = false,
        time = 1000,
      }
    },
  }
  ```
  

Particles