Phaser 3pt 시작.둘째,

소개

마지막으로 나는 노드를 사용하여 Phaser 3 게임을 설정하는 기초 지식을 토론했다.js와 Express.이제 우리는 서버에서 게임을 시작하고 실행하는 실례를 이해했고, 게임 실례에 이미지, 정령, 오디오, 기타 시각적 효과를 추가하는 방법을 보여 주었다.이것이 바로 Phaser 3의 진정한 즐거움이 빛나는 곳입니다!Phaser는 게임을 위해 서로 다른 보기를 실현하고 이를 장면이라고 부른다.본 강좌에서 우리는 두 개의 서로 다른 장면을 만들고 각 장면에 서로 다른 자원을 불러올 것이다.우선, 우리는 제목 장면을 처리할 것이다.

게임을 수정합니다.js 파일

Phaser 게임에 더 많은 장면을 추가하기 위해서 우리는 게임에서 약간의 수정을 해야 한다.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);

마지막 세 줄에서 보듯이 우리는 게임을 다른 장면이 있는 것으로 설정하고 파일의 시작 부분에서 이 장면들을 가져옵니다.따라서 우리는 공공 디렉터리의 scenes 폴더에 세 개의 새로운 자바스크립트 파일을 계속 만들 것입니다.

표제 세계.회사 명

우선 Phaser 3의 게임 장면에 배경 이미지를 계속 추가합니다.배경을 추가하기 위해서 공공 디렉터리에 자산 폴더를 설정해야 합니다.다음은 우리가 배경으로 사용할 이미지입니다.

현재 그림이 assets 폴더에 추가되었습니다. 게임의 배경 그림으로 불러올 수 있습니다.이를 실현하는 코드를 살펴봅시다.

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;

이 코드 블록을 분해하면 미리 불러오는 함수에서 불러오기 전에 assets 폴더에 넣은 이미지 배경을 볼 수 있습니다.이제 함수를 만들 때 렌더링할 때 이미지를 실제 장면에 추가합니다.아래에서 너는 그것이 어떤 모양인지 볼 수 있을 것이다.

현재 우리는 기본적인 배경을 가지고 있다. 우리는 하나의 방식을 추가하여 우리의 게임을 다음 장면으로 전진하게 한다.우리는 화면에 텍스트를 조금 추가하고 텍스트가 상호작용을 가지도록 함으로써 이 점을 실현할 수 있다.제목 장면에 이 줄을 추가합니다.우리가 위에서 만든 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'));

이제 사용자가 텍스트 블록을 클릭할 때마다 장면은 나중에 만든 재생 장면으로 변경됩니다.

지금까지는 괜찮아 보였는데, 이제 마지막 터치에서 우리는 우리의 게임에 음악을 추가할 것이다. 왜냐하면 좋은 음악이 없는 게임이 무슨 즐거움이 있기 때문이다.이를 위해서는 미리 불러오기를 수정하고 함수를 만들어야 합니다.나는 아래에서 하나하나 분해할 것이다.

사전 로드()

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

생성()

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,
  });

이 두 코드 블록 중에서 우리가 유일하게 익숙하지 않은 것은 만들고 있는 음악 실례이다.음악을 추가하기 위해서, 재생할 오디오 파일을 지정해야 합니다. 여기에서, 우리는 미리 불러오는 함수에 포함된 "불러오기"오디오를 인용해서 실현합니다. 뒤의 대상은 오디오 설정을 지정할 수 있는 곳입니다. 왜냐하면 이것은 우리의 배경음악이기 때문입니다. 우리는 순환 속성을true로 설정합니다.너무 좋아요.우리는 이미 게임의 첫 번째 장면을 만들었다. 나는 코드의 완전한 스냅숏을 포함하여 누구도 한 줄을 놓치지 않도록 할 것이다.지금 게임 장면으로 들어갑니다!

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

게임 장면.회사 명

간단하게 말하자면, 나는 게임 장면의 설정과 게임 속의 정령을 포함할 것이다.다음 주에 우리는 어떻게 게임을 상호작용을 가지게 하는지 소개할 것이니 걱정하지 마세요!다음 게임 장면의 기본 설정을 봅시다.

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() {

  }
}

우리가 이 코드를 좀 분해해 보겠지만, 그 중 대부분은 우리가 이미 익숙해졌을 것이다.미리 불러오는 중, 우리는 장면을 위해 세 폭의 그림을 불러왔는데, 배경은 우리가 제목세, 배 한 척과 소행성에 사용하는 그림이다.만들기 기능에서 장면에 각 이미지를 추가합니다.장면의 항성 배경만 얻기 위해서, 우리는 두 개의 단독 위치에 배경 이미지를 두 번 불러옵니다. (한 번은 y축의 0곳, 한 번은 400곳입니다.)그곳에서 우리는 우리가 사용할 배의 그림을 만들 것이다.이것이 바로 그것이 이전과 다른 곳이다.최종적으로 이 배가 화면에서 이동할 것이기 때문에, 우리는 Phaser 3 물리 엔진의 일부분으로 그림을 추가할 것이다.이것은 이전과 같지만, 다음 강좌에서 우리는 물리를 선박에 응용하여 이동시킬 수 있을 것이다.마지막으로, 우리는 화면에 3개의 소행성을 추가할 것이며, 이 모든 소행성도 Phaser 3 물리 엔진의 일부가 될 것이다.만약 조작이 정확하다면, 당신은 반드시 이런 화면을 보아야 합니다!

결론

요컨대, 우리는 게임에 이미지, 오디오, 기타 장면을 어떻게 포함하는지 소개했다.당신은 게임에서 창의력을 발휘하여 원하는 요정이나 배경을 사용하기 쉽다.다음 주에 우리는 운동을 추가하는 정령을 볼 것이다. 우리는 이미 이 게임을 얻고 실행할 수 있도록 수입했다.다음 주에 봐요!