前回に引き続き、凹面メッシュの自動生成に挑戦します。 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 このブログで今まで扱った新機能のリンクを一部抜…

引き続きブロック崩しを作っていきます。 今回は演出を強化していきます。 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 個人的に気になった変更点 その中から個人的に気になった変更点をいくつかピックアップした…

Phaser 3の情報も徐々に多くなってきました。今日はその中でも特に役に立ちそうなページを紹介したいと思います。 Making your first Phaser 3 game: Part 1 - Introduction - Learn - Phaser 公式サイトのチュートリアルです。使用している言語はJavaScript…

Phaser 3の準備 前回はTypeScriptのプロジェクトを作成しました。 プロジェクトの中には既にいくつかのファイルが用意されています。 これらはそのままにして中身だけ書き換えていきましょう。 index.html index.htmlファイルでは、app.jsを読み込むscriptタ…

今日はPhaser 3開発のための環境構築をしてみます。JavaScriptのライブラリなので開発方法は無数にあるのですが、今回はVisual Sutido 2017を開発環境として利用します。また、言語はTypeScriptを用います。 Visual Studio 2017のプロジェクト作成 Visual St…

最近は主にPhaserを利用してWebゲームを開発しています。（言語はTypeScript、エディタはVisual Studio 2017を利用してます） 先日、最新バージョンであるPhaser 3がリリースされました。Phaser 2から構造が大幅に変更されているので、スムーズに移行するの…

ブログをはじめました。 主にゲームプログラミング関連の記事を書いていきたいと思っています。 よろしくお願いします。