Three unique projects were published as part of The Straits Times’ Fifa World Cup 2022 visual coverage. They included a daily interactive game that allowed users to attempt an iconic goal of the day, a data-driven story about the best and most memorable World Cup chants of all time, and an immersive approach to the top five goals of World Cup history.

But what if we could bring readers closer to the experience of stepping into the shoes of iconic footballers?

To do that, The Straits Times’ digital graphics team and SPH Tech team decided to utilise mobile augmented reality (AR) technology and bring iconic World Cup goals to life.

Creating an AR football game

In the lead-up to the Qatar World Cup 2022, the Straits Times published a story revisiting iconic goals scored throughout World Cup history. As part of the story, readers had the option of experiencing Diego Maradona’s “Goal of the Century” in AR using their mobile devices.

Within the AR experience, readers went back in time and stepped into Maradona’s shoes. Their individual surroundings were transformed into a virtual football field through the lens of their mobile phone cameras. 

When readers walked around in their physical location, their corresponding position within the virtual field also changed. Following a set of on-screen instructions, readers were directed to run through a series of defenders and kick the football into the back of the net, as Maradona did 36 years ago.

Using Unreal Engine to create the game

The AR experience took eight months to develop. It was first conceptualised in March 2022 and published in November 2022, one week before the World Cup started. 

Initially, the team attempted to build the experience via Web-based AR platforms, which allowed readers to access the experience via their mobile device browsers. However, the team encountered several limitations of Web-based AR, such as limited memory and inaccurate movement tracking.

In light of these limitations, the team built the experience within the native Straits Times app. It used Unreal Engine, a game engine behind games like Fortnite and PlayerUnknown’s Battlegrounds, to create the experience.

Using project settings configured for AR, the team populated the Unreal Engine project with 3D models such as the grass pitch and football. Then, the team added interactive elements such as the path recreating Maradona’s run and the shot that resulted in the goal. 

After the experience was completed, the team used Unreal Engine to test and debug the experience until it was ready to be published.

Integrating to the native app

The next step was integrating the Unreal Engine project into the native The Straits Times app. This had to be done separately for Android and iOS platforms, using Google’s ARCore and Apple’s ARKit software development kits, respectively.

This allowed the team to export the Unreal Engine project in a format that could be read by the native The Straits Times app in either operating system. 

The team continued to work around the limitations presented by mobile devices. As mobile devices have limited memory, the experience could not be fully loaded on some occasions.  The team developed a workaround by making the app download the AR experience onto the phone’s memory each time it was launched and removing it once the experience ended instead of storing it permanently on the phone.

While this experience featured a single goal, the team’s success in launching the experience changed the way we deliver sports journalism. One day, readers might experience Messi or Mbappe’s latest goal just a few days after it has happened.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .