4.3.1 A moving Rectangle

If you want to draw an image on the screen, it will require a rectangle. As such, a rectangle will be the basis of almost every element on your screen. It will often come in handy to have a special class for movable rectangles. As an example, we’ll create a rectangle which can be moved with the arrow keys.

Rectangles have one big disadvantage when you try to move them. Instead of a central position, both corners have to be moved. This is why we often use a Vec2 to remember the center position. As an extra, this class will remember its color. 

 
class movableRect { 
    Vec2 pos; 
  Color color; 
}
 
5

This class can be extended with a create, update and draw methods. The create method can be used to pass the color and the starting position to the object. This starting position already has a default value, so you can use the create method without it. 

 
void create(C Color & color, C Vec2 & pos = 0) { 
    T.color = color; 
  T.pos = pos; 
}
 
5

Note
There some other new stuff in this method. The & sign indicates that the color and pos will be passed as a reference. The character C means we will not change the value that was passed into the method. You will learn more about this in one of the next chapters. Within the function, the character T is used to solve a practical problem. The class and the method both have a variable named ‘color’. This makes it impossible for the compiler to know what variable you mean. You could rename one of them, but that makes the code harder to read. A more elegant solution is to add T. before the class variable. T stands for ‘this’ and by that we mean ‘this class’. The version without T. will be the local variable, passed into the method.

Within the update method, the position can be changed by using the arrow-keys. You came across this code before, in chapter 2.2.2. 

 
void update() { 
  if(Kb.b(KB_LEFT )) pos.x -= Time.d(); 
  if(Kb.b(KB_RIGHT)) pos.x += Time.d(); 
  if(Kb.b(KB_UP   )) pos.y += Time.d(); 
5  if(Kb.b(KB_DOWN )) pos.y -= Time.d(); 
}
 

The final thing we need is a draw function. Notice that this is the only place we actually create a rectangle. That’s because we don’t really need the whole rectangle in the other methods. This could be different if, for example, we need to check if the rectangle hits another object. So you could add a real Rect to this class, but right now it is not needed. 

 
void draw() { 
  Rect(pos - Vec2(0.2, 0.1), pos + Vec2(0.2, 0.1)).draw(color); 
}
 

As you see, we use the position ‘pos’ when we create the rectangle. The position will be the middle of the rectangle. But we still need to define the corner. This can be done be subtracting and adding the same value from the position. In this case the value is literal, but a more advanced class could just define a Vec2 size and use that instead. That would make it easy to define movable rectangles of different sizes.

The whole class is listed again below. It is the first time in this course we actually create a new class, so be sure you understand what is going on. And pay attention to the keywords private and public. You should know those from an introductory c++ course. We will talk more about those later on, but remember they are part of a good programming style. 

 
class movableRect { 
private: 
  Vec2 pos, size; 
  Color color; 
5 
public: 
  void create(C Color & color, C Vec2 & pos = 0, C Vec2 & size = Vec2(0.1, 0.1)) { 
    T.color = color; 
    T.pos   = pos  ; 
10    T.size  = size ; 
  } 
 
  void update() { 
    if(Kb.b(KB_LEFT )) pos.x -= Time.d(); 
15    if(Kb.b(KB_RIGHT)) pos.x += Time.d(); 
    if(Kb.b(KB_UP   )) pos.y += Time.d(); 
    if(Kb.b(KB_DOWN )) pos.y -= Time.d(); 
  } 
 
20  void draw() { 
    Rect(pos - size, pos + size).draw(color); 
  } 
}
 

Exercise
Add a pink square to the application, using the newly created class movableRect.

(A bit harder) Be sure the square cannot move outside of the screen.

PREVIOUSNEXT