font positioning problem on cocoon.js but not in chrome

[ghostrifle]

Hey guys,

 

I came accross a strange problem. In my game prototype, I have some sprites which contain one font

the_sprite->addChild(the_text)

now, I apply only a relative x,y value to the text so it's positioned in the center of the sprite. No problem. Works as expected in every browser except cocoon.js.

 

 

In cocoon.j I had to apply some scaling to the stage:

if(is_cocoon_js){        canvas = document.createElement(navigator.isCocoonJS ? 'screencanvas' : 'canvas');        var appWidth = 320;        var appHeight = 480;                canvas.style.cssText="idtkscale:ScaleAspectFill;";        canvas.width = window.innerWidth;        canvas.height = window.innerHeight;                        document.body.appendChild(canvas);        renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight, canvas);        game_stage = new PIXI.DisplayObjectContainer();        game_stage.scale.x = window.innerWidth / appWidth;        game_stage.scale.y = window.innerHeight / appHeight;        console.log("scale: " + game_stage.scale.x + "x"+game_stage.scale.y);

All sprites are getting displayed correctly, except the text in the sprites. Here's the code how I created the sprite with the text:

function GameFieldEntity(game_field,texture,x,y,number) {  this.game_field_object = game_field;  PIXI.Sprite.call(this, texture);  this.position.x = x;  this.position.y = y;  console.log("entity pos " + this.position.x + "x" + this.position.y);  this.number = number;    this.text = new PIXI.Text(this.number, {font: "bold 30px Helvetica", fill: "#000000", align: "center", stroke: "#FFFFFF", strokeThickness: 3});  this.text.anchor.x = 0.5;  this.text.anchor.y = 0.5;  this.text.position.x = (30 * this.game_field_object.stage.parent.scale.x);  this.text.position.y = (30 * this.game_field_object.stage.parent.scale.y);  this.addChild(this.text);  console.log("entity text pos " + this.text.position.x + "x" + this.text.position.y);    if(navigator.isCocoonJS){ // this section gets called in cocoon.js    this.text.position.x += this.position.x;    this.text.position.y += this.position.y;    console.log("cocoon.js entity text pos " + this.text.position.x + "x" + this.text.position.y);  }

No matter what I try, the text is always misplaced. In the beginning

  this.text.position.x = (30 * this.game_field_object.stage.parent.scale.x);

was

  this.text.position.x = 30;

this worked in chrome etc but not in cocoon.js

 

Then I added the navigator.cocoonjs condition if may have something to do with the scaling. But no matter what I do, it doesn't work. 

Here's also a screenshot to visualize my problem.

 

[xerver]

sizes for PIXI.Text objects are calculated by using DOM elements that may not exist on CocoonJs. I know this is an issue in Ejecta, and believe the same applies to CocoonJs, unless I am mistaken. Is there anyway you can use a bitmap font instead?

[ghostrifle]

Hey! Thanks for your answer.

 

I found the problem this morning.

this.text.anchor.x = 0.5; this.text.anchor.y = 0.5;

Just use y:0 x:0 for the anchor of the text and it works! This seems to be a problem related to the scaling on cocoon.js