How To Create A Live Football / Soccer Score App - Unity

This is going to be quite an interesting post if you are a Football / Soccer (oops, I'm not supposed to call it Soccer. Am I? Well, I'm including the word for SEO purpose, you know :P) fan or if you are someone who wanted to know how to create a Football / Soccer Live Scores App. Of course, you can use the same thing as base and create a Live Score Application for any other sport like Cricket / Golf / Tennis etc.

Pre-requisites to develop this Live Score App

Unity Game Engine, which can be downloaded from here.
An active account (demo/pro) on xmlsoccer.com, which will be used to fetch the live data.

Once you have registered and activated your xmlsoccer.com account you will have your own API key. You can find it in the My Account section.

I'm not sure what am I supposed to say about xmlsoccer.com because they are not paying me to write about their site, so I wouldn't bother to write much about them :D
All I can say is, we are going to use the site to get the live data like the league standings, live scores etc.
If you would like to know more about the site, you can simply go through their site and read the Documentation or their wiki where in they have given the Input data formats and everything you need to know about using their site.
Having said that, I won't leave everything to you guys, I mean, obviously why would I even write this post if I had to do that.

Now, coming to the most important part. What would you learn in this tutorial?
Well, you would learn to develop a Unity based App where in you would create a Live Standings app of the Scottish Premier League (since that is the only league data which the website is providing for free). Of course I could have created a Live scorer app instead. But, since no matches are going on right now for me to test the feasibility of the code or the post, I thought it would be better if I created an app which is capable of fetching the League Standings data from the website and displaying them in our app.

The operation, as they call it as, that would fetch the league standings for us is named as GetLeagueStandingsBySeason. This operation expects three parameters as input, viz. ApiKey, league and seasonDateString.
The input data formats of these would look something like
ApiKey: TUQVLZOHZGVWJAQYMLHRLLOZGXIGDVQIZRDAMBRDAAAAAAAAAA (counts to 50 characters / letters)
league: Scottish Premier League
seasonDateString: 14/15, for the 2014/2015 season. 13/14 for the 2013/2014 season etc.

We would use the HTTP Get/Post request to get the league standings xml. This is made possible by WWW or WWWForm class. The url to fetch the 2014/2015 league standings for the Scottish Premier League would look something like

http://www.xmlsoccer.com/FootballDataDemo.asmx/GetLeagueStandingsBySeason?ApiKey=YOUR-API-KEY-HERE&league=Scottish%20Premier%20League&seasonDateString=1415

Clicking on the above link doesn't fetch you the league standing xml, however, because you need a genuine ApiKey for that. Replace the Apikey with your own ApiKey and try it out.

Once you have the xml, you would read the data from the xml using "XmlDocument" class and tabulate the data as per your requirements.

To get started, created a New Unity Project in 2D mode and name it as, say, Live Standing App or perhaps, Live Score App.

Create a New Folder under Assets in the Projects panel and name it as Scenes. Press ctrl+s to save the Scene that you have at the moment and name it as LiveStandingsTable and save it under the Scenes folder you created.

Create Text components for displaying the league table so that they form a table. If you want to learn more about the Unity GUI, I have posted some articles on the same. You can check them out Unity New GUI Tutorial. The table which I have created is as shown in the gif below.

Make Your Own Live Score App - Table Setup
Change the font size and other properties of the Text so that you get the desired result. The configuration which I have used are as in the image below

Make Your Own Live Score App - Text Config
Once you have done this, create a New Folder under the Assets in the Project panel called Scripts. Within this folder add a New C# Script. Name it as GetData. Attach the script to the Main Camera.
Double click on the script to open it and add the below code to it

using UnityEngine;
using System.Collections;
using System;
using UnityEngine.UI;
using System.Xml;
using System.IO;

public class GetData: MonoBehaviour {

 //url to get the league standings xml from
 string urlStandings = "http://www.xmlsoccer.com/FootballDataDemo.asmx/GetLeagueStandingsBySeason?
ApiKey=TUQVLZOHZGVWJAQYMLHRLLOZGXIGDVQIZRDAMBRDMSIFQBKMEN&league=Scottish%20Premier%20League&seasonDateString=1415";
  
