Not possible to drag objects smoothly diagonally with Corona?

Solar2D General Questions/Discussion
#1

I’m having some trouble with the smoothness when dragging objects diagonally across the screen (the larger the screen, the more visible the effect). The problem is that the object describes a clearly visible “ladder pattern” (x pixels left -> y pixels down -> x pixels left -> y pixels down etc)

In order to isolate the problem i tried to use the “classic” example to drag an object across the screen:

https://coronalabs.com/blog/2011/09/24/tutorial-how-to-drag-objects/

and the “modern ultimate config file”:

https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

with both 320/480 and 800/1200 alternatives but the visible result on an iPad 3 when dragging an object is the same…

Does this really mean that it is not possible to drag objects smoothly diagonally with Corona on larger screens like an iPad?!?

#2

Posting your “drag” code would assist in identifying the issue. 

Are you setting the focus on the object being dragged?

#3

@Alex:

The code is exactly the one you see if you click the first link in my original posting. I did not want to clutter the posting by pasting it directly. I have tried setting the focus on the object as well but it makes no difference with regard to this problem.

#4

It’s mixing local coordinates and screen ones. Maybe the object is in a scaled group and that’s throwing it off? Does the following do anything?

-- create object local myObject = display.newRect( 0, 0, 100, 100 ) myObject:setFillColor( 255 ) -- touch listener function function myObject:touch( event ) if event.phase == "began" then self.markX, self.markY = self:localToContent(0, 0) elseif event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = self:contentToLocal(x, y) end return true end -- make 'myObject' listen for touch events myObject:addEventListener( "touch", myObject )
#5

@coronarocks, are you using the exact code that was in the link or are you creating your own objects/groups? As Starcrunch says, this might play a role.

FWIW I have that code and have no problem with dragging, regardless of screen size.

#6

@StarCrunch: I tried to run your code above but the object could not even be dragged. Does it work for you? Have I missed something?

In my “real” code I use scaled images (newImageRect), but I have also tried plain “display.newRect” just trying to isolate the problem. In all cases, it is the same result: the pattern described by the object is not a smooth line but a “ladder shape” (none of the shapes/images are in a display group). By the way: if you download “Bubble Ball” for iPad, which I believe was built using Corona, and drag the wood block in level 1 diagonally, it shows exactly the same “ladder shape” pattern…

One thing that struck me is that a line, which is set to 1 pixel width is displayed a lot wider than 1 pixel on an iPad:

myLine = display.newLine(11, 814, 183, 814)
myLine.strokeWidth = 1

Given that I use the “modern ultimate config file” (https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/), all images will be scaled up 4 times on an iPad (using the @4x images), which I guess means that the line above will be 4 pixels wide? If that is so, could it be that the x and y movements are also scaled up somehow so that the smallest movement is actually 4 pixels on an iPad? I know it is far fetched but I’m grasping for explanations here…

#7

Sorry, that was untested code, intended more to convey the idea. It looks like the relevant part of that should have been

 if event.phase == "began" then self.markX, self.markY = self:localToContent(0, 0) elseif event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = self.parent:contentToLocal(x, y) end

But like I said, this mostly accounts for the object being in a scaled or off-origin parent. Otherwise, I can only make wild guesses.

#8

@StarCrunch: ok, thanks!  :)  I tried the code, but the problem with the lacking smoothness persisted. However, I think I have found the root cause for this. Please see this thread:

https://forums.coronalabs.com/topic/51823-best-practice-which-device-screen-res-do-you-usually-start-withdesign-for/

If you check out Rob’s and “Alan QuizTix”‘s post about half way down, you see that it has to do with the scaling. I tested it by multiplying my movements by 0.25 and the result was perfect smoothness except for the fact that since the objects only move 1 content pixel for every 4 “screen pixels”, my finger quickly “moves away” from the objects. The solution would be as Alan QuizTix"’ suggests, i.e. to set a much higher base scale than 320x480, but this may cause memory problems.

Is that really the only way? Or is there a completely different “drag formula” that could be used to move objects on high-res devices?

#9

I’ve been investigating a bit and here’s the deal:

When Corona scales up by using the @2x or @4x versions of the images, the difference between the “content pixels” and “actual pixels on the device” will differ. Using the “modern ultimate config file” (320/480), Corona scales up to @4x on an iPad, which means that e.g. a newLine defined as 1 px wide (content pixels) will be displayed as 4 pixels wide (actual pixels on the device). This also means that you have to drag your finger 4 actual pixels on the device before the position changes by 1 content pixel. This is what creates the jumpy effect (which by the way applies in all directions, of course, and not just diagonally) since the dragged image jumps by 4 pixels at a time.

By printing event.x to the console, I have seen that the “moved” phase of the listener actually gets triggered although event.x remains the same (when dragging really slowly just a tiny amount). This means that the listener somehow hears the move although nothing has moved on the screen. I assume that the entire problem could be resolved if x and y coordinates could be read with decimals. In the thread I refer to above, Rob says that you can actually add 0.25 px to the x or y of an object, but my question is:

