Fetch images asynchronous from url in unity3d

Question

I am making a game in which I need to integrate Facebook leader-board and facebook friends invitation like in subway surfer. I used official facebook sdk and got it done. But the approach I am following is not efficient.

My friend invite screen has its own UI so I could not use the default popup comes with facebook SDK. I fetch all the friends list from graph api It provides me the list of all IDs of users . But I needed to get name and images of friends to show in a scroll list . I am fetching the images from url asynchronously but whenever I try to fetch the image my scroll list hangs up . here is my code

IEnumerator start ()
    {

        url ="http://profile.ak.fbcdn.net/hprofile-ak-prn2/t5/1116929_100003613987476_290892640_q.jpg";
        WWW www = new WWW(url);
        yield return www;

        var texture = www.texture;
        this.gameObject.GetComponent<UITexture>().mainTexture = texture;



    }

I am using coroutines, but I dont know why my scroll hang up on scrolling if these are asynchronous ? The code is been taken form here . I have checked Threading but www can not be used in threads. I just want to smooth my scrollview which I made by using NGUI sdk during image fetching.

Problem 1 - How can I make smooth scrolling by asynchronous image download simultaneously.

Problem 2 - I am loading each image into UITexture of NGUI, which I instantiate at run time. But if one have 200 or above friends then my app's memory reach at apex point and eventually app crashes. Is there any other way to load large number of images so that they take reasonable memory .

Scroll is working smoothly during web call on editor but not on device (iOS). Why ?

Please guys help me to smooth my scroll view and memory issue. Any help shall highly be appreciated. Thakks :)

Answer 1

This is a common problem on devices for any list that has more than 50 items that include images. You need to control two things: initializing list items and downloading assets.

You do not need to load everything at once and display them. I would recommend breaking this down into three parts:

1. Store friend list data

Fetch all the user's Facebook friends and store it in a list. This does not include downloading the profile pictures, only the basic information and the URL of their profile picture. We will download the picture at a later step.

2. Pool list items

Don't create more than triple the list items you can display at any given time. While scrolling, you'll simply reuse the ones already created like so:

You should only need to do the third step in that picture only when the user has lifted his finger and the list has enough momentum to continue scrolling. Otherwise you should have enough items loaded in memory to not require this when the user simply drags the list.

When moving a list item either at the end or the beginning (depending on the direction of the scroll) you should load the friend's data. You still do not load profile pictures at this step.

3. Queuing image requests

You can use Unity's OnBecameVisible method to figure out when an item is currently visible. But generally you'll need a manager that keeps track of what items are visible at any given moment.

Every time the scroll list has no momentum and the user is not dragging it, you queue up requests to fetch the images for the items that are currently visible. This should be handled by a different manager that does the following:

• Keeps N most recent profile pictures in memory to avoid loading them every time
• Checks to see if the image is already downloaded by using LoadFromCacheOrDownload as Roberto suggested.
• Makes sure that the item the request was made for is still visible before setting the texture (otherwise it keeps the image in memory)

---

Of course, this is very high level. There are many things to implement here and in many different ways. But I hope you get the idea.

Answer 2

I was thinking about this when I asked about starting many coroutines at the same time. Well you just can't load them all at the same time and expect the app to run smoothly, the hardware is just not able to handle this.

You can made a loading screen or something similar where the user will have to wait to see/use the scroller (though I've never seen a game doing this for loading Facebook pictures) or you will have to give up in showing them all at the same time and create a pool of a small number of WWW connections that you can use at the same time, that is, limit the number of images being loaded at the same time, and only start loading a new image when one has finished.

Now one thing that can certainly speed things up - not in the first time that you run it, but subsequent runs - is to use WWW.LoadFromCacheOrDownload() instead of new WWW(). This method will store the pictures that were downloaded in the past and load them instead of redownloading. This is how every Unity game I've ever seen do integration with Facebook.