Phaser를 사용한 비디오 게임 제작

지난주에, 제 임무는 Rails 백엔드가 있는 자바스크립트 전단을 사용하여 클래스 프로젝트를 위한 단일 페이지 프로그램을 만드는 것입니다.두뇌 폭풍 후에 나는 전자 오락을 만들어 보기로 결정했다.나는 웹 사이트의 간단한 플래시 게임이든 특정 컨트롤러의 대형 게임이든 전자 게임을 해 왔다.나는 줄곧 이 게임들이 어떻게 만들어졌는지 알고 싶었지만, 오랫동안 이 주제를 몰랐다.현재 나는 몇 달 동안 프로그래밍 경험을 가지고 있기 때문에 이것은 비디오 게임 개발의 표면을 탐색하는 좋은 시기라고 생각한다.

위상기는 무엇입니까?

Javascript를 어떻게 사용하여 비디오 게임을 만드는지 연구할 때, 나는 실현할 수 있는 여러 가지 방법이 있다는 것을 발견했다.더 유행하는 방법 중 하나는 자바스크립트가 제공하는 캔버스를 게임 자체의 창으로 사용하는 것이다.나는 또한 코드를 작성해서 게임의 물리적 측면의 전체 과정을 처리하는 것이 무미건조하고 상당히 어렵다는 것을 알게 되었다. 특히 일주일 안에.이때, 나의 한 학우는 전체 과정에서 Phaser라는 것을 사용해서 이쪽의 부담을 덜어 달라고 건의했다.Phaser는 자바스크립트를 사용하여 비디오 게임 개발 서비스를 제공하는 무료 소스 프레임워크입니다.그것은 데이터에 대한 것이고 사용자에게 전신 물리 시스템을 제공하기 때문에 그들이 스스로 코드를 작성할 필요가 없다.또한 이미지가 정적이든 동적이든 기능적인 게임을 만드는 데 필요한 기본 요소인 입력 제어와 애니메이션 메커니즘을 제공한다.

개념화

이 프로젝트를 시작하기 위해서, 나는 우선 이 게임이 도대체 무엇에 관한 것인지, 그리고 그것을 어떻게 운행해야 하는지에 대한 생각을 생각해 내야 한다.너희들 중 일부가 알 수 있는 것처럼 인터넷 연결이 없는 상황에서 구글 크롬에는 숨겨진 게임이 있다.이것은 무한 스크롤 게이지로 사용자가 공룡을 제어하고 장애물을 피하려고 시도하며 생존 시간이 길수록 포인트를 얻는다.이 개념을 적용해 디노 대시라는 나만의 버전을 만들기로 했다.단일 페이지 응용 프로그램으로서 나는 사용자가 사이트를 처음 방문할 때 자신의 이름을 입력한 후에 실제 게임으로 넘어가 마지막에 완성된 후에 점수를 표에 저장할 수 있기를 바란다.

프런트엔드

전단에 색인을 포함합니다.html 파일, 사용자가 이름을 입력할 때 볼 수 있는 초기 페이지를 보여 줍니다.그것 또한 전체 게임의 모든 자바스크립트 파일을 가지고 있다.나는 게임을 세 개의 핵심 문서로 구성하기로 결정했다.js,게임.js와main.js.

직함js

타이틀부터.js, 이름대로 이 파일은 게임의 시작 장면을 책임집니다.이것은 '재생' 단추를 렌더링합니다. 이 단추를 누르면 게임의 다음 장면으로 넘어갑니다.js.

게임?js

게임 중입니다.js는 게임을 진정으로 실행하는 기본 코드가 있는 위치입니다.이 파일의 코드는 Phaser에서 제공하는 세 가지 구성 요소로 나뉘어져 있습니다.이 구성 요소들은 초기화할 때 정확한 순서에 따라 실행됩니다.이 파일의 미리 불러오는 부분은 게임이 사용할 모든 자산을 불러오는 것을 책임진다.이것들은 그림, 정령표, 소리를 포함한다.

