How to add Acceleration to AceSlide and change stopping point?

BlueByLiquid · February 2013

I need to add acceleration to AceSlide so you can go through a large set very quickly but I am not sure how. This is the same way as apple does scrolling. Any help would be great!

Also I want to have the items in the slide to stop on the selected row at the top rather than in the middle of the screen.

Thanks!

ar2rsawseen · February 2013

Sorry I forgot to mention in previous thread, but it's better to use AceSlide OOP version, which uses Gideros class system: https://github.com/ar2rsawseen/AceSlide_oop

And as it inherits from sprite you can change position using setPosition method (just like sprite) only with two gotchas:

You'll need to change position after calling :show() (because by default it positions to center internally)
And your position should be specified relatively to center (because by default it positions to center internally) Which means you'd probably have to specify something like -100 or -200 as y position to make it go to top of the screen

That's all because well it was meant a little for different usage, but that does not mean it can't be adapted

And about speed, when creating instance you can provide different configurations like

--initialize slider
local slider = AceSlide.new({
	orientation = "vertical",
	spacing = 100,
	speed = 5,
	unfocusedAlpha = 0.75,
	easing = nil,
	allowDrag = true,
	dragOffset = 10
})

One of them is speed, which from historic development of this package again is actually a time of switching between items in seconds

, so providing for example 1, means items will be switched in 1 second of sliding.

BlueByLiquid · February 2013

Hi ar2rsawseen,

Thanks for the response. I was using the version linked. I actually modified quite a bit to get things to not work centered as I want rows to stop at the top not the center. Its a bit buggy but works.

One issue I have. I have added the slider to a sprite that is half the height of the screen but the cards are still drawn even though the spite shouldn't exist there right? I would think gideros would treat sprite as a self contained unit and wouldn't paint outside of it right? if not how would I accomplish this?

BlueByLiquid · February 2013

As for the speed I am looking to make a quick action and make it go more than just one row and then slow down until it is slow enough to lock one in place.

ar2rsawseen · February 2013

@BlueByLiquid the functionality you described is called clipping and unfortunately it is not yet supported in Gideros, meaning, all the things will be drawn outside the parent.

One fix was to draw the Shape object around or use some kind of picture as a mask, that would be put on top of it

Here is some discussion on this:
http://www.giderosmobile.com/forum/discussion/2356/png-mask/p1

bowerandy · February 2013

@BlueByLiquid, I have created my own version of an item slider that you may be interested in. This has a number of optional features, such as momentum scrolling. You can animate the sliding programmatically if you wish and detect scrolling and "long tap" events.

Also, if you use an option called setDisabledAlpha(), you can cause the items to fade out either side of the current one. This can have the effect of "masking" the slider if you don't want to do the picture mask trick that @ar2rsawseen suggests above.

The demo just shows sliding of text fields but, of course, you can add any sprites you like to the slider.

You can get the code and the demo project from my GitHub repo here.

Best regards

BlueByLiquid · February 2013

Awesome work bowerandy!

I will check it out. Did you overcoming the clipping limitation ar2rsawseen mentioned? Without such a basic feature as clipping/masking I don't understand how anyone would pay for Gideros clipping. The performance of just covering up object is huge and plus I don't understand how you could ever make a full UI library or even a basic one.

Is there any way to have the objects stop at the top rather than the center. I want to have a full image at the top always (to me more clear I don't want a chopped of image at the top).

bowerandy · February 2013

@BlueByLiquid,

The clipping limitation is, as I understand it, caused by the fact that Gideros currently uses OpenGL 1.1 rather than 2.x. One of the reasons @atilim has chosen to stick so long with this version is that it runs on a wider range of older mobile devices. I believe the move to OGL 2.x is well under way and, hopefully, this will resolve a number of issues, including clipping. But even so, Gideros is a very capable system and given it's 2D gaming target market the clipping issue is not that serious (although I'll be very happy when it is addressed).

As I mentioned above, you can make my BhItemSlider appear to be "masked" (sort of) using the setDisabledAlpha() option to fade out the items. If that look is not what you want, it's pretty flexible. You can intercept the scrolling to hide and show elements. Try adding the following code to display the current item near the top of the screen and to only show the first 5 elements after the selected one.

slider.itemPadding=0
slider:setDisabledAlpha(1)
slider:setPosition(100, 50)
 
