Space Defender - 플레이어의 일부

이전 부분에서는 게임의 기본 구조를 만들었습니다. 이 부분에서는 플레이어의 함선 생성을 시작하여 이동하고 발사하도록 하겠습니다.

최종 소스 코드는 내 GitHub 저장소에서 찾을 수 있습니다
그리고 게임을 플레이하고 싶다면 여기에서 찾을 수 있습니다

키보드 설정

플레이어 설정을 시작하기 전에 키보드 이벤트를 처리할 방법이 필요합니다. 이를 위해 나는 kittykatattack의 PixiJS 튜토리얼에 있는 키보드 컨트롤러를 사용하고 이를 TypeScript에 적용했습니다.
내 GitHub 저장소에서 찾을 수 있습니다.

이 프로젝트의 범위를 벗어나기 때문에 작동 방식에 대해 자세히 설명하지는 않겠습니다. 하지만 작동하는 작업은 keydown 및 keyup 이벤트를 수신하고 누르거나 놓을 각 키에 대해 부울 값을 설정하는 것입니다. 이렇게 하면 키를 누르거나 놓을 때 게임 루프를 확인하고 이에 따라 플레이어 동작을 업데이트할 수 있습니다.

키보드 컨트롤러를 사용하려면 위 커밋에서 키보드.ts 파일을 다운로드하여 프로젝트의 src/helpers 폴더에 넣으세요.

플레이어 만들기

이제 키보드 이벤트를 처리할 수 있는 방법이 있으므로 플레이어 생성을 시작할 수 있습니다. 향후 튜토리얼에서는 더 복잡한 게임을 만들고 프로젝트를 여러 파일로 분할할 것입니다. 지금은 하나의 파일만 사용하겠습니다.

PixiJS 애플리케이션을 초기화한 바로 뒤에 app.init({ main.ts 파일에 다음 코드를 추가하세요.

이 작업은 새 그래픽 개체를 만들고 폴리 메서드로 삼각형을 그린 다음 연한 파란색으로 채우고 화면 하단에 배치하는 것입니다.

지금 게임을 시작하면 화면 하단에 작은 삼각형이 표시됩니다. 하지만 우리는 그것을 이동할 수 있기를 원합니다. 이를 위해서는 키보드 입력을 기반으로 플레이어의 위치를 ​​업데이트해야 합니다.

플레이어 이동

먼저 키보드 입력을 캡처해야 합니다. 플레이어를 생성한 위치 바로 뒤에 다음 코드를 추가하세요.

이 코드는 두 개의 KeyHandler를 생성합니다. 하나는 왼쪽 화살표 키용이고 다른 하나는 오른쪽 화살표 키용입니다. 키를 누르면 x축의 플레이어 속도가 -500 또는 500으로 설정됩니다. 키를 놓으면 플레이어의 속도가 0으로 설정됩니다. 이렇게 하면 플레이어를 왼쪽과 오른쪽으로 움직일 수 있습니다.

이 자체로는 플레이어를 움직이지 않으므로 게임 루프에서 플레이어의 위치를 ​​업데이트해야 합니다. app.ticker.add 호출을 다음 코드로 바꾸세요.

코드에 app.ticker.add 호출이 없으면 KeyHandler를 정의한 위치 바로 뒤에 추가하면 됩니다.

이제 게임을 시작하면 플레이어를 좌우로 움직일 수 있습니다. 엄청난! 촬영해보자

촬영

플레이어가 슛을 하게 만들고 싶을 때 고려해야 할 세 가지 사항이 있습니다.

1. 플레이어가 스페이스바를 누르면 새로운 총알을 생성하고 싶습니다.
2. 게임 루프에서 총알 위치를 업데이트하고 싶습니다.
3. 범위를 벗어나면 총알을 제거하고 싶습니다.

그래서 총알을 생성하고, 총알 배열에 추가하고, 게임 루프를 통해 총알 위치를 업데이트한 다음, 범위를 벗어나면 제거하는 메서드가 필요합니다.

글머리 기호를 생성하는 방법부터 시작해 main.ts 파일 하단에 다음 코드를 추가하세요.

글머리 기호를 만들고 싶을 때마다 새 그래픽 개체를 만드는 것은 비용이 많이 들기 때문에 새 글머리 기호를 만들고 싶을 때마다 복제하는 템플릿 글머리 기호를 만듭니다. 복제는 매번 새로운 객체를 생성하는 것보다 저렴합니다.

그런 다음 총알을 쏜 소스를 사용하여 총알을 올바른 위치에 배치한 다음 그래픽 개체를 반환합니다.

알겠습니다. 현재 이 방법은 사용되지 않으며 화면에 아무것도 그려지지 않습니다. 문제를 해결해 보세요.

플레이어가 스페이스바를 눌러 사격할 수 있도록 만들 예정인데, 이를 위해 다시 KeyHandler를 사용하겠습니다. KeyHandler에게 스페이스바를 사용하라고 지시하려면 " "를 키로 지정해야 합니다.

왼쪽 및 오른쪽 화살표 키에 대한 KeyHandler를 정의한 위치 바로 뒤에 다음 코드를 추가하세요.

이 코드는 스페이스바를 누를 때 새 글머리 기호를 생성하고 이를 글머리 기호 배열에 추가하고 스테이지에 추가하므로 우리가 볼 수 있습니다.

아직 총알 배열이 없으므로 Player 개체를 정의한 위치 바로 뒤에 추가해 보겠습니다.

이제 게임을 시작하면 플레이어를 좌우로 움직이며 총알을 쏠 수 있습니다. 하지만 총알은 화면에 영원히 남을 것입니다. 문제를 해결해 보세요.
게임 루프에서는 총알 위치를 업데이트하고 총알이 범위를 벗어나면 제거합니다. 플레이어의 위치를 ​​업데이트하는 바로 아래에 있는 게임 루프에 다음 코드를 추가하세요.

for(let i = 0; i 


This part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.

And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!





  
    

      
    
  
  
    

      
PixiJS Setup with Vite and TypeScript
      
Mr. Linxed ・ Apr 20
      

        #webdev
        #javascript
        #beginners
        #tutorial
      
    
  





  
    

      
    
  
  
    

      
Accomplish more with the "Cult of Done"
      
Mr. Linxed ・ Feb 18
      

        #productivity
        #beginners
        #discuss
        #motivation
      
    
  







Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.


          

            
  

            
        

위 내용은 Space Defender - 플레이어의 일부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!