During my upcoming game development, I have realized that paying a graphic designer for every single thing is quite time-consuming and also a bit expensive. I needed a simple button for a fullscreen toggle. Some time ago, I needed to rework all buttons in my game. All buttons have got text inside the image, but I needed to separate it, because of localization. So I separated all text from image graphics and create JSON i18n files for every language that I wanted to include in the game. Ok well, but what about icons? Do I need to pay every time to the graphic designer when I need a new button? I have a button image (background), I need only an icon. Yes, I can create icons on my own. Or? Hmmm, There is another approach. What about using some web icon fonts like FontAwesome, Google Material Design Icons, or similar? Yes, that way exists!

Let’s say, we have a working Phaser 3 project. First download .tff font from the original Material Design Icons repository https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.ttf. Add font inside your project, I put it into the assets folder. Now we need to load font to be able to use it inside the Phaser project. We can load it in a CSS file and then create a fake HTML element, but there is a better newer approach called CSS Font loading API. Thanks to this API, we can dynamically load fonts in Javascript. So we load font.

const font = new FontFace("Icons", "url('./assets//MaterialIcons-Regular.ttf')");
(document.fonts as any).add(font);
font.load();

document.fonts.ready.then(() => {
      // Use your font here
});

The first argument of FontFace is font name, it is user-defined, and you can use your own idea. The second argument is the path to your downloaded font, as I said, I put it into the assets folder. Then you need to add it into document fonts and load it. Font loading is an asynchronous operation, so we can not use it immediately, but need to wait for the font to be loaded. We can use our font in ready promise, or we can load it in some preload state during assets loading.

Now we can pick our desired icon on https://fonts.google.com/icons?selected=Material+Icons+Outlined:home:&icon.style=Outlined and copy the Code point.

Finally, we can create our material icon in Phaser.

const text = this.add.text(0, 0, '\ue8b8', {color: '#6002EE', fontSize: '50px', fontFamily: 'Icons', padding: {left: 5, right: 5, top: 5, bottom: 5}});

Important here is the content of the text (3rd argument), which is copied code point with \u prefix, which means Unicode. Also, we need to specify, that text uses our font, see font family, with our defined font name. Almost everything is good, but sometimes some icons got their top cut off. I do not understand why, but we can fix it using padding, and try to experiment with this property. I used 5px.

That was not so hard, and I think, I will use this approach more often. The good part is, I can combine it with the button background image and style icon in Phaser and avoid the need for a graphic designer. Pretty cool, isn’t it? You do not need to use only Material design icons, but any font icons on the web, like Font Awesome… Just care font license!

Recently I started to learn and program some simple demo applications (advertisement portal) in Vuejs. As an Angular developer, I am surprised by the number of ways Vue offers to achieve the desired goal. I think it is sometimes good, sometimes bad, to have multiple possibilities. Vue offers multiple approaches how to making components. Recently Vue developers add a new feature called the Vue Class component. It is the approach how to making Vue components using ES6 classes, it means using inheritance, methods, properties, and all OOP principles. It is great for me, It is more intuitive for me than plain Javascript composition API or options API.

However, when there is the great Class component feature, documentation and guides are still written using old principles and it is hard for newcomers to join principles together. At least it was hard for me. I was completely lost on how to access router params of the Vue router in the Class component and how to define these params. I needed to experiment a bit because I was unable to find a solution that fits me. I mean Vue3 application using Typescript, Vue class component, and Vue router.

Router params in class component simple solution

Yes, it was hard for me, but the completed solution is quite simple. We need to define a route as follows:

{path: '/edit-advertisement/:id', name: 'Edit Advertisement', component: EditAdvertisement, props: true}

We defined route param placeholder in the path using :id and also it is important to set props property to true. Props property means that the router parameter will be passed to the Vue component as a property (surprisingly). Then in your Vue class component, you can access it:

import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    id: String
  }
})
export default class EditAdvertisement extends Vue {

  mounted() {
    console.log(this.id);
  }
}

We defined id prop in Options decorator. If you do this, you can access this router param in this class using this keyword. Exactly the same as normal component props. So if you type <APP_URL>/edit-advertisement/1 you get 1 in your component.

As you can see, it was quite a simple solution, but when I started to learn Vue3 I was unable to do it because there were solutions on the internet and StackOverflow without the Vue class component and, to be honest, I was confused from the number of possibilities that did not work together.