[iOS] Share screenshot: cc.Sprite to UIImage conversion

cocos2d-x JavaScript
1

I want to share screenshot on Facebook / Twitter from my game. I have the screenshot as cc.Sprite. Now I need to convert the cc.Sprite to UIImage. Does anybody know how to do it? Do I have to save the cc.Sprite to a file and then load that file as UIImage?

2

@SonarSystems @pandamicro @walzer @ZippoLag

3

Do you have Screenshot working in Cocos2d-JS?

4

Yes I have the screenshot as cc.Sprite.

5

What code are oyu using to take a screenshot?

6 
getScreenshotSprite: function()
{
    cc.director.setNextDeltaTimeZero(true);

    var renderTexture = new cc.RenderTexture(cc.winSize.width, cc.winSize.height);
    renderTexture.begin();
    this.visit();
    renderTexture.end();

    var spriteScreenshot = new cc.Sprite();
    spriteScreenshot.initWithTexture(renderTexture.getSprite().getTexture());

    return spriteScreenshot;
},
7

Does this take the actual screenshot?

8

Yes it does (as cc.Sprite).

The “this” in the code is the cc.Layer that I want to share.

9

Do you have anything to say? @SonarSystems

10

Try using our Cocos Helper which has social sharing along side your code https://github.com/SonarSystems/Cocos-Helper

11

The only way I know of is this one, but it won’t work outside a browser.

@Zinitter, sorry to pull you here. You had a way of taking screenshots cross-platform I believe?

12

How i perform share on iOS and Android:

  1. Render scene to render texture (code is similar to yours).
  2. Save result of the rendering to a file using renderTex->saveToFile.
  3. Load this file to UIImage on iOS.
  4. Do share.
1 Like
13

@ZippoLag

mr746866 is able to get the screenshot with cc.RenderTexture and that should be the correct way.

The problem is on how to share the screenshot.

It is easy to get the image in C++ but not JS because no JSB function ( AFAIK) to deal with that when i research how to upload the image.

cc.RenderTexture has a function newCCImage(flipImage) but i can’t make it work.

creates a new CCImage from with the texture's data.

@mr746866
have you try the SDKBOX Facebook plugin?

I see there is a “share a photo” function which can be use although i haven’t try yet.

As you said, may be you have to save the image to file and then use the “share a photo” function to pick the image.

cc.RenderTexture.saveToFile(imageName, cc.IMAGE_FORMAT_PNG);

var storagePath = ((jsb.fileUtils ? jsb.fileUtils.getWritablePath() : "/"));
var imagePath = (storagePath+imageName);

http://sdkbox-doc.github.io/en/plugins/facebook/v3-js/

Second option is you have to write your own function in objective-c and bind it to return the image data.

Hope this help.

14

Thank you all. I solved the problem using the method mentioned by @MikhailSh and @Zinitter. Thanks @ZippoLag for bringing help.

@Zinitter no i didn’t try SDKBOX but I think it won’t be of much help.

This is the function that I used to save screenshot.

saveShareImage: function()
    {
        cc.director.setNextDeltaTimeZero(true);
 
        var renderTexture = new cc.RenderTexture(cc.winSize.width, cc.winSize.height);
        renderTexture.begin();
 
        this.visit();
 
        renderTexture.end();
 
        var fileName = "Screenshot.png";
        var imagePath = jsb.fileUtils.getWritablePath();
 
        if (renderTexture.saveToFile(fileName, cc.IMAGE_FORMAT_PNG))
        {
            imagePath = imagePath + fileName;
            this.imagePath = imagePath;
        }
    }

Then I called native code using reflection.

jsb.reflection.callStaticMethod("GameBridge", "shareScreenshot:", this.imagePath);

Finally used this method to get the UIImage.

[UIImage imageWithContentsOfFile:imagePath];
15

Is it okay to use RenderTexture.saveToFile() like this? Isn’t it an asynchronous function?

16

@mr746866

It should working.

You can test it with cc.log.

var imageSave = renderTexture.saveToFile(fileName, cc.IMAGE_FORMAT_PNG)
cc.log("imageSave:"+imageSave);

There is a crash issue when changing scene while renderTexture.saveToFile is saving file.
But JSB don’t have Director::getInstance()->getRenderer()->render();

You can bind the function yourself, or easy, add that line into 2d/CCRenderTexture.cpp

Director::getInstance()->getRenderer()->addCommand(&_saveToFileCommand);
++Director::getInstance()->getRenderer()->render();
17

I’m here because I am looking for the same answer as OP. I need to convert a cocos2d::Image into a UIImage on iOS. There must be a way without going the round-trip to the file system, right? I don’t want to deal with async issues… which likely would cause some more work/problems etc. No one found a solution yet?

18

Ok I also decided to use the file round trip. It’s good enough.