More Visual Effects

Crown Jewel

The one effect that I’ve neglected which I envisioned from the beginning was the actual filling animation of an individual wire in a cell.  I should be able to do this now, since I now know how to use a Rectangle object to determine which portion of the sprite to draw.  Filling just straight wires is not a problem, but it becomes more complex if a wire has bends or has intersections.  This effect should be able to be achieved  by first filling a small area from the origin side, then expanding outward in all three directions after the fill has moved passed the halfway point.  This should be similar to how I expand the overlay on the piece cooldown, except it will expand in three directions after it reaches the halfway point.

I did go back and add the “coming from” variable to determine the flow direction.  Also, I had to use the draw method which takes two Rectangle parameters, the source Rectangle and the destination Rectangle.  Using only one Rectangle will make the sprite stretch, but with two Rectangles I was able to achieve the clipping effect.  This clipping effect is what I needed to display the gradually filling wire in the cell.  Using the default tile was a good way to test the clipping, since it fills the entire cell.  This way I was able to determine exactly which regions are being clipped.  After I got it working correctly, I replaced it with the real wire image.  I’ll admit, I did hardcode the wire offset constant value and the halfway point constant.  Technically, those values probably could have been derived from the cell size, but that would have made things way too complicated, with nothing to show for it.  Additionally, I removed the dark yellow color of the filling wire, since it now has the visual animation of it filling.  The wires now truly look like they are continually filling, but unfortunately I can’t capture that in a screenshot, so this development image and these handwritten notes (click to enlarge) will have to do for now.


Scrolling Background

Looked at some other puzzle games, and I noticed that most had scrolling for animated backgrounds.  I thought this would be distracting at first, but I guess if the scrolling is slow enough it isn’t so bad.  Plus, it makes the screen seem more “alive”.

However when I implemented this, the background jumped from the game level screen to the game win screen, since the game win screen didn’t have the scroll offset value.  I made a few methods to allow the background scroll offset to be passed to the game win screen, and then back to the game level screen.  I didn’t have the offset value changing in the update method in game win screen, which made the scrolling stop on the game win screen.  I thought that this was okay, because there is already a lot going on with the rank values displaying.  The offset is passed back to the game level screen, which is a new instance of the object.  That is another issue that I may need to address later, if memory or performance becomes a factor.  When the game transitions from the game win screen back to the game level screen, it picks up at the same scroll value, so there doesn’t appear to be any jumping in the background scroll animation.

Overall, this gives a feeling of continuity between all of the stages in a level.  Then there is a visible shift (scrolling in the opposite direction) once the user moves on to the next level (completes stage N-10).

Simple Change Casues Larger Problem

 Pause Problem

Added a pause screen to the game, which I thought was going to be a simple change.  I created a new class that extended the Screen class, implemented the draw and confirm button methods, so that it just returns back to the game when the confirm button is pressed.  However, when the level ends it uses the time that the level was finished minus the time that the level was started to get the value for the time rank category.  With the pause screen implemented, the time calculation for rank does not exclude the time while the game was paused.  Therefore, I will have to come up with some method of tracking the time when the game was paused, and subtracting that off the game time.  Alternatively, I could re-write all the time based code and just keep a variable that tracks the number of updates in the game level screen since the level was started (since the updates on the level screen won’t be called while the pause screen is active).  I think it is too late for that, plus it depends that each update is really 1/60th of a second which may not be the case, so I’ll just have to keep track of the amount of time that the game was paused, and pass that value to the game level screen class after the pause is complete so it can be subtracted off the total time.  What a pain.

I also had to create a new variable in the main update loop to track the previous screen, because coming from every other state (title screen, level select, game win, game over), going to the GAMELOOP state just required the game level screen to be loaded and set to active.  However, I do not want the level to be loaded if the user is just continuing from a pause.

I created a new method in the PauseScreen class which returns the total time (in milliseconds) spent on the pause screen.  This value is then passed to the addPauseTime method that I created in the GameLevelScreen.  One positive thing from doing this is that I found that the total time was being derived in multiple locations in the GameLevelScreen class.  Therefore, I removed that extra code and then used my getTime method in its place.  I just had to subtract off the pause time, which is now stored in an instance variable.

Added two options “Resume” and “Quit” to the pause screen.  Resume goes back to the level screen and quit goes back to the main menu.  This may be a little misleading, if the player expects quit to completely close the game.  I may have to think about rewording that later.  I was able to reuse much of the display and logic code from my delete records screen.  Also, I was finally able to remove the Back button control from the level select screen, since the player can now exit to the title screen from the pause menu.

Added Effects

Made minor tweaks to the delete records subscreen, to correctly place the selector image.

Also updated the drawPieceSelection method in the GameLevelScreen to give more spacing between the selectable pieces.  Created a new background image for the selectable pieces, using another portion of one of my computer card photos.  By default, the background image uses green as the color parameter, but if it is the selected piece, then it uses yellow and is vertically offset by 8 pixels.  This gives the player a color based and location based change to signify the currently selected piece.

