Positioning Movieclips

[marcusko]

Hi all,

I’m a newbie in programming. Trying to figure out how to position a movieclip.
I’ve looked around google and on the coronalabs site but could not find any
documentation on positioning movieclips

I’m using the sample code provided by Coronalabs:

local movieclip = require("movieclip")  
local myAnim = movieclip.newAnim { "cube01.png", "cube02.png", "cube03.png", "cube04.png" }   
  
myAnim =   
myAnim:setDrag{  
drag=true,  
limitX=false,  
limitY=false,  
onPress=myPressFunction,  
onDrag=myDragFunction,  
onRelease=myReleaseFunction,  
bounds={ 50, 100, 100, 200 }  
}  
  
myAnim:play()  

The movie clip works as it should but the cube’s position is all the way in towards the upper-left hand corner. I have to drag it onto the center of the screen to see the boundaries working. Can anyone tell me where to look to find out how to position the cube in the center of the screen to begin with?

Appreciate any help. [import]uid: 197076 topic_id: 34357 reply_id: 334357[/import]

[bjsorrentino]

Hi @marcusko,
This “movieclip” API is actually quite old and outdated, and I don’t suggest you use it anymore. It would be more efficient to use image sheets and make your movie clip “frames” into an animated sprite sequence… or create a simple set of functions to control a sprite as if it was a movie.

This guide might help you get started, and I can point you toward other resources if you need.
http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/

Best regards,
Brent [import]uid: 200026 topic_id: 34357 reply_id: 136596[/import]

[marcusko]

Hi Brent,

Thanks for your reply. Actually, the reason why I was trying to use movieclips was to restrict movement only on the X and Y axis. Maybe this is not the right path I should go.

So I have a cube in the middle of the screen and I would like to just be able to go left, right, up and down without being able to stray off the lines, so just be on the absolute x and y axis, if that’s the right term.

Currently I’m using a drag to move the cube and a transition.to to sort of push the cube the rest of the way. But I can actually force the cube to move around more freely beyond the X and Y axis.

local box1pic = display.newImage ("box1.png")  
 box1pic.x = 150  
 box1pic.y = 200  
  
local w,h = display.contentWidth, display.contentHeight  
  
local function dragbox1 (event)  
 local y = event.y  
 local x = event.x  
  
-- Moves object down  
 if(y \> 210) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-170), y=(h-150) } )  
  
-- Moves object up  
 elseif(y \< 190) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-170), y=(h-400) } )  
 end  
  
-- Moves object Right  
 if(x \> 160) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-70), y=(h-280) } )  
  
-- Moves object Left  
 elseif(x \< 140) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-270), y=(h-280) } )  
 end  
end  
  
box1pic:addEventListener ("touch", dragbox1)  

Any push in the right direction is appreciated…

• Marcus
  [import]uid: 197076 topic_id: 34357 reply_id: 136649[/import]

[Caleb_P]

You can always just hard-code the restrictions on X and Y axis - movieclips aren’t the only thing that can do that.

I’m not totally sure I understand your original question, but I think you’re saying “How do you make a movieclip appear in the center of the screen, instead of the top corner?”

If that’s what you’re saying, that’s simply done. A movieclip is only a group with images inside of it - it can be moved with simple X and Y values.
[lua]local movieclip = require(“movieclip”)
local myAnim = movieclip.newAnim { “cube01.png”, “cube02.png”, “cube03.png”, “cube04.png” }
myAnim.x, myAnim.y=display.contentCenterX, display.contentCenterY – X and Y

myAnim =
myAnim:setDrag{
drag=true,
limitX=false,
limitY=false,
onPress=myPressFunction,
onDrag=myDragFunction,
onRelease=myReleaseFunction,
bounds={ 50, 100, 100, 200 }
}

myAnim:play()[/lua]

If that’s not what you’re wanting, please post a clearer reply. [import]uid: 147322 topic_id: 34357 reply_id: 136663[/import]

[marcusko]

Hi Caleb,

Thanks for your help!

My main primary goal is to be able to move a 20x20 sized object ( square.png ) at right angles on a grid. The 2nd code that I displayed…

local box1pic = display.newImage ("box1.png")  

does the job of moving the object, but when I hold down on the mouse button, I can force the object off the x and y path. I would like it to move in straight lines.

