{"id":3012,"date":"2015-02-09T11:50:35","date_gmt":"2015-02-09T16:50:35","guid":{"rendered":"http:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/?p=3012"},"modified":"2015-10-24T21:30:34","modified_gmt":"2015-10-25T01:30:34","slug":"asteroids-drawing-objects","status":"publish","type":"post","link":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2015\/02\/asteroids-drawing-objects\/","title":{"rendered":"Asteroids: Drawing Objects"},"content":{"rendered":"

Recently I’ve started\u00a0mentoring a local high school student a bit on implementing a video game, and this is a technical note toward\u00a0that.<\/p><\/blockquote>\n

Drawing basic shapes out of polygons to represent game objects is straightforward and requires just a bit of trigonometry, outlined here.<\/p>\n

Shapes<\/h2>\n

The core idea is that\u00a0the polygon is located around\u00a0the object’s current position. So, a standard looking Asteroids ship might be\u00a0defined as four points about the origin as in this diagram:<\/p>\n

\"Four<\/a>

Four coordinates defining a fairly standard Asteroids player ship.<\/p><\/div>\n

The polygon is captured by a list (array) of points in order around the shape.\u00a0Caveat other restrictions in the game’s code, it doesn’t really matter if they’re clockwise or counter-clockwise.\u00a0In\u00a0this case the ship is defined as follows, proceeding counter-clockwise:<\/p>\n

    \n
  1. (0, 24)<\/li>\n
  2. (-18, -24)<\/li>\n
  3. (0, -18)<\/li>\n
  4. (18, -24)<\/li>\n<\/ol>\n

    One cute trick that’s often done in Asteroids is to randomly generate the polygons for the asteroids themselves. The points list needs to be in order though or else the lines will overlap and the shape look funny.\u00a0There are several ways to do this, but one is to go\u00a0around in a circle, picking a random angle within that\u00a0arc of the circle, picking a random distance from the origin for that tip of the rock, and computing the x & y value for that polygon point using that angle and distance.<\/p>\n

    Drawing<\/h2>\n

    In most polygon graphics APIs, drawing starts by starting a new shape if necessary (i.e., newpath<\/code>) and moving the cursor to the first\u00a0point in the list (i.e., moveto<\/code>). It then loops over each of the other points and draws a line from the previous position to the current point (i.e., lineto<\/code>). The path is then either closed by drawing a line to the first point in the list from the last, or using a specific function to close the path\u00a0if the API has one\u00a0(i.e., closepath<\/code>).<\/p>\n

    Rotation and Placement<\/h2>\n

    Of course, in the game the object typically has to rotate and move.\u00a0Rotation is simple because we’re taking the object’s current position as the origin of the polygon representing it. Each\u00a0point to draw just needs to be calculated through the basic rotation formula<\/a>:<\/p>\n

    x' = (x * cos(angle)) - (y * sin(angle))
    \ny' = (x * sine(angle)) + (y * sin(angle))<\/code><\/p><\/blockquote>\n

    In\u00a0these\u00a0formulas, x<\/code> and y<\/code> are the current point in the polygon list while x'<\/code> and y'<\/code> are the actual points to draw. The\u00a0direction the object is currently rotated to, i.e.,which way\u00a0the player is facing, is in angle<\/code>.<\/p>\n

    This will draw the polygon around the origin, but of course the object is actually somewhere else on screen. This is a simple translation, effectively moving the polygon’s origin to the object’s actual position. In other words, just adding the object’s x and y coordinates to the point to draw:<\/p>\n

    x' = x' + objectx
    \ny' = y' + objecty
    \n<\/code><\/p><\/blockquote>\n

    Minor Complications<\/h2>\n

    Although the ship above has somewhat naturally been modeled facing up, angle 0 in trigonometry is actually facing to the right. So, the polygon should instead be modeled with its natural direction facing that way.<\/p>\n

    Adding just a small detail, essentially all modern computer displays and most software use a slightly different coordinate system from what’s typically used in mathematics: The origin is at the top left of the screen, and the y axis increases going down the screen, not up. Note that this means\u00a0the 90 degree angle is actually facing\u00a0down and 270 degrees points straight up.<\/p>\n

    A wide variety of ways to work\u00a0with these facts\u00a0can be applied, but the easiest is just to model the polygon facing to the right and to keep that\u00a0coordinate scheme in mind. So,\u00a0the example polygon above\u00a0would actually be modeled as follows:<\/p>\n

    \"The<\/a>

    The ship actually facing angle 0.<\/p><\/div>\n

    The counter-clockwise ordering of points would then be:<\/p>\n

      \n
    1. (24, 0)<\/li>\n
    2. (-24, -18)<\/li>\n
    3. (-18, 0)<\/li>\n
    4. (-24, 18)<\/li>\n<\/ol>\n

      Another small detail to keep in mind\u00a0is that nearly all trigonometry functions in software libraries are based on radians<\/a> rather than degrees, though most\u00a0people work more\u00a0easily in the latter. Converting between the two just requires a simple formula based on the identity relationship between them:<\/p>\n

      radians = pi *\u00a0degrees \/ 180<\/code><\/p><\/blockquote>\n

      Code<\/h2>\n

      A simple demonstration of this is in the box below. Pressing the left and right arrow keys make the ship rotate, and it’s being drawn\u00a0in the center of the screen rather than the origin (you may have to click on the box first to focus the keyboard on it):<\/p>\n\n\n