Search the Community

Unfortunately, the official example does not work as soon as you add a filter: https://pixijs.io/examples/#/demos-advanced/screenshot.js In my case, I'm applying a shader via a filter and getting a blank screen. There is a workaround mentioned here: https://github.com/pixijs/pixijs/wiki/v5-Hacks But unfortunately, the workaround isn't enough to get me started? Does any an example, that is, working code I can look thru? Thanks!

Hello everyone! I'm trying to accomplish the following task: - When there is a change of state I want to take a screenshot of the canvas, show to the user while the state is changing. Now I read that I should use canvas.toDataURL to obtain the base64 encoded Image. I can't understand the steps to accomplish this task. 1) I save the URL with canvas.toDataURL(). 2) I should convert the base64 to an image right? 3) I should add the Image to the cache OR i Should do a load.image? 4) The operation should be async right? Because in my trying the debugger console is saying that the image hasn't been retrieved and I don't understand how I can make toDataURL (or the conversion from base64 to png) async because there are no methods. Thanks for the help!

Is there any way to render the tilemap layers and get the image? I just want to do a static minimap (it will not display changes in the world). Initially, I tried to do this with a camera that looks at the game world with the ignoring of unnecessary objects. It turned out, but so-so, you need to carefully select the scale that would not be render artifacts. At the moment, the mini-map is in another scene and accordingly it does not have access to the render of another scene, i.e. option with the camera does not work. So I tried using the built-in renderer and its screenshot function. As I did, at the initialization stage of the map, I create an additional game instance with the world size equal to the minimap (in other words I make the game in the game) and try to make its screenshot. At the result it comes with base64, but in my case it is invalid, and the expected size should be an order of magnitude greater. I suspect that because of the async of both the initialization of my map and the map itself in the map, this does not happen until the end. GameInGame code: const startMiniGame = tileMap => { const factor = 10; function preload() { this.load.image('tiles', tilesheet); } function create() { const mapData = Tilemaps.Parsers.Tiled('map', tileMap, undefined); this.map = new Tilemaps.Tilemap(this, mapData); const { widthInPixels, heightInPixels, tileHeight, tileWidth } = this.map; this.tiles = this.map.addTilesetImage('maptile', 'tiles', tileWidth, tileHeight, 1, 2); MapService.Layers.forEach(([layer]) => { this.map.createDynamicLayer(layer, this.tiles, 0, 0); }); this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor); this.cameras.main.setZoom(factor); } return { type: Phaser.CANVAS, width: tileMap.widthInPixels / factor, height: tileMap.heightInPixels / factor, scene: { create, preload } }; }; And initialization: // method of MapService createMiniMapSnaphot = tileMap => { // there I can catch error event then. // so, game.renderer.snapshot works but gives something wrong this.scene.sys.textures.on('onerror', (...args) => { console.error('onerror', ...args); }); const game = new Phaser.Game(startMiniGame(tileMap)); game.renderer.snapshot(image => { this.scene.sys.textures.addBase64('s', image); }); }; Perhaps someone who has encountered such a task or has some ideas?

Hi, I wanted to just ask if something is possible before putting in the work and finding out it isn't - Can I use the null engine to generate screenshots with full color? the only reason i am questioning if it is possible is because when i read this, i saw this line - With textureSize, you can define the size of all textures (which will be all black) used by the NullEngine. so does this mean if it is possible to produce a screenshot, will it just be a black image? many thanks, John.

I build a scene and run the following: BABYLON.Tools.CreateScreenshot(engine, scene.activeCamera, 400); The resulting, beautiful 400x400 png is entirely transparent. What could cause this?

Hello Experts I need your Best Guidline I need to know Is it possible to take 3d Model Canvas Screenshot ? And How Its Work can u show me demo ?

Hi. I'm back in bussines , and I have a little question for you. Can I take a scene screenshot without the new GUI? Can I disable it before print and enable it again or something like this? Here is a playground: https://www.babylonjs-playground.com/#3GPEIL Make width and height 0, or scale each elements it's not a solution. Thank you

Hi, CreateScreenshotUsingRenderTarget gives different result from the canvas and CreateScreenshot. Playground: https://www.babylonjs-playground.com/#L2RPV8 The wireframe clone is hidden by setting layerMask, but still appears in the image created by CreateScreenshotUsingRenderTarget. CreateScreenshot works. Also, CreateScreenshotUsingRenderTarget of Babylon.js 2.5 works.

I'm trying to screenshot the canvas. I'm using this: BABYLON.Tools.CreateScreenshot(engine, camera, 512) and I just get a white image. Is it still working or do I need to set up the engine in a special way?

