Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Image Sheet Exporter: working with modification to corona-imagesheet.lua file
Started by Darkmod Mar 21 2012 10:03 PM

27 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Darkmod

[GLOBAL: userInfoPane.html]
Darkmod
  • Contributor

  • 119 posts
  • Corona SDK

Requires Texture packer ( 3.0.0b3 )

You need to edit your export Template //Program Files/TexturePacker/bin/exporters/corona-imagesheet/ corona-imagesheet.lua

You can modify this file to your own needs here is an example how i use it with two functions. "getSheet" , "getFrame"

---- created with TexturePacker (http://www.texturepacker.com)---- {{smartUpdateKey}}local V = {}local sheet ={    frames = {    {% for sprite in sprites %}        { x={{sprite.frameRect.x}}, y={{sprite.frameRect.y}}, width={{sprite.frameRect.width}}, height={{sprite.frameRect.height}} }, -- {{sprite.trimmedName}}    {% endfor %}    },         sheetContentWidth = {{texture.size.width}},    sheetContentHeight = {{texture.size.height}}}local frameindex = {{% for sprite in sprites %}	['{{sprite.trimmedName}}']= {{ forloop.counter }},{% endfor %}}local function getSheet() return sheet end local function getFrame() return frameindex end V.getSheet = getSheetV.getFrame = getFramereturn V


Example:
local sheetInfo = require("myExportedImageSheet") -- lua file that Texture packer published 											  			local myImageSheet = graphics.newImageSheet( "ImageSheet.png", sheetInfo.getSheet() ) -- ImageSheet.png is the image Texture packer publishedlocal myImage1 = display.newImage( myImageSheet , sheetInfo.getFrame()["image_name1"] )	local myImage2 = display.newImage( myImageSheet , sheetInfo.getFrame()["image_name2"] )


cheers Darkmod
lol: After looking at this it really should be "getIndex" and "getFrames" then nice thing is you can modify the export to your needs.

uid: 7177 topic_id: 23739 reply_id: 323739


[TOPIC: post.html]
#2

Danny

[GLOBAL: userInfoPane.html]
Danny
  • Corona Geek

  • 2,597 posts
  • Corona Staff

Nice work, thanks for sharing
uid: 84637 topic_id: 23739 reply_id: 95467


[TOPIC: post.html]
#3

punya.huxter

[GLOBAL: userInfoPane.html]
punya.huxter
  • Observer

  • 12 posts
  • Corona SDK

This looks like just what I need, but im having trouble finding where I can edit my exporters. Any idea how to do it on a Mac?
Thanks.
uid: 65285 topic_id: 23739 reply_id: 98688


[TOPIC: post.html]
#4

punya.huxter

[GLOBAL: userInfoPane.html]
punya.huxter
  • Observer

  • 12 posts
  • Corona SDK

Ah silly me, I needed to be using 3.0.0b3. All works fine now thanks Darkmod.

I sent a message to Andreas from Code'n'Web about updating Texture Packer. He will add this with the next update.
uid: 65285 topic_id: 23739 reply_id: 99935


[TOPIC: post.html]
#5

Beloudest

[GLOBAL: userInfoPane.html]
Beloudest
  • Contributor

  • 189 posts
  • Corona SDK

Im now using version 3.0.0b5, which does the above. Ive had some issues with sprites not aligning correctly. Could you help me out by letting me know what settings to use or not use when packing a sprite in texture packer? thx
uid: 118379 topic_id: 23739 reply_id: 103035


[TOPIC: post.html]
#6

Darkmod

[GLOBAL: userInfoPane.html]
Darkmod
  • Contributor

  • 119 posts
  • Corona SDK

with the new build you will need too add size too sheetContent
was <<
sheetContentWidth = {{texture.width}},
sheetContentHeight = {{texture.height}}
now <<

sheetContentWidth = {{texture.size.width}},
sheetContentHeight = {{texture.size.height}}

I updated the original post as well.

uid: 7177 topic_id: 23739 reply_id: 103106


[TOPIC: post.html]
#7

andreas.loew

[GLOBAL: userInfoPane.html]
andreas.loew
  • Enthusiast

  • 79 posts
  • Corona SDK

Hi,

I've just added an official exporter to TexturePacker which is quite similar to your solution.

To use it do the following:

local sheetInfo = require("spritesheet") -- lua file that Texture packer published

local myImageSheet = graphics.newImageSheet( "spritesheet.png", sheetInfo:getSheet() )

local myImage1 = display.newImage( myImageSheet , sheetInfo:getFrameIndex("drink"))
local myImage2 = display.newImage( myImageSheet , sheetInfo:getFrameIndex("hamburger"))

I moved the functions inside the data structure and added functions to get the frame indexes.

Cheers
Andreas
uid: 9611 topic_id: 23739 reply_id: 103123


[TOPIC: post.html]
#8

naveen_pcs

[GLOBAL: userInfoPane.html]
naveen_pcs
  • Contributor

  • 262 posts
  • Corona SDK

Any chance on having it work with Dynamic Resolutions? I'm having problems because of the coordinates being used. See my post here:

http://developer.anscamobile.com/forum/2012/04/26/new-sprite-api-dynamic-resolution-problem-video

Any solution to this?

EDIT: I found a fix to get Dynamic Res working! In texture packer, the "Border padding" and "Shape padding" default to "2". That's fine for regular resolution. When you want to make @2x res, you need to change both of those to "4" instead of 2. Hope this helps someone out!
uid: 51654 topic_id: 23739 reply_id: 103547


[TOPIC: post.html]
#9

Beloudest

[GLOBAL: userInfoPane.html]
Beloudest
  • Contributor

  • 189 posts
  • Corona SDK

@003naveen , nice one. that is what was eluding me. Makes sense. :)
uid: 118379 topic_id: 23739 reply_id: 103845


