Android Question Animated text for a leaderboard

[davemorris]

Hi, Guys
I am working on a small project for a leaderboard to show scores and positions of players in a game.

i.e. simple example with 5 players

Position Name Score
1 Tom 1000
2 Fred 900
3 Sam 800
4 John 700
5 Ann 600

I currently display the scores and simply redraw every few seconds as player scores changes. However, if players positions change I have to to redraw whole table.

I would like to introduce some type of animation so that say if Sam's score increases above Fred's then their position's change. (i.e Sam's moves up and Fred moves down) and we see the lines actually moving as they swap over.

i.e.

Position Name Score
1 Tom 1000
2 Sam 950 <---- Moved up
3 Fred 800 < ---- Moved down
4 John 700
5 Ann 600


I have seen Commercial leaderboards do this, and it looks great. It is also easier on the eyes than redraw the whole table or just the two lines in question.

I could animate myself by changing the y value for each associated text using timers or suchlike to move the text - But wonder if there is ananimation available, that I have missed, which would make life easier.

Thanks in advance, I would appreciate any input.

Dave

 

[Brian Dean]

I have done something very much like this but more complicated. Unfortunately I don't have time now to make a simple demo but I will try and describe it - maybe I will be able to do a demo later if you still need one.

First of all, you don't need to use timers. What you need to do is put all of the information for each player on a panel and put the panels in a List. Then as the ranking for each player changes you calculate new panel.Top values for each of the panels and use something like this -

  For Each pnl As Panel In panelList                    ' Check each panel position
    ' Check if panel needs to be moved
    If it does calculate its new Top value
      pnl.SetLayoutAnimated(1000, pnl.Left, newTop, pnl.Width, pnl.Height)
    End If
  Next

All the panels that need to move set off on their journeys and look after themselves - no problem.

 

[davemorris]

Hi Brain

Thanks for the input - I will give it a try. If it works it should look great!

Thanks
Dave

 

[Brian Dean]

Okay - here is a complete demo :

Sub Process_Globals
    Private xui As XUI
End Sub

Sub Globals
  
    Dim pnlBoard As Panel                    ' Panel that hosts the score labels
    Dim labels As List                       ' List of labels showing scores
  
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    labels.Initialize                        ' Build labels ito a list
    For Each lbl As Label In pnlBoard.GetAllViewsRecursive
        labels.Add(lbl)
    Next
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub label_Click
    Dim target As Label = Sender             ' The new leader
    Dim pitch As Int = target.Height         ' Offset between labels
    Dim oldTop As Int = target.top           ' Old offset of new leader
    Dim newtop As Int                        ' New top for each label
    For Each lbl As Label In labels          ' Update all changing label positions
        newtop = lbl.Top                     ' Actually "old top" at this point
        If (lbl.Top < oldTop) Then newtop = lbl.Top + pitch
        If (lbl.Top = oldTop) Then
            newtop = 0                        ' This is the new leader
            lbl.BringToFront                   ' Improves visual appeal
        End If
        If (lbl.Top <> newtop) Then lbl.SetLayoutAnimated(1000, lbl.Left, newtop, lbl.Width, lbl.Height)
    Next
End Sub

 

[davemorris]

Hi Brian
Thanks for the Demo code - It works great - Just a few changes for my leader board (I will post my solution when its done).

Thanks for the input

 

[TILogistic]

?

 

[byz]

?

View attachment 164754

cool！

 

[AnandGupta]

cool！

Yes CoolTimeline

Most Popular Programming Languages 1965 - 2019 | B4X Programming Forum

Most Popular Programming Languages 1965 - 2019

I found this link in another forum. The presentation is so cool that I am wondering if we make something similar in B4X, i.e. display big time-line data in such a cool and smooth manner ! And yes, hope B4X goes to top in 2020 ! Regards, Anand

www.b4x.com

 

[davemorris]

?

View attachment 164754

Most Popular Programming Languages 1965 - 2019

I found this link in another forum. The presentation is so cool that I am wondering if we make something similar in B4X, i.e. display big time-line data in such a cool and smooth manner ! And yes, hope B4X goes to top in 2020 ! Regards, Anand

www.b4x.com

Thanks for the input - looks great


Regards
Dave