4/17/22, 11:54 PM Assignment A7: Sprite Previewer https://utah.instructure.com/courses/760031/assignments/10023000 1/5 Assignment A7: Sprite Previewer Due Friday by 11:59pm Points 100 Submitting an external tool Available Apr 12 at 6am – Apr 26 at 11:59pm 15 days Goals The main goal of this assignment is to develop an application with a UI toolkit. Partners You may optionally choose to complete this assignment with a partner. When working with a partner, both of you must code. You should follow the pair programming protocol discussed in class: share screens, have one person type while the other person provides feedback, and change pair programming roles at reasonable intervals (e.g., every hour, for each programming session, etc.). A submission where one person is unable to meaningfully describe what is going on in the code is considered academic misconduct. When submitting on Gradescope, you will have the ability to indicate your partner. At the top of your file, add a comment with both partners listed as authors. Only one of the persons in the pair needs to submit. Working with a partner is optional. You may submit your assignment as usual if you did not work with a partner. I have added an A7 Partner Requests (https://piazza.com/class cid=l1v7sps7t4u24f&nid=ky9perfz30l6w6&token=V3eMoS7t0v1) discussion board where you can look for a partner. Please be thoughtful in discussing time availability, goals in the course, and programming comfort. In general, two partners with similar programming skills works better than one who is more proficient than the other. Assignment Overview Recalling from A5 and A6, a sprite is a small image used for a character in a game. Often a sprite is not just a single image, but instead a series of images that creates a small animated sequence. The goal of this assignment is to develop an application that displays a sequence of sprite images and includes controls to control the animation playback speed and to start and stop the playback. An example of what this application looks like is below: 4/17/22, 11:54 PM Assignment A7: Sprite Previewer https://utah.instructure.com/courses/760031/assignments/10023000 2/5 Assignment Requirements For this assignment, start with the code in the A7 folder. It includes the start of the project and a folder with example sprite images. Your task is to finish the SpritePreviewer class so that it does the following 1. Has a label displaying the current sprite image 2. Has a slider that controls the frames per second playing of the animation in a range from 1 to 60 frames per second (FPS) 1. Research how to set the minimum and maximum value of the slider 2. Research how to get some tick marks displayed on the side of the slider 3. Changing the slider does not make the animation start – the Start button does that. 3. Has a label that displays the text “Frames per second” 4. Has another label next to the previous one that displays the current FPS and updates when the slider changes. 5. Has a Start/Stop button. 1. When “Start” is displayed on the button and the button is pushed, the sprite should animate at the current FPS. The button text should change to “Stop.” 2. When “Stop” is displayed and the button is pushed, the sprite should stop animating and the button text should change to “Start”. 6. Has a menu with 2 options 4/17/22, 11:54 PM Assignment A7: Sprite Previewer https://utah.instructure.com/courses/760031/assignments/10023000 3/5 1. Pause. When the Pause menu item is selected, the animation should stop and the Start/Stop button should display “Start”. 2. Exit. When the Exit menu item is selected, the program should quit. The application should look like the example above. You will need to create layers of QFrame or QWidget objects with layouts for each, then add these individual parts together. Sketch out groupings of components and figure out what kind of layout is needed and where extra widgets are needed to group things together. Create a video showing the application in action. You can use a Zoom session sharing the application window and recording it, or you can use another recording application of your choosing. The recording must show the following: 1. Pressing Start and seeing the sprite animate and the button text update 2. Changing the slider to see the playback speed change and the FPS label update 3. Pressing Stop and seeing the animation stop 4. Pressing Start and then using the File pause option to see the animation stop and the button text update 5. Pressing Start after the File pause to see the animation resume 2. You are encouraged but not required to find your own sprite images. The program expects them to all be in a folder and named sprite_0.png, sprite_1.png, etc. If there are more than 10 images, the files should be of the form sprite_00.png, sprite_01.png, etc. If you want to make your own sprites, the Piskel online application (https://www.piskelapp.com/) can output sprites in this form. Assignment Discussion In the lectures and labs, we have covered using labels, sliders, buttons, grouping things with layouts, and making a menu. Using the signal-slot connect approach discussed in lectures and labs, we made these UI components responsive to particular events, like button pushes and moving the slider. Carefully review these examples. Then, think about how to build up the application and test it as you go. One approach is to build up most of the UI, then add connections and slots and test it as you add more features. Another approach might be to get an image showing and then add a slider and see if you can animate it, then add more UI components and actions, testing as you go. Timer Delay and FPS A core part of the program is that the sprite image updates using a QTimer, as demonstrated in the flipbook example from class. You will need some kind of counter that tracks which image is being shown on the label and then updates when the timer signal repeats. The slider controls the playback FPS. The QTimer wants a delay in milliseconds. How can we relate these two Essentially, as the FPS gets bigger, the delay gets smaller. For example, a FPS of 1 frame per second means a delay of 1 second (or 1000 ms). A FPS of 50 fps means a 4/17/22, 11:54 PM Assignment A7: Sprite Previewer https://utah.instructure.com/courses/760031/assignments/10023000 4/5 This tool needs to be loaded in a new browser window delay of 20ms as fifty 20ms pauses adds up to 1000 ms (or 1 second). So a 20ms delay would give us 50 updates in a second. This can be generalized to say that the delay can be calculated from the fps with the following formula: delay_in_ms = int(1000/fps) Try a few values for fps to confirm that this equation is reasonble (1 fps yields 1000ms delay, 10fps yields a 100ms delay, etc.). You will need to do this calculation in a slot connected to the slider to take the fps value sent to the slot and convert it into a delay for the timer to use. UI Instance Variables When creating the UI, some things will need to be instance variables (with self.) and some can just be created locally and added to the layout and widgets. The basic rule of thumb is that if a UI component (e.g., a slider or button) is used in a slot, then it needs to be an instance variable. If it is just setup and added to a layout, it can be a local variable. You may find it hard to anticipate which way is correct. Try out different ideas as you go! It is fine to update your code as you gain more understanding of the program. Submitting Submit your code file, the sprite folder, and the video file to Gradescope. Add your partner’s name to Gradescope or to your Python file if you have a partner. Load Assignment A7: Sprite Previewer in a new window 4/17/22, 11:54 PM Assignment A7: Sprite Previewer https://utah.instructure.com/courses/760031/assignments/10023000 5/5
