Animation from SpriteSheet scrolling in and out of text field automatically

ebrahimbadkoubi · November 19, 2016, 12:24pm

Hello,

I am using AfterEffects to create a Typing effect. I have created png sequences out of After Effect and have turned them into a Sprite Sheet using the Free Version of Texture Pack.

After adding my sprite sheet to the app, the animation seems to scroll in from the top of the text field and while the animation is playing, it scrolls down and leaves from the bottom of the text field. I have tried to capture this using a few screen shots.

Why does it act like this?

I have also attached my Lua file, the Sprite Sheet png.

Below is my main.lua

local ground = display.newRect(display.contentCenterX, display.contentHeight, display.contentWidth\*2,display.contentHeight\*2 ) ground:setFillColor( 1, 1, 1) ground.name = "ground" local fieldText = { width = 572, height = 55, numFrames = 94, sheetContentWidth = 1722, sheetContentHeight = 1824 } local fieldTextArt = graphics.newImageSheet ( "textAnimation.png", fieldText ) local sequenceData = { { name = "sequence", sheet = fieldTextArt, start = 1, count = 94, time = 1000, loopCount = 0 } } local myAnimation = display.newSprite ( fieldTextArt, sequenceData ) myAnimation.x = display.contentWidth / 2 myAnimation.y = display.contentHeight / 2 myAnimation:play()

and below is my spritesheet lua

