top of page

The horrors of animating the contents of tabs

  • Oliver Stanton
  • Nov 1, 2021
  • 2 min read

Until now, I've just been switching between tabs using a Widget Switcher. However I want to add animations to them to make it look more visually pleasing and smoother. Doing this is very hard however, as the middle tabs need 4 different states:

  1. Clicked from the left

  2. Clicked from the right

  3. Unselected from the left

  4. Unselected from the right

What I mean by "from the left" and "from the right" is other tabs on the left right that the user clicks on. Clicked from the left and right are actually quite simple, just make a "LastSelected" variable, and set it to the "SelectedTab" variable when that tab is clicked, but do it after any checks for that variable, otherwise it will check for the variable and it will equal the tab you're animating, making it do nothing. Check if the LastSelected variable is < or > the tab you're animating, and play the animation depending on the outcome. So < for example would make the contents move in from the left, etc. Checking the Unselected from left and right is the hard part however, as how do you know which tab has been clicked from within the clicked event of the middle tab? This means you need to have those animations in the clicked events of the other buttons, which adds complexity and general bloating which is what I'm trying desperately to avoid.


My first tries of this was with normal animations where I created a new animation for each state and just played them depending on the conditions met. This is quite convoluted however, and made me want to do the animating in the Blueprints instead. My ideal answer to this would be to do it procedurally, but I don't know how to do that, so instead I'm doing the states as before, but in Blueprints in the Repeater event.

This works, but once again, how do you tell which button has been clicked that isn't the middle tab?


I also tried to line all the tabs in a horizontal box in a separate widget and animate the position of that in Blueprints depending on the tab pressed. Now this would work great if it wasn't for a big flaw, the sizing of each contents widget. Since they're all in a horizontal box, I can only resize the X and Y values of the box itself, and not the individual screens, making it extremely hard to know which values to use. I decided to get the viewport size, use the Y value directly, and multiply the X by 4 (there are 4 screens), which would hopefully lay them out in 4 sections of the same screen size as is currently being displayed in the game. This didn't work however. At first, since I was using Construct, it equalled 0 on the X and Y because for some reason, the first frame is 0, 0. After some playing around though, I added a Delay of 0.2 seconds and the sizes appeared. I hooked them up and the X value seemed to be too small, which made me change the multiplier top 4.6, which worked, but I couldn't be sure it'd work on other resolutions (I was doing this in college with 4:3 monitors), so decided it wasn't worth it.

Comments


bottom of page