Robotics education is gaining popularity among school children in line with the government desire to promote creative thinking in students through STEM based activities. However, the robots for educational games are usually made up of components and its description is usually one-way and static. Additionally, students find it difficult to visualize distances from robot movements when playing educational robotic games. Augmented reality (AR) technology is a viable tool to connect between in-context information and physical activities. The objective of this research is to design and develop an AR based application that can visualize the distance between two robots for supporting learning process in a game-based module. The application consists of three parts; the first part use AR in identification of components related to robots, while the second part involves the addition of real-time visualization in the form of AR, enabling students to learn the distance from the robot's movements. The third part used AR in providing the description of the robotic games through videos. The development of the application is based on the Agile model. The results show that the application has received positive feedbacks from students as it can increase their interest in playing robotic educational games.