Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Multitouch UI — Gideros Forum

Multitouch UI

RickyngkRickyngk Member
edited July 2012 in Relax cafe
I’d like to introduce a simple way to handle multitouch in gideros with some common UI items such as button, checkbox, radio button; and some utility functions such as drag-measuring and zoom-gesture.

http://www.guava7.com/2012/gideros-multitouch-ui/
Document will be added here soon!

Likes: phongtt, twisttap

Dislikes: xhargh

+1 -1 (+2 / -1 )Share on Facebook

Comments

  • To me, this example is at the moment a little to complicated. I am looking for a simpler example how to use onTouces? In my code I create a couple of blocks. When I touch one block on the iPhone, I will pick up all the blocks at once. When I'll use the the onMouse events it will work great even on the iPhone. Any idea what is going wrong.:

    main.lua part:
    ------------
    -- Create multiple blocks.
    for i = 0, 5 do
    	-- The block image.
    	local blockSprite = Bitmap.new(Texture.new("3D_Block3.png"))
     
    	-- The block value (later also + - : x)
    	local blockValue = math.random(1000)
     
    	-- Create new block.
    	local block = Block.new(blockSprite, blockValue, blockFont)
     
    	block:setPosition((i * 144) + 40, 540)
    	stage:addChild(block)
    end
    in the block class i do:
    block = Core.class(Sprite)
     
    function Block:init(sprite, value, font)
    	-- Register to all mouse and touch events.
    	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
    	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
    	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
     
    	self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
    	self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
    	self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
    	--self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
     
    	-- Add a label.
    	label = TextField.new(font, value)
     
    	-- Center the label on parent sprite.
    	label:setPosition(sprite:getWidth()  / 2 - label:getWidth()  / 2 - 8, 
    			          sprite:getHeight() / 2 + label:getHeight() / 2 + 14)
     
    	-- Add label to the parent sprite.
    	sprite:addChild(label)
    	self:addChild(sprite)
    end
     
    -- If block is on focus, stop propagation of touch events
    function Block:onTouchesBegin(event)
    		print("BEGIN")
     
    		-- Get start postion.
    		self.x0 = event.touch.x
    		self.y0 = event.touch.y
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesMove(event)
    	print("MOVE")
     
    	-- Calculate delta value.
    	local deltaX = event.touch.x - self.x0
    	local deltaY = event.touch.y - self.y0
     
    	-- Update new postion.
    	self:setX(self:getX() + deltaX)
    	self:setY(self:getY() + deltaX)
     
    	-- Store the new postion.
    	self.x0 = event.touch.x
    	self.y0 = event.touch.y
     
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesEnd(event)
     
    	--print("END")
     
    end
     
    -- If touches are cancelled, reset the state of the button.
    function Block:onTouchesCancel(event)
    	if self.focus then
    		self.focus = false;
    		self:updateVisualState(false)
    		event:stopPropagation()
    	end
    end
     
    function Block:onMouseDown(event)
    	if self:hitTestPoint(event.x, event.y) then
    		self.focus = true
    		self.x0 = event.x
    		self.y0 = event.y
    		event:stopPropagation()
    	end
    end
     
    function Block:onMouseMove(event)
    	if self.focus 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
     
    function Block:onMouseUp(event)
    	if self.focus then
    		self.focus = false
    		event:stopPropagation()
    	end
    end
    Etc.

    Other question, are x0 and y0 standard properties of a Sprite object? Is is documented somewhere?

    Thanks,

    Marc
  • ar2rsawseenar2rsawseen Maintainer
    edited July 2012
    @Dikkesnoek
    x0 and y0 are not internal properties of Sprite object. In your code you set them up manually, just to save the previous position is dragging.
    What you miss actually is getting id of touch, which is event.touch.id. You need to save it on touch start, and then on touch move and touch end check if id is the same, something like that:
    -- If block is on focus, stop propagation of touch events
    function Block:onTouchesBegin(event)
    	if self.id ==nil then
    		self.id = event.touch.id
    		print("BEGIN")
     
    		-- Get start postion.
    		self.x0 = event.touch.x
    		self.y0 = event.touch.y
    	end
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesMove(event)
    	if self.id = event.touch.id then
    		print("MOVE")
     
    		-- Calculate delta value.
    		local deltaX = event.touch.x - self.x0
    		local deltaY = event.touch.y - self.y0
     
    		-- Update new postion.
    		self:setX(self:getX() + deltaX)
    		self:setY(self:getY() + deltaX)
     
    		-- Store the new postion.
    		self.x0 = event.touch.x
    		self.y0 = event.touch.y
     	end
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesEnd(event)
    	if self.id = event.touch.id then
    		self.id = nil
    		--print("END")
     	end

    And don't merge touch and mouse events altogether, it could give confusing results. use one or another.
  • Thanks, you helped me a lot. From Objective-C I have to dig into Lua and the engine. This forum is great. Where did you find this .id intell?

    Regards,

    Marc
  • @Rickyngk Very cool, I was able to get it to work on my Droid X no problem--the iPad only demo--however the code has some errors--or missing references anyway.

    In the CButton.lua file references are made to CSprite which is not included in the files, changing the code to Sprite works fine though.

    CButton.lua:65: attempt to call method 'AddChild' (a nil value) is thrown due to a typo AddChild instead of addChild--or this could be a custom function for the CSprite class but I have no way of knowing :)

    Anyway changing the function to addChild works with the CSprite to Sprite changes. Very neat demo. :) Thanks for sharing.
    ThumbHurt Games / FB: ThumbHurt Games / FB: Eli/Teranth | Skype: teranth37
  • RickyngkRickyngk Member
    edited July 2012
    so sorry, I've just fixed.
    Please update lasted version in github regularly :)
  • Hi there,

    I still don't get it work on the iPhone. In the main, I will create 6 blocks on the screen. I've created a separate block class. When I touch the screen anywhere I will move all the 6 blocks (I don't even have to touch a block). I like to move the blocks separately to different positions. Here are some code fragments:
     
    ------------
    -- main.lua
    ------------
     
    -- Create multiple blocks.
    for i = 0, 5 do
    	-- The block image.
    	local blockSprite = Bitmap.new(Texture.new("3D_Block3.png"))
     
    	-- Create new block.
    	local block = Block.new(blockSprite)
     
            -- Place blocks in the bottom screen side by side.
    	block:setPosition((i * 150) + 32, 540)
    	stage:addChild(block)
    end
     
    ------------
    --block.lua
    ------------
     
    Block = Core.class(Sprite)
     
    function Block:init(sprite)
    	-- Register touch events.	
    	self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
    	self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
    	self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
    	self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
     
    	self:addChild(sprite)
    end
     
    -- If block is on focus, stop propagation of touch events
    function Block:onTouchesBegin(event)
    	if self.id == nil then
    		self.id = event.touch.id
     
    		print("BEGIN")			
     
    		-- Get start postion.
    		self.x0 = event.touch.x
    		self.y0 = event.touch.y
    	end
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesMove(event)
    	if self.id == event.touch.id then
     
    		print("MOVE")
     
    		-- Calculate delta value.
    		local deltaX = event.touch.x - self.x0
    		local deltaY = event.touch.y - self.y0
     
    		-- Update new postion.
    		self:setX(self:getX() + deltaX)
    		self:setY(self:getY() + deltaX)
     
    		-- Store the new postion.
    		self.x0 = event.touch.x
    		self.y0 = event.touch.y
    	end
    end
     
    -- If block is on focus, stop propagation of touch events.
    function Block:onTouchesEnd(event)
    	if self.id - event.touch.id then
     
    		print("END")
     
    		self.id = nil
    	end
    end
     
    -- If touches are cancelled, reset the state of the button.
    function Block:onTouchesCancel(event)
    	if self.focus then
    		self.focus = false;
    		self:updateVisualState(false)
    		event:stopPropagation()
    	end
    end
    Thanks again,

    Marc

    Likes: Yan

    +1 -1 (+1 / -0 )Share on Facebook
  • ar2rsawseenar2rsawseen Maintainer
    @Dikkesnoek better create a new thread for problem and also post if you get any errors or what exactly is not working right
Sign In or Register to comment.