[TOPIC: post.html]
#10

danedwar

[GLOBAL: userInfoPane.html]
danedwar
  • Enthusiast

  • 47 posts
  • Corona SDK

I've modified the corona-imagesheet to use trimming that has been added to the new imagesheet API.

Just add sourceX, sourceY, sourceWidth, sourceHeight to the frames statement
frames = {
    {% for sprite in sprites %}
        { x={{sprite.frameRect.x}}, y={{sprite.frameRect.y}}, width={{sprite.frameRect.width}}, height={{sprite.frameRect.height}}, sourceX={{sprite.sourceRect.x}}, sourceY={{sprite.sourceRect.y}}, sourceWidth={{sprite.untrimmedSize.width}}, sourceHeight={{sprite.untrimmedSize.height}},}, -- {{sprite.trimmedName}}{% endfor %}
    },

You also need to turn on trimming in the exporter.xml

:)
uid: 77943 topic_id: 23739 reply_id: 104645


[TOPIC: post.html]
#11

krystian6

[GLOBAL: userInfoPane.html]
krystian6
  • Contributor

  • 560 posts
  • Corona SDK

Hi Danedwar,

where did you get information about trimming from?
I've searched through the whole docs and forums about this and couldn't find anything.

Thanks,
Krystian
uid: 109453 topic_id: 23739 reply_id: 109015


[TOPIC: post.html]
#12

nml

[GLOBAL: userInfoPane.html]
nml
  • Contributor

  • 202 posts
  • Corona SDK

Hi! Danedwar can you explain a bit more about enabling trimming??
I don't have that option available in Texture Packer (currently runnning v 3.0.0b8), it appears faded out. Cropping is enabled, but i really need to trim.
Thanks!
uid: 105206 topic_id: 23739 reply_id: 110125


[TOPIC: post.html]
#13

andreas.loew

[GLOBAL: userInfoPane.html]
andreas.loew
  • Enthusiast

  • 79 posts
  • Corona SDK

If you want to enable it in the GUI again visit the exporter.xml and set

<supportsTrimming>true</supportsTrimming>

