Search the Community

Hi All, I'm developing simple image editor which is need to load a image and add texts and drawings and save the edited image. But I'm getting this exception when try to use plugin.extract.base64 method for my container. This exception is getting only when device pixel ratio is not equal to one. (PIXI version: 4.8.1) pixi.min.js:17 Uncaught RangeError: offset is out of bounds at Uint8ClampedArray.set (<anonymous>) at t.canvas (pixi.min.js:17) at t.base64 (pixi.min.js:17) Here is my code sample. PIXI.settings.RESOLUTION = window.devicePixelRatio; PIXI.settings.ROUND_PIXELS = false; var container = document.getElementById('editor-container'); this.set('pixiRenderer', PIXI.autoDetectRenderer(container.offsetWidth, container.offsetHeight, {transparent: true})); container.appendChild(this.get('pixiRenderer').view); this.set('stage', new PIXI.Container()); // Load image to pixi var texture = PIXI.Texture.fromImage(img); var image = new PIXI.Sprite(texture); this.get('stage').addChild(image); // On save image var base64 = this.get('pixiRenderer').plugins.extract.base64(this.get('stage'), 'image/jpeg', 1); Note: If not update the PIXI.settings.RESOLUTION to device pixel ratio exception will not be created. But that is applied to keep keep clarity of image and drawings when zooming the web page. If anyone can help it would be great. Thanks.

how to load a BASE 64 image in phaser 3 ? I am doing on this way function preload() { var dataURI = '''data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQY............" var data = new Image(); data.src = dataURI; game.cache.addImage('image-data', dataURI, data); } function create() { game.add.image(0, 426, 'image-data'); }

Hi, I need to create an image in run-time and then convert it to a base64 string. I can create the image with Phaser.GameObject.RenderTexture, but does anyone know how to convert it to a base64 string? Thanks a lot. Tomas

Hey all, I am trying to use a dds file as a cube texture. it works fine if i link to it in the usual way, but i am trying to instead load a file into my html5 page of which would then be turned into a cube texture as so - new BABYLON.CubeTexture(reader.result, scene); i have got this working with a normal texture as so - new BABYLON.Texture(reader.result, scene); so im wondering, is it the base64 encoding that is messing up the dds file? if so does anyone know a better way of doing this? the dds file im using is from the playground textures many thanks!

Evening Guys Im working on a game for an iso platform that houses several games. This platform handles the loading of assets and sends them back to my game as base64 assets. Im loading in 3 different types of assets: *XML *Sound *TextureAtlas my questions are these: 1) how can i load and play an audio file recieved as a base64 string? 2) how can i load and create a new XML object from a base64 string? 3) how can i create a game.load.atlasXML from base64 strings? any help or notch in the right direction is appreciated. thanks

All what i found about it is https://github.com/photonstorm/phaser/issues/3342 But nothing is clear from answer. I triying to use this.textures.addBase64('key', data); On preload where data is string 'data:image/jpeg;base64....' And on create this.add.image(400, 300, 'key'); But it not works, what i do wrong?

Hi, I've been trying to create a cube texture by using the url of texture objects created from a base64 string, but that doesn't seem to be working. Here's a playground example: https://www.babylonjs-playground.com/index.html#IH5G0H#2 Is there another way to create a cube texture, if all 6 textures have been created from a base64 string? Thanks. EDIT: Solved it myself, you can just use the base64 string instead of the textures url. https://www.babylonjs-playground.com/index.html#IH5G0H#3

Hi all, I am researching some things for my current job (html5 games-phaser) and i encountered a very interesting implementation in an online game (not sure if they use an engine). The have a json file like JSONHash but instead of serving the images as pngs the have inlined those as base64 encoded. Having a structure like the one below: { "sprite_key": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAABN ..." "sprite_key2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAABN ..." .... .... { "sprite_key":{ "frameWidth": ... .... } }}I am struggling to understand the reasons to implement it that way and because i am not sure at all, i though i should ask the community for an opinion

hello everyone im making a game with phaser and i want to take a screenshot from one scene and draw it to another by using game.canvas.toDataURL(); this is what i have tried so far in the first scene GAME.cc = game.canvas.toDataURL(); second one var img = new Image(); img.onload = function(){ var base = new PIXI.BaseTexture(this), texture = new PIXI.Texture(base); var sp = game.add.sprite(0,0); sp.setTexture(texture); }; img.src = GAME.cc; there is no error in console but the sprite is completely black !! so ... what is the problem . on stackoverflow http://stackoverflow.com/questions/29733356/draw-base64-png-data-with-phaser-js

This base64 string will not work anymore?! particleSystem.particleTexture = new BABYLON.Texture('data:image/png;base64,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', scene); I start to solve it but no solution.?!.... : BABYLON.ParticleSystem.prototype.forceDepthWrite = false;Have somebody an awnser?! greetz Alberto