Spritesheet

There are two ways to begin making a sprite.

select a imagesheet in asset table
1. then select a layer by clicking _target property.
select a layer for spritesheet replacement, then click spritesheet replacement tool, and select a spritesheet image by clicking _filename property.

Spitesheet has one of sheetType

uniform-sized
a png file. you need to set each width/height of sprite manually in the properties panel.
texture packer
the pair if imagesheet png and lua (frames data). You can specify the lua file in sheetInfo property.

With sheetInfo lua (Teture Packer)

The previous example of uniform-sized spritesheet uses _filename property to calculate each sprite’s width and height. For spritesheets from texture packer, there is a lua file for spritesheet information. Click sheetInfo property to select a spritesheet image instead of _filename

From layer table, we set rect_0 with spritesheet replacement

Replacmenet > Spritesheet
Default value is displayed. (template/components/pageX/replacement/defaults/sprite.lua).
click sheetInfo property, then click sheet image name (.png) again in assetTable.
Kwik will look for .lua with the same name, and set it to sheetInfo, then internally it reads the frames properties set in the lua file.
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
select default sprite in seqeucnce data table, and you need to set a correct number of frame count. For instance, uma.png has 8 frames.
save it.
save the spritesheet replacement
the simualtor reloads by itself. With holding option key, mouse click *sprite of star layer.
it will show the sprite properites for edting.

Uniform-sized spritesheet

from asset table, selecta sprites.png

sprites.png

click _target property label
rect_0 is selected
numFrames value is 64
Click _filename label, it will update _width and _height calculated from numFrames with sprtehseet image size
- height: 50
- width: 50
Next select the defaul row of sequence data table.
each sprite has 4 frames, so please input 4 to count input field
Click Preview to see the sprite animation, and Save the seqence data. It appears at the top
You can delete a row of sequence data, so select test, and then click Delete.

test is deleted.

Save it, the simulator is reloaded, and you see spirte in layer table.
by holding “option” button(mac), mouse click to show the sprite properties.

What is a seqeunce data?

https://docs.coronalabs.com/api/library/display/newSprite.html

Consecutive Frames

{
    name="walking",
    start=3,
    count=6,
    time=100,
    loopCount = 0,   -- Optional ; default is 0 (loop indefinitely)
    loopDirection = "bounce"    -- Optional ; values include "forward" or "bounce"
}

Non-Consecutive Frames

{
    name="walking",
    frames= { 3, 4, 5, 6, 7, 8 }, -- frame indexes of animation, in image sheet
    time = 240,
    loopCount = 0        -- Optional ; default is 0
}

Copilot

Add more sequenceData if sprites.png

-- This is the fist row of sprites, can you add the second, third and fouth row for each charaA, charaB, charaC, charaD?

M.sequenceData = {
  { name = "charaA_1",
    start = 1,
    count = 4,
    time = 1000,
    loopCount = 0,
    loopDirection = "forward",
  },
  { name = "charaB_1",
    start = 5,
    count = 4,
    time = 1000,
    loopCount = 0,
    loopDirection = "forward",
  },
  { name = "charaC_1",
    start = 9,
    count = 4,
    time = 1000,
    loopCount = 0,
    loopDirection = "forward",
  },
  { name = "charaD_1",
    start = 13,
    count = 4,
    time = 1000,
    loopCount = 0,
    loopDirection = "forward",
  },
}

Answer

M.sequenceData = {
    -- First row
    { name = "charaA_1", start = 1, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaB_1", start = 5, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaC_1", start = 9, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaD_1", start = 13, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },

    -- Second row
    { name = "charaA_2", start = 17, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaB_2", start = 21, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaC_2", start = 25, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaD_2", start = 29, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },

    -- Third row
    { name = "charaA_3", start = 33, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaB_3", start = 37, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaC_3", start = 41, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaD_3", start = 45, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },

    -- Fourth row
    { name = "charaA_4", start = 49, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaB_4", start = 53, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaC_4", start = 57, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
    { name = "charaD_4", start = 61, count = 4, time = 1000, loopCount = 0, loopDirection = "forward" },
}