I originally tried to do this with movieclip because I thought that was the only way to do it. But if there is another way, that would be great if you could point me in the right direction.

Thanks,
Marcus [import]uid: 197076 topic_id: 34357 reply_id: 136751[/import]

[Caleb_P]

That’s also pretty simple. All you’d do is, inside of the object’s touch listener, set a flag to check if the object’s at the center of your x and y axes, and then some sort of a flag to check if you moved the mouse up and down or left and right. Then, you’d just set the X of the object to event.x, and not the Y, if it was left-right, and just the Y and not the X if it was up-down. This isn’t a very good example, it’s just off the top of my head, and it’s not perfect, but here’s a prototype idea:
[lua]local rect=display.newRect(0, 0, 60, 60) – Create the moving object
rect.x, rect.y=display.contentCenterX, display.contentCenterY – In the center of the screen
rect:setFillColor(255, 255, 0)

local test=display.newRect(0, 0, 20, 20) – And a rectangle to check (coarsely) if the touch object is in the center
test.x, test.y=display.contentCenterX, display.contentCenterY – Also in the center

local prevX, prevY=0, 0

local snap=“NIL” – Make the snap axis

local function touchRect(e)
local inTestBounds=
(rect.x<=test.contentBounds.xMax) and (rect.x>=test.contentBounds.xMin) and (rect.y<=test.contentBounds.yMax) and (rect.y>=test.contentBounds.yMin) – See if the rectangle’s near the center

if “began”==e.phase then
prevX, prevY=e.x, e.y – Reset the prevX and prevY
display.getCurrentStage():setFocus(e.target) – Set focus
e.target.isFocus=true
elseif “moved”==e.phase then
if inTestBounds then – If the rectangle’s near the center…
local distX, distY=e.x-prevX, e.y-prevY
if distX>distY then – …Reset the snap
snap=“X”
elseif distX snap=“Y”
else
snap=“X”
end
e.target.x, e.target.y=e.x, e.y – Move it
elseif not inTestBounds then
if snap==“X” then
e.target.x=e.x – Only set the X if the snap is on the X axis
elseif snap==“Y” then
e.target.y=e.y – Same here, but Y
end
end
elseif “ended”==e.phase then
e.target.x, e.target.y=display.contentCenterX, display.contentCenterY – Back to the center
display.getCurrentStage():setFocus(nil) – Un-focus it
e.target.isFocus=false
end

end
rect:addEventListener(“touch”, touchRect) – Add the listener[/lua] [import]uid: 147322 topic_id: 34357 reply_id: 136770[/import]

[bjsorrentino]

Hi @marcusko,
This “movieclip” API is actually quite old and outdated, and I don’t suggest you use it anymore. It would be more efficient to use image sheets and make your movie clip “frames” into an animated sprite sequence… or create a simple set of functions to control a sprite as if it was a movie.

This guide might help you get started, and I can point you toward other resources if you need.
http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/

Best regards,
Brent [import]uid: 200026 topic_id: 34357 reply_id: 136596[/import]

[marcusko]

Hi Brent,

Thanks for your reply. Actually, the reason why I was trying to use movieclips was to restrict movement only on the X and Y axis. Maybe this is not the right path I should go.

So I have a cube in the middle of the screen and I would like to just be able to go left, right, up and down without being able to stray off the lines, so just be on the absolute x and y axis, if that’s the right term.

Currently I’m using a drag to move the cube and a transition.to to sort of push the cube the rest of the way. But I can actually force the cube to move around more freely beyond the X and Y axis.

local box1pic = display.newImage ("box1.png")  
 box1pic.x = 150  
 box1pic.y = 200  
  
local w,h = display.contentWidth, display.contentHeight  
  
local function dragbox1 (event)  
 local y = event.y  
 local x = event.x  
  
-- Moves object down  
 if(y \> 210) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-170), y=(h-150) } )  
  
-- Moves object up  
 elseif(y \< 190) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-170), y=(h-400) } )  
 end  
  
-- Moves object Right  
 if(x \> 160) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-70), y=(h-280) } )  
  
-- Moves object Left  
 elseif(x \< 140) then  
 transition.to( box1pic, { time=400, alpha=1.0, x=(w-270), y=(h-280) } )  
 end  
