AndEngine Tutorial 1 - Drawing Rectangles

With this AndEngine tutorial you'll learn how to easily draw shapes.

AndEngine Tutorial 1 - Drawing Rectangles

Hello again to our first series of AndEngine tutorials. At this point you already should be able to create a Basic Game Activity (check our last tutorial here). You can use the Basic Game Activity template in any of our tutorials in this series.

Today we are going to learn how to draw rectangles easily in AndEngine.

This is very handfull when you need to create simple interface elements, so let's start.

Remember our background from our last tutorial? Let's change its color to become more pleasant.

myScene.setBackground(new Background(0.384f, 0.412f, 0.325f));

Before drawing anything, let's define the VertexBufferObjectManager that is used by AndEngine to draw basically anything. The best way to use it is to create a variable that we can call at any time in our game, so we don't need to call it everytime we draw something. To do that, put this line of code just before the EngineOptions of your Basic Game Activity:

private VertexBufferObjectManager vbom;

Then we add this line to the class onCreateResources:

vbom = getVertexBufferObjectManager();

Drawing rectangles

Now let's draw rectangles! The Rectangle function is pretty simple to use. You just need to define starting point and dimensions (width and height). Try to include these four lines in the onPopulateScene class and see what happens:

  Rectangle rectangle1 = new Rectangle(384, 1080, 718, 50, vbom);
  rectangle1.setColor(0.894f, 0.980f, 0.694f);
  myScene.attachChild(rectangle1);
  
  Rectangle rectangle2 = new Rectangle(384, 1045, 718, 20, vbom);
  rectangle2.setColor(0.776f, 0.894f, 0.506f);
  myScene.attachChild(rectangle2);
  
  Rectangle rectangle3 = new Rectangle(384, 200, 718, 50, vbom);
  rectangle3.setColor(0.894f, 0.980f, 0.694f);
  myScene.attachChild(rectangle3);
  
  Rectangle rectangle4 = new Rectangle(384, 165, 718, 20, vbom);
  rectangle4.setColor(0.776f, 0.894f, 0.506f);
  myScene.attachChild(rectangle4);

Looks nice, doesn't it? :)

Of course you can create things in batch! Try this, for example:

  for(int i = 0; i < 3; i++) {
   for(int j = 0; j < 3; j++) {
    
    Rectangle shadow = new Rectangle(192 * (j + 1), 100 + 265 * (i + 1), 100, 100, vbom);
    shadow.setColor(0.329f, 0.380f, 0.435f);
    shadow.setRotation(45);
    myScene.attachChild(shadow);
    
    Rectangle front = new Rectangle(192 * (j + 1), 120 + 265 * (i + 1), 100, 100, vbom);
    front.setColor(0.859f, 0.471f, 0.463f);
    front.setRotation(45);
    myScene.attachChild(front);
    
   }
  }

Now notice that you have rotated the rectangles. Also, the ones you attach first will be under those you attach afterwards (then attatch shadows first, like in the example)

At the end of this tutorial you should get something like this:

If you think you missed something, here is the full code:

public class MainActivity extends BaseGameActivity {
 
 private Camera camera;
 private static int CAMERA_WIDTH = 768;
 private static int CAMERA_HEIGHT = 1280;
 
 private Scene myScene;
 
 private VertexBufferObjectManager vbom;

 @Override
 public EngineOptions onCreateEngineOptions() {
  camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
     EngineOptions engineOptions = new EngineOptions(true, ScreenOrientation.PORTRAIT_FIXED, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), camera);
     engineOptions.setWakeLockOptions(WakeLockOptions.SCREEN_ON);
     return engineOptions;
 }

 @Override
 public void onCreateResources(
   OnCreateResourcesCallback pOnCreateResourcesCallback)
   throws IOException {
  
  vbom = getVertexBufferObjectManager();
  
  pOnCreateResourcesCallback.onCreateResourcesFinished();  
 }

 @Override
 public void onCreateScene(OnCreateSceneCallback pOnCreateSceneCallback) throws IOException {
  
  myScene = new Scene();
  myScene.setBackground(new Background(0.384f, 0.412f, 0.325f));
  pOnCreateSceneCallback.onCreateSceneFinished(myScene);
  
 }

 @Override
 public void onPopulateScene(Scene pScene, OnPopulateSceneCallback pOnPopulateSceneCallback) throws IOException {
  
  Rectangle rectangle1 = new Rectangle(384, 1080, 718, 50, vbom);
  rectangle1.setColor(0.894f, 0.980f, 0.694f);
  myScene.attachChild(rectangle1);
  
  Rectangle rectangle2 = new Rectangle(384, 1045, 718, 20, vbom);
  rectangle2.setColor(0.776f, 0.894f, 0.506f);
  myScene.attachChild(rectangle2);
  
  Rectangle rectangle3 = new Rectangle(384, 200, 718, 50, vbom);
  rectangle3.setColor(0.894f, 0.980f, 0.694f);
  myScene.attachChild(rectangle3);
  
  Rectangle rectangle4 = new Rectangle(384, 165, 718, 20, vbom);
  rectangle4.setColor(0.776f, 0.894f, 0.506f);
  myScene.attachChild(rectangle4);
  
  for(int i = 0; i < 3; i++) {
   for(int j = 0; j < 3; j++) {
    
    Rectangle shadow = new Rectangle(192 * (j + 1), 100 + 265 * (i + 1), 100, 100, vbom);
    shadow.setColor(0.329f, 0.380f, 0.435f);
    shadow.setRotation(45);
    myScene.attachChild(shadow);
    
    Rectangle front = new Rectangle(192 * (j + 1), 120 + 265 * (i + 1), 100, 100, vbom);
    front.setColor(0.859f, 0.471f, 0.463f);
    front.setRotation(45);
    myScene.attachChild(front);
    
   }
  }
  
 }
 
}

AndEngine has also the function Line, which is simple to use, but you should be careful with this one as it doesn't work in all devices. Rectancles are easy and safe to use!

Enjoy it and happy coding!