ttf with Cocoonjs and Easeljs

[Jorge]

I include a ttf archive in the fonts directory of my game and load it in my index.html:

 

       

@font-face {    font-family: "Emulogic";    src: url(fonts/Emulogic.ttf) format("truetype");}h1 { font-family: "Emulogic", sans-serif }

Then I use it in my Easeljs code:

txt_score=new createjs.Text("SCORE "+score,"bold 12px Emulogic","black");ingame_screen.addChild(txt_score);

This works great, but when I use Cocoonjs to wrap the game, the ttf does not load. Any tip to solve the problem?

[rich]

Probably better off asking Ludei directly, but my guess would be that Cocoon doesn't support ttf fonts.

[benny!]

@Jorge: Does the official true type demo works for you?

[Jorge]

@Jorge: Does the official true type demo works for you?

Yes, the demo does work. I think the problem is with "createjs.Text". 

I'll try to add text the same way it's done on the demo. I'll keep you posted.

[Jorge]

Probably better off asking Ludei directly, but my guess would be that Cocoon doesn't support ttf fonts.

Hi Rich, thanks for your reply. It seems like Cocoon does support ttf fonts, it just doesn't work with Easeljs. 

If I'm not able to implement it in another way, I'll contact Ludei.

[Jorge]

I don't know exactly what I'm doing wrong, but I'm trying to use ttf fonts the same way it's done in the official demos, and I can't still get it to work. This is the code I'm trying now:

var mycontext=stage.canvas.getContext("2d");mycontext.font="bold 12px Emulogic";mycontext.textAlign="center";mycontext.fillStyle = "#006600";mycontext.fillText("This is a custom font!", stage.canvas.width/2, 321);

[dTb]

Sorry, I didn't saw your question before, I don't know if you still have the problem, but just in case, there is 3 things you can check:

- The ttf file have to be in a specific directory, I don't remember exactly the name, maybe just /fonts at the root of your project, just check the demo app to be sure.

- If your are testing remotly via the launcher, ttf fonts are working ONLY if the url point to a zip file of your project, it doesn't work if you just point to your index.html.

- Cocoonjs doesn't like font sizes with floating point. So everytime use an integer pixel size value.

- I don't remember if I got an issue with this, but just in case, check also the difference between the font name inside the file (when you open the font in a font previewer) and the file name. I think the right value to use is the filename, but just in case if none of the previous tips worked, you can try the core font name. I also don't remember if the "bold" attribute is supported.

[Jorge]

Sorry, I didn't saw your question before, I don't know if you still have the problem, but just in case, there is 3 things you can check:

- The ttf file have to be in a specific directory, I don't remember exactly the name, maybe just /fonts at the root of your project, just check the demo app to be sure.

- If your are testing remotly via the launcher, ttf fonts are working ONLY if the url point to a zip file of your project, it doesn't work if you just point to your index.html.

- Cocoonjs doesn't like font sizes with floating point. So everytime use an integer pixel size value.

- I don't remember if I got an issue with this, but just in case, check also the difference between the font name inside the file (when you open the font in a font previewer) and the file name. I think the right value to use is the filename, but just in case if none of the previous tips worked, you can try the core font name. I also don't remember if the "bold" attribute is supported.

Hi dtb,  

the ttf is in the correct diectory, with the same name inside the file, but I'm pointing Cocoonjs to my index.html so that could be the problem. I'm testing it tonight and I'll keep you updated. Thanks for your help

 

Edit: Well I've already tested it, and it works!! You are right, I still can't use bold fonts but that's not big deal. Thanks!!