How can I get the listener to see the fractional changes in the x or y when an object is dragged and how can I apply these fractional x or y values to the object dragged?

#10

I realize that the question at hand does no longer correspond to the subject in the heading and I am therefore moving this question to a new thread.

#11

Posting your “drag” code would assist in identifying the issue. 

Are you setting the focus on the object being dragged?

#12

@Alex:

The code is exactly the one you see if you click the first link in my original posting. I did not want to clutter the posting by pasting it directly. I have tried setting the focus on the object as well but it makes no difference with regard to this problem.

#13

It’s mixing local coordinates and screen ones. Maybe the object is in a scaled group and that’s throwing it off? Does the following do anything?

-- create object local myObject = display.newRect( 0, 0, 100, 100 ) myObject:setFillColor( 255 ) -- touch listener function function myObject:touch( event ) if event.phase == "began" then self.markX, self.markY = self:localToContent(0, 0) elseif event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = self:contentToLocal(x, y) end return true end -- make 'myObject' listen for touch events myObject:addEventListener( "touch", myObject )
#14

@coronarocks, are you using the exact code that was in the link or are you creating your own objects/groups? As Starcrunch says, this might play a role.

FWIW I have that code and have no problem with dragging, regardless of screen size.

#15

@StarCrunch: I tried to run your code above but the object could not even be dragged. Does it work for you? Have I missed something?

In my “real” code I use scaled images (newImageRect), but I have also tried plain “display.newRect” just trying to isolate the problem. In all cases, it is the same result: the pattern described by the object is not a smooth line but a “ladder shape” (none of the shapes/images are in a display group). By the way: if you download “Bubble Ball” for iPad, which I believe was built using Corona, and drag the wood block in level 1 diagonally, it shows exactly the same “ladder shape” pattern…

One thing that struck me is that a line, which is set to 1 pixel width is displayed a lot wider than 1 pixel on an iPad:

myLine = display.newLine(11, 814, 183, 814)
myLine.strokeWidth = 1

Given that I use the “modern ultimate config file” (https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/), all images will be scaled up 4 times on an iPad (using the @4x images), which I guess means that the line above will be 4 pixels wide? If that is so, could it be that the x and y movements are also scaled up somehow so that the smallest movement is actually 4 pixels on an iPad? I know it is far fetched but I’m grasping for explanations here…

#16

Sorry, that was untested code, intended more to convey the idea. It looks like the relevant part of that should have been

 if event.phase == "began" then self.markX, self.markY = self:localToContent(0, 0) elseif event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = self.parent:contentToLocal(x, y) end

But like I said, this mostly accounts for the object being in a scaled or off-origin parent. Otherwise, I can only make wild guesses.

#17

@StarCrunch: ok, thanks!  :)  I tried the code, but the problem with the lacking smoothness persisted. However, I think I have found the root cause for this. Please see this thread:

https://forums.coronalabs.com/topic/51823-best-practice-which-device-screen-res-do-you-usually-start-withdesign-for/

If you check out Rob’s and “Alan QuizTix”‘s post about half way down, you see that it has to do with the scaling. I tested it by multiplying my movements by 0.25 and the result was perfect smoothness except for the fact that since the objects only move 1 content pixel for every 4 “screen pixels”, my finger quickly “moves away” from the objects. The solution would be as Alan QuizTix"’ suggests, i.e. to set a much higher base scale than 320x480, but this may cause memory problems.

Is that really the only way? Or is there a completely different “drag formula” that could be used to move objects on high-res devices?

#18

I’ve been investigating a bit and here’s the deal:

When Corona scales up by using the @2x or @4x versions of the images, the difference between the “content pixels” and “actual pixels on the device” will differ. Using the “modern ultimate config file” (320/480), Corona scales up to @4x on an iPad, which means that e.g. a newLine defined as 1 px wide (content pixels) will be displayed as 4 pixels wide (actual pixels on the device). This also means that you have to drag your finger 4 actual pixels on the device before the position changes by 1 content pixel. This is what creates the jumpy effect (which by the way applies in all directions, of course, and not just diagonally) since the dragged image jumps by 4 pixels at a time.

By printing event.x to the console, I have seen that the “moved” phase of the listener actually gets triggered although event.x remains the same (when dragging really slowly just a tiny amount). This means that the listener somehow hears the move although nothing has moved on the screen. I assume that the entire problem could be resolved if x and y coordinates could be read with decimals. In the thread I refer to above, Rob says that you can actually add 0.25 px to the x or y of an object, but my question is:

How can I get the listener to see the fractional changes in the x or y when an object is dragged and how can I apply these fractional x or y values to the object dragged?

#19

I realize that the question at hand does no longer correspond to the subject in the heading and I am therefore moving this question to a new thread.