Search the Community

Hi guys, Started using phaser recently for a game I am making. The only thing is, I'm trying to use a different (custom) font, something like this: https://www.google.com/fonts/specimen/Press+Start+2P Unfortunately I cannot get the font to work. I have two font files - a .png file and a .xml file (xml with config) generated by the 'littera' font generator from a .ttf file. Here is a demo I threw together to demonstrate my issue. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() { // Load the font game.load.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // Add a one second delay so that the font can load properly game.time.events.add(Phaser.Timer.SECOND, doSomething, this);}function doSomething() { // Render the text var text = "- phaser -\n with a sprinkle of \n pixi dust."; var style = { font: "65px Pixel", fill: "#ff0044", align: "center" }; var t = game.add.text(game.world.centerX-300, 0, text, style);}Any help appreciated, I'm sure I'm being really stupid but it's quite important to have the right font. I have attached the font files so that you can test the font with your solution if you want. Thanks, Matthew pixel.xml

I'm trying to build a native app with cocoon and canvas+ and have some trouble with the fonts. Everything works fine when running the game in a normal browser or in cocoon webview+. But in canvas+ mode, all text renders really small and pixelated. The code for the text: this.scoreText = this.game.add.text(pos.x, pos.y, "0", { font: "18px Arial", fontWeight: 'bold', fill: "#FFFFFF" }); this.scoreText.anchor.setTo(0.5, 0); I don't reference a .ttf or anything. Do I explicitly need to include an Arial font for it to work in canvas+ mode?

Hi.. how can use True type Font in pixi.js? can you give me any tips? thx everyone!!

Hi, I am trying to set an external font (ttf) to a phaser text for the whole weekend but the font is not changing. I am also attaching the project structure. Can someone please give some idea or suggestions on this issue. Thanks I did the below steps. Step 1: Convert the ttf font to web font using some online tool. Step 2: Add the below contents to a external css file and insert it inside the index.html @font-face { font-family: 'tamil-bibleplain'; src: url('../fonts/tamil-bible-webfont.eot'); src: url('../fonts/tamil-bible-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tamil-bible-webfont.woff') format('woff'), url('../fonts/tamil-bible-webfont.ttf') format('truetype'), url('../fonts/tamil-bible-webfont.svg#tamil-bibleplain') format('svg'); font-weight: normal; font-style: normal; } Step 3: Inside the font directory iI add the below 4 files. tamil-bible-webfont.eot tamil-bible-webfont.svg tamil-bible-webfont.tff tamil-bible-webfont.woff Step 4:Add the font to the text in the js file as below var titleText = me.game.add.text(100, 5, "Jump & Go!", {font: '20px tamil-bibleplain', fill: '#000'}); titleText.stroke = "#00AAAA"; titleText.strokeThickness = 6; titleText.setShadow(2, 2, "#333333", 2, true, false); titleText.font = 'tamil-bibleplain'; This is the project structure.

Phaser ver 2.0.3-2.0.4 ____________________________________________________________________________________________________________ NOT SOLVED YET ____________________________________________________________________________________________________________ Firstly, I'd like to ask whether bitmap fonts are faster than webfonts when rendering with strokes. ____________________________________________________________________________________________________________ QUESTION IS SOLVED ____________________________________________________________________________________________________________ Secondly, I cannot load my bitmap font. I've tried http://kvazars.com/littera/ and FontBuilder for generating the xml and atlas (also converted *.fnt to *.xml) but Phaser keeps saying that error on adding that damn font when I'm trying to place it on the scene: Uncaught TypeError: Cannot read property 'size' of undefined phaser.js:2806 PIXI.BitmapText.updateTextphaser.js:2806 PIXI.BitmapTextphaser.js:2749 Phaser.BitmapTextphaser.js:31321 Phaser.GameObjectFactory.bitmapTextphaser.js:26296 SetupGUIpopulo.js:93 StartGameplaypopulo.js:290 mainmain.js:79 Preloader.createpreloader.js:146 Phaser.StateManager.loadCompletephaser.js:14388 Phaser.SignalBinding.executephaser.js:15296 Phaser.Signal.dispatchphaser.js:15174 dispatchphaser.js:14941 Phaser.Loader.nextFilephaser.js:44211 Phaser.Loader.xmlLoadCompletephaser.js:44162 _xhr.onload That trouble almost stopped my development process. It is really annoying. I guess the font was not really loaded. But why there was no Phaser log error that says what is really wrong? I've found similar topics: http://www.html5gamedevs.com/topic/3688-how-to-make-bitmap-fonts-from-regular-fonts/, http://www.html5gamedevs.com/topic/1923-how-to-generate-xml-png-for-bitmaptext/, but none of them contain the real solution that worked for me. ____________________________________________________________________________________________________________ Sorry for my stupidness, the second question is solved. I was adding the bitmapText with the different font key.