Maria Posted May 7, 2015 Share Posted May 7, 2015 Hi there! Is it possible to add to a text a CSS class? I'd like to render the text with style from CSS instead of style "inline" .. I know I can just use javascript to add the text, but is there a "phaser-way" ? Or is it total without a difference if I use phaser functions or javascript directly to add the text? Link to comment Share on other sites More sharing options...
drhayes Posted May 7, 2015 Share Posted May 7, 2015 What do you mean render text with a style instead of inline? Like, you want a line break as if it were a block? Almost any manipulation of text I can think of is covered by a combination of Phaser.Text and some clever Phaser-ing. What effect are you after? Can you describe it in more detail? Link to comment Share on other sites More sharing options...
Maria Posted May 8, 2015 Author Share Posted May 8, 2015 Thanks! No I meant that I want to add text to the game via phaser, but style it in CSS. The "inline" in brackets meant, that when I add text via phaser, I have to give the styling elements with the text, like font: "13px Arial", fill: "#fff", align: "center"like an "inline-css". I think this is not possible, since the text, which is added to the game via phaser, is not an HTML Dom element. It is something rendered by the canvas element? But it is somehow possible to include CSS classes to phaser? I'd like the texts of the game to adapt the webpage's CSS without declaring them in phaser again.... Link to comment Share on other sites More sharing options...
trasheater Posted May 8, 2015 Share Posted May 8, 2015 If you look at this example: https://phaser.io/examples/v2/text/colored-characters You will see that there is a var called "style". This allows you to set up all your styles in a variable that can be reused on different text elements that you are adding. Here is an example with a few different "styles" set up: http://jsfiddle.net/trasheater/ktyytjw3/ Link to comment Share on other sites More sharing options...
grumpygamer Posted May 8, 2015 Share Posted May 8, 2015 No you can't add a CSS style to a canvas element Link to comment Share on other sites More sharing options...
drhayes Posted May 8, 2015 Share Posted May 8, 2015 Depending how complicated you want to get you can use some calls to getComputedStyle to read the styles... but, yeah, you're probably better off just duplicating them in both places rather than engineering something complicated here. Link to comment Share on other sites More sharing options...
ForgeableSum Posted May 8, 2015 Share Posted May 8, 2015 This is why IMO it's best to keep all UI in elements outside canvas. At least if your game is designed for desktop. Link to comment Share on other sites More sharing options...
Maria Posted May 12, 2015 Author Share Posted May 12, 2015 Thank you all for your answers! Link to comment Share on other sites More sharing options...
Recommended Posts