【phina.js】게임 작성 튜토리얼(15퍼즐)(그 1)【피스의 배치】

※지금까지의 튜토리얼은 phina.js 튜토리얼 모음 에 정리하고 있습니다.

→ (그 2)【숫자의 표시】

소개

이 튜토리얼에서는 유명한 슬라이드 퍼즐인 15퍼즐을 phina.js로 만들고 싶습니다.

이번 목표

다음과 같이 15퍼즐 조각을 배치합니다.



코드는 다음과 같습니다.

// グローバルに展開
phina.globalize();
// 定数
var SCREEN_WIDTH = 640;            // 画面横サイズ
var SCREEN_HEIGHT = 960;           // 画面縦サイズ
var GRID_SIZE = SCREEN_WIDTH / 4;  // グリッドのサイズ
var PIECE_SIZE = GRID_SIZE * 0.95; // ピースの大きさ
var PIECE_NUM_XY = 4;              // 縦横のピース数
var PIECE_OFFSET = GRID_SIZE / 2;  // オフセット値
/*
 * メインシーン
 */
phina.define('MainScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'gray';
    // グリッド
    var grid = Grid(SCREEN_WIDTH, PIECE_NUM_XY);
    // ピースグループ
    var pieceGroup = DisplayElement().addChildTo(this);
    // ピース配置
    PIECE_NUM_XY.times(function(spanX) {
      PIECE_NUM_XY.times(function(spanY) {
        // ピース作成
        var piece = Piece().addChildTo(pieceGroup);
        // Gridを利用して配置
        piece.x = grid.span(spanX) + PIECE_OFFSET;
        piece.y = grid.span(spanY) + PIECE_OFFSET;
      });
    });
  },
});
/*
 * ピースクラス
 */
phina.define('Piece', {
  // RectangleShapeを継承
  superClass: 'RectangleShape',
    // コンストラクタ
    init: function() {
      // 親クラス初期化
      this.superInit({
        width: PIECE_SIZE,
        height: PIECE_SIZE,
        cornerRadius: 10,
        fill: 'silver',
        stroke: 'white',
      });
    },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

[runstant로 확인]

코드 설명

상수 정의

메인 장면 앞에 조각 크기 등을 상수로 정의합니다.

// 定数
var SCREEN_WIDTH = 640;            // 画面横サイズ
var SCREEN_HEIGHT = 960;           // 画面縦サイズ
var GRID_SIZE = SCREEN_WIDTH / 4;  // グリッドのサイズ
var PIECE_SIZE = GRID_SIZE * 0.95; // ピースの大きさ
var PIECE_NUM_XY = 4;              // 縦横のピース数
var PIECE_OFFSET = GRID_SIZE / 2;  // オフセット値

조각 클래스 정의

나중의 편의성을 생각하고 phina.define에서 다음과 같이 클래스화합니다.

// ピースクラス
phina.define('Piece', {
  // RectangleShapeを継承
  superClass: 'RectangleShape',
    // コンストラクタ
    init: function() {
      // 親クラス初期化
      this.superInit({
        width: PIECE_SIZE,
        height: PIECE_SIZE,
        cornerRadius: 10,
        fill: 'silver',
        stroke: 'white',
      });
    },
});

Piece 클래스는 phina.js에서 처음부터 준비되어 있는 RectangleShape(사각형) 클래스를 상속해, init 함수내에서 부모 클래스(RectangleShape)에 파라미터를 건네주어 초기화하고 있습니다.

조각은 사각형이므로 width와 height는 동일한 PIECE_SIZE를 제공합니다.

cornerRadius 속성을 설정하여 둥근 사각형을 만들 수 있습니다.

fill은 채우기 색이고 stroke는 테두리 색입니다.

phina.js에는 그 외에도 원이나 삼각형 등의 Shape(기본 도형)가 준비되어 있어, 모두 최소한의 파라미터로 draw 할 수 있으므로, 간단한 동작 확인시에 편리합니다.
Shape의 사용법에 대해서는, 저자인 phi 씨의 기사 phina.js를 사용하여 다양한 도형을 표시해 봅시다. 가 참고가 됩니다.

조각 배치

이번 목적인 피스의 배치에 대해 설명합니다.

// グリッド
var grid = Grid(SCREEN_WIDTH, PIECE_NUM_XY);
// ピースグループ
var pieceGroup = DisplayElement().addChildTo(this);
// ピース配置
PIECE_NUM_XY.times(function(spanX) {
  PIECE_NUM_XY.times(function(spanY) {
    // ピース作成
    var piece = Piece().addChildTo(pieceGroup);
    // Gridを利用して配置
    piece.x = grid.span(spanX) + PIECE_OFFSET;
    piece.y = grid.span(spanY) + PIECE_OFFSET;
  });
});

화면 폭을 조각의 수로 나눈 Grid를 작성하고 있습니다. Grid 클래스의 사용법에 대해서는 【phina.js】Grid 클래스를 잘 다루자 를 참고해 주세요.

DisplayElement 클래스를 사용하여 pieceGroup이라는 그룹을 만들고 있습니다. 그룹 관리에 대한 자세한 내용은 【phina.js】그룹 관리의 기본 테크닉을 참조하십시오.

피스의 배치는 이중 루프 처리로 실시합니다만, 이번은, phina.js 독자적인 times 메소드를 사용하고 있습니다. PIECE_NUM_XY에는 4라는 숫자가 들어 있으므로 인수로 주어진 function 내의 처리를 4회 반복한다는 의미가 됩니다. spanX와 spanY에는 인덱스 값인 0~3의 수치가 루프 처리로 들어오므로 이것을 잘 이용합니다.

그런 다음 조각을 만들어 이전에 만든 pieceGroup에 추가합니다.

마지막으로, 그리드를 이용해 피스를 배치하고 있습니다. 상수의 정의 부분에서 그리드의 크기보다 조각의 크기를 조금 작게 하고 있습니다만, 이것에 의해 padding과 비슷한 효과를 얻을 수 있습니다. 또한, phina.js에서의 오브젝트의 좌표치는 오브젝트의 원점(디폴트에서는 오브젝트의 중심)이 되기 때문에, PIECE_OFFSET로 위치를 조정하고 있습니다. PIECE_OFFSET의 부분을 삭제하고 실행해 보면 결과의 차이를 알 수 있을까 생각합니다.

작성한 pieGroup을 MainScene에 addChildTo 하면, 피스가 화면에 표시됩니다.

이번에는 여기까지

조각은 배치할 수 있었습니다만, 현시점에서는 단지 타일의 모임이군요.
다음 번에는 조각에 숫자를 표시하고 싶습니다.

→ (그 2)【숫자의 표시】