Space Defender - 플레이어의 일부

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

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

키보드 설정

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

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

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

플레이어 만들기

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

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

const Player = new Graphics();

Player
    .poly([
        0, 0,
        50, 0,
        25, -25,
    ])
    .fill(0x66CCFF);

Player.x = app.screen.width / 2 - Player.width / 2;
Player.y = app.screen.height - 50;

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

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

플레이어 이동

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

let playerSpeedX = 0;

const arrowLeftHandler = KeyHandler(
    "ArrowLeft",
    () => playerSpeedX = -500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowRightHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

const arrowRightHandler = KeyHandler(
    "ArrowRight",
    () => playerSpeedX = 500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowLeftHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

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

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

app.ticker.add((ticker) => {
    const delta = ticker.deltaTime / 100;
    Player.x += playerSpeedX * delta;
});

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

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

촬영

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

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

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

글머리 기호를 생성하는 메서드부터 시작해 main.ts 파일 하단에 다음 코드를 추가해 보겠습니다.

let bulletTemplate: PIXI.Graphics | undefined = undefined;
function createBullet(source: PIXI.Graphics) {
    if(!bulletTemplate) {
        bulletTemplate = new Graphics();
        bulletTemplate
            .circle(0, 0, 5)
            .fill(0xFFCC66);
    }

    const bullet = bulletTemplate.clone();
    bullet.x = source.x + 25;
    bullet.y = source.y - 20;
    return bullet;
}

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

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

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

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

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

KeyHandler(
    " ",
    () => {
        const bullet = createBullet(Player);
        bullets.push(bullet);
        app.stage.addChild(bullet);
    }
);

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

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

const bullets: PIXI.Graphics[] = [];

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

for(let i = 0; i 


<p>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.</p>

<p>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!</p>

<hr>


<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" class="lazy" alt="Space Defender - 플레이어의 일부" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2 id="PixiJS-Setup-with-Vite-and-TypeScript">PixiJS Setup with Vite and TypeScript</h2>
      <h3 id="Mr-Linxed-Apr">Mr. Linxed ・ Apr 20</h3>
      <div class="ltag__link__taglist">
        #webdev
        #javascript
        #beginners
        #tutorial
      </div>
    </div>
  
</div>



<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" class="lazy" alt="Space Defender - 플레이어의 일부" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2 id="Accomplish-more-with-the-Cult-of-Done">Accomplish more with the "Cult of Done"</h2>
      <h3 id="Mr-Linxed-Feb">Mr. Linxed ・ Feb 18</h3>
      <div class="ltag__link__taglist">
        #productivity
        #beginners
        #discuss
        #motivation
      </div>
    </div>
  
</div>




<hr>

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


          

            
  

            
        

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