Text Rotation

[Ganzimaro]

All the good times of the day. When create the interface was necessary to rotate the text, but the artifacts appear when it turning. Are there any ideas how to solve the problem?


Code and a screenshot below.

 

Spoiler

var FH_SceneMenu_create = Scene_Menu.prototype.create;
Scene_Menu.prototype.create = function() {
this.createBackground();
FH_SceneMenu_create.call(this);
this._commandWindow.x = 475;
this._commandWindow.y = 31;
this._statusWindow.x = 0;
this._statusWindow.y = this._commandWindow.height + 31;

this._goldWindow.x = 60;
this._goldWindow.y = 5;
};

Window_Gold.prototype.windowWidth = function() {
return 240;
};

Window_Gold.prototype.windowHeight = function() {
return 50;
};

Window_Gold.prototype.drawCurrencyValue = function(value, unit, x, y, width) {
this.resetTextColor();


var bitmap = ImageManager.loadFakeHero("menu/MenuIcon");
var pw = 50;
var ph = 50;
var sx = 50 % 50 * pw;
var sy = Math.floor(50 / 50) * ph;
this.contents.blt(bitmap, sx, sy, pw, ph, x, y);

this.drawText(value, x + 65, y + 8, width - unitWidth - 6, 'left');

this.rotation = 0.2;

};

Spoiler

Image rotate got without artifacts using the code:
 

Spoiler

	this._Money_Sprite = new Sprite(ImageManager.loadFakeHero("menu/MenuIcon"));
	this._Money_Sprite.x = 50;
	this._Money_Sprite.y = 50;
	this._Money_Sprite.anchor.x = 1.0;
	this._Money_Sprite.anchor.y = 1.0;
	
	this.addChild(this._Money_Sprite);
	this._Money_Sprite.rotation = 0.2;

 

[Zalerinian]

Perhaps try setting the scaling mode to smooth, rather than nearest-neighbor (which often results in pixelation). I'm not really sure if it will help, but it's worth a shot.

    this._Money_Sprite = new Sprite(ImageManager.loadFakeHero("menu/MenuIcon"));
	this._Money_Sprite.x = 50;
	this._Money_Sprite.y = 50;
	this._Money_Sprite.anchor.x = 1.0;
	this._Money_Sprite.anchor.y = 1.0;
    this._Money_Sprite.bitmap._baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;
	
	this.addChild(this._Money_Sprite);
	this._Money_Sprite.rotation = 0.2;

 

[Ganzimaro]

Perhaps try setting the scaling mode to smooth, rather than nearest-neighbor (which often results in pixelation). I'm not really sure if it will help, but it's worth a shot.

Thanks for the help, but unfortunately, it does not work. No matter how many big text initially, artifacts are present.
I also tried to change the course of action: zoom, rotate, draw.
The result is the same in any order.


=====
Since with the image rotation works. I thought to display each number the text as an image. But is it possible to convert the text into an image by the code, or only one way to use additional images?
=====
Also i find this plugin, but i don`t understand how it works...
 

 

[Zalerinian]

@Ganzimaro


it is possible, but I'm not quite sure how efficient it is, so I wouldn't do it too often. You can convert any bitmap into an image, which in theory you should be able to convert back into a bitmap that is a copy of that other bitmap. I'm not quite sure this will make the end result better, however. Try something like this:


var bitmap = new Bitmap();
bitmap._image = new Image();
bitmap._image.src = this._Money_Sprite.bitmap.canvas.toDataURL();
bitmap._onLoad(); // <- bitmap should now be a copy of the original bitmap
this._MoneySprite.bitmap = bitmap;




Alternatively, there is a function that can be used to rotate the context that draws things onto bitmaps. An untested example would be the following:


Bitmap.prototype.drawRotatedText(rotation, text, x, y, mw, lh, align) {
var context = this._context;
context.rotate(rotation);
this.drawText(text, x, y, mw, lh, align);
context.rotate(0);
}


Unfortunately, context.save can only save one state, so we have to assume and hope that the previous rotation was 0.

 

[Ganzimaro]

@Zalerinian


Sorry if I ask stupid questions, but I need to understand it.
Firstly: how can we add text to a bitmap? EDIT: Or exactly canvas.
And secondly: how curectly use second code, because all that i have, it`s "rotate - not a function"?

 

[Ganzimaro]

@Zalerinian


OK, here what we have.
This code base on your first, but artifacts still present:
 

Spoiler

this._Money_Sprite = new Sprite();
this._Money_Sprite.bitmap = new Bitmap();

var money_canvas = this._Money_Sprite.bitmap.canvas;
var ctx = money_canvas.getContext("2d");

ctx.canvas.width = 250;
ctx.canvas.height = 50;
ctx.fillStyle = "white";
ctx.font = "24px Calibri";
ctx.fillText("8.746.029", 0, 50);

var bitmap = new Bitmap();
bitmap._image = new Image();
bitmap._image.src = ctx.canvas.toDataURL();
bitmap._onLoad();

this._Money_Sprite.bitmap = bitmap;
this._Money_Sprite.x = 250;
this._Money_Sprite.y = 50;
this._Money_Sprite.anchor.x = 1.0;
this._Money_Sprite.anchor.y = 1.0;
this.addChild(this._Money_Sprite);
this._Money_Sprite.rotation = 0.0715;

And next code, where use canvas in canvas method, but it not display:
 

Spoiler

this._Money_Sprite = new Sprite();
this._Money_Sprite.bitmap = new Bitmap();

var ctx = this._Money_Sprite.bitmap.canvas.getContext("2d"),
osCanvas = document.createElement("canvas"),
osCtx = osCanvas.getContext("2d");

osCanvas.width = 250;
osCanvas.height = 50;

osCtx.font = '24px calibri';
osCtx.strokeStyle = "black";
osCtx.lineWidth = 3;
osCtx.strokeText("8.746.029", 10, 50);
osCtx.fillStyle = "white";
osCtx.fillText("8.746.029", 10, 50);


ctx.width = 250;
ctx.height = 50;
ctx.translate(250*0.5, 50*0.5);
ctx.rotate(0.0715);
ctx.drawImage(osCanvas, 0, 0);

Is any idea what`s wrong?

 

[Ganzimaro]

Code is completed. Later, I will lay out the appropriate section of the forum, or to make a plugin.