How to make a sprite from URL in cocos2d-x

Hello friends. In this tutorial I am going to explain how you will be making a sprite from any URL on Internet
I am using two URLs
1. http://lptpl.info/9.png
2. https://dl.dropboxusercontent.com/u/37517735/icon_test.jpg

So these are the two images I will be using to create the sprite

Step 1:
Step 1 is as simple. Just create a new project in cocos2d-x

Step 2:
Now just remove the extra matter in your HelloWorldScene.h so that it looks like

1 2 3 4 5 6 7 8

bool HelloWorld :: init ( ) {      if ( ! CCLayer :: init ( ) )      {          return false ;      } return true ; }

Step 3:
Now in your HelloWorldScene.h, add the following headers and namespaces

1 2 3

#include "HttpClient.h" using namespace cocos2d ; using namespace cocos2d :: extension ;

HttpClient.h is used for the request and response of the URL

Step 4:
Now we add some labels and functions such that the class looks like

1 2 3 4 5 6 7 8 9 10 11 12

class HelloWorld : public cocos2d :: CCLayer {      CCLabelTTF* download ; public :        virtual bool init ( ) ;      static cocos2d :: CCScene* scene ( ) ;      void downloadButton_click ( CCObject* pSender ) ;      void downLoadImage ( ) ;      void onImageDownLoaded ( CCHttpClient* pSender , CCHttpResponse* pResponse ) ;      CREATE_FUNC ( HelloWorld ) ; } ;

Step 5:
In your HelloWorldScene.cpp class add the following after the after the inclusion of HelloWorldScene.h class

1 2 3 4

#define URL "http://lptpl.info/9.png" #define anotherURL "https://dl.dropboxusercontent.com/u/37517735/icon_test.jpg" using namespace cocos2d :: extension ; USING_NS_CC ;

These two URLs will be used for fetching the images

Step 6:
Now in your init function just add the label and a button. On button click I will be loading the URL and will be making it a sprite
So now your init function looks like

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

bool HelloWorld :: init ( ) {      if ( ! CCLayer :: init ( ) )      {          return false ;      }      CCSize winSize = CCDirector :: sharedDirector ( ) -> getWinSize ( ) ;        CCMenuItemImage * downLoadButton = CCMenuItemImage :: create (                                          "CloseNormal.png" ,                                          "CloseSelected.png" ,                                          this ,                                          menu_selector ( HelloWorld :: downloadButton_click ) ) ;           downLoadButton -> setPosition ( ccp ( winSize . width / 2 , winSize . height* . 10 ) ) ;           download = CCLabelTTF :: create ( "" , "Arial" , 30 ) ;      download -> setPosition ( ccp ( winSize . width / 2 , winSize . height / 2 ) ) ;      this -> addChild ( download ) ;           CCMenu* pMenu = CCMenu :: create ( downLoadButton , NULL ) ;      pMenu -> setPosition ( CCPointZero ) ;      this -> addChild ( pMenu , 1 ) ;      return true ; }

Step 7:
On button click the downLoadImage() function is called

1 2 3 4

void HelloWorld :: downloadButton_click ( CCObject* pSender ) {      downLoadImage ( ) ; }

The definition of downLoadImage() function is as follows

1 2 3 4 5 6 7 8 9 10 11 12 13

void HelloWorld :: downLoadImage ( ) {      download -> setString ( "downloading....." ) ;      std :: string strImage = "img.png" ;      CCHttpRequest* request = new CCHttpRequest ( ) ;      request -> setUrl ( anotherURL ) ;      //request->setUrl(URL);      request -> setRequestType ( CCHttpRequest :: kHttpGet ) ;      request -> setResponseCallback ( this , httpresponse_selector ( HelloWorld :: onImageDownLoaded ) ) ;      request -> setTag ( strImage . c_str ( ) ) ;      CCHttpClient :: getInstance ( ) -> send ( request ) ;      request -> release ( ) ; }

Here I have set the name as img.png. This means that the image downloaded will be saved as img.png in your simulators library folder. I will show you the path later on in the next steps. Then the responsecallback is set to call another function onImageDownLoaded()
The definition of onImageDownLoaded() is as follows

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

void HelloWorld :: onImageDownLoaded ( CCHttpClient* pSender , CCHttpResponse* pResponse ) {      CCSize winSize = CCDirector :: sharedDirector ( ) -> getWinSize ( ) ;      CCHttpResponse* response = pResponse ;           if ( ! response )      {          CCLog ( "No Response" ) ;          return ;      }      int statusCode = response -> getResponseCode ( ) ;           char statusString [ 64 ] = { } ;      sprintf ( statusString , "HTTP Status Code: %d, tag = %s" , statusCode , response -> getHttpRequest ( ) -> getTag ( ) ) ;      CCLog ( "response code: %d" , statusCode ) ;           if ( ! response -> isSucceed ( ) )      {          CCLog ( "response failed" ) ;          CCLog ( "error buffer: %s" , response -> getErrorBuffer ( ) ) ;          CCMessageBox ( "error in downloaded" , "Image" ) ;          return ;      }    std :: vector < char > * buffer = response -> getResponseData ( ) ;           CCImage * img = new CCImage ( ) ;      img -> initWithImageData ( & ( buffer -> front ( ) ) , buffer -> size ( ) ) ;           CCMessageBox ( "Image downloaded" , "Image" ) ;      // Save image file to device.      std :: string writablePath = CCFileUtils :: sharedFileUtils ( ) -> getWritablePath ( ) ;      writablePath . append ( response -> getHttpRequest ( ) -> getTag ( ) ) ;      img -> saveToFile ( writablePath . c_str ( ) ) ;         //Now create Sprite from downloaded image      CCSprite* pSprite = CCSprite :: create ( writablePath . c_str ( ) ) ;      pSprite -> setPosition ( ccp ( winSize . width / 2 , winSize . height / 2 ) ) ;      addChild ( pSprite ) ; }

Your image will be stored in somewhat path like this

And now you are done. Now run the project
Output will be

Now change the URL and you can see other image

1 2 3 4 5 6 7 8 9 10 11 12 13 14

void HelloWorld :: downLoadImage ( ) {      download -> setString ( "downloading....." ) ;      std :: string strImage = "img.png" ;           CCHttpRequest* request = new CCHttpRequest ( ) ;      //request->setUrl(anotherURL);      request -> setUrl ( URL ) ;      request -> setRequestType ( CCHttpRequest :: kHttpGet ) ;      request -> setResponseCallback ( this , httpresponse_selector ( HelloWorld :: onImageDownLoaded ) ) ;      request -> setTag ( strImage . c_str ( ) ) ;      CCHttpClient :: getInstance ( ) -> send ( request ) ;      request -> release ( ) ; }

Hope it helped you and you liked it.