drag me example

loves_oi · July 2012

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)

___ · July 2012

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

zvardin · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

@___ 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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

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 · July 2012

@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 · July 2012

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.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

drag me example

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

drag me example

Comments