Skylanders Website with Arduino
Introduction
You may have heard of the Skylanders franchise.
In short; Skylanders is a toys-to-life action-adventure video game series published by Activision. Inspired by the Spyro series, Skylanders games are played by placing character figures called the Skylanders on the "Portal of Power", a device that reads the figures' tags through NFC and "imports" the character represented by the figure into the game as a playable character.
Being a big fan of Skylanders myself, Skylanders has become a great source of inspiration for me.
For school we had to do a so-called "professional task".
I've always wanted to make something like a Skylanders website with scan function myself. And one day, my dream finally came true.
However, I didn't make the whole project on my own. Thanks to my team, we were able to bring my idea to life.
Screenshot from the Official Skylanders Spyro's Adventure trailer
Since it's a while ago that we made this project, I do not have all the necessary equipment anymore to show the whole project, but what I do have is a short video of me trying out the scanning part of our local website.
Used hardware
In order to make the project fully functional, we had to use some hardware. The idea was to mimick the "Portal of Power" which scans the Skylanders figures and "brings them to life in the game". One way to do this was by using a Arduino with a NFC reader.
The hardware which was used is listed below:
- NFC Reader Model Type PN532
- Arduino Processor ATMega 2560
- Arduino Board Mega 2560
- Arduino Processor ATMega 2560
- Arduino Board Mega 2560
And ofcourse the Skylander figures themselfs.
The Arduino with the NFC reader and a Skylanders figure
How does it work?
But how does it work? First of all we have the NFC reader, which is connected to the Arduino Mega. The Arduino works with the Arduino application, by writing the correct code it was able to read the Skylander NFC tag.
Then we have used another application called Processing. Processing retrieved the data from the database. This data gets forwarded to the MySQL database.
By using PHP to retrieve that data from the MySQL database it was finally possible to show the information on the website.
Information on the Website
Of course there is more then only a scan page. Originally the idea was that once you had scanned your Skylander figure on the scan page, the correct information about that Skylander would be displayed on the same screen.
In the end this didn't work out so well, so we decided to split the information about the Skylander to display it on two different pages.
The scan page would only show a image of the Skylander and their name plus a video trailer of that Skylander. While another page, the Skylander page, was the place where you could find every Skylander with the correct info. You were able to select an Element and all the Skylanders of that Element would display at the right side of the screen.
The Skylander page displaying info about the selected Skylander
But not only the Skylanders were displayed on screen, the Skylander games have their own page too. Each game page displays a image of the game, together with a brief introduction to the game, as well with a video trailer of the game itself. Which can been seen in the video below.