-- -- created with TexturePacker (http://www.codeandweb.com/texturepacker) -- -- $TexturePacker:SmartUpdate:39bede1c98c00ad0e964e53c84084c1d:b0f2c169266b5913b62cf09297fb63eb:fbca484c047ba281fc3488c69958a3fe$ -- -- local sheetInfo = require("mysheet") -- local myImageSheet = graphics.newImageSheet( "mysheet.png", sheetInfo:getSheet() ) -- local sprite = display.newSprite( myImageSheet , {frames={sheetInfo:getFrameIndex("sprite")}} ) -- local SheetInfo = {} SheetInfo.sheet = { frames = { { -- Text\_00000 x=1, y=1, width=572, height=55, }, { -- Text\_00001 x=575, y=1, width=572, height=55, }, { -- Text\_00002 x=1149, y=1, width=572, height=55, }, { -- Text\_00003 x=1, y=58, width=572, height=55, }, { -- Text\_00004 x=575, y=58, width=572, height=55, }, { -- Text\_00005 x=1149, y=58, width=572, height=55, }, { -- Text\_00006 x=1, y=115, width=572, height=55, }, { -- Text\_00007 x=575, y=115, width=572, height=55, }, { -- Text\_00008 x=1149, y=115, width=572, height=55, }, { -- Text\_00009 x=1, y=172, width=572, height=55, }, { -- Text\_00010 x=575, y=172, width=572, height=55, }, { -- Text\_00011 x=1149, y=172, width=572, height=55, }, { -- Text\_00012 x=1, y=229, width=572, height=55, }, { -- Text\_00013 x=575, y=229, width=572, height=55, }, { -- Text\_00014 x=1149, y=229, width=572, height=55, }, { -- Text\_00015 x=1, y=286, width=572, height=55, }, { -- Text\_00016 x=575, y=286, width=572, height=55, }, { -- Text\_00017 x=1149, y=286, width=572, height=55, }, { -- Text\_00018 x=1, y=343, width=572, height=55, }, { -- Text\_00019 x=575, y=343, width=572, height=55, }, { -- Text\_00020 x=1149, y=343, width=572, height=55, }, { -- Text\_00021 x=1, y=400, width=572, height=55, }, { -- Text\_00022 x=575, y=400, width=572, height=55, }, { -- Text\_00023 x=1149, y=400, width=572, height=55, }, { -- Text\_00024 x=1, y=457, width=572, height=55, }, { -- Text\_00025 x=575, y=457, width=572, height=55, }, { -- Text\_00026 x=1149, y=457, width=572, height=55, }, { -- Text\_00027 x=1, y=514, width=572, height=55, }, { -- Text\_00028 x=575, y=514, width=572, height=55, }, { -- Text\_00029 x=1149, y=514, width=572, height=55, }, { -- Text\_00030 x=1, y=571, width=572, height=55, }, { -- Text\_00031 x=575, y=571, width=572, height=55, }, { -- Text\_00032 x=1149, y=571, width=572, height=55, }, { -- Text\_00033 x=1, y=628, width=572, height=55, }, { -- Text\_00034 x=575, y=628, width=572, height=55, }, { -- Text\_00035 x=1149, y=628, width=572, height=55, }, { -- Text\_00036 x=1, y=685, width=572, height=55, }, { -- Text\_00037 x=575, y=685, width=572, height=55, }, { -- Text\_00038 x=1149, y=685, width=572, height=55, }, { -- Text\_00039 x=1, y=742, width=572, height=55, }, { -- Text\_00040 x=575, y=742, width=572, height=55, }, { -- Text\_00041 x=1149, y=742, width=572, height=55, }, { -- Text\_00042 x=1, y=799, width=572, height=55, }, { -- Text\_00043 x=575, y=799, width=572, height=55, }, { -- Text\_00044 x=1149, y=799, width=572, height=55, }, { -- Text\_00045 x=1, y=856, width=572, height=55, }, { -- Text\_00046 x=575, y=856, width=572, height=55, }, { -- Text\_00047 x=1149, y=856, width=572, height=55, }, { -- Text\_00048 x=1, y=913, width=572, height=55, }, { -- Text\_00049 x=575, y=913, width=572, height=55, }, { -- Text\_00050 x=1149, y=913, width=572, height=55, }, { -- Text\_00051 x=1, y=970, width=572, height=55, }, { -- Text\_00052 x=575, y=970, width=572, height=55, }, { -- Text\_00053 x=1149, y=970, width=572, height=55, }, { -- Text\_00054 x=1, y=1027, width=572, height=55, }, { -- Text\_00055 x=575, y=1027, width=572, height=55, }, { -- Text\_00056 x=1149, y=1027, width=572, height=55, }, { -- Text\_00057 x=1, y=1084, width=572, height=55, }, { -- Text\_00058 x=575, y=1084, width=572, height=55, }, { -- Text\_00059 x=1149, y=1084, width=572, height=55, }, { -- Text\_00060 x=1, y=1141, width=572, height=55, }, { -- Text\_00061 x=575, y=1141, width=572, height=55, }, { -- Text\_00062 x=1149, y=1141, width=572, height=55, }, { -- Text\_00063 x=1, y=1198, width=572, height=55, }, { -- Text\_00064 x=575, y=1198, width=572, height=55, }, { -- Text\_00065 x=1149, y=1198, width=572, height=55, }, { -- Text\_00066 x=1, y=1255, width=572, height=55, }, { -- Text\_00067 x=575, y=1255, width=572, height=55, }, { -- Text\_00068 x=1149, y=1255, width=572, height=55, }, { -- Text\_00069 x=1, y=1312, width=572, height=55, }, { -- Text\_00070 x=575, y=1312, width=572, height=55, }, { -- Text\_00071 x=1149, y=1312, width=572, height=55, }, { -- Text\_00072 x=1, y=1369, width=572, height=55, }, { -- Text\_00073 x=575, y=1369, width=572, height=55, }, { -- Text\_00074 x=1149, y=1369, width=572, height=55, }, { -- Text\_00075 x=1, y=1426, width=572, height=55, }, { -- Text\_00076 x=575, y=1426, width=572, height=55, }, { -- Text\_00077 x=1149, y=1426, width=572, height=55, }, { -- Text\_00078 x=1, y=1483, width=572, height=55, }, { -- Text\_00079 x=575, y=1483, width=572, height=55, }, { -- Text\_00080 x=1149, y=1483, width=572, height=55, }, { -- Text\_00081 x=1, y=1540, width=572, height=55, }, { -- Text\_00082 x=575, y=1540, width=572, height=55, }, { -- Text\_00083 x=1149, y=1540, width=572, height=55, }, { -- Text\_00084 x=1, y=1597, width=572, height=55, }, { -- Text\_00085 x=575, y=1597, width=572, height=55, }, { -- Text\_00086 x=1149, y=1597, width=572, height=55, }, { -- Text\_00087 x=1, y=1654, width=572, height=55, }, { -- Text\_00088 x=575, y=1654, width=572, height=55, }, { -- Text\_00089 x=1149, y=1654, width=572, height=55, }, { -- Text\_00090 x=1, y=1711, width=572, height=55, }, { -- Text\_00091 x=575, y=1711, width=572, height=55, }, { -- Text\_00092 x=1149, y=1711, width=572, height=55, }, { -- Text\_00093 x=1, y=1768, width=572, height=55, }, }, sheetContentWidth = 1722, sheetContentHeight = 1824 } SheetInfo.frameIndex = { ["Text\_00000"] = 1, ["Text\_00001"] = 2, ["Text\_00002"] = 3, ["Text\_00003"] = 4, ["Text\_00004"] = 5, ["Text\_00005"] = 6, ["Text\_00006"] = 7, ["Text\_00007"] = 8, ["Text\_00008"] = 9, ["Text\_00009"] = 10, ["Text\_00010"] = 11, ["Text\_00011"] = 12, ["Text\_00012"] = 13, ["Text\_00013"] = 14, ["Text\_00014"] = 15, ["Text\_00015"] = 16, ["Text\_00016"] = 17, ["Text\_00017"] = 18, ["Text\_00018"] = 19, ["Text\_00019"] = 20, ["Text\_00020"] = 21, ["Text\_00021"] = 22, ["Text\_00022"] = 23, ["Text\_00023"] = 24, ["Text\_00024"] = 25, ["Text\_00025"] = 26, ["Text\_00026"] = 27, ["Text\_00027"] = 28, ["Text\_00028"] = 29, ["Text\_00029"] = 30, ["Text\_00030"] = 31, ["Text\_00031"] = 32, ["Text\_00032"] = 33, ["Text\_00033"] = 34, ["Text\_00034"] = 35, ["Text\_00035"] = 36, ["Text\_00036"] = 37, ["Text\_00037"] = 38, ["Text\_00038"] = 39, ["Text\_00039"] = 40, ["Text\_00040"] = 41, ["Text\_00041"] = 42, ["Text\_00042"] = 43, ["Text\_00043"] = 44, ["Text\_00044"] = 45, ["Text\_00045"] = 46, ["Text\_00046"] = 47, ["Text\_00047"] = 48, ["Text\_00048"] = 49, ["Text\_00049"] = 50, ["Text\_00050"] = 51, ["Text\_00051"] = 52, ["Text\_00052"] = 53, ["Text\_00053"] = 54, ["Text\_00054"] = 55, ["Text\_00055"] = 56, ["Text\_00056"] = 57, ["Text\_00057"] = 58, ["Text\_00058"] = 59, ["Text\_00059"] = 60, ["Text\_00060"] = 61, ["Text\_00061"] = 62, ["Text\_00062"] = 63, ["Text\_00063"] = 64, ["Text\_00064"] = 65, ["Text\_00065"] = 66, ["Text\_00066"] = 67, ["Text\_00067"] = 68, ["Text\_00068"] = 69, ["Text\_00069"] = 70, ["Text\_00070"] = 71, ["Text\_00071"] = 72, ["Text\_00072"] = 73, ["Text\_00073"] = 74, ["Text\_00074"] = 75, ["Text\_00075"] = 76, ["Text\_00076"] = 77, ["Text\_00077"] = 78, ["Text\_00078"] = 79, ["Text\_00079"] = 80, ["Text\_00080"] = 81, ["Text\_00081"] = 82, ["Text\_00082"] = 83, ["Text\_00083"] = 84, ["Text\_00084"] = 85, ["Text\_00085"] = 86, ["Text\_00086"] = 87, ["Text\_00087"] = 88, ["Text\_00088"] = 89, ["Text\_00089"] = 90, ["Text\_00090"] = 91, ["Text\_00091"] = 92, ["Text\_00092"] = 93, ["Text\_00093"] = 94, } function SheetInfo:getSheet() return self.sheet; end function SheetInfo:getFrameIndex(name) return self.frameIndex[name]; end return SheetInfo

ebrahimbadkoubi · November 20, 2016, 8:25pm

?

rob · November 21, 2016, 4:54pm

You’re making an assumption that Texture Packer packed everything into a format that is usable with simple math. Looking at your image sheet, you have three columns that appears to be 1722 wide. 1722 / 3 = 574 but you’re saying the width is 572. Texture Packer is probably putting in a 1 px margin between them. Likewise I counted 32 rows in the image sheet * 55 px = 1760. Texture Packer claims the image is 1824 high or 57 px per row. Again, there is likely some unaccounted for padding.

Normally with Texture Packer you use their output Lua file to build the graphics sheet. They provide you sample code at the top of their output .lua file:

-- local sheetInfo = require("mysheet") -- local myImageSheet = graphics.newImageSheet( "mysheet.png", sheetInfo:getSheet() ) -- local sprite = display.newSprite( myImageSheet , {frames={sheetInfo:getFrameIndex("sprite")}} )

Of course they have it commented out since it wouldn’t work inside their .lua file. You can either adjust your values to the physical spitesheet’s data (57px high rows, 574px wide columns, and provide the right total width/height) or you can use the Texture Packer way of creating the Imagesheet and Sprite.

Rob

ebrahimbadkoubi · November 21, 2016, 5:44pm

Ok, I see.

HEIGHT

Calculated Height : 55 px x 32 rows = 1,760 px

Claimed Height : 1824 px

Difference: 64 px

Gap between Two: 1 px (1 px from top and 1 px from bottom)

WIDHT

Calculated Width : 572 px x 3 rows = 1,716 px

Claimed Width : 1,722 px

Difference: 6 px

Gap between Two: 1 px (1 px from left and 1 px from right)

First Question - Which one do I mention in my .lua file as the width and height of the image? the (572, 55) or (574, 57)?

Second Question - So I have to include the following in my app scene’s .lua file ? (sorry if this is a dumb question)

local sheetInfo = require("mysheet") local myImageSheet = graphics.newImageSheet( "mysheet.png", sheetInfo:getSheet() ) local sprite = display.newSprite( myImageSheet , {frames={sheetInfo:getFrameIndex("sprite")}} )

instead of writing my own:

local fieldText = { width = 572, height = 55, numFrames = 94, sheetContentWidth = 1722, sheetContentHeight = 1824 } local fieldTextArt = graphics.newImageSheet ( "textAnimation.png", fieldText )

and therefore I will have something like:

local sheetInfo = require("mysheet") local myImageSheet = graphics.newImageSheet( "mysheet.png", sheetInfo:getSheet() ) local sprite = display.newSprite( myImageSheet , {frames={sheetInfo:getFrameIndex("sprite")}} ) sprite.x = display.contentWidth / 2 sprite.y = display.contentHeight / 2 local sequenceData = { { name = "sequence", sheet = sheetInfo, start = 1, count = 94, time = 1000, loopCount = 0 } }

Thanks!

rob · November 21, 2016, 5:58pm

In this case, to answer your first question, your values need to match the image.

Personally if you’re using Texture Packer, I would use Texture Packer’s code.

Rob

ebrahimbadkoubi · November 21, 2016, 6:06pm

So I would then go by the dimensions (width and height) provided by TexturePack? I’m confused…because if that is the case, then why mention the size thing in the first place?

Are there any other Sprite Sheet generators that I can use that are Free?

My first animation is made of 750 png files, and to create a sprite sheet, I need the multi packing which can only be done through the paid version of texture pack.

Thanks

rob · November 21, 2016, 6:15pm

I don’t know of any free texture packers.

Texture Packer provides the Corona API’s with the numbers it needs if you use their code. If you provide your own table of information about the image sheet, you need to provide the required data. In your case, since things are in a grid, you need the width, height of each cell and the total width/height if you’re planning on using @2x and/or @4x versions of the animation. The later is required because in some cases (not yours) the frame sizes are variable and can’t be simply computed.

ebrahimbadkoubi · November 21, 2016, 6:35pm

Thank you Rob.

Just to clarify about the size (width and height) that I would end up using:

Would I go by the dimensions (width and height) provided by TexturePack? or the ones that I calculate (without the padding)?

rob · November 21, 2016, 7:03pm

If you are going to use your table of values, you need to use the actual values of the image: 574 x 57 for each frame and a total sheet size of 1722 x 1824.

Or you can use Texture Packer’s way of loading the sheet. If you ever get into a situation where Texture Packer isn’t using a grid layout, you would have to use their code.

Rob

ebrahimbadkoubi · November 21, 2016, 9:48pm

Got it. Thank you.

ebrahimbadkoubi · November 20, 2016, 8:25pm

?

rob · November 21, 2016, 4:54pm