캐릭터 엘프 리스트
작성 구성 요소는 로딩된 자산을 실제로 렌더링하고 표시하여 볼 수 있는 위치입니다.그것 또한 게임 뒤의 논리가 프로그래밍된 곳이다. 예를 들어 게이머가 어느 위치에서 시작해야 하는지, 어떤 물체가 서로 충돌할 수 있는지, 또는 어떤 물체가 충돌할 때 어떤 사건을 촉발해야 하는지.다음은 게임 기능을 포함한 구성 요소를 업데이트합니다.유저가 일으킨 동작은 해당 동작과 관련된 이벤트를 촉발하여 업데이트를 진행합니다.이런 기능의 가장 흔히 볼 수 있는 예는 게이머가 오른쪽 화살표 키를 누르면 이 동작은 이벤트를 촉발하여 캐릭터의 오른쪽 위치를 업데이트하는 것이다.이번 활동을 포함하는 애니메이션은 위치 업데이트를 원활하게 합니다.

#Preload
this.load.spritesheet('doux', 'assets/sprites/doux.png', {frameWidth: 23.8, frameHeight: 17})
#Create
this.player = this.physics.add.sprite(100, 450, 'doux')
#Update
let cursors = this.input.keyboard.createCursorKeys()
    this.player.anims.play('run', true)
      if (cursors.right.isDown) {
        this.player.setVelocityX(200)
        this.player.flipX = false
      }

역할에 대한 사전 로드, 작성 및 업데이트

매인.js

마지막 파일은 주 파일입니다.js는 모든 것을 한데 결합시키는 것이다.여기서 전체 게임은 위의 두 개의 파일을 사용하여 html 화포에서 초기화한다.두 직함.js와 게임.js는 두 개의 단독 장면으로 가져온 다음 통합합니다.이것도 내가 청구서를 쓰기로 결정한 곳이다.그 중 하나는 백엔드 데이터베이스에서 기존 사용자 이름과 점수를 가져와 테이블에 표시할 10위권 점수를 정렬합니다.다른fetch는 홈 페이지에 새 사용자의 이름을 처음 입력했을 때, 점수가 0인 새 사용자를 데이터베이스에 발표합니다.게임 중입니다.js는 사용자가 죽은 후에 게임을 다시 시작할 때 사용자의 새로운 점수를 데이터베이스에 발표하는 또 다른 요청입니다.

[왼쪽] 타이틀 장면 [오른쪽] 게임 장면

백엔드

백엔드 작업은 백엔드 작업보다 훨씬 간단하고 간단하다.Rails를 사용하여 작성된 유일한 목적은 사용자를 만들고 사용자와 그들의 점수를 데이터베이스에 저장하는 것입니다.백엔드는 Heroku 배치를 사용하고, 백엔드는 제공된 URL을 사용하여 데이터를 가져옵니다.

마지막 생각

전반적으로 말하자면, 나는 이 프로젝트를 완성하고, 게임 개발에 관한 지식을 더 많이 배웠다.비록 나는 Phaser를 사용하여 많은 힘든 일을 진행했지만, 나는 여전히 나의 자바스크립트 지식이 향상되었다고 생각한다.이번 주 초에 나는 React를 배우기 시작했다. 나는 놀랍게도 Phaser를 사용한 경험이 어느 정도 적용되었는데, 특히 파일의 가져오기와 내보내기에 있어서는 적용되었다.Phaser에서 제공하는 미리 불러오기, 만들기, 업데이트 기능도 React의 생명주기 방법과 유사하다.다음에 자바스크립트를 이용해서 다양한 유형의 비디오 게임을 만들어 보고 싶을 거예요.
내 코드를 보려면 다음과 같이 하십시오.
https://github.com/mshin1995/DinoDash
게임:
https://mshin1995.github.io/DinoDash/
게임 방법:
- 화살표 키로 이동/점프
- 고기를 많이 먹으면 점수가 높아진다
- 폭탄 방지
살아가다