Your “20p1.png” mask doesn’t seem to have a border on the left side and I’m wondering if that could be causing some problems. I know it can cause masking issues but I’m wondering if it affects performance too.
From graphic.newMask API page:
Bitmap Mask image requirements:
The mask image width and height must be multiples of 4.
The mask image must have a black border around the mask that is 3 or more pixels.
[import]uid: 7559 topic_id: 33484 reply_id: 133410[/import]
Here is the full config.lua:
application =
{
launchPad = false,
content = {
width = 320,
height = 480,
scale = "letterBox",
fps = 30,
imageSuffix = {
["@2x"] = 2,
["@4x"] = 4,
},
},
}
the whole puzzle image and it is: 385x320. @2x - 770x640 @4x - 1540x1280 and that is what I am masking. Again though, I removed the @4x image and reduced the file size of the @2x image from 514kb to 79.5kb and saw no performance improvements.
The mask file size always stays 388x320. The mask files are less than 7kb.
I really would not like to break it up if there is another way around it. I eventually am going to make a puzzle app that would need to be able to mask the whole image but the piece to work properly and this project is really just a stepping stone to that.
They go from .3 to 1.0. They are .3 on the screen to start to save space. They are scaled up to 1.0 when touched and then remain at 1.0 when placed in the correct spot on the puzzle.
I could try changing it to isVisible = false for those that are not used at first, but eventually all would be visible by the end of the puzzle.
Here is an example of the code I am using to setup the first piece of a puzzle. There are several variables as things change when different numbers of pieces are being used:
fullpuzxref[1] = -150
fullpuzyref[1] = -130
piecesmask[1] = graphics.newMask( "24p1.png" )
piecescale = .3
fullpuz[1] = display.newImageRect( "puz1top.jpg", 385, 320 )
fullpuz[1].xReference = fullpuzxref[1]
fullpuz[1].yReference = fullpuzyref[1]
fullpuz[1]:setMask( piecesmask[1] )
fullpuz[1].isHitTestMasked = true
fullpuz[1].xScale = piecescale
fullpuz[1].yScale = piecescale
fullpuz[1].picked = false Again, no lag in simulator or iPhones (the two I have to test on at least), but on both iPad 3 and 1.
It definitely could be related to something else in my code, but I would expect to see lag on the 3gs if this was the case.
Thanks so much for your help guys!
Scott [import]uid: 79834 topic_id: 33484 reply_id: 133250[/import]
Is there a reason you’re masking the puzzle pieces? In the puzzle games I’ve done, I just ended up trimming the pieces in photoshop to remove as much transparency as I can and then figure out the X, Y where each piece needs to land. It’s a little sloppy in that you can touch the transparent areas to move the pieces but that’s really not a bad thing really.
[import]uid: 199310 topic_id: 33484 reply_id: 133422[/import]
A few comments about your images and some things to try.
Both PNG and JPG images consume the same amount of texture memory when loaded. JPGs take up less room in the App package but are expanded to full size (width x height x 4 bytes) when loaded.
Images are rounded up to the next power of two. So a 320 x 480 image is 153,600 pixels. With four bytes for RGBA, the total image size is 614, 400 bytes. Rounding to the next power of 2, that means it consumes 1 Mbyte of texture memory.
It’s best to make your images an even size if you try to perform any math on height or width. Your 385 x 320 should be 386 x 320 to avoid display issues. Also, watch out for factional values when computing x and y values (round up or down to nearest integer).
Scaling down an image (using xScale and yScale) doesn’t reduce the texture memory size.
If you use @2x & @4x images, you will be loading much larger images on higher resolution devices and I would expect the performance to be worst. My suggestion is to remove all @2x and @4x images and see if the performance of iPad1 and iPad3 matches that of the iPhone 3g and 5.
Try disabling the masks and see if that makes a difference in performance.
If the results in #5 don’t improve (using the same image sizes for all devices) or disabling masks (#6) improves the performance, please file a bug report with a test case that reproduces the problem. [import]uid: 7559 topic_id: 33484 reply_id: 133255[/import]
@scott, you said “the whole puzzle image and it is”… I don’t understand… Does that mean you have no separate puzzle pieces, and use 12 masks on your main image to manipulate pieces (which are shaped like the mask)?
Tom had a lot of pointed notes… Lemme add some other observations–
Like Tom said, the file size on disk is unrelated to performance (as you’ve seen).
Objects are decompressed when they are loaded – and the memory they take is equal to 4 x (width x height) bytes. Your full screen @4x image takes up 16MB of memory on the ipad3.
Each time that image is redrawn (which could be 12 times, if you have 12 pieces all referencing the same full screen image), the device needs to push 16MB of memory to the screen, plus more – for all the objects on top of it…
If there’s 12 pieces being rendered on top, and all are (even copies) of the 16MB image… (12x16MB being masked and processed) it just might not be able to do it at 30 frames per second… Still can’t quite tell if that’s what your doing though…
As an aside, I thought iPad 1 support was dropped when ios6 support was added (and 2nd gen ipods, and 3g support was dropped too, although 3gs is still officially supported I believe). [import]uid: 79933 topic_id: 33484 reply_id: 133257[/import]
@mpappas, iPad 1 is not supported on iOS 6, but is supported on iOS 5.1.1. iPhone 3gs supports iOS 6. Both devices are still supported in Corona. iPhone 3g is not. [import]uid: 7559 topic_id: 33484 reply_id: 133259[/import]
@Tom - ahh, thanks for the info! I thought the iPad 1 didn’t support 5.1, so was dropped. Good to know my app will run on them. [import]uid: 79933 topic_id: 33484 reply_id: 133260[/import]
Trying out some of the things you said. Will report in in a little bit. In the mean time I am adding a screen shot of the puzzle so my explanation makes more sense:
https://lh3.googleusercontent.com/-Tz0RIptx6_Y/ULqKJ2zZ23I/AAAAAAAAAWI/5l0E_jhJAO8/s720/sreen1.jpg
There are 24 total masked images (the 24 pieces)
All pieces begin loaded and masked, just some are not visible.
Once twelve pieces are in place, the lag begins (pieces move slower when dragged, particle effects slow down, etc), but only on iPad devices. [import]uid: 79834 topic_id: 33484 reply_id: 133282[/import]
Okay! Reporting back in.
Things I tried that didnt make a difference:
Removing the @2x and @4x -
Resulted in similar performance and looked real bad 
Puzzle images now match the mask size:
388x320 and multiples there of for @2x and 4x
Setting it to isVisible as opposed to Alpha of 0:
Did not make a difference.
Altered the code to reduce any extra things going on:
No improvements
Things that improved performance:
Removing All Masks and leaving @4x and @2x in the build:
No slowing at all
When the puzzle is completed, there is an animation sequence. Before I just reinserted the animated images so they were on top. I made it now so all the puzzle piece images were set to .isVisible = false. This instantly restores the performance and the animation runs smooth even when masks are being used.
So, it is definitely related to the masked images.
I will add an image what my masks look like to make sure I am making them correctly. Maybe something with my mask is causing odd effects.
[import]uid: 79834 topic_id: 33484 reply_id: 133376[/import]
Couple more experiments-
All pieces full size and visible the whole time: Still no lag to begin with, but starts getting noticeable at about 4 pieces in place as opposed to 12 pieces.
All pieces at .3 (xScale,yScale) and visible the whole time: NO LAG at all! Now at .3 it looks silly as the tiny pieces just sit inside the full size pieces shadow.
So it appears that the problem has something to do with the display size of the pieces when masked and visible. Perhaps it is an issue with multiple pieces overlapping each other?
[import]uid: 79834 topic_id: 33484 reply_id: 133380[/import]
So here are links to two of my masked images for the 24 piece puzzle:
https://lh6.googleusercontent.com/-nDpkM5U-tD8/ULuoapkQYEI/AAAAAAAAAWc/UNsiLzAZIdo/s388/20p1.png
https://lh5.googleusercontent.com/-lYDQu8JdTvU/ULuoi-eePNI/AAAAAAAAAWk/L0qWrx4IKFw/s388/20p10.png
Thank you everyone for helping me!
[import]uid: 79834 topic_id: 33484 reply_id: 133382[/import]
That’s great scott! Sounds like your well on the way to understanding/isolating your bottlenecks!
Masked images are inherently less efficient at rendering than non masked images. To render a non-masked image, the device typically uses special graphics hardware (pretty fast, compared to CPU rendering). To render a masked image however, typically involves a lot of CPU grunt work (and a lot of memory bandwidth). A corona proggie could answer about the hardware rendering vs. software rendering issue once masks come into play.
Looking at your mask files – they are large / full screen… And they definitely overlap each other (being full screen). Moving one piece looks like it will cause all other placed pieces to be re-rendered, masks and all.
There might be some tricks you could pull off (like only using low res art), but given your current set of art… your best overall solution might just be not using full screen masks for every piece… It just takes a lot of CPU horsepower to process all of that data (12 screen fulls to go process all the masks)…
Any corona proggie have some commentary on whether images are hardware rendered, and whether masks are processed in software? Would processing 12 full screen masks at once cause performance issues?
btw scott – Your app looks cute – I hope you do well. [import]uid: 79933 topic_id: 33484 reply_id: 133387[/import]
Your “20p1.png” mask doesn’t seem to have a border on the left side and I’m wondering if that could be causing some problems. I know it can cause masking issues but I’m wondering if it affects performance too.
From graphic.newMask API page:
Bitmap Mask image requirements:
The mask image width and height must be multiples of 4.
The mask image must have a black border around the mask that is 3 or more pixels.
[import]uid: 7559 topic_id: 33484 reply_id: 133410[/import]
Is there a reason you’re masking the puzzle pieces? In the puzzle games I’ve done, I just ended up trimming the pieces in photoshop to remove as much transparency as I can and then figure out the X, Y where each piece needs to land. It’s a little sloppy in that you can touch the transparent areas to move the pieces but that’s really not a bad thing really.
[import]uid: 199310 topic_id: 33484 reply_id: 133422[/import]
@Tom - I tried added a 4 pixel border around all of the pieces. I did not notice any performance improvements unfortunately.
@Rob - That is how I had done my previous puzzles. The thought with using masks was to reduce the timeby not have to figure out the x/y for every piece for every puzzle, easily subbing in one puzzle image for another, and to use it for a future project that would likely require an image of that size to be masked several times.
@mpappas - Thanks for all your info!
So, if anyone has any other ideas to try, let me know! Again, everything works fine on iPhone devices and simulator. iPads have huge lag as full size images overlap (when images are at .3 and do not overlap there are no problems).
If I dont hear anything, I will likely try dividing the puzzle masks and puzzle images into 4ths and see how that goes.
Thanks! [import]uid: 79834 topic_id: 33484 reply_id: 133812[/import]
When I tried to use masks to avoid that same problem, it created others like when I went to position the pieces off the puzzle so people could drag them on.
What I did to make it easy for me was to put a print in my drag handler that printed out the X and Y of the piece when I stopped moving it. I would them drag it to where it belonged on the screen and wrote down the X, Y from the print and used that to determine my landing spot. I could map out my puzzle pieces in a matter of minutes with this technique.
[import]uid: 199310 topic_id: 33484 reply_id: 133842[/import]
@Tom - I tried added a 4 pixel border around all of the pieces. I did not notice any performance improvements unfortunately.
@Rob - That is how I had done my previous puzzles. The thought with using masks was to reduce the timeby not have to figure out the x/y for every piece for every puzzle, easily subbing in one puzzle image for another, and to use it for a future project that would likely require an image of that size to be masked several times.
@mpappas - Thanks for all your info!
So, if anyone has any other ideas to try, let me know! Again, everything works fine on iPhone devices and simulator. iPads have huge lag as full size images overlap (when images are at .3 and do not overlap there are no problems).
If I dont hear anything, I will likely try dividing the puzzle masks and puzzle images into 4ths and see how that goes.
Thanks! [import]uid: 79834 topic_id: 33484 reply_id: 133812[/import]
When I tried to use masks to avoid that same problem, it created others like when I went to position the pieces off the puzzle so people could drag them on.
What I did to make it easy for me was to put a print in my drag handler that printed out the X and Y of the piece when I stopped moving it. I would them drag it to where it belonged on the screen and wrote down the X, Y from the print and used that to determine my landing spot. I could map out my puzzle pieces in a matter of minutes with this technique.
[import]uid: 199310 topic_id: 33484 reply_id: 133842[/import]
Hi scottadelman.
I am also developing a puzzle game and today during tests in a device (Galaxy S) I faced that same problem: after having a lot of pieces (all made with masks) in the screen the game starts to have lag (that lag was not noticed in the Corona Simulator). You can see my puzzle screen here: http://www.adventuresofanentrepreneur.net/uploads/1/3/0/1/13010621/7525428_orig.jpg?1
After running some tests, I discovered that it is a problem with fps and not memory. That problem gets worse with high resolution images. My default puzzle images are 480x270 and I not noticed much lag. But if I use images with more resolution like 2560x1920, the lag appears after having a number of pieces in the screen.
Just to give you some numbers, with my default images (480x270), my puzzle game starts with ~30 fps and when all pieces are in the screen, the fps goes down to 15-20fps. If I use high resolution images, the fps goes from ~30fps to ~5fps.
So, one “solution” is to decrease the image resolution (by the way, anyone knows a lua code to reduce a the resolution of image? I really do not want to use the screenshot solution…).
Just to register, during my tests, I also noticed how the use of masks increases the memory usage (that in my case did not create the problem, but I got scared with the numbers). In my case, if I use a mask file of 2kg, the used memory goes up by 700kb! Since my puzzle has 35 pieces (35 masks), just make the math… At least the Corona does not load my puzzle image 35 times (it only loads it once).
I hope that my case helps you in some way and I would love to hear from corona staff about the mask memory consumption and the impact in the fps (since scottadelman said that without the masks the games runs normal)
rsc [import]uid: 181011 topic_id: 33484 reply_id: 138229[/import]
Hi scottadelman.
I am also developing a puzzle game and today during tests in a device (Galaxy S) I faced that same problem: after having a lot of pieces (all made with masks) in the screen the game starts to have lag (that lag was not noticed in the Corona Simulator). You can see my puzzle screen here: http://www.adventuresofanentrepreneur.net/uploads/1/3/0/1/13010621/7525428_orig.jpg?1
After running some tests, I discovered that it is a problem with fps and not memory. That problem gets worse with high resolution images. My default puzzle images are 480x270 and I not noticed much lag. But if I use images with more resolution like 2560x1920, the lag appears after having a number of pieces in the screen.
Just to give you some numbers, with my default images (480x270), my puzzle game starts with ~30 fps and when all pieces are in the screen, the fps goes down to 15-20fps. If I use high resolution images, the fps goes from ~30fps to ~5fps.
So, one “solution” is to decrease the image resolution (by the way, anyone knows a lua code to reduce a the resolution of image? I really do not want to use the screenshot solution…).
Just to register, during my tests, I also noticed how the use of masks increases the memory usage (that in my case did not create the problem, but I got scared with the numbers). In my case, if I use a mask file of 2kg, the used memory goes up by 700kb! Since my puzzle has 35 pieces (35 masks), just make the math… At least the Corona does not load my puzzle image 35 times (it only loads it once).
I hope that my case helps you in some way and I would love to hear from corona staff about the mask memory consumption and the impact in the fps (since scottadelman said that without the masks the games runs normal)
rsc [import]uid: 181011 topic_id: 33484 reply_id: 138229[/import]