end  
  
box1pic:addEventListener ("touch", dragbox1)  

Any push in the right direction is appreciated…

• Marcus
  [import]uid: 197076 topic_id: 34357 reply_id: 136649[/import]

[Caleb_P]

You can always just hard-code the restrictions on X and Y axis - movieclips aren’t the only thing that can do that.

I’m not totally sure I understand your original question, but I think you’re saying “How do you make a movieclip appear in the center of the screen, instead of the top corner?”

If that’s what you’re saying, that’s simply done. A movieclip is only a group with images inside of it - it can be moved with simple X and Y values.
[lua]local movieclip = require(“movieclip”)
local myAnim = movieclip.newAnim { “cube01.png”, “cube02.png”, “cube03.png”, “cube04.png” }
myAnim.x, myAnim.y=display.contentCenterX, display.contentCenterY – X and Y

myAnim =
myAnim:setDrag{
drag=true,
limitX=false,
limitY=false,
onPress=myPressFunction,
onDrag=myDragFunction,
onRelease=myReleaseFunction,
bounds={ 50, 100, 100, 200 }
}

myAnim:play()[/lua]

If that’s not what you’re wanting, please post a clearer reply. [import]uid: 147322 topic_id: 34357 reply_id: 136663[/import]

[marcusko]

Hi Caleb,

Thanks for your help!

My main primary goal is to be able to move a 20x20 sized object ( square.png ) at right angles on a grid. The 2nd code that I displayed…

local box1pic = display.newImage ("box1.png")  

does the job of moving the object, but when I hold down on the mouse button, I can force the object off the x and y path. I would like it to move in straight lines.

I originally tried to do this with movieclip because I thought that was the only way to do it. But if there is another way, that would be great if you could point me in the right direction.

Thanks,
Marcus [import]uid: 197076 topic_id: 34357 reply_id: 136751[/import]

[Caleb_P]

That’s also pretty simple. All you’d do is, inside of the object’s touch listener, set a flag to check if the object’s at the center of your x and y axes, and then some sort of a flag to check if you moved the mouse up and down or left and right. Then, you’d just set the X of the object to event.x, and not the Y, if it was left-right, and just the Y and not the X if it was up-down. This isn’t a very good example, it’s just off the top of my head, and it’s not perfect, but here’s a prototype idea:
[lua]local rect=display.newRect(0, 0, 60, 60) – Create the moving object
rect.x, rect.y=display.contentCenterX, display.contentCenterY – In the center of the screen
rect:setFillColor(255, 255, 0)

local test=display.newRect(0, 0, 20, 20) – And a rectangle to check (coarsely) if the touch object is in the center
test.x, test.y=display.contentCenterX, display.contentCenterY – Also in the center

local prevX, prevY=0, 0

local snap=“NIL” – Make the snap axis

local function touchRect(e)
local inTestBounds=
(rect.x<=test.contentBounds.xMax) and (rect.x>=test.contentBounds.xMin) and (rect.y<=test.contentBounds.yMax) and (rect.y>=test.contentBounds.yMin) – See if the rectangle’s near the center

if “began”==e.phase then
prevX, prevY=e.x, e.y – Reset the prevX and prevY
display.getCurrentStage():setFocus(e.target) – Set focus
e.target.isFocus=true
elseif “moved”==e.phase then
if inTestBounds then – If the rectangle’s near the center…
local distX, distY=e.x-prevX, e.y-prevY
if distX>distY then – …Reset the snap
snap=“X”
elseif distX snap=“Y”
else
snap=“X”
end
e.target.x, e.target.y=e.x, e.y – Move it
elseif not inTestBounds then
if snap==“X” then
e.target.x=e.x – Only set the X if the snap is on the X axis
elseif snap==“Y” then
e.target.y=e.y – Same here, but Y
end
end
elseif “ended”==e.phase then
e.target.x, e.target.y=display.contentCenterX, display.contentCenterY – Back to the center
display.getCurrentStage():setFocus(nil) – Un-focus it
e.target.isFocus=false
end

end
rect:addEventListener(“touch”, touchRect) – Add the listener[/lua] [import]uid: 147322 topic_id: 34357 reply_id: 136770[/import]