Then, the past couple of days I worked on refining the Puzzler. I mainly added more feedback mechanisms for the student... basically making it more "video game like".... I added sound and some animations... These are best seen by USING the program, but here are some photos to give you an idea:
First I worked on something I am going to call a SKIP. This is the ability of the student to SKIP a question if they feel it is too difficult for them. How do "skips" work? The student is given ONE skip at the start of the Puzzler. They then earn ONE MORE skip after completing each level. If a student never uses their skips they will have FOUR skips available to them by the time they get to level four. When the student USES a skip (by pressing the "fast forward" button) they also lose a nominal amount of points. In the image above the student has ONE SKIP LEFT, as indicated by the red "1" in the circle. This is what the circle looks like when the student hovers the mouse pointer over the fast forward button. (Adding the red number to track the number of skips took some time.)
Then I added some animation/visual effects to let the student know when they lose and gain points. When they lose points a dark cloud quickly appears at the location of their mouse pointer, with a number indicating how many points the just lost.
In the picture above the student just lost 1 point, and the screen has reset.
I also added a visual for when the student completes a question and earns points:
Here the student has just earned 25 points. The animations are a bit different from each other in that the ADD points gets larger and brighter, while the SUBTRACT points look more like a chalk dust cloud and get dimmer. In general it takes 100 points to clear one level of the Puzzler.
All three of these effects were fairly complicated additions to my program, requiring multiple interactions from different areas of the program. (It turns out that ENTERFRAME HANDLERS are needed for any sort of animation... plus some sort of calculations to determine the change of various properties such as alpha, and scale.)
To give you an idea, here is the updateCloud function that is initiated with an enter frame handler (every time the game updates its frame, at about 30 fps, it will trigger this function). Here you can see that the explodeCloud alpha is DECREASED and then the "flicker" function is called. (see next image). For the circleCloud (which is the blue ring that occurs when the student scores points) the alpha is INCREASED by the equation shown. I wanted the rate of increase to DECREASE over time so that it would quickly get bright and then stay bright for a while, before disappearing. (The formula I came up with was just a combination of trial-and-error, algebra, and logic.)
Here is the "flicker" function that is within the explodeCloud object. Once the alpha value (which determines how dim the cloud is) is changed, the flicker function will set the scale values to cause the cloud to get larger as it gets dimmer. Then I use the alpha value to determine WHICH of the three cloud images (explode1, 2, or 3) are displayed so that it appears to change shape as it gets dimmer.
I also spent much time implementing SOUND EFFECTS and LOOPING BACKGROUND SOUND. As a student progresses through the levels there will be a different looping background sound. There are various sounds to indicate success and loss of points as well.
Time: 8 hours
No comments:
Post a Comment