Swipe left and right to show more items

hungle · August 21, 2019, 7:26am

Hi everyone,

I would like to do something like the iOS home screen, where you can swipe left or right to show more items (game objects) and also able to click on the item to choose it.

I just can’t figure out how to properly do this. Is it one big game object cover the whole screen and then many smaller game objects on top of it to represent the items?

I’m trying to do this using defold-input library by @britzl.

If anyone has any direction, please let me know!

Thanks a lot .

britzl · August 21, 2019, 7:49am

Should it really be game objects? Sounds more like some UI components to me? Doing mouse picking using GUI nodes is easier than picking with game objects.

Yes, there’s a Gesture library in there which can detect swipes

github.com/britzl/defold-input

in/gesture.md

master

# Gestures
Use the Gesture module to detect gestures such as swipes, long press and double tap. It also supports two finger gestures. You can use the Gesture module either via the ```gesture.script``` or directly via ```gesture.lua```.

# Using gesture.script
Attach the ```gesture.script``` to the game object that should detect gestures. Configure the script properties if necessary. When a gesture is detected the script will generate an ```on_gesture``` message and send that to the game object.

	function on_message(self, message_id, message, sender)
		if message_id == hash("on_gesture") then
			if message.swipe_right then
				print(message.swipe.from, message.swipe.to)
			elseif message.tap then
				print(message.tap.position)
			elseif message.double_tap then
				print(message.double_tap.position)
			elseif message.long_press then
				print(g.long_press.position, message.long_press.time)
			end
		end
	end

This file has been truncated. show original

hungle · August 21, 2019, 8:17am

It’s like a collection of weapons, you choose the weapon then you can throw that weapon out; you think it’s more suited to use GUI nodes or game object? Also I did the mouse picking with your Cursor library and it’s working fine (added collision objects to the mouse and to the items)

Yes, I had studied you library, it’s great! It’s just that I can’t figure out which object to put the gesture.script. Is it the invisible object in the background, or is this the small items, or is it some where else?

Thanks a lot!

britzl · August 21, 2019, 8:22am

Not on the small items! There’s a limit to the number of input listeners you can have (ie the number of game objects that has acquired input focus). You want it on some controller object, probably the same controller object that spawned the grid of objects in the first place. So when you get a swipe left this controller objects, which I assume has a list of created object ids, animates all of them (or a root object) in the direction of the swipe.

hungle · August 21, 2019, 9:25am

Thanks! I will try your solution.

Just out of curiosity, if I use GUI nodes to show the items instead, how can I animate the node outside of the screen? (with all the different screen sizes)

britzl · August 21, 2019, 11:12am

Your gui will adapt to the size you have specified in game.project. There are a number of different adjust modes that you can use. With the proper adjust mode set it’s possible to animate the content a predefined number of pixels left/right to move the content off-screen.