cropping can be used with every exporter - since it simply resizes the original shape but trimming requires support from the target framework.

Does anybody have information how stable this API is?
uid: 9611 topic_id: 23739 reply_id: 110140


[TOPIC: post.html]
#14

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

Well I got trimming to work fine for the SD images, but the HD images act all wonky. The coordinate system does not scale well it seems.
Without trimming it works well. Don't think they support dynamic scaling and trimming yet.
uid: 100901 topic_id: 23739 reply_id: 110141


[TOPIC: post.html]
#15

andreas.loew

[GLOBAL: userInfoPane.html]
andreas.loew
  • Enthusiast

  • 79 posts
  • Corona SDK

I am working on that. The problem is currently that trimming might leave odd sized sprites which creates an incompatible layout.

That's not a bug - TexturePacker tries to minimize memory usage - it just does not work well with the imagesheet api right now.

For now I would suggest
1) Disable trimming
2) Make sure your sprites are even sized
3) Use Padding=4 for hd
4) Use Padding=2 for sd

That should create identical sheets.
uid: 9611 topic_id: 23739 reply_id: 110143


[TOPIC: post.html]
#16

nml

[GLOBAL: userInfoPane.html]
nml
  • Contributor

  • 202 posts
  • Corona SDK

where in my spritesheet.lua should i add the [blockcode] {% for sprite in sprites %}
{ x={{sprite.frameRect.x}}, y={{sprite.frameRect.y}}, width={{sprite.frameRect.width}}, height={{sprite.frameRect.height}} }, -- {{sprite.trimmedName}}
{% endfor %} [/blockcode]
code?

i have all the frames listed... should i add the code before or after? can anyone give me an example?
uid: 105206 topic_id: 23739 reply_id: 110270


[TOPIC: post.html]
#17

krystian6

[GLOBAL: userInfoPane.html]
krystian6
  • Contributor

  • 560 posts
  • Corona SDK

Here's mine:
local V = {}
local sheet =
{
frames = {
{% for sprite in allSprites %}
{ x={{sprite.frameRect.x}}, y={{sprite.frameRect.y}}, width={{sprite.frameRect.width}}, height={{sprite.frameRect.height}} }, -- {{sprite.trimmedName}}
{% endfor %}
},

sheetContentWidth = {{texture.size.width}},
sheetContentHeight = {{texture.size.height}}
}

local frameindex = 
{
{% for sprite in allSprites %}
['{{sprite.fullName}}']= {{ forloop.counter }},
{% endfor %}
}

V.spriteInfo = sheet
V.frameInfo = frameindex

return V

works fine with aliases as well.
uid: 109453 topic_id: 23739 reply_id: 110274


[TOPIC: post.html]
#18

nml

[GLOBAL: userInfoPane.html]
nml
  • Contributor

  • 202 posts
  • Corona SDK

Oh, ok thanks!! Now i understood!

EDIT: What's the difference between that code and the one already inside texture packer?

corona-imageSheet.lua
[blockcode]

