 Hey everybody, this is Brian and welcome to the 147th cute tutorial with C++ and Gooby programming. Actually, this is a QML. And if you're looking at my screen, you're wondering, what is that? That's not cute. This is a video game called Dota 2. Some of you are probably like cheering, yay Dota. This is why I haven't been posting a tutorial. I've been really playing a lot of Dota, probably more than I should. Also I picked up Tom Clancy's The Division, which is just an amazing game, oh my gosh. It gets a little dull after a while. Which is why I go back to Dota, like constantly. I just kind of flip-flop between The Division and Dota. And once in a while I write code. So, anyways, what we're going to be working on today, and we're going to go to the QML book on qmlbook.github.io, we're going to go chapters and five fluid elements. And I'm not going to copy their tutorials verbatim because I really want you to go out there and read their book and eventually buy their book when it comes out, not affiliated with them in any way. But they've made massive progress on this book and it's an amazing read thus far. But we're going to start doing animations because, well, that's where QML really shines. So I would suggest you go out and read chapter five of their book and we are going to be progressing on animations and if you kind of scroll down you see there's a ton of different types of animation types. There's like a property animation, number animation, color, rotation, pause, sequential, parallel, anchor, blah, blah, blah, blah, blah, it goes on and on and on. There is a lot of ways to animate in QML. What we're going to focus on today is the rotation animation. And we're going to do that because, well, our very first set of tutorials on this, we were rotating a rectangle. So we know how rotation works. So we're going to just jump on in here. We're going to go file, new file or project. And I have to apologize if I clear my throat. My throat's been like really, it's Michigan and it's spring. And when I say spring, I mean it's been a combination of snow. I wake up to snow and freezing rain and then it's 60, 70 degrees by four o'clock in the afternoon. So it goes from like literally 20 degrees to 70 degrees in the space of a day. And it just drives me crazy. And it just wrecks my sinuses, my allergies, whatever. It just destroys them. So all right. So to do this, we are going to jump into Dropbox here because why not. And animation one, I'm about to paste my files in here. And I've just got a couple, I've got a background and a couple of smiley faces because I like, you know, smiley faces. They make me smile. And we're going to add our resources here. First thing we're going to do is add prefix. We call this files. And then in files, we are going to add existing. Make sure we're in the right path. Yep. Add those. And let's give this a good build just to verify it got in there. All right. Somebody once asked me, what is all this gobbly cook in the compile output? Well, it's exactly that. It's compile output. So some people have skipped the, I know, oh my gosh, don't do that. Don't skip the tutorials. But some people have skipped directly into the QML portion rather than doing the 140 plus C++ tutorials. But so if you're wondering what this is, this is the compile. So if you compile your program and you have a bobo, it'll show up here in red. And you'll have to figure out what the problem is. All right. So we're going to continue on here. We're going to get rid of this main form. And we're going to get rid of that main form. Delete that bad boy. Make sure we're calling main. Yes, we are. Some of the changes in the newest version of Qt still have me kind of mystified, I guess, would be a good way to put it. But we'll get there. We're going to do width, 500 height. I did have another comment of why do you do within height to 500, just because I like to. That's really why. We're going to do a rectangle. We're going to call this body. And we're going to say the width equal root dot width height equal root dot height anchors center in. And we're going to say root. So really at this point, all we're doing is we're just putting a giant transparent rectangle that covers the whole scene here. So this whole thing is just a rectangle. We do that because the window or the root doesn't have all the properties that we really want. So we're going to have a hard time binding into that. So we're going to put everything inside of a rectangle, call the body, if you will. And now we're going to say image. Maybe. There we go. I'm going to say ID. We'll call this background and source. And this is where we're going to hook in and get the actual file from our resource or as a QRC for Qt resource content. Whack, whack. And then we've got to give it a path, which is files slash images slash background. That was that a JPEG? Yeah, that is a JPEG. See, that's the bad thing about video games is you can never really get video games out of your brain. As I'm sitting here writing this, I'm like, you know, I think when I play Dota tonight, I'm either going to play Phantom Assassin or Spirit Breaker just because I want to be just a real jerk. I cannot type. Very sorry about that. There we go. Anchors dot center in and root. Actually, we want to center this in body, sorry. So we're just going to take this image and we're going to load it. We're going to center it in our rectangle. We're going to just load that up, and that's what it looks like. I want to actually scale this down a little bit here. So we're going to play around with the image. Whoopsie. So what we're going to do here is we're going to say Fill Mode, Image, Preserve Aspect Fit. That way it'll scale the way we expect it to. And I'm going to just because I've already done this, I'm going to cheat a little, and I already know the size. I want to give it. So there's our real trippy background here. And if we resize this window, you can see it goes like that. So what we're going to do here is we're going to actually animate this and make this whole thing rotate. And it's going to be really trippy looking when we get it done. Why? Because, well, why not? All right, so we're going to say, I want to back up here. In our root, we're going to add a property. And I don't think we've done this before. Property is, well, a variable. But we give it an actual type, which we haven't had to do previously. And we give it a name, running. And we give it the initial value, which is false. So let's go over that again real quick, because that may have been confusing. For some of you that have skipped, blast for me, I know. Don't skip the tutorials. Start at 1 and go all the way up. But anyways, if you have skipped and you come directly to the QML tutorials, a variable is simply something that'll change. So it's called a property in QML, because behind the scenes, there's, I'm guessing, inline compilation going on, where you have a getter and a setter. So you have a property that can be set or getten. If that sounds confusing, it's because you've skipped the tutorials, a getter and a setter. You can get the value or set the value. That's what a property does. So behind the scenes, there's probably two functions that are compiled inline. I don't know that for sure. But I'm going to take a wild guess. So bool, obviously it's true or false, and we're setting it to false initially. So this is available in the scope within root. Now, what we're going to do here is we are going to add in a rotation animation. And we're going to play around with this a little bit. So there's our rotation animation. And we're going to say on rotation. I want to kind of explain something here. See the rotation property? Notice how I said property because it is a property. You can either get or set the property. Now, if we say rotation, let's say rotation 35, we would rotate this. But what we want to do is we want to actually animate that. So we're saying rotation animation on the property, rotation. Wouldn't make sense to do a rotation animation on x or rotation animation on left. We want to do this on the rotation property of the image object. So what we're going to do now is we're going to say from, we have a starting point, 0 to, I'm going to say 360, because you can only go 360 degrees. We're going to say duration. And let's say 3,000. And we're going to say running equal root dot running. And we're going to bind our running property of the rotation animation to the root running property, which we created. So if you follow along with all the tutorials, there's a signal in the slot going on in the background. So we're connecting that running to this running. Now what we're going to do is we're going to make a mouse area here, which we've done before. And we're going to say anchors.fill. And we want to basically fill on background. And we're going to say onClicked, we want to set the property root. Wow, that was a misspell, root dot running equal true. So let's kind of examine this thing a little bit here. We've got the property that we have created, our getter and our setter. We have a rectangle here called body. Inside our body, we have an image called background. And inside that, we have a rotation animation, which is going to change the rotation property of the image itself. We're going to rotate from 0 to 360 degrees over, you guessed it, 3,000 milliseconds, or 3 seconds. The running property is bound to the root running, which we are setting on the mouse area click. So let's just enough talk. Let's run this thing and see what happens here. Oh, no. What have we done? Invalid attached object assignment. What? Oh, yeah. That should be lowercase, not upper. Because the property, let's explain what happened here. I had rotation, but it's actually rotation, lowercase. So let's give this a build. There we go. Now suddenly it compiles. One of those things you've got to watch out for. Now when we click, suddenly it's animated. But it's going backwards. I don't like it that direction. I want it to go the other way. And also, you notice how it stopped. I want it to just go and go and go forever and ever because I want it to. I said so. Why not? Let's give that a negative. So we're going to change the direction. And we're going to say loops. And we want to do animation.infinite. Meaning we just want to loop this forever and ever. We could say 3, 5, 10. But we want to just loop and loop and loop. So when we run this now, click it. And it's going to go in the direction we want. And it's going to just loop infinitely. That's kind of trippy. Now if we resize this window, you can see what's going on here, our image. I don't know if I can fit that into the video area. You can see our image is not a big square. It's like a rectangle. And it's just spinning around and around. And that's kind of making me a little dizzy. So we're going to kill that bad boy. And now I kind of wanted to just play around with this a little bit. And we're going to add another image in here. And we're not going to animate this image. I just want to kind of show you some of the kind of neat things that you can do. ID Smile. And we're going to say Source. And let's take Smile1.png. And we're going to say Fill Mode Image. Whoa, I screwed that up. There we go. No, we don't. Ignore my typing. Again. There we go. Jeez. Maybe you guys shouldn't be watching these videos. I'm not teaching you very much. All right, Image Preserve Aspect Fit. See, I've got my gaming keyboard set. And I'm going to blame that rather than just my own stupidity. And we're going to say Anchors. And we're going to say Center in Background. Let's give this a good build and run. It's not showing. QML Image Cannot Open, File, Image of Smile1. OK, why not? QRC? Probably because I misspelled the path files. There we go. So it's a pretty good idea to start checking out these error messages if you're getting them. Because I've been just kind of flooded with, hey, it compiles, but nothing happens. And that's really what you've got to look for. It won't be in the compilation output, but it'll be in the application output. Just because it compiles doesn't mean it's going to run the way expected. And there is our, I don't know if you can see it, it's kind of a watermarked smiley face. And you can animate underneath it. And because it's transparent, it comes through. It's actually kind of neat. So that's kind of some of the cool things you can do with QML right out of the box. That smiley face is kind of wigging me out a little bit. So we're going to change it to the other one before I upload this bad boy. Same thing. And we can play around with some of the properties on this thing. We're going to say width. We're going to say 150, opacity. I'll say 0.5. We'll give it a 50% opacity here. You can see there it is. When we click it, animate. So pretty simple, pretty neat. But some of the core concepts I really wanted you to understand about animation before we start deep diving into some of these is that you can animate on a property. We're doing the rotation animation on the rotation property, meaning that we're going to change that value over time. And we can play around with this a little bit, like if we change that to 300 instead of 3,000, recompile and run. Notice how it goes much, much faster, because that is the duration. That's actually really annoying. So we're going to set that back to 3,000. That's actually, let's set it to 6 and make it go much slower, just so that you can see what the duration does. So in short, the different properties inside the animation will determine, well, shocker how the animation is animated. So you have an animation type, which usually affects a property. And if we go back to the very beginning of this conversation, the QML book where you, well, it's right in front of me, Derp, you've got different things. So a property animation. You can animate a property, be it a name, a number, whatever. But they've kind of made some helper classes here, like a number animation. You can set a number animation on the X position and make it actually move across the screen. So you can see that in their example here. So you've got a number animation on X. Rotation animation on rotation. So what this does is when it runs, it'll actually move it and rotate it across the screen. You should probably grab their assets and grab this code and compile and run it, because it's really well done. But you also have other things like color animation, and then you can actually pause. And you can do animation sequentially or in parallel. And you can change anchor properties and things like that. There's a lot you can do. And I know some of you are going, vector 3D animation is sweet. Yes, you can actually do vector 3D graphics in this. So that's kind of a lot of information. I'd really encourage you to go out, read this chapter, because it's really well done. I can't pitch their book enough. It's helped me quite a bit. And just play around with this example, which I'll post up on my website, voidromes.com. If you go out to voidromes.com, and you just go to tutorials, and you get a cute. And it'll be way in the back, way, way, way, way, way, way on page 15. And if you're so inclined, there are, I forget how many of us, tons of us out in the voidromes Facebook group, hundreds of us, all different languages, all different technologies, we just help each other out. So go ahead and join up. We usually get members in within 15, 20 minutes of requesting. We've got a couple admins beside myself. I was going to say something very profound, but it has escaped my mind, which may be even more profound. I think I need to go play some video games. So if you're playing Dota or The Division, I will see you in game.