 //HTML post url
 string postUrlStandings = "http://www.xmlsoccer.com/FootballDataDemo.asmx/GetLeagueStandingsBySeason"
 
 //input paramters for the form 
 /*
 string apikey = "YOUR APIKEY HERE";
 string league = "Scottish Premier League";
 string season = "1415";
 */


 //References to UI Text elements
 public Text Team;
 public Text Played;
 public Text Won;
 public Text Draw;
 public Text Lost;
 public Text Goals_For;
 public Text Goals_Against;
 public Text Goal_Difference;
 public Text Points;
 
 void Start() {
  //call the getLeagueStandings coroutine
  StartCoroutine(getleagueStandings()); 
 }
 
 //Get the league standings xml and display the data in the league table
 IEnumerator getleagueStandings(){

  //if you want to use the HTTP POST method instead of HTTP GET. use the below code and comment the HTTP GET
  /*
  WWWForm form = new WWWForm();
  form.AddField("ApiKey", "apikey");     
  form.AddField("league", "league");      
  form.AddField("seasonDateString", "season");   
  WWW www = new WWW(postUrlStandings, form);
  
  */


  //HTTP GET
  //create a www object and start downloading the data
  WWW www = new WWW(urlStandings);

  //wait for the request to complete
  yield return www;

  //create a new object of type XmlDocument
  var xml = new XmlDocument();

  //load the xml downloaded from the url specified
   //www.text contains the xml in text format
  xml.LoadXml(www.text);

  //iterate through the xml elements and display them in the Text element
  //we are omitting some xml elements from the downloaded. Hence, some of the numbers in the grandchild nodes are missing.
  //The last element of the xml received is regarding the authentication, which is surplus to requirements. Hence, the loop ends at xml.ChildNodes
[1].ChildNodes.Count-1
  
  for(int j=0; j < xml.ChildNodes[1].ChildNodes.Count-1 ;j++){
   Team.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[0].InnerText;
   Played.text +=  "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[2].InnerText;
   Won.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[5].InnerText;
   Draw.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[6].InnerText;
   Lost.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[7].InnerText;
   Goals_For.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[11].InnerText;
   Goals_Against.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[12].InnerText;
   Goal_Difference.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[13].InnerText;
   Points.text += "\n"+xml.ChildNodes[1].ChildNodes[j].ChildNodes[14].InnerText;
  }

 } 
}

As the code above is well commented. I won't explain it here again. If you have any queries on the same, leave a comment below and we'll try to assist you.

Save the script and return to unity. Now you will notice that the script attached to the Main Camera will expect nine Text components. Drag and drop the respective Text components which you had earlier created.

Make Your Own Live Score App - GetData Script
Save the scene and turn on the internet if it's not on already. Test the scene by pressing the Play button on the top or simply use ctlr+p. You would notice that you now have a Simple Live Standing App which displays the League Standings of the Scottish Premier League.

Make Your Own Live Score App - League Standings

I'm sure you would want to add other features to this, so go ahead. Explore and turn on your thinking cap and be creative.

See you around.
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:
    Blogger
    Facebook

6 comments:

  1. Can you please make a code axample for getting data from XMLSoccer for a PHP user?

    ReplyDelete
  2. Here I read many new things about how to develop an app for the purpose of soccer score. This is an excellent app for football fans. App Development Firm

    ReplyDelete
  3. how about if u want them to access information offline would it be possible?

    ReplyDelete
  4. Hello, any advice as to how would you do it for Android? I need to create an Android app that will do very similar thing (fetch table data from external API and display it in my app). Any help would be really appreciated.

    ReplyDelete
  5. thanks for the good code, please click here if you want to play online games

    Gclub
    บาคาร่า

    ReplyDelete
  6. Duta doesn't offer football updates, they also offer news updates which are mostly Indian covered headlines and among others.sports scores

    ReplyDelete