Rugby League 26

Outside of my XAML-based comfort zone, the text in the background ties into the UI code and grabs the data from the currently selected button. This looked pretty dodgy until I added short fade in and out animations - this involved storing the old value and replacing it with the new one when the fade out animation ended, then triggering the fade in - it sounds really simple now, but I was having a hard time wrapping my head around it and I'm super grateful for my programmer friends for being patient with me while I learned. Little wins like this and the generous support I recieve along the way keep me motivated to develop my skills and keep making these projects better and better.

There are quite a few different states for the background within the game, and right from the start I knew I wanted these to transition between each other nicely. This proved a bit of a challenge when I remembered that not everyone plays on a 16:9 screen... So I switched out one of my 16:9 monitors to the only ultrawide monitor laying around the studio and began my painstaking journey of using ratio values to animate, rather than absolute pixel values. This isn't natively supported in XAML, so I used an invisible dummy rectangle set to 4 pixels high and a trusty value converter to convert that 4 pixels to 40% on a grid row to achieve the effect I wanted. 

Fun fact: There's actually a lot of invisible rectangles in the background - it's a lot more efficient to animate a single element's fill colour and bind every other element's fill colour to that element. It makes that nice fade animation between colours in the background possible, and is a fun little creative solution that I find myself using a lot when working with a lot of similar elements. Nothing is ever straightforward, right?

Speaking of smooth transitions between colours in the background with the help of mysterious invisible rectangles, here's a look at the changing of the neons when the player changes their team:

And while you're here, take a look at all the transitions between every standard background state in the game in the Microsoft Blend Designer environment. Adding this background taught me a lot about tying some of the XAML stuff into the game itself, as I had to change the visual states based on the game states, which was something that I hadn't really done before. It worked out pretty well, though!