Editing an image in real time?

[joshcamas]

Hello guys!

 

I've been working on a project that works as a terrain editor. One large problem however, is editing the textures in real time - aka texture painting.

 

Is this possible in the browser? Is there any code somewhere that has this working at all?

 

Thanks!

[GameMonetize]

You can use DynamicTexture for that:

var texture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);texture.hasAlpha = true;var textureContext = texture.getContext();var size = texture.getSize();var text = "Hey I can write text on my texture!!";textureContext.clearRect(0, 0, size.width, size.height);textureContext.font = "bold 120px Calibri";var textSize = textureContext.measureText(text);textureContext.fillStyle = "white";textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height - 120) / 2);texture.update();

[joshcamas]

oh, sweet! Thanks!

 

EDIT: Hmmmm....

 

How does one use this, other than drawing text?

 

EDIT 2: OHHHH the texture is like a canvas? So you can draw images like a canvas!? If so, that's amazing - I once worked on a 2D Javascript engine! Reuse code time! Huzzah!

 

When I load a image using the assets manager:

this.binaryTask = Game.assetsManager.addBinaryFileTask("binary task", "../Assets/map.png");this.onSuccess = function (task) {	this.testImage = task.data;}

And then, after everything is loaded, use the drawImage() function on it's context, it gives this error: "Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. "

 

Is task.data a image, or not?

[GameMonetize]

Yes you can use everything you can do on a 2d Canvas

 

Using addBinaryFileTask returns an typed array and not an image

[GameMonetize]

With the very last version, you can now do this:

this.binaryTask = Game.assetsManager.addImageTask("image task", "../Assets/map.png");this.onSuccess = function (task) {	this.testImage = task.image;}

[joshcamas]

Hmmm....

 

I can't seem to get it working:

var imageTask = Game.assetsManager.addImageTask("image task", "../Assets/map.png");imageTask.onSuccess = function (task) {	this.testImage = task.image;	console.log("worked!");}		imageTask.onError = function (task) {	console.log("error");}

Nothing gets logged!

 

Also, one nice feature for the assetsmanager could be if there is nothing to load just run onFinish()

[GameMonetize]

Oups...I must be tired

 

Bug fixed

[joshcamas]

Ahhhh thanks so much!