COMP4021 Assignment 2 Flipping the Player/Monster

Overview

• In your assignment 2, each student need to choose a theme and design a player
• The player image must be a side view, some random examples:

• (Your player must be created in SVG, it cannot be a bitmap)
• When the player moves left, the player needs to 'point' leftwards
• When the player moves right, the player needs to 'point' rightwards
• This can be done by designing the original player image so that it faces one direction, and then 'flipping' the image to the other direction when required

  ⇨

• You need to do the same thing for the monsters (you must change the monsters to something appropriate for your theme)
• This web page teaches you how to do the flipping

Steps

1. Find the SVG group object of the player:

   playerObject = svgdoc.getElementById("Shuttle");

   • This example assumes that Shuttle is the id of the player group
   • The id you use in your game may be different
2. Transform the player:

   playerObject.setAttribute("transform",
                             "translate(" + player.size.w + ", 0) scale(-1, 1)");

   • The transform statement above means:
     1. Scaling the player by (-1, 1)
     2. Then translating (player.size.w, 0)
   • player.size.w is the width of the player
   • The figures below show the process of the transformation

     

   • The width of the player in this example is 50
   • In the figure above, increasing y axis values are shown in the downwards direction
   • This is also true for SVG