フェイザー3 ptから始めるII

導入

最後に、私はフェイザー3ゲームをノードで設定する基礎を議論しました.JSエクスプレス.我々はゲームのインスタンスを取得し、サーバー上で実行する方法の理解を持っているので、我々は我々のゲームインスタンスに画像、スプライト、オーディオ、および他のビジュアルを追加する方法を見てみましょう.これは、フェイザー3の本当の楽しみが輝き始めるところです!フェイザーは、ゲームのさまざまなビューを実装し、シーンを呼び出します.我々は、このチュートリアルで2つの異なるシーンを作成し、各シーンのさまざまな資産をロードします.出発するために、我々はタイトル場面を扱いそうです.

ゲームを変更する。jsファイル

ために我々のゲームにいくつかのシーンを追加するには、ゲームのいくつかの変更を行う必要があります.jsファイル.変更点はこちら.

import PlayScene from './scenes/playScenes.js';
import TitleScene from './scenes/TitleScene.js';

const config = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  audio: {
    disableWebAudio: true
  },
  physics: {
    default: 'arcade',
    arcade: {
      fps: 60,
      gravity: {y : 0},
    }
  },
};

const game = new Phaser.Game(config);

game.scene.add('PlayScene', PlayScene);
game.scene.add('TitleScene', PreloadScene);

あなたが最後の3行で見ることができるように、我々は追加のシーンを持ってゲームを設定し、ファイルの先頭にあるシーンをインポートしている.それで、我々は進んで、パブリックディレクトリの中で3つの新しいJavaScriptファイルを場面フォルダで作ります.

Titlescenejs

まず最初に、フェイザー3で我々のゲームシーンに背景画像を加えてください.背景を加えるために、我々は我々の公共ディレクトリの中で資産フォルダーをセットアップしなければなりません.背景に使用するイメージを以下に示します:

今のイメージは、我々はゲーム内の背景画像としてロードすることができます資産のフォルダに追加されます.それを行う責任のあるコードを見てみましょう.

import Phaser from 'phaser';
import background from '../assets/img/Space.jpg';

class TitleScene extends Phaser.Scene {
  constructor() {
    super('TitleScene');
  }

  preload() {
    this.load.image('background', background);
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
  }

export default TitleScene;

このコードブロックを破棄すると、プリロード関数内で、以前にアセットフォルダーに入れた画像の背景を読み込みます.Create関数では、レンダリングされたときに実際のシーンに画像を追加します.下に、あなたはそれがどのように見えるかについて見ます.

今、我々は基本的な背景を持って、次のシーンに進むために我々のゲームの方法を追加しましょう.我々は、画面にテキストのビットを追加し、テキストをインタラクティブにすることによってこれを行うことができます.この行をTitleSceneに追加します.上で作成したJSファイル.

this.add.text(280, 350, `Your Game Name`, {
  fontSize: '32px',
  fill: '#FF0000',
  fontStyle: 'bold',
}); 
this.add.text(225, 400, `Click Here To Play!`, {
  fontSize: '32px',
  fill: '#FF0000',
  fontStyle: 'bold',
}).setInteractive( {useHandCursor: true}).on('pointerdown', () => this.scene.start('PlayScene'));

今、ユーザーがそのテキストブロックをクリックすると、シーンは、後で作成するプレイシーンに変更されます.

非常に良い今までのところ、今までの最後のタッチのために、我々はゲームのいくつかの音楽を追加するつもりです、何が楽しいサウンドトラックなしのゲームですか?これを行うには、プリロードと関数を作成する必要があります.私は、下の各々を壊します.

preload ()

this.load.image('speaker', './assets/img/speaker.png');
this.load.audio('loading', './assets/sounds/Ballistics.mp3');

create ()

this.add.image(780, 580, 'speaker').setScale(.1).setInteractive({useHandCursor: true}).on('pointerdown', () => music.play());

const music = this.sound.add('loading', {
    mute: false,
    volume: 0.15,
    rate: 1,
    detune: 0,
    seek: 0,
    loop: true,
    delay: 0,
  });

これらの2つのコードブロックに慣れていないのは、作成されている音楽インスタンスです.音楽を追加するには、あなたがプレイしたいオーディオファイルを指定しなければなりません.ここでは、プリロード機能に含まれている' Loaded 'オーディオを参照することで、オーディオの設定を指定できる場所です.すごい!我々は、ゲームの最初のシーンを作った、私はちょうど誰かがラインを逃した場合には、コードの完全なスナップショットが含まれます.今すぐプレイシーンに!

class TitleScene extends Phaser.Scene {
  constructor() {
    super('TitleScene');
  }

