前回の処理では辺からの出力しかできなかったので、今回はスプライトの範囲からパーティクルを出力する方法を探ってみます。 getRandomPointを持つクラスを作る getRandomPointを持つクラスを作る こちらのサンプルを見るとgetRandomPointが実装されているオ…

輪郭取得を使ってスプライトの形に添ったパーティクルエミッタを作ってみたいと思います。 輪郭からpolygonクラスを作る 輪郭からpolygonクラスを作る 以前作った輪郭取得を改造し、取得時にphaser.geom.polygonを作成するようにします。 public poly: { [ke…

前回に引き続きエフェクトを作ってみます。 ピクセル群の位置を調節する ピクセル群の位置を調節する 前回の記事ではスプライト左上から中心（origin）までの距離分ピクセルがずれてしまっていたので、ずれを加味した座標を計算します。 let point = Phaser.…

以前作ったアルファ値取得の処理を使い、物理ボディが粉砕されるようなエフェクトを作ってみたいと思います。 物理ボディの位置と回転に応じてピクセルを描画する 物理ボディの位置と回転に応じてピクセルを描画する 前回のcreateVertsを少し改造し、作成し…

前回スプライトからメッシュを自動で生成しましたが、スプライトに物理ボディをつける実装をやっていなかったので、今回紹介したいと思います。 matterで物理ボディ付きのスプライトを作成する matter.add.spriteのオプションでカスタム物理ボディを追加する…

今回はloadの機能を使ってプログレスバーを作ってみます。 loadの挙動 ロード状況へのアクセスの仕方 loadの挙動 ロード状況へのアクセスの仕方 load.onでロード中の処理を記述することができます。 progressは一つのファイルのロードが終わったときに、file…

今回はEventを使用してみます。 Events Events EventはPhaser.Events.EventEmitterから作ることができます。 create() { //イベントエミッタ this.emitter = new Phaser.Events.EventEmitter(); } onでエミットするイベントのkeyと実行する処理を設定し、emi…

今回はカスタムパイプラインを使ってスプライトにシェーダを適応してみます。 カスタムパイプラインを宣言する カスタムパイプラインを宣言する こちらのサンプルなどでカスタムパイプラインが使われていますが、typescriptではだいぶ書き方が違うようです。…

今回はLightを使ってみようと思います。 スプライトでノーマルマッピング GIMPでノーマルマップを作成する Phaser3に取り込む ノーマルマップ付きのスプライトを作成する スプライトでノーマルマッピング Phaser3のスプライトはノーマルマッピングをサポート…

今回はDepthを使って重なり順を制御してみます。 Depth Depth Phaser2ではグループそのものとグループ内でのスプライトをソートすることによって重なり順を制御していましたが、Phaser3からはDepthを使って簡単に重なり順制御を行えるようになりました。 ま…

前回に引き続きメッシュの自動生成を行っていきます。 vertsを設定し物理ボディの作成 vertsを設定し物理ボディの作成 前回三角形分割を行いましたが、物理ボディ用の頂点は三角形分割の必要がないらしく、輪郭をそのまま結合して渡すと物理ボディが作成でき…

前回に引き続きメッシュの自動生成を行っていきます。 ベクトルが変わる部分を保存する 簡単な三角形分割を実装してみる ベクトルが変わる部分を保存する 前回で輪郭の抽出ができたので、今回は応用していきたいと思います。 探索するベクトルが変わる部分を…

前回に引き続き輪郭追跡の続きを作成します。 前回の位置に基づいて追跡の始点を変える 力技で解決する 前回の位置に基づいて追跡の始点を変える 始点を左下に固定するとある部分でループしてしまうことが判明したので、前回の移動ベクトルに基づいて追跡の…

前回に引き続き、凹面メッシュの自動生成に挑戦します。 取得したアルファ値をもとに輪郭追跡をしてみる 取得したアルファ値をもとに輪郭追跡をしてみる 輪郭追跡処理アルゴリズム 画像処理ソリューションの記事を参考に輪郭追跡し画像の境界線を取得してみ…