drag me example

loves_oi

I'm absolutely new to lua. i learned some basics and understand button example. Now i 'm trying to understand "drag me" example . Could you help me please. It's more complex than button example. What does the functions do inside onMouseMove especially? Thanks in advance

--[[   Drag the shapes around with your mouse or fingers   This code is MIT licensed, see <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow">http://www.opensource.org/licenses/mit-license.php</a> (C) 2010 - 2011 Gideros Mobile   ]]   local function onMouseDown(self, event) if self:hitTestPoint(event.x, event.y) then self.isFocus = true   self.x0 = event.x self.y0 = event.y   event:stopPropagation() end end   local function onMouseMove(self, event) if self.isFocus then local dx = event.x - self.x0 local dy = event.y - self.y0   self:setX(self:getX() + dx) self:setY(self:getY() + dy)   self.x0 = event.x self.y0 = event.y   event:stopPropagation() end end   local function onMouseUp(self, event) if self.isFocus then self.isFocus = false event:stopPropagation() end end   for i=1,7 do local shape = Shape.new()   shape:setLineStyle(3, 0x000000) shape:setFillStyle(Shape.SOLID, 0xabc300, 0.5) shape:beginPath() shape:moveTo(0, 0) shape:lineTo(100, 0) shape:lineTo(100, 50) shape:lineTo(0, 50) shape:closePath() shape:endPath()   shape:setX(math.random(0, 320 - 100)) shape:setY(math.random(0, 480 - 50))   shape.isFocus = false   shape:addEventListener(Event.MOUSE_DOWN, onMouseDown, shape) shape:addEventListener(Event.MOUSE_MOVE, onMouseMove, shape) shape:addEventListener(Event.MOUSE_UP, onMouseUp, shape)   stage:addChild(shape) end     local info = TextField.new(nil, "drag the shapes around with your mouse or fingers") info:setPosition(23, 50) stage:addChild(info)

___

Quick tip: Instead of [code] [/code] use <pre> </pre>

zvardin

I've pasted the function below with comments to try to better explain what's going on:

local function onMouseMove(self, event) if self.isFocus then -- this checks if we were clicked on in the mouseDown event --in mouseDown event we stored x0 and y0 so we had where our object originally was touched. dx and dy are calculating how much we have moved the mouse/touch, so we know how much to move the object. local dx = event.x - self.x0 local dy = event.y - self.y0   -- set the position of our object by adding dx,dy to each the x and y values of the object. self:setX(self:getX() + dx) self:setY(self:getY() + dy)   -- set x0 and y0 again, so if we continue to drag we know how much to move the object the next time this event is triggered self.x0 = event.x self.y0 = event.y   -- we've already moved the correct object so stop other objects from receiving this event event:stopPropagation() end end

loves_oi

Thanks for your reply @zvardin
I have some questions too.
1.What about our functions' parameters "self" and "event". What does this do exactly?
2.The arguments' names is special or, can we change their names for instance john , jack. like : local function onMouseMove(john, jake)
3.In C or Java , for instance, we write a function with two arguments and then we call the function by loading some values to the arguments. However , in this function , conditions are different i think. We defined the functions with two arguments (i dont know the argument's name is strict or free) . here ,is The Number of arguments of onMouseMove function is strictly two ,or do we choose it arbitrarily? What do we load to this arguments ?
Thanks in advance

talis

Hi @loves_oi,
Let me try to answer your questions,
1-self refer to the object that passed to the function.
Why we need self:
If we will write a function for a specific object than it will only work only for this object(In your example objects are draggable shapes). But we are making our function to work for every object.
event is also an object that is automatically created by Gideros for our usage. like on touch,onmove. Gideros generating this object and setting some values inside this object like x,y coordinate etc.. Please see this article for details: http://www.giderosmobile.com/documentation/events.htm

2-In this example self is referred to the object shape and registered in below lines so actually self becomes shape.

shape:addEventListener(Event.MOUSE_DOWN, onMouseDown, shape) shape:addEventListener(Event.MOUSE_MOVE, onMouseMove, shape) shape:addEventListener(Event.MOUSE_UP, onMouseUp, shape)

3-Those functions are automatically triggered by events. Please see the documentation about events for further talk. (Link is in the above)

I hope those answers will be satisfying for you. Please fell free to ask anything. I i know i will try to help:D

Take care

zvardin

You can name the arguments however you want, but how many arguments you have in this case may be restricted since you're using the event listener, but you can easily work around this. So, for example your function could look like:

-- I actually prefer using e over event normally anyhow local function onMouseMouve(args, e) -- args.1 = "val1", args.2 = "val2", args.3 = "val3" end   local args = {"val1","val2","val3"} something:addEventListener(Event.MOUSE_MOVE, onMouseMove, args)

shape was being passed as a data parameter in the example so the function was able to act on self as most people would expect, although you could actually get the event target instead.

talis

@___ correction to quicktip: Quick tip: Instead of [ code] [/ code] use < pre lang='lua'> </ pre>

I have tried < pre> </ pre> without lang parameter it is showing like code:D

loves_oi

i know nothing about event listener etc. Now it comes me very difficult to grasp. What do they do :

is setX , getX built-in ? Please give me a very basic link.
@talis i try to read the article which you Show , but it is difficult to grasp:(

talis

setX and getX is built-in.

hmmm it is difficult to point you some basic link. But i can suggest you to look to class systems and object oriented programming first of all. (Not in lua, general)
If i will find some basic tutorial i will send you.

loves_oi

i know object oriented programming from java,c++ . You can explain me it in lua if you are not busy
Thanks for your attention..

zvardin

Hm, I assume you may have had a little background with object oriented programming since you have worked with Java (and also C), but if not I would definitely do some small research on the matter.

http://www.giderosmobile.com/documentation/reference_manual.html -shows all of Gideros' API. setX and getX are functions of the Sprite class.

As far as handling events, have you ever worked with a system that throws errors? Essentially events are just a way to communicate between different things. There is something that "throws" an event or error and something else will be "listening" for this and when it occurs, perform whatever is specified.

So in the example above, since you are listening for mouse moves, the function onMouseMove will occur every time the mouse move is "thrown". In this case we're dealing with a built-in event (mouse move), but the idea works the same even if doing custom events.

zvardin

Also @loves_oi http://www.lua.org/pil/index.html#P1 is a decent read I've been looking at to learn Lua. I've also seen many other good links people have provided here.

loves_oi

EventDispatcher:addEventListener(type, listener, data)   Registers a listener function and an optional data value so that the listener function is called when an event of a particular type occurs.   Parameters:   type: (string) The type of event. listener: (function) The listener function that processes the event. data: (optional) An optional data parameter that is passed as a first argument to the listener function.

I understand the logic of "self".Above documentation made it clear. And i read what you said above and grasped. Now i'm stack at the argument "event". What does this argument do exactly in code ?
Thanks in advance

loves_oi

How can we understand the argument "event" is Event ?
For example, @zvardin you say 'e' instead of "event" .
How can the computer understand that 'e' is an Event. It understands it because of being second argument of listener function or not??

talis

@loves_oi event is an object created by the Gideros Studio on ttiggred "Events".
The same logic goes with e object whihc is used in java in errors, like e.message gives you the error code. The same logic they are an object created by the system itself.

zvardin

Ok, when you the event is thrown and caught by a function, the function in this case expects 1 or 2 parameters. If you've provided optional data, there will be 2 parameters, otherwise there will only be 1, which will be the event itself. I mentioned 'e' because you asked if you could rename the arguments:

"2.The arguments' names is special or, can we change their names for instance john , jack. like : local function onMouseMove(john, jake)"

I was just trying to explain that you can rename the arguments to whatever you like. I use 'e' out of personal preference because it is somewhat standard in a lot of languages.