Hi, I'm getting blank screenshots only, meaning: a PNG with full transparency. The size is correct though. //Somewhere a scene is loaded var scene = null; BABYLON.SceneLoader.Load('', 'data/data.babylon', engine, function(newScene){ scene = newScene; // some stuff } //Some features like camera, lights are added... // Finally somwhere the render loop engine.runRenderLoop(function(){ scene.render(); }); // and then manually in the js console or via events the screenshot command is triggered: BABYLON.Tools.CreateScreenshot(scene.getEngine(),scene.activeCamera, {"precision": "1"}); I tried tracing the steps this function does in the babylon.tools.ts and entered the necessary commands into the javascript console: var screenshotCanvas; if (!screenshotCanvas) { screenshotCanvas = document.createElement('canvas'); } screenshotCanvas.width = 630; screenshotCanvas.height = 1366; // checked here and screenshotCanvas is set to '<canvas width=... height=... >' var renderContext = screenshotCanvas.getContext("2d"); renderContext.drawImage(engine.getRenderingCanvas(), 0, 0, 1366, 630); // engine.getRenderingCanvas() returns '<canvas class=".." id=".." width="1366" height="630" >' // it's the correct babylon canvas //Then I checked via renderContext.getImageData(400,300,200,1); // (random values) //if there was any value set to anything else then 0. But no, all the values are 0. For some reason there is no image drawn at renderContext.dawImage(). screenshotCanvas remains blank and I only receive the blank png engine is set (I also used scene.getEngine()), scene is set too (and has a lot of data). So is scene.activeCamera. There are no error messages. This looks like a bug. Although I can't get my head around it. Unfortunately I can't post the whole code since it's work related (and mostly done by a third party company). Would be way too large I guess. But as far as I can tell there's nothing that would explain it. The scene is used to render everything. Babylon v.2.5 is used. And chrome/chromium (the final product will use the chromium embedded framework to display the webgl animation within an native application)

Hi everybody ! First of all, I'm not sure if I should begin a new thread or up these ones : http://www.html5gamedevs.com/topic/19285-create-screenshot-with-post-processing/ http://www.html5gamedevs.com/topic/17404-babylon-screenshot/ With the new support of WebGL 2 by BabylonJS, I got interested in the multisample render target. Until now, I used my own version of createScreenshotUsingRenderTarget() function which performs MSAA manually (actually, it pixel perfect downscales a 4x bigger renderTargetTexture than the requested size). Now, I would like to rewrite it using the latest available features. What should I do to get an antialiased screenshot using multisample render target ? Just increasing the samples property of the RenderTargetTexture is not enough, I'll always get the following error : [.Offscreen-For-WebGL-098CA170]GL ERROR :GL_INVALID_OPERATION : glReadPixels: Which comes obviously from this line : var data = engine.readPixels(0, 0, width, height); https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L627 Here is a PG where I copy/pasted a lighter version of createScreenshotUsingRenderTarget() function. The only real difference is the sampleCount parameter which is used to increase the samples property : http://www.babylonjs-playground.com/#SDTEU#29 Just press 1, 2, 3 or 4 key to call the createScreenshot() function with 1, 2, 3 or 4 samples. Thanks for your help !

Hi, Thanks for reading. In my phaser game I need to share the screenshot of the game. Its working perfectly in CANVAS mode but its not working in WEBGL mode. I use the below code to get the screenshot and convert to base64 image. var gl = SequentialTap.game.renderer.gl; var buf = new Uint8Array(SequentialTap.game.width * SequentialTap.game.height * 4); gl.readPixels(0, 0, SequentialTap.game.width, SequentialTap.game.height, gl.RGBA, gl.UNSIGNED_BYTE, buf); // Covert Buffer Array to Base64 Image var binary = ''; var bytes = new Uint8Array(buf); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } base64Image = window.btoa(binary); But the output (base64Image in below code) is generated as below. But this value is not the base64 image format AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wA...8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/ In CANVAS mode I am getting the below output, which is working correctly. data:image/png;base64,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 Can someone please tell me how I can fix the issue with the WEBGL mode. Thanks for your help. Thanks Joseph

Hola! I wanted to take a screenshot of my game and download it to the user's device. I have this working, almost except that on my iPhone5s in Safari, the downloaded image is upsidedown. To get the screen shot I use my code below (specifically, the toDataURL() function). On my desktop, the downloaded image is oriented the right way. But not in Safari mobile. I don't have Safari Desktop to try it there, so I'm not sure if mobile vs. desktop makes a difference. Has anyone dealt with this? Know of any work arounds? Thank you in advance! saveCanvas : function () { var link = document.createElement('a'); link.href = this.game.canvas.toDataURL('image/png'); link.download = 'Highscore.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }

Time to have some fun. Post Screenshots of what you are working. Talk a little about the project if you want. It's a basic TD. And a sprites preview panel to adjust animations fps, hit box, pivot point etc.

Hey Babylon citizens! Hope you all are doing pretty good I'm trying to use Babylon's createscreenshot function in order to get picture from scene at certain position of the camera. And my problem that when I'm using ColorCorrectionPostProcess my screenshot is just black. Without this line - OK. And when I'm also using ParticleSystem it is not shows up on my screenshot. Could it be any issue with that? Or it is just something wrong with my code? Cannot create any PlayGround example because my function uses color palette from file -> var postColorProcessHighContrast = new BABYLON.ColorCorrectionPostProcess('color_correction', 'effects/highcon.png', 1.0, camera, null, engine, true); Thank you for your help.