  preload() {
    this.load.image('background', './assets/img/Space.jpg')
    this.load.image('speaker', './assets/img/speaker.png')
    this.load.audio('loading', './assets/sounds/Ballistics.mp3')
  }

  create() {
    this.cursors = this.input.keyboard.createCursorKeys();
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(780, 580, 'speaker').setScale(.1).setInteractive({useHandCursor: true}).on('pointerdown', () => music.play());
    this.add.text(280, 350, `Your Game Name`, {
      fontSize: '32px',
      fill: '#FF0000',
      fontStyle: 'bold',
    });
    this.add.text(225, 400, `Click Here To Play!`, {
      fontSize: '32px',
      fill: '#FF0000',
      fontStyle: 'bold',
    }).setInteractive( {useHandCursor: true}).on('pointerdown', () => this.scene.start('PlayScene'));

    const music = this.sound.add('loading', {
      mute: false,
      volume: 0.15,
      rate: 1,
      detune: 0,
      seek: 0,
      loop: true,
      delay: 0,
    })
  }
}

export default TitleScene

プレイシーン。js

簡潔さのために、私はちょうどゲームのスプライトでプレイシーンのセットアップを含めるつもりです.来週、私たちは、ゲームをインタラクティブに作るので、心配しないでください!以下のプレイシーンの基本的な設定を見てみましょう.

export default class PlayScene extends Phaser.Scene {
  constructor() {
    super('PlayScene');
  }

  preload() {
    this.load.image('background', './assets/img/background.png');
    this.load.image('ship', './assets/img/spaceship.png');
    this.load.image('asteroid', './assets/img/asteroid.png');
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(0, 400, 'background').setOrigin(0, 0).setScale(0.6);

    this.ship = this.physics.add.image(400, 300, 'ship').setScale(0.1);

    this.asteroid = this.physics.add.image(225, 550, 'asteroid').setScale(0.03);
    this.asteroid1 = this.physics.add.image(225, 250, 'asteroid').setScale(0.03);
    this.asteroid2 = this.physics.add.image(525, 250, 'asteroid').setScale(0.03);
 }
  update() {

  }
}

それで、このコードを少し破壊しましょう.プリロードでは、私たちのシーンの3つの画像で読み込まれている、我々は、titlescene、船、小惑星に使用される背景.Create Funcitonで、我々は場面にこれらのイメージの各々を加えています.ためには、シーンの星の背景を取得するには、2つの別々の場所で(2回、Y軸で1回、400で1回)背景画像をロードします.そこから我々は我々が使用する船のイメージを作成している.現在、これは以前と異なるところです.最終的には、この船は、我々はフェイザー3の物理エンジンの一部として画像を追加している画面を移動します.それは前と同じですが、今は次のチュートリアルで我々はそれを移動するために船に物理学を適用することができるでしょう.最後に我々は3つの小惑星では、すべてのフェイザー3の物理エンジンの一部となる画面に追加している.正しく行う場合は、このように画面を見てください!

結論

ちょうどそれをすべて包むために、我々はどのように画像、オーディオ、および当社のゲームに追加のシーンを含むように覆われている.それは本当に簡単に創造性を取得し、あなたのゲームで必要なスプライトや背景を使用します.来週、我々は我々が我々がこのゲームを得ることができて、走ることができるように、我々がこれまで輸入したスプライトに運動を加えるのを見ます!皆さん来週!