前回の処理では辺からの出力しかできなかったので、今回はスプライトの範囲からパーティクルを出力する方法を探ってみます。 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を設定し物理ボディの作成 前回三角形分割を行いましたが、物理ボディ用の頂点は三角形分割の必要がないらしく、輪郭をそのまま結合して渡すと物理ボディが作成でき…
前回に引き続きメッシュの自動生成を行っていきます。 ベクトルが変わる部分を保存する 簡単な三角形分割を実装してみる ベクトルが変わる部分を保存する 前回で輪郭の抽出ができたので、今回は応用していきたいと思います。 探索するベクトルが変わる部分を…
前回に引き続き輪郭追跡の続きを作成します。 前回の位置に基づいて追跡の始点を変える 力技で解決する 前回の位置に基づいて追跡の始点を変える 始点を左下に固定するとある部分でループしてしまうことが判明したので、前回の移動ベクトルに基づいて追跡の…
前回に引き続き、凹面メッシュの自動生成に挑戦します。 取得したアルファ値をもとに輪郭追跡をしてみる 取得したアルファ値をもとに輪郭追跡をしてみる 輪郭追跡処理アルゴリズム 画像処理ソリューションの記事を参考に輪郭追跡し画像の境界線を取得してみ…
前回に引き続き、凹面メッシュの自動生成に挑戦します。 gpnotes.hatenablog.jp ドロネー図に入る前に、テクスチャのアルファ値を取得できなければ自動生成ができないので、今回はテクスチャからピクセル情報を抽出してみたいと思います。 テクスチャのデー…
Phaser3ではメッシュを扱えるようになりましたが、画像からメッシュを自動で生成してくれるような機能がありません。 Unityではスプライトから自動で当たり判定や物理ボディを作成してくれるアセットが充実していますが、Phaserにはそれにあたるようなライブ…
前回に引き続きリボントレイルを作ります。 gpnotes.hatenablog.jp particleで星空のアニメーションを作る リボントレイルを使ったビームエフェクト particleで星空のアニメーションを作る 公式のサンプルを参考にして星空のアニメーションを作ります。 ソー…
前回に引き続きリボントレイルエフェクトを作っていきます。 gpnotes.hatenablog.jp パスの制御点を渡し変形できるようにする パスの制御点を操作してリアルタイムにパスを変形できるようにしたいと思います。 公式のサンプル内にドラッグによる変形のサンプ…
前回に引き続きリボントレイルを作成します、 前回は基本的なメッシュを作成したので、今回はパスに沿ったメッシュを作成したいと思います。 gpnotes.hatenablog.jp Phaser.Curveでベジェ曲線を作成する カーブのポイントと次ポイントのベクトルに直交するベ…
今回からはトレイルエフェクトを作ってみたいと思います。 トレイルはオブジェクトが動いた際の軌跡を描くエフェクトです。 もっとも簡単なトレイルの実装はスプライト等表示物そのものを複製しながらアルファ値を変えるなどして通過点上に配置するやりかた…
今回はWeb Speech APIを用いた合成音声の読み上げをしてみます。 Web Speech APIはPhaser3独自の機能というわけではないのですが、Phaser3と組み合わせて使うことができるので、試しにこちらを使って読み上げ式の神経衰弱を作ってみようと思います。 SpeechS…
前回に引き続きオブジェクト拡張を使いながらアニメーションを作っていきます。 gpnotes.hatenablog.jp maskを使う mask.invertAlphaで画像を切り抜く .onでテキストにクリック処理を追加する maskを使う maskを使って黒電話のダイアル部分を作ってみます。 …
今回はゲームオブジェクトの拡張について勉強します。 ゲームオブジェクトの拡張 add.existingでシーンへの追加を行う runChildUpdateでオブジェクトにupdateを実行させる ゲームオブジェクトの拡張 gpnotes.hatenablog.jp 以前の記事中リンクで紹介しました…
先日経路探索ライブラリを導入したので、今回はPhaserのPathを用いて経路を表示してみたいと思います。 gpnotes.hatenablog.jp Pathで曲線描画 pathを使ったtween Pathで曲線描画 PathはPhaser3から導入された新機能で、各種曲線や直線を作成することができ…
引き続き迷路ゲームを作っていきます。 今回は経路探索ライブラリを用いて目的地まで自動で移動する処理を作ってみます。 gpnotes.hatenablog.jp 経路探索ライブラリを使う 経路探索ライブラリ用の配列を作成する tween.timelineで経路に沿ったtweenを作成す…
引き続き迷路ゲームを作っていきます。 今回は迷路を移動できるプレイヤーオブジェクトを作ってみます。 gpnotes.hatenablog.jp 画面からキャンバスサイズ以上のスプライトを作成する camera.zoomとcamera.centerOnでカメラを調節する カメラをプレイヤーに…
前回に引き続き探索ゲームを作成します。 gpnotes.hatenablog.jp generateTexture()を用いて動的に迷路スプライトを用意する ループ部分で物理ボディを作ってみる generateTexture()を用いて動的に迷路スプライトを用意する 前回使用したやり方では迷路用のg…
迷路ゲームの作成に挑戦してみます。 timerでループイベントを設定 fillRectで矩形描画 Pure JavaScript perfect tile maze generation – with a bit of magic thanks to Phaser – Emanuele Feronato のチュートリアルに従い、迷路を自動生成してみます。 上…
phaser3のTweenはPhaser2から宣言の仕方が変わっています。 新しい機能も増えており、特に実行中のtweenの値をリアルタイムにアップデートするupdateToはいろいろと使い道がありそうです。 https://labs.phaser.io/view.html?src=src\tweens\update%20to.js …
ブロック崩しの勉強はひとまず中断し、新機能の勉強をしようと思います。 Phaser 3のサンプル集 公式で用意されているPhaser3のサンプル集は2のころよりも実用的なものが大量にあります。 Phaser 3 Examples このブログで今まで扱った新機能のリンクを一部抜…