slider:addEventListener("scrolled", 
	function()
		local currentIndex=slider:getCurrentItemIndex()
		for _, eachItem in ipairs(slider:getItems()) do
			local eachIndex=slider:getIndexOfItem(eachItem)
			eachItem:setVisible(eachIndex>=currentIndex and eachIndex<currentIndex+5)
		end
 
	end)

Perhaps this is more what you're looking for. Here the top item is the selected one:

best regards

ar2rsawseen · February 2013

@bowerandy that looks like a perfect tool for this job

And nice trick with alpha for emulating clipping

BlueByLiquid · February 2013

bowerandy,
This looks pretty great. I have one strange issue. Set position seems to be off for the slider. The x works as expected but the y seems to be off by 1/4 of the image in the positive. For example if my sprites are 400px high I have to use setPostion(0, 100) to get it to put the top left in the top left of the screen.

BlueByLiquid · February 2013

bowerandy,

just noticed that momentum doesn't work when swiping up and only works when swiping down.

BlueByLiquid · February 2013

bowerandy,

The issue with momentum not working when swiping up seems to be becuase of the "main.min" on line 426. With that removed it works just fine.

BlueByLiquid · February 2013

bowerandy,

If DEFAULT_ITEM_PADDING is not set to "0" (default is set to one). Everything will move off by a slight amount every scroll.

bowerandy · February 2013

Hi @BlueByLiquid. First of all, you should include the poster's tag (@bowerandy in my case - including the @ sign) in any replies on this forum. That way, we get an e-mail that a reply has been made.

Yes, it looks like you have spotted a couple of bugs, so thanks for that:

1) Momentum scrolling in the reverse direction wasn't working correctly. You shouldn't just remove that math.min() call although that is certainly the line at fault. Fixed in repo version.

2) The item padding is all screwed up. I've never noticed because I always set it to zero. It's pretty redundant (you can space the items out by increasing the itemWidth or itemHeight parameters) so I have removed it completely. You should find that this fixes the positioning issue you mention above.

I've added BhItemSlider to my GitHub repositories. You can find the latest version (including fixes) here.

Check out the the other libraries too. They are discussed in my blog.

best regards

HubertRonald · June 2014

Sorry I forgot to mention in previous thread, but it's better to use AceSlide OOP version, which uses Gideros class system: https://github.com/ar2rsawseen/AceSlide_oop

Hi @ar2rsawseen, your earlier comment is true because luaMen doesn't grow when you use scenemanager.

But I've a problem with this Class than with Ace.Slide.lua I hadn't it. I don't know if you can help me a little with this.

In Ace.Slide.lua (earlier version) I could do the next dirty trick:

module("AceSlide", package.seeall)
 
--configuration options
local conf = {orienta...}
--*
--*
function init(config, myXPosition,  myYPosition)
	total = 1
	cur = config.cur ---- modified by hubert ronald
	offset = 0
	if config then
		--copying configuration
		for key,value in pairs(config) do
			conf[key]= value
		end
	end
	coord = {}
       -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
	scrH = myXPosition -- y position
	scrW = myYPosition -- x position
        -- NOTE:
	-- and sprites buttons (crate image in your tutorials) were
        -- where I wanted them to be on the screen
       -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
end

and well in new version is more easy

self.slide = AceSlide.new({...})
self.slide.scrH = myYPosition
self.slide.scrW = myXPosition
 
-- NOTE:
-- But sprites buttons always are in center of screen
-- So I tried the next
 
 self.slide:setPosition(myXPosition, myYPosition)
 
-- NOTE:
-- and yes sprites buttons (crate image in your tutorials) were 
-- in another place of screen but I didn't want them to be

in all case:

allowDrag = false

Do you any idea of how I can fix this?
Thanks again for your time

HubertRonald · June 2014

Hi @ar2rsawseen, I found quick solution for my trouble (while I was sleeping

different zone time)

self.apSlide = Sprite.new()
--[[
NOTE:
if "allowDrag" were true, so you can have
some troubles with drag and buttons if "spacing" is short.
of course if you want change position of self.slide
]]
self.slide = AceSlide.new({allowDrag = false})
self:addChild(self.apSlide)
self.apSlide:addChild(self.slide)
self.apSlide:setPosition(xFC, yFC)

where

xFC~=myXPosition
yFC~=myYPosition
-- global to local

and that was all
Thanks again for your time

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to add Acceleration to AceSlide and change stopping point?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to add Acceleration to AceSlide and change stopping point?

Comments