 It is the year 21. I buy everything online. Why not a car? Let's shop for a car online. Okay, vehicle search. Lamborghini. Apparently these websites don't sell Lamborghinis. Okay, let's just see what they do have. Search all vehicles. First one that comes up on the list. We'll click on. Oh, that's cool. You can spin the car around. I wonder if I could write a program like that. Oh, wait a minute. I did over a decade ago. I did a video on this back in 2010 using my Nokia N900 cell phone and Pi game. Okay, let's see if we can do this with Godot. Probably fairly simply. Probably with smoother animations than I did on the N900. And it's not that difficult. And this is going to be using a number of still frames. So basically an anime at Sprite. Let's go ahead, take one of those images from the car website and use it in our program. But of course, you can replace this with any animation that you render out with Blender or some other 3D software or images you take with a camera. Okay, first thing we do, open up Godot. Create a new project. It's going to be a 2D scene. We're going to change the type of this to be an animation. Animated Sprite 2D. Then we can rename it. We'll just call it car or whatever you would like to call it. Whatever object you're going to be spinning around. And now let's go back to the car website. We're going to open up our developers console. If you're using Brave browser, so if you're using Brave or a Chrome based browser, you can hit F12 or control shift I to open up your developers console. Your browser probably has developer console. The key combination might be different. Next thing we want to do is go to the networking tab and choose to filter by image. Then we're going to refresh the page and it should list all images loaded here. There's a number of them. So for this particular website, we're just going to type in MO to narrow it down. We're looking for one that says mosaic. There's two here. The same images. One's just slightly offset from the other. It doesn't really matter which one we grab. Now normally you can right click and say save image as for some reason the image gets corrupted when I do that here. So I'm going to hit right click and I'm going to say open image in new tab. And as you can see, it's a series of images of the actual car just on a little turntable. Now that we have this, we're going to right click and save image as and we're going to save it to our project. I'm just going to call it car.jpeg. Going back to Godot, you can see that has now been imported. So now with our sprite selected here, we're going to go ahead and click over here where it says frames empty, new sprite, and then we're going to click on that. Then under the default, we're going to choose this little grid here. Let me show you that again. Right here, this little grid. So we're adding frames from a sprite sheet because that's basically what this is. We're going to choose that JPEG. Open it. Now we need to crop it properly. There are four layers to this. So vertically. And we're just going to increase the horizontal until you see this line right here. It lines up with the edge of the picture. Boom. And it may vary from image to image, but that's what we have. We're going to then say select all. We're just going to click this until you see them all selected. In this particular case, there's 32 frames import. There we go. We now have this car sprite. And if I hit control S to save, we will save this scene. I'll hit F5 and select that scene as my default scene. Although in an actual project, you may have this as a scene that's going to be imported into a larger scene. And here we go. It's right there. It's off center. So let's go ahead, close that window. I'm going to right click and I'm going to say add a child node. And we're going to add in a camera 2D. We're going to select that camera 2D and say current. And that will center the current camera on this image. I'm going to hit F5 to run this again. And this is what we currently get. Doesn't do anything yet. It's just displaying the first frame of that animation. So now we need to start our coding. Go ahead and close that. I'm going to right click and say attach a script. You can name it whatever you want here. And here's our script. I am going to erase most of this. Now I will have a link in the description of this video to the source code so you don't have to type all this out. But we're going to go through this and I'm going to explain it bit by bit. So real quick, I'm just going to paste in some variables here. So we have drag which is enabled or is disabled by default. It says false. Then the drag value, the mouse position, the current mouse position and the current frame of our animation. Next thing we're going to do is we're going to add a function. This function is going to detect when any input is detected. Could be a keyboard. Could be a mouse. Could be a touchscreen. Joystick. We're going to go ahead and paste in the proper thing right there. So function underscore input and events. And then this is going to run. This is a built-in function of Godot. It's going to constantly check every loop. Is there an input from an input device? So whenever it detects an input, we're going to say, okay, what is the event? Is it a mouse input? If so, check what button it is. So the button index, if it's button left, we're then going to say, okay, is the event being pressed? If it's being pressed, we are going then to then enable drag. And we're going to get the current mouse position. If it's not being pressed, meaning it's the left button, but it's being released, we're then going to set drag enable to false. So that is all we have for input. I am doing this specifically for a mouse, but you can also easily program this to work with a touchscreen, keys on the keyboard, a game pad, or even the accelerometer on your phone if you're exporting this to a phone. So that's pretty self-explanatory there. And now we're going to have our main process function. So our main process function is going to loop over and over and over again. And let's see what it does. So we're processing. Again, this is a built-in function here. I am getting an error here on frame numbers. So let's see what I did wrong. I did miss a variable up here. We're going to say onReady, so it has to wait till the scene loads to make sure our sprite is loaded. And then we're going to create a variable called number of frames. And we're going to get from our sprite to get the frames of the current object, our sprite, and get the frame count of the default animation because you can have more than one animation. And this will just let us know how many frames are in the animation. That way we can loop it as you'll see in a moment. So again, processes running over and over again is going to check each time is drag enabled, meaning the mouse click is down. If that is true, we're going to set the current position to the current global mouse position. Then we're going to set the drag value to the mouse position minus current. So when we click, we're going to get the mouse position. But then as it loops, it's going to constantly check the current mouse position and subtract the mouse position on the X, so left and right from the previous reading. Now, if that drag value is less than zero, or greater than zero, we're going to add a frame to our animation. We're going to move forward a frame. If it's less than zero, we're going to move back a frame. If it is zero, we don't do anything because we don't want the frame changing. We're also going to check once we get that value, if that value, that current frame value is greater than the number of frames in the animation. Right now we have 32. So if it's greater than 32, we're going to set it to zero, basically looping back down to the first frame. If it's less than zero, then we're going to set the current frame to the final frame or the number of frames in our animation. Then we're going to say, set the frame for our current object, our current sprite to that frame. And then we're going to get the mouse position and set that to mouse position. So when we loop back around, we can do the math again on the new position. And that is our entire code. I'm going to hit F5 to run this. And here we go. I'm going to now just click and drag. If I'm not clicking, I can move my mouse around. But if I click and drag, I can go all the way this way. I can go all the way that way. And the animation loops around. And that is our entire code. Again, very simple. I'm just setting it for mouse input, but you can easily set this up for touchscreen, joystick, accelerometer, et cetera. So this is a cheap, easy way to do 3D effects. Again, I originally did something like this back on my Nokia N900, which is an old cell phone that I had. I got in 2009, and I did the video in 2010. And I didn't know how to program 3D stuff for it, or if it could even really handle that. I mean, this is a cell phone's way back in the day. So what I did was I rendered out, in those videos, I did more than one, where I rendered out a sphere that was a globe or a cube with images on it. But it was just a series of images that we calculated out the movement on, just like this. So again, I grabbed that from a Carvana website. Obviously going to be copyrights on that image. But you can take your own with a camera, although if you don't line the camera up right, it may look a little wonky as it's spinning. But very easily you can create a scene or an object in something like Blender and render out the frames. You don't need to render out a whole lot, just enough for that one loop. And now you have a basic little 3D, or 360 spinner. I hope you found this useful. I hope you found it fun. I hope you learned something. Again, the link in the description to the full source code. And as always, visit filmsbychris.com. That's Chris of the K. Also a link in the description. I hope that you have a great day. Be sure to like, share, subscribe, comment. All that good stuff. Have a great day.