Hello guys! So I have a game which is using phaser.CANVAS and what I'm trying to do is the following: When a button is clicked on a particular state, a certain region of the canvas is captured and then displayed it on the canvas at a given location. I've been able to capture the entire canvas using toDataURL() but how do I work with this imageURI? Difficulties: - Cropping the image - Displaying the image without preloading (the image has just been captured) - Saving the image for future use Any input is appreciated. -Kapi

Here I want to show you a slotmachine I build with Phaser. It has a PHP-Backend to generate the games and has a lot of options to make some gamesettings. The slot has 5 wheels with 9 symbols, 4 different autoplayoptions and a fastplay mode. I added a screenshot function, that a user can make a screen, if he gets a big win. You can test the game here: http://adf.ly/1SnFai

Hello everyone! I have this pretty big scene, heavy on polygons and textures, and I need to make a screenshot in high quality. I'm using Tools.CreateScreenshot method, explained in this tutorial, which works well for small/medium size (I've managed to extract an image up to 1344x756px, of 1.48MB), but when I try to extract a bigger image, nothing happens at all, no matter how long I wait. I also tried this playground I found in this topic, and with this scene I can extract images of 5000x5000px. So does this happen to my scene because it's too big? Any ideas to make it work? Thank you!

Hi guys, sorry if this has been covered, but I've been going around in circles on Google today. I'm trying to render a selection of objects (screenshot) and resize said render/texture so that I can create a thumbnail. I have successfully been using renderTexture.render(), but I run into problems when calling 'resize' - basically, my texture is cleared. Excuse me if I'm being dumb. See code below. this works... var texture: PIXI.RenderTexture = this.game.add.renderTexture(1024, 768, "key", true);texture.render(container, new PIXI.Point(0, 0), true);//text.resize(width, height, true);this.game.add.sprite(0,0,texture); this does not work... var texture: PIXI.RenderTexture = this.game.add.renderTexture(1024, 768, "key", true);texture.render(container, new PIXI.Point(0, 0), true);text.resize(width, height, true);this.game.add.sprite(0,0,texture);

Hello, currently I am trying capture the screen with webgl enabled. The code for this is: keydown: function (key){ (key === '1'){ window.open(game.system.canvas.toDataURL()); }}This opens a new tab with a black rectangle of the same size as the game resolution, but nothing more. A way to make this works? Thanks. I'm using panda.js.

Okay so I figured out how to generate a base64 image out of the canvas, send that base64 string through the network and save it in the server using NodeJS. Now the question is: How to take a screenshot ( .toDataURL( ) ) from just a specific section or phaser group, not the entire canvas. So someone told me in the PixiJs forum that I would need to create a extra canvas, add the content there and then generate the base64 data again using .toDataURL only to that temp canvas. So this is what I am doing. crop:function(){ var copyText = this.photos.generateTexture(1,this.game.renderer); var copy = new Phaser.Sprite(this.game,0,0,copyText); var graph = new Phaser.Rectangle(0,0, 175,300); copy.cropRect = graph; copy.updateCrop(); // copy.scale.setTo (0.5,0.5); //Scale the sprite, this could be useful later var second_game = new Phaser.Game(175, 300, Phaser.CANVAS, 'second_game'); second_game.preserveDrawingBuffer = true; second_game.add.existing(copy); this.postImage(second_game); //Generates the base64 image }As you can see.. I create a second_canvas, and add a cropped sprite to the canvas, but it doesn't add anything. When I take the screenshot its all black, and even the html element on screen is black. Why is it not rendering anything ??? I've tested this without the second canvas.. and the sprites gets added to the original game canvas properly cropped. The problem is the second_canvas that doesn't show anything. I also tried no specifing the html element in the second game constructor: new Phaser.Game(175, 300, Phaser.CANVAS); I heard you can't have 2 phaser instances in the same page, unless they are using CANVAS as the renderer. So my main game is running Phaser.AUTO (WebGL) and the second_game in running Phaser.CANVAS postImage Function postImage: function(s_game){var image64 = s_game.canvas.toDataURL('image/png');console.log(image64);$.ajax({ url: 'http://localhost:3000/kente' dataType: 'json', type: 'post', contentType: 'application/json', data: JSON.stringify( { "image64": image64}), processData: false, success: function( data, textStatus, jQxhr ){ console.log(JSON.stringify( data ) ); }, error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); }});}ohh.. and Im also getting this in the console Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'b.Sprite._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.CanvasRenderer.renderDisplayObject @ phaser.min.js:5b.CanvasRenderer.render @ phaser.min.js:5c.Game.updateRender @ phaser.min.js:9c.Game.update @ phaser.min.js:9c.RequestAnimationFrame.updateRAF @ phaser.min.js:14c.RequestAnimationFrame.start.window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:14

Hi, I'm trying to make a screenshot from my application with canvas.toDataURL() but I've an empty image in result. Is there a special method to call to achieve that ? My code is very simple : var engine = new BABYLON.Engine(myCanvas);...// Triggered by an eventvar base64 = myCanvas.toDataURL();var img = new Image();img.src = base64;return img;The image is transparent. Is it normal ? How can I create a correct screenshot of the current scene ? Thanks.