phaserでアクションRPG Day1

アクションRPGが作りたくなった
あとゲームフレームワークのPhaserがバージョン3になってたので勉強も兼ねて開発経過をメモします

初期状態のおまじない

var config = {
  type: Phaser.AUTO,
  width: 400,
  height: 400,
  physics: {
    default: 'arcade',
    arcade: {
      debug: true// お好みで
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  pixelArt: true// アンチエイリアスをoffにする
};
var game = new Phaser.Game(config);

function preload() {
  // assetの読み込み
}

function create() {
  // 初期化処理
}

function update() {
  // フレーム単位の処理
}

ここは「おまじない」だと思っていい
設定の仕方は以前はセッターを使ってたけど、ver3からはconfigオブジェクトにセットするように変更されたっぽい
その方が引数の拡張がしやすいからかな

設定のポイントはpixelArtを必ず設定すること

これを設定しないとアンチエイリアスが効いてピクセルが潰れてボケボケな絵になる
ファミコンぽいゲームを作りたいなら必ずpixelArtをtrueに設定しよう

その他の設定では、今回は物理的な衝突が使いたいのでarcadeという物理演算を使います arcadeは四角形の衝突等を適当に計算してくれます

あとhtml側はphserをCDNから読み込んでおけばok

<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>

便利だなぁ

See the Pen ActionRPG Day1 by なおしむ (@naosim) on CodePen.

実行すると真っ黒な画面が表示されました
とりあえず今日はここまで