Phaser3でいろいろテスト on CodePen

siouxcitizen

2020年10月12日 06:57

Phaser3でいろいろテスト on CodePen

前回からの続きとして、Phaser3でどういったことができるのかいろいろテストしてみました。

CodePenへのリンクは前回と同じように、タイトルをクリックするとコード付きの画面へ、画像をクリックすると実行画面だけが表示されるフルスクリーン表示画面へと遷移します。

１つめのテストは、チュートリアルで最初に作成するゲームを横方向に拡大して、Phaserのカメラ機能による横スクロールができるようにしたものです。　カメラを付けるだけで割と簡単にスクロールできました。

Phaser.js v3.15.1 Practice#17 Phaser3 Camera Scroll Test

カメラ機能によるスクロールを実装するにあたっては以下のサイトを参考にさせていただきました。

■カメラをセットして画面をスクロールする機能の実装に参考にさせていただきました
Follow User Controlled Sprite
Example
Exampleのコード

Follow Sprite Small Bounds
Example
Exampleのコード

■カメラセットによる画面スクロール時の、スコア用文字列表示を固定する実装の参考にさせていただきました
setScrollFactor not behaving as documented

次に、Phaser3でPhaser2のExampleコードのいくつかを部分的に再現できないか試してみました。

その最初のものは主に、Phaser3のサンプルのこのコードと、Phaser2のサンプルのこのコードを参考にして作成しました。　カメラのズーム機能を使っているためか、所々つぎはぎのような背景画像ができてしまっていますが。。。

背景のマップチップになるpng画像と、その画像の配置や障害物となるものを指定するjsonファイルを読み込んでPhaserの機能で背景画面を描いています。　横スクロールのアクションゲーム作成の参考になるかと思い作成しました。

Phaser.js v3.15.1 Practice#18 Phaser3 Example01 rewitten from Phaser2 Example

実装するにあたって以下のPhaser3とPhaser2のサンプルを参考にさせていただきました。

■Phaser3 Example
Follow User Controlled Sprite
Example
Exampleのコード：

Follow Sprite Small Bounds
Example
Exampleのコード：

Follow Zoom Tilemap
Example
Exampleのコード

■Phaser2 Example
Map Collide
Example：
Exampleのコード：

次もPhaser2のサンプルのコードを参考に　上記と同じように横スクロールアクションの参考になるかと作成してみました。

Phaser.js v3.15.1 Practice#19 Phaser3 Example02 rewitten from Phaser2 Example

以下、参考したPhaer2サンプルについてのタイトルと関連リンクです。

■Phaser2 Example
Map Bounce
Example
Exampleのコード

さらに次のこのコードも、Phaser2のこのサンプルとそのコードを参考に同じように作成し、上記のサンプルと見た目は変わりませんが、RPGのフィールド移動風の動きができるようになっています。　本来はサンプルのタイトルからRay Cast機能のためのコードのようですが、そこは無視しています（実装していません）。

作り方はPhaserの物理演算や重力設定を止めるなどして作成しています。　座標の設定も何かやっていたかも。

Phaser.js v3.15.1 Practice#20 Phaser3 Example03 rewitten from Phaser2 Example