PlayCanvasでCanvas Font使った日本語の装飾をする

### はじめに

はが(@mxcn3)です。
アドベントカレンダーの2日目に、こちらの記事を書かせていただきました、[PlayCanvasで開発をする際に便利なリンク集（2022年版)
](https://qiita.com/yushimatenjin/items/1c1a2e84701d840ed6b3)本日からはアドベントカレンダーの空いたところで、PlayCanvasを触っていて出てきたTipsのような内容を書いていきます。


動的にフォントを使用する方法については、こちらを御覧ください。
- [記事内のプロジェクト](https://playcanvas.com/project/1015926/)
- [Exmaples　- Text Emoji](https://playcanvas.github.io/#/user-interface/text-emojis)
- [Examples - ソースコード text-emojis.tsx](https://github.com/playcanvas/engine/blob/6424d6786c5f78853221b7177dc9da887fda410b/examples/src/examples/user-interface/text-emojis.tsx)
- [Canvas Font Examples](https://playcanvas.com/project/702920/overview/canvas-font-example)

## Canvas Fontを使った日本語の装飾をする
PlayCanvasでは、動的にフォントを書き換えることができます。
文字の表示（Elementコンポーネント）に設定できるフォントのアセットは２種類あります。
- Fontアセット
- CanvasFontアセット

この２つがあり、通常のワークフローの場合はFontアセットが利用されるので、CanvasFontはあまり利用されませんが、スクリプトから明示的に利用することでCanvasFontアセットが利用できます。またWebFontなどを読み込んだ場合にはCanvasFontアセットに変換されます。ただし、CanvasFontアセットをを利用する場合には、カラーとサイズの設定はエディタから行えますが、エディターからはPlaCanvasのFontアセットの機能は利用できず、アウトラインやシャドウなどの設定は行なえません。


### Canvas Fontで表示する文字を装飾する
結論からですが、`renderCharacter`というメソッド内でCanvasのContextが2Dの操作をすることで文字の装飾を変更することができます。

また、こちらはEngineのバージョンによって動作が異なる場合がありますので、ご注意下さい。現在の最新バージョン(v1.51.2)で動作を確認しています。
コンポーネントの[GitHub上のソースコード - canvas-font.js](https://github.com/playcanvas/engine/blob/168d59f4bba51e0f0945a8aa754ff08d59577e8b/src/framework/font/canvas-font.js)はこちらとなっております。


1. スクリプトアセットを新規に追加をして、アセットのLoading TypeをAfter Engineに変更し、PlayCanvas Engineが読み込れた後に実行をするように設定する。
2. 下記のコードを貼り付け
```javascript
window.onload = () => {
    // https://github.com/playcanvas/engine/blob/168d59f4bba51e0f0945a8aa754ff08d59577e8b/src/framework/font/canvas-font.js
    /**
     * @param {CanvasRenderingContext2D} context - The canvas 2D context.
     * @param {string} char - The character to render.
     * @param {number} x - The x position to render the character at.
     * @param {number} y - The y position to render the character at.
     * @param {number} color - The color to render the character in.
     * @ignore
     */
    pc.CanvasFont.prototype.renderCharacter = function (context, char, x, y, color) {
        // 変更前のコード
        context.fillStyle = color;
        context.fillText(char, x, y);

        // 追記する(赤いアウトラインを表示)
        context.strokeStyle = 'red';
        context.lineWidth = 1;
        context.strokeText(char, x, y);
    };
};
```

3. Launchで確認

Launchで確認をすると文字の装飾を変更することができます。
![](https://i.imgur.com/iNRY6sX.png)


この方法で、文字の装飾を行うことができました。 [テキストの描画](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - Canvas Fontの操作についてはこちらのMDNの記事を参照下さい。他にも、[グラデーション - w3schools](https://www.w3schools.com/tags/canvas_filltext.asp)などの装飾も可能です。




## ※補足
この記事で利用したプロジェクト及び実行URLはこちらとなります。
実行URL: https://playcanv.as/b/31786c3d
プロジェクトURL: https://playcanvas.com/editor/scene/1605906

不明な点などがありましたらはが（[@mxnc3](https://twitter.com/mxcn3))までご連絡下さい。
完走を目指して、他の日付にも、なにか書かせていただければと考えております。

## その他文字装飾
### グラデーション
![スクリーンショット 2022-12-05 10.28.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/7a9041ef-65c4-b10f-340b-fa68a81f7fdc.png)

### アウトライン
![スクリーンショット 2022-12-05 10.15.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/a2fee34d-891b-bffe-554e-342381467db5.png)