前回に引き続き、凹面メッシュの自動生成に挑戦します。 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 のチュートリアルに従い、迷路を自動生成してみます。 上…