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

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

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

今回は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を使って簡単に重なり順制御を行えるようになりました。 ま…

Phaser3ではメッシュを扱えるようになりましたが、画像からメッシュを自動で生成してくれるような機能がありません。 Unityではスプライトから自動で当たり判定や物理ボディを作成してくれるアセットが充実していますが、Phaserにはそれにあたるようなライブ…

前回に引き続きリボントレイルを作ります。 gpnotes.hatenablog.jp particleで星空のアニメーションを作る リボントレイルを使ったビームエフェクト particleで星空のアニメーションを作る 公式のサンプルを参考にして星空のアニメーションを作ります。 ソー…

前回に引き続きリボントレイルエフェクトを作っていきます。 gpnotes.hatenablog.jp パスの制御点を渡し変形できるようにする パスの制御点を操作してリアルタイムにパスを変形できるようにしたいと思います。 公式のサンプル内にドラッグによる変形のサンプ…

前回に引き続きリボントレイルを作成します、 前回は基本的なメッシュを作成したので、今回はパスに沿ったメッシュを作成したいと思います。 gpnotes.hatenablog.jp Phaser.Curveでベジェ曲線を作成する カーブのポイントと次ポイントのベクトルに直交するベ…

今回からはトレイルエフェクトを作ってみたいと思います。 トレイルはオブジェクトが動いた際の軌跡を描くエフェクトです。 もっとも簡単なトレイルの実装はスプライト等表示物そのものを複製しながらアルファ値を変えるなどして通過点上に配置するやりかた…

前回に引き続きオブジェクト拡張を使いながらアニメーションを作っていきます。 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 このブログで今まで扱った新機能のリンクを一部抜…

引き続きブロック崩しを作っていきます。 今回は演出を強化していきます。 gpnotes.hatenablog.jp 接触演出を強化する 開始までボールを待機させる ボールの速度を監視する パーティクルとカメラシェイクを使って自機のダメージ表現 ブロック数監視用のグル…

今回はContainer、Particleを使ってオブジェクトの衝突時の処理を付け足していきます。 https://github.com/samme/phaser3-faq/wiki#how-do-i-add-a-child-sprite Containerを使ってオブジェクトを関連付ける Particleを使い emitterを作る setEmitZoneでエ…

引き続きブロック崩しを作っていきます。 今回はブロックを配置してみましょう。 gpnotes.hatenablog.jp ブロックのグループを作る Phaser.Actionを使ってみる Dataを使ってブロックのHPを設定する DataはPhaserのゲームオブジェクトならなんにでも設定でき…

前回に続きブロック崩しを作っていきます。 gpnotes.hatenablog.jp 入力検知用のシーンを作る キーボードの入力 this.input.keyboard.addKey でキーコードとキーの紐づけ isDownで押下の取得 ゲームパッドの入力 input.gamepad.onceでゲームパッドを検知する…

Phaser 3の物理エンジンを使ってブロック崩しの制作に挑戦してみます。 アクションゲームを作ろうと思ったら自分で物理演算の処理を作るのが一番だと思うのですが、 ブロック崩しなどの簡単なゲームであれば組み込みの物理エンジンで十分作れるはずです。 今…

今回はシーンの基本的な構造について紹介いたします。 preload, create, update preload : アセットの読み込み、シーンの前準備 create : ゲームオブジェクトの作成に適したタイミング update : 毎フレーム実行、いわゆるゲームループ部分 scene.getで他のシ…

今回はPhaser 3で追加された新機能、Sceneを紹介いたします。 SceneはPhaserのコンポーネントを簡単に一括管理できるので非常に便利です。 シーンを作る、登録する start()で遷移、launchで並列実行 startによる遷移 launchによる並列実行 総括、サンプルコ…

Phaser 3はPhaser 2とは別物と言ってもいいくらいに多くの点が変化しました。 変更点に関してはPhaser World Issue 116に詳しいことが書いてあります。 madmimi.com 個人的に気になった変更点 その中から個人的に気になった変更点をいくつかピックアップした…