OTClient Can I add CSS animations to buttons?

[sachalsiddique]

Hi,
I'm new to working with all things OTC and TFS, and while I can pick up how most things work when they're strictly C++ or Lua, I don't entirely understand what's going on when I'm working with the OTUI files. As it stands, I'm trying to create something at someone's request, which would include having a clickable button in a dialog box that is animated to move around (right now I'm using the quest log as a sample dialog box to test this in).

I figured the obvious thing would be using CSS animations, but while including it in my OTUI doesn't seem to cause any errors, neither does the button actually move:

QuestLogWindow < MainWindow
  id: questLogWindow
  !text: tr('Quest Log')
  size: 500 400
  @onEscape: self:destroy()

  Button
    id: jumpButton
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    !text: tr('Jump')
    width: 90
    animation: sliding 5s linear 0s infinite reverse
    animation-play-state: running
    @onClick: self:destroy()

I may be missing something really obvious as I'm brand new to this, but I was under the impression that OTUI supports CSS styling and then Lua for code. Is there anything in particular that would be preventing this animation from working?

I also want the button to move to different locations in the window on the Y-axis whenever it's clicked. I figured a simple onClick function would do this, but it seems like contrary to what I expected, using self:setY doesn't actually move the button, and then in addition the Y's value only changes on the first click, after which it remains fixed (or perhaps resets, the way I tested it it's possible that it was reverting then updating in a circle). Any ideas how I can get something like that set up? Any examples of something like that I can reference?

And of course, is there existing stuff in OTClient's current implementation that may be better suited for achieving the results than what I'm using above? Some function I've missed, or perhaps something outside the OTUI's scope entirely?

Any guidance is appreciated. I'm using TFS 1.4 and the latest version of GitHub - edubart/otclient: An alternative tibia client for otserv written in C++11 and Lua, made with a modular system that uses lua scripts for ingame interface and functionality, making otclient flexible and easy to customize (https://github.com/edubart/otclient), and I've configured this to use the dat and spr from Tibia 10.98 to run it. Please let me know if additional info is needed or if there's any guidelines I've missed in making this post, as well.

 

[Rondel]

otui doesnt support css styling. it has its own functions, which you can find in client sources. i dont think there are any ready for use animatons. if you want the button to slide horizontally / vertically within x seconds then you will have to code it yourself in lua.

 

[oen432]

No. If you want to animate widgets, you have to write code for it yourself. OTUI is nothing like CSS. If you look into src/framework/ui, you can check what styles can be applied, what functions UIWidget has etc.