Taking A Screenshot on Cocos2d-x JavaScript

cocos2d-x JavaScript
#1

Hello

I am trying to create a screenshot and I successfully take it but the image is upside down, I am using the code below.

getScreenshotTexture: function()
{
cc.director.setNextDeltaTimeZero(true);
var renderTexture = new cc.RenderTexture(cc.winSize.width, cc.winSize.height);
renderTexture.begin();
this.visit();
renderTexture.end();
return renderTexture.getSprite().getTexture();
},

// called using this
this.sprite2 = new cc.Sprite(this.getScreenshotTexture());

Any help would be greatly appreciated.

#2

I think it is the way open gl handle texture. You should not have this problem with render mode = 1 (canvas).

In a previous project i did :

if opengl supported
sprite.scaleY = -1;

But i don’t know if it is the best solution.

#3

I will try this later, fingers crossed.

#4

Hello this didn’t seem to work, do you have any other suggestions?

#5

@SonarSystems

You can try use

this.sprite2.setFlippedY(true);
#6

That works but what if I want to share the image lets say via facebook then the issue will still persist.

#7

If save to file through JSB, the image is ok without flip.

Or you can try flip “this” before visit and set it back after that.

#8

Hello,

Is this above code works in android native build.
When i was trying in android black screen was saving.

Thanks
Gurudath

#9

@Gurudath

Are you taking full screenshot or sprite?

This is the code i use to screenshot for a sprite and save it to a file in Cocos2d-JS v3.6.1 and v3.7.
Work fine in iOS, Android and Mac.

For full screen, you just need to replace the sprite with current scene or layer node.

var imageSprite = new cc.Sprite(texture);
var renderer = new cc.RenderTexture(imageSprite.getContentSize().width,      
imageSprite.getContentSize().height, cc.Texture2D.PIXEL_FORMAT_RGBA8888);
renderer.setAutoDraw(true);
renderer.x = 0;
renderer.y = 0;

imageSprite.x = (imageSprite.getContentSize().width/2);
imageSprite.y = (imageSprite.getContentSize().height/2);

renderer.setSprite(imageSprite);
renderer.beginWithClear(255, 255, 255, 0, 0 , 0);
renderer.sprite.visit();
renderer.end();

var saveSuccess = renderer.saveToFile("imageName.png", cc.IMAGE_FORMAT_PNG);
1 Like
#10

BTW is there option like:

User finished level and got option to share his victory screen with share buttons on it. When pressing share button, app makes screenshot but without this share button itself and adding instead of share button for example application name label.

How to make such screenshot with changing/replacing graphical object in current scene without changing actual view to the user?

#11

@energyy

One way i can think to do that is to add all node you want for screenshot to a cc.Node without that share button.

Then you can use that node on the renderer, just replace renderer.sprite.visit(); to cc.Node.visit();

#12

Hello,
I added your code into a event function of a button, I test on iPhone 6 simulator and when i pressed the button, the varible saveSuccess was true, but no screenshot was saved in Photo of the iPhone simulator. Please tell me why?

Thank u so much for your support!

#13

@Pantoo

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

Can you try cc.log the storagePath and go to the path to check the photo?

renderer.saveToFile photo saved path should be at storagePath as default but not in Photo.

#14

@Zinitter

Am trying to save screenshot of full screen.

Thanks for the solution.

#15

@Zinitter
thanks for your support so much.
I tried your solution and the screenshot was actually saved to the storagePath.
But can you tell me how to save the screenshoot to Photo in ios Similator or a specific path in Mac OS.
thanks you again!

#16

@Pantoo

I didn’t try to save the file on other path before.

May be you can try provide a full path string when save to file to see it would save to that path or not.

renderer.saveToFile(fullPath, cc.IMAGE_FORMAT_PNG);

If that don’t work, then you may have to implement or modify the function yourself.

For iOS, saving image to Photo Album

UIImageWriteToSavedPhotosAlbum(imageToBeSaved, nil, nil, nil);

I’m not familiar with Mac.

For easy way, try modify the saveToFile function in below file should do the trick.
/cocos/platform/CCImage.cpp

bool Image::saveToFile(const std::string& filename, bool isToRGB)
#17

thank u so much

#18

btw is it possible to make screenshot of sprite/node on web?

#19

@energyy

I just tested it, the code is working on web except renderer.saveToFile which only available on JSB.

However, you can get the sprite from the cc.RenderTexture but it is upside down, so need flip it.

Here is the example code

	var renderer = new cc.RenderTexture((winSize.width), (winSize.height), cc.Texture2D.PIXEL_FORMAT_RGBA8888);
	renderer.setAutoDraw(true);
	renderer.x = 0;
	renderer.y = 0;

	renderer.beginWithClear(255, 255, 255, 0, 0 , 0);
	this.visit();
	renderer.end();
	
	var testSprite = new cc.Sprite(renderer.getSprite().texture);
	testSprite.setPosition((cc.winSize.width*0.50), (cc.winSize.height*0.50));
	testSprite.setFlippedY(true);
	this.addChild(testSprite);
#20

Argh :smiley: I need now your help again :smile:

Is there possibility to share that renderedTexture thru facebook?

There is no possibility to save it in file directly, but maybe there is some workaround.