Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
How to add Acceleration to AceSlide and change stopping point? — Gideros Forum

How to add Acceleration to AceSlide and change stopping point?

BlueByLiquidBlueByLiquid Member
edited February 2013 in General questions
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!

Comments

  • 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.
  • 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?
  • 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.
  • @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
  • bowerandybowerandy Guru
    edited April 2013 Accepted Answer
    @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

    Likes: BlueByLiquid

    +1 -1 (+1 / -0 )Share on Facebook
  • 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).
  • bowerandybowerandy Guru
    edited 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
  • @bowerandy that looks like a perfect tool for this job :) And nice trick with alpha for emulating clipping :)
  • 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.
  • bowerandy,

    just noticed that momentum doesn't work when swiping up and only works when swiping down.
  • 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.
  • 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.
  • bowerandybowerandy Guru
    edited 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
  • HubertRonaldHubertRonald Member
    edited 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

  • HubertRonaldHubertRonald Member
    edited June 2014
    Hi @ar2rsawseen, I found quick solution for my trouble (while I was sleeping :D 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 :)

    Likes: ar2rsawseen

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.