How I Recreate Immersive Yu-Gi-Oh! Card Game Using Augmented Reality
Yu-Gi-Oh! is a Japanese manga and anime series written by Kazuki Takahashi. The series revolves around the card game known as Duel Monsters, where each player uses cards to “duel” each other in a mock battle of fantasy “monsters”. It is one of my favourite manga and anime series that I feel strongly attached with my childhood memory. As a kid, I have always dreamed of one day we could have those monsters actually jump out of the cards and do battle with one another. With Augmented Reality, I am making my dream come true!
Here is how I am doing it.
Step 1) Create a Xcode project with Augmented Reality
I chose Augmented Reality App for a new project template.
Then, I chose Storyboard
as my main interface and RealityKit
as content technology.
Step 2) Download the card images
I am always team Dark Magician so I downloaded the front and back image of a card I want from the internet. Then, place it inside the project folder.
Step 3) Purchase the 3D Dark Magician model
I am not a professional 3D modelling artist so I purchased the 3D Dark Magician model from Sketchfab and then place it in my project folder. I think it’s worth it to make my childhood dream comes true.
Step 4) Add the code
I added the following code in the ViewController.swift file. I annotated what each part of code does, so it is easy to understand.
Step 5) Add Tap Gesture to the app
This tap gesture is meant to flip the card up or down when user taps on the card.
In the Main.storyboard, I used Command + Shift + L
to open a gesture search panel and search for Tap Gesture Recognizer
. Once it was found, then I dragged it to the ARView in the middle of the screen.
Step 6) Build the project
Then I started to build the project using the Play button and also connected the Macbook to my iPhone.
Result
When opening the App, the card is facing down.
When user taps, the card faces up and the mighty Dark Magician appears!
Short video of how it looks like.