--
-- created with TexturePacker (http://www.texturepacker.com)
--
-- {{smartUpdateKey}}
--
-- local sheetInfo = require("myExportedImageSheet") -- lua file that Texture packer published
--
-- local myImageSheet = graphics.newImageSheet( "ImageSheet.png", sheetInfo.getSheet() ) -- ImageSheet.png is the image Texture packer published
--
-- local myImage1 = display.newImage( myImageSheet , sheetInfo.getFrameIndex("image_name1"))
-- local myImage2 = display.newImage( myImageSheet , sheetInfo.getFrameIndex("image_name2"))
--

local SheetInfo = {}

SheetInfo.sheet =
{
frames = {
{% for sprite in allSprites %}
{ x={{sprite.frameRect.x}}, y={{sprite.frameRect.y}}, width={{sprite.frameRect.width}}, height={{sprite.frameRect.height}} }, -- {{sprite.trimmedName}}{% endfor %}
},

sheetContentWidth = {{texture.size.width}},
sheetContentHeight = {{texture.size.height}}
}

SheetInfo.frameIndex =
{
{% for sprite in allSprites %}
["{{sprite.trimmedName}}"] = {{ forloop.counter }},{% endfor %}
}

function SheetInfo:getSheet()
return self.sheet;
end

function SheetInfo:getFrameIndex(name)
return self.frameIndex[name];
end

return SheetInfo
[/blockcode]
uid: 105206 topic_id: 23739 reply_id: 110275


[TOPIC: post.html]
#19

krystian6

[GLOBAL: userInfoPane.html]
krystian6
  • Contributor

  • 560 posts
  • Corona SDK

hmmm

well I didn't see the updated code in texture packer to be honest :)
First off the filename is not trimmed in my version and the data structure returned by the script suits the way I handle imagesheets better.

Apart from that I don't think there are any differences.
uid: 109453 topic_id: 23739 reply_id: 110277


[TOPIC: post.html]
#20

Juf Jannie

[GLOBAL: userInfoPane.html]
Juf Jannie
  • Contributor

  • 327 posts
  • Corona SDK

Hi, Nice post,
Why don't you use the auto SD feature?

If your images allow it making them in a vector program is really handy. I create everything at 1.0 but export it at 2.0, that way they are always dividable by two.

Great info on the image sizes.
uid: 100901 topic_id: 23739 reply_id: 110642


[TOPIC: post.html]
#21

danedwar

[GLOBAL: userInfoPane.html]
danedwar
  • Enthusiast

  • 47 posts
  • Corona SDK

Hi all,

I've spent a while getting all this to work - here goes ;)

I got the information about sprite trimming from the latest Corona SDK in the sample code HorseAnimation. You will see in uma.lua that trimming is used by setting the values for sourceX, sourceY, sourceWidth and sourceHeight for the imagesheet.

The code that I posted previously adds these values to the exporter for conorna SDK in TexterPacker.

The steps to get this working are:
- Create a new exporter by opening the TexturePacker package then create a copy of the Corona Exporter folder under Resources/exporters/corona-imagesheet
- Rename the new folder something like corona-trim-imagesheet.
- Rename the corona-imagesheet.lua to corona-trim-imagesheet.lua
- Open corona-trim-imagesheet.lua and replace the frames section with the code I posted previously.
- Open the exporter.xml file in the new folder.
- Change the name element to reference the new name "corona-trim-imagesheet".
- Change the template element to reference the new .lua file "corona-trim-imagesheet.lua"
- Change the supportsTrimming element to "true".
- Launch TexturePacker and you should now have a corona-trim-imagesheet option.

I have used the API and it is stable enough. The main problem you will have is with dynamic image scaling. As Andreas mentioned TexturePacker will always try and pack the images as best as possible. If this results in odd pixels (or more accurately pixels that are not divisible by the scale you want to produce) then the images will jump around slightly due to different offsets.

For now I am not using trimming as I need to use dynamic image scaling. I think some kind of trimming divisor will be needed in TexturePacker to fully support this feature, but seeing as the API is not yet in a Corona stable release I doubt that Andreas will want to commit to adding the functionality ;)

The other problem that you will find is when you are creating multiple resolutions. You should work with the highest resolution first but must make sure that the images are divisible by the other scales you want to use. If they are not then you will find that TexturePacker (rightly so) may move the images around when you change the scale.

The way I make this work is to ensure that all my images at the highest resolution I am going to use are divisible by the other scales I want to use e.g. if I am using scales 1.0 and 2.0 then I just need to make sure that the width/height of my 2.0 images are all even (divisible by 2). When using TexturePacker I use an imagesheet that is 2048x2048 and set padding to 4. I export these images and then change the scale to 0.5 and change padding to 2 then export my 1.0 scale images. You must use the .lua file in Corona that was generated for the 1.0 scale images.

