슬라이딩 퍼즐 게임 만들기 #1/4 (타일 배치)

 

"슬라이딩 퍼즐은 타일을 움직여서 순서대로 맞추면 되는 퍼즐 게임 입니다.

숫자의 순서를 맞추거나, 분할한 그림을  맞추게 됩니다. "

 

tile.js 만들기

클래스를 생성할 파일을 따로 생성합니다.

위치는 main.js와 동일하게 src 폴더에 만들겠습니다.

 

 

Tile 클래스 생성

Tile 클래스는  Pixi.js 의 Container를 상속 받아서 만듭니다.

Container 는 Pixi.js 에서 가장 범용적인 클래스 입니다. Sprite 나 Graphics 을 배치 할 수 있습니다. 

클래스 이름 그대로 뭔가 담을 수 있는 디스플레이 객체 입니다.

import * as PIXI from "pixi.js";

export default class Tile extends PIXI.Container {
  constructor() {
    super();

    // 자신의 정답 인덱스값
    this.answerIndex = 0;

    // 사각형 그리기
    this.rect = new PIXI.Graphics();
    this.rect.lineStyle(1, 0x0000ff);
    this.rect.beginFill(0xffffff, 1);
    this.rect.drawRect(0, 0, 100, 100);
    this.rect.endFill();

    this.addChild(this.rect);

    // 숫자 텍스트 그리기
    this.numberTxt = new PIXI.Text("empty");
    this.addChild(this.numberTxt);
  }

  setText($txt) {
    this.numberTxt.text = $txt;
  }
}

 

Tile 클래스 코드 설명

자신의 정답(위치)값을 담아둘 변수를 하나 선어하고 Graphics 객체로 사각형을 그려 배치하고 있습니다.

그리고 숫자를 렌더링 하기 위해 Text 객체도 배치 하였습니다.

setText() 함수는 Text 객체인 numberTxt의 text 값을 갱신 하기 위한 함수 입니다.

 

화면에 타일 렌더링 하기

main.js의 생성자 함수에서 캔버스 크기를 가로 세로 500으로 조정하고 Tile 객체를 하나 만들어 봅니다.

import * as PIXI from "pixi.js";
import Tile from "./tile";

class Main {
  constructor() {
    this.app = new PIXI.Application({
      width: 500,
      height: 500,
      backgroundColor: 0x000000,
      resolution: window.devicePixelRatio || 1,
      antialias: false,
      view: document.getElementById("puzzle-game"),
    });

    this.tile = new Tile();
    this.app.stage.addChild(this.tile);

  }
}

 

실행하면 가로 세포 100 픽셀의 타일이 하나 만들어지게 됩니다.

"empty" 라고 나오는 이유는 Tile 클래스 에서 this.numberTxt = new PIXI.Text("empty"); 와 같이 기본값으로 "empty"를 넘겨 주고 있기 때문입니다.

 

4x4 퍼즐 렌더링 하기

타일이 잘 생성되는 것을 확인했으니 이제 타일 16개의 4x4 행렬로 만들기로 합니다.

필요한 변수는 다음과 같습니다

• row : 행
• column : 열
• TOTAL_CELL : 총 타일수
• tileArr : 생성된 타일을 담을 배열
• emptyIndex : tileArr 에서 비어 있는 타일의 index값

위 변수들은 생성차 함수에 선언 하도록 합니다. 기존의 배치 코드는 삭제 합니다.

constructor() {
    this.app = new PIXI.Application({
      width: 500,
      height: 500,
      backgroundColor: 0x000000,
      resolution: window.devicePixelRatio || 1,
      antialias: false,
      view: document.getElementById("puzzle-game"),
    });

    this.row = 4; //행
    this.column = 4; //열
    this.TOTAL_CELL = this.row * this.column; // 전체 타일 수
    this.tileArr = [];
    this.emptyIndex = 0;
    this.init();
  }

 

 init() 함수 코드 작성

생성사 함수 맨 아래에서 호출하는 init() 함수를 작성합니다.

init() 함수는 퍼즐의 상태를 초기화 하는 함수 입니다.

생성자에 선언된 변수들의 정보로 for문을 돌면서 순차적으로 타일을 배치하게 됩니다.

init() {
    this.tileArr = [];
    let posX = 0; //타일 x값
    let posY = 0; //타일 y값

    for (let i = 0; i < this.TOTAL_CELL; i++) {
      this["tile_" + i] = new Tile();
      const tile = this["tile_" + i];
      tile.answerIndex = i;
      tile.setText(String(i));

      tile.position.set(posX, posY);
      posX += 100;

      this.tileArr.push(tile);
      this.app.stage.addChild(tile);

      // 행의 갯수로 나누어 떨어지면 줄내리고 다시 맨왼쪽부터 다시 배치한다
      if ((i + 1) % this.row == 0) {
        posX = 0;
        posY += 100;
      }
    }

    // 비어 있는 타일
    this.emptyIndex = this.TOTAL_CELL - 1;
  }

init() 함수 코드 설명

생성자에서 선언한  TOTAL_CELL 의 값으로 for문을 반복합니다.

반복하면서 순차적으로 배치를 하고 Tile() 클래스 변수에 값을 대입해 줍니다.

4x4 로 배치하기 위해 행의 갯수로 나누어 떨어지면 posY 값을 100픽셀 내리고 posX는 다시 0픽셀부터 시작하게 하고 있습니다.

emptyIndex는 이빨 빠진 퍼즐 타일의 인덱스 값 입니다. 실제 슬라이딩 퍼즐에서는 15번 타일은 존재하지 않습니다.

후에 코드상으로는 안보이게 처리를 합니다. 

렌더링 화면은 아래와 같습니다.

 

타일 및 숫자 배치 조정

기본적인 타일 배치가 되었습니다.

그런데 타일과 숫자가 전부 왼쪽으로 쏠려 있습니다.

타일은 stage가 아닌 Container를 하나 만들어서 그곳에 배치해 Container의 좌표를 조정하고,

숫자는 Tile 클래스 내부 코드에서 numberTxt의 좌표를 조정하면 됩니다.

다음과 같이 main.js의 생성자 코드를 수정 합니다

constructor() {
    this.app = new PIXI.Application({
      width: 500,
      height: 500,
      backgroundColor: 0x000000,
      resolution: window.devicePixelRatio || 1,
      antialias: false,
      view: document.getElementById("puzzle-game"),
    });

    this.puzzleContainer = new PIXI.Container();  //추가
    this.app.stage.addChild(this.puzzleContainer); // 추가

    this.row = 4; //행
    this.column = 4; //열
    this.TOTAL_CELL = this.row * this.column; // 전체 타일 수
    this.tileArr = [];
    this.emptyIndex = 0;
    this.init();
  }

init() 함수 마지막에 다음과 같이 추가 합니다.

화면의 가로 세로가 500 이고 타일의 전체 가로 세로는 400 이므로 50씩 움직이면 중간에 위치하게 됩니다.

this.puzzleContainer.x = 50;
this.puzzleContainer.y = 50;

숫자는 Tile 클래스의  setText() 함수에서 처리하도록 합니다.

타일의 가로 세로가 100 이므로 가운데 값인 50에서 글자 길이의 너비, 높이를 반으로 나눈 값을 빼주면 됩니다. 

setText($txt) {
    this.numberTxt.text = $txt;
    this.numberTxt.x = 50 - this.numberTxt.width / 2;
    this.numberTxt.y = 50 - this.numberTxt.height / 2;
}

 

실행 결과

배치 코드를 적용하고 실행하면 보기 좋게 배치된 화면을 확인 할 수 있습니다.