Other Updates

Removed the ability to select Quit on the main menu by pressing the Back button, and changed it to the Cancel button.  Now, the only function that the Back button serves is to delete the records.  I think having this rarely used button only assigned to a critical function is good.  This way, the user won’t get confused between the roles of the Back button and the Cancel button.  This also re-enforces the concept that the Cancel button (and only that button) backs out of a menu.

Added spoon sound effect when moving between levels on the level select screen.  Added the plop sound effect when the user select a level on the level select screen.

I tried putting the star graphic for the star rank in multiple places on the game win screen.  First I placed it at the bottom of the ranks, but it looked like it could have been just for the time rank.  Then I put it under the “Complete” text, but it looked odd there as well.  It also didn’t look very good to the right of the “Complete” text.  Since I didn’t like how it looked in any of those places, I decided to put two stars on the screen which circle around the text in a rectangular pattern.  It also gives more liveliness to a pretty much “dead” screen.

The Game Over screen has also be updated to use the improved graphics, basically by copying most of the code from the pause screen.  It’s easy to forget about updating the Game Over screen, since I actually rarely ever see it.

Found that I could use the Rectangle object in place of the Vector2 object to place a sprite on the  screen as well as size it.  This is perfect for my cooldown overlay, which makes the cooldown overlay size proportional to the cooldown duration left.  That means that overlay shrinks (from bottom to top) as the cooldown period continues.  I’m not sure if the Rectangle scales or crops the sprite, since I’m just using a white block with a black transparent color as the overlay.  This may be sometime I look into if I try to get the animated flow working.

Added 10 more levels to the game, bringing the current total to 60 levels.

Week 6 update video.

Face Lift

Updating Graphics

Made two arrow sprites for the level select screen to replace the “V” and “^” character strings that I had before.  A new arrow delay value was added to the LevelSelectScreen class, which allows me to move the arrows up and down slightly to draw attention to the arrows.  At first the arrows were moving too quickly, because I moved them one pixel for each update.  Therefore, I set the max counter value to 60, and then moved the arrow by the counter value / 10 (one pixel for each ten updates).  Created another image for the highlighted row, to get rid of the default tile sprite that I had.

Created a static method to draw shadowed text.  I did a quick search on the web to see if there was an API call or parameter that could be used to draw shadowed or outlined text, but all the solutions that I found were custom written ones.  Therefore, I just created a static method to draw the raised text, which takes the text string, color, position, and font as parameters.  I didn’t have a good place to put this, so I added it to the main game game class for now.   All of the fonts on the level select screen, game win screen, and game level screen were updated to use the new raised font method that I wrote.  Plus, it makes everything stand out much better.


The headers on the level select screen need to be tweaked slightly, so that the header text centers over the rank values.  I will need to see if there is a method to get the width of the text for a specified font.

The layout of the game win screen was also reworked to better place the values.  One issue I noticed was that the “NEW BEST” text was next to the category (piece, lum, time) value.  This may lead players to believe that it is a new best value instead of a new best rank.  The values are not recorded in the game, and only the player ranks are stored.  Therefore, the “NEW BEST” text was moved lower next to the rank value.  The game win screen still felt plain, so I added a variable and added logic to make the “NEW BEST” text blink from white to light green, which gives it a more arcade type feel.

Created a static method in the LevelDefintion class to return the color of a rank, which takes the rank integer value as a parameter.  This simplified some of the draw code, and I removed redundant code which calculated the color value in other places.

This definitely feels like I’m rolling downhill now.  Before, I could spend a week or two making logical fixes to the game, with little to show for it.  Now that I’m working on the graphics, I have a lot more to show in a relatively short period of time.

Pause Screen Needed

One functional change I will need to make is add a pause screen, because currently pressing back during the game will take the player back to the main menu.  I really need to disable that, and add a pause screen with just two options: resume and return to main menu.  I can probably use much of the same code from the “clear records” display, maybe even write that simple dialogue screen that I was thinking about a few days ago.

Star Rank

One problem I noticed in the game was that there is no distinction for a player if they acquired all three S ranks in one play of a level or from multiple plays of the level.  I went back and added a star marker on the game win and level select screens, showing if the player got S ranks in all three categories at once in one play of a stage.  That way the player has a way of showing that they got all three S values at once, instead of having to play through the stage multiple times to get the S rank in each category.  I just had to add another array in the player records class, which is parallel to the level complete array.  As far as saving and loading goes, I just replaced the “Y” value in the save file with an “S” if the player achieved the star rank (all three S ranks at once).

Take level 1-9 in the screenshots below for example.  The player currently has ranks S,S,B for the level.  The player completes the stage getting an S-rank in time, but a B-rank in luminosity.  The player now has S-ranks in all three categories.  However, Since the player got the time S-rank on a separate play of the stage (without getting all three S-ranks at once), the player did not get a star for that level.