It gets more complicated if you are producing assets for more resolutions. For example if you are going to use 1.0, 1.5 and 2.0 you must make sure the high res images are divisible by 4. This is so that when you set the scale to 0.75 for your 1.5 resolution images there will still be a whole number of pixels for TexturePacker to work with. For scales 1.0, 1.8 and 4.0 you will need your high res images to be divisible by 20!

Hope this helps,
uid: 77943 topic_id: 23739 reply_id: 110636


[TOPIC: post.html]
#22

naveen_pcs

[GLOBAL: userInfoPane.html]
naveen_pcs
  • Contributor

  • 262 posts
  • Corona SDK

Is there a way to perfectly map a regular resolution texture atlas with a @2x one? I have some images that are the exact same sizes, and it places them differently in each atlas I make. Also, sometimes it'll "arrange/reposition" everything on each atlas, but stuff will be in different spots. I need a way to make sure everything is in the exact same place on both sprite sheets (just double the resolution on the @2x one). I've made sure all my images are exactly double, but TP still sorts them differently :(
uid: 51654 topic_id: 23739 reply_id: 110742


[TOPIC: post.html]
#23

krystian6

[GLOBAL: userInfoPane.html]
krystian6
  • Contributor

  • 560 posts
  • Corona SDK

I ran a test on the latest texture packer beta 8: 100 sprites.
These sets of commands created proper imagesheets for SD and HD:

Set 1:
[text]
TexturePacker --data animation-hd.lua --format corona-imagesheet --allow-free-size --shape-padding 4 --border-padding 4 --sheet animation-hd.png --no-trim --algorithm Basic --auto-sd *.png
[/text]

Set 2:
[text]TexturePacker --data animation-hd.lua --format corona-imagesheet --allow-free-size --shape-padding 4 --border-padding 4 --sheet animation-hd.png --no-trim --algorithm Basic *.png
TexturePacker --data animation.lua --format corona-imagesheet --allow-free-size --shape-padding 2 --border-padding 2 --sheet animation.png --no-trim --algorithm Basic --scale 0.5 *.png[/text]
I haven't tried other sorting algorithms, since I'm using the non pro version.

Krystian
EDIT:
I have tried running TP separately for HD and SD images but it didn't work. As well, I made sure there were no odd sized sprites.
uid: 109453 topic_id: 23739 reply_id: 110745


[TOPIC: post.html]
#24

danedwar

[GLOBAL: userInfoPane.html]
danedwar
  • Enthusiast

  • 47 posts
  • Corona SDK

I'm not sure why it wouldn't work using it separately, that's how I use it. I remember that I was tripped up by the enable auto alias being true as default when using the UI directly and this sometimes causes images that are not exactly the same to become the same when they are scaled down and they end up being moved around.

003naveen - I would suggest trying to add just the @2x images to TexturePacker, set the padding to 4 and export the sheet, then change the padding to 2, set the scale to 0.5 and export again using a different filename and see if they come out the same. Remember to set enable auto alias to false.

I don't use the auto SD option because... not sure why :) never noticed it. I usually have to create at resolutions for iPhone/iPad/Android all together so need more than just 2 and 1 scales.
uid: 77943 topic_id: 23739 reply_id: 110747


[TOPIC: post.html]
#25

andreas.loew

[GLOBAL: userInfoPane.html]
andreas.loew
  • Enthusiast

  • 79 posts
  • Corona SDK

I am currently updating TexturePacker to handle odd scalings by forcing multiples of the scaling factors.

But I am still convinced that it is a bad idea to force the same coordinates on different images. It might seem easy for scale factor 1.0, 0.5 and 0.25 but it will get bad with odd factory like scaling from iPad to iPhone to using .9375 or something else.

Here you will always end up with artifacts on the borders because the odd sizes will drag in transparency from the surroundings. This will be especially ugly if you try to stitch together a UI from several separate sprites. Or use tiles.

TexturePacker's current algorithm would round the sprites to an whole number - you would end up with +/-0.5 pixels for a sprite but if you could ask the sprite's width you should be able to stitch them together perfectly.
uid: 9611 topic_id: 23739 reply_id: 110750



[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]