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

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

(그 2)【숫자의 표시】 ←→ (그 4)【피스의 이동】

이번 목표

지난번에는 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 num = spanY * PIECE_NUM_XY + spanX + 1;
        // ピース作成
        var piece = Piece(num).addChildTo(pieceGroup);
        // Gridを利用して配置
        piece.x = grid.span(spanX) + PIECE_OFFSET;
        piece.y = grid.span(spanY) + PIECE_OFFSET;
        // タッチを有効にする
        piece.setInteractive(true);
        // タッチされた時の処理
        piece.onpointend = function() {
          console.log(this.num);
        };
        // 16番のピースは非表示
        if (num === 16) piece.hide();
      });
    });
  },
});
// ピースクラス
phina.define('Piece', {
  // RectangleShapeを継承
  superClass: 'phina.display.RectangleShape',
    // コンストラクタ
    init: function(num) {
      // 親クラス初期化
      this.superInit({
        width: PIECE_SIZE,
        height: PIECE_SIZE,
        cornerRadius: 10,
        fill: 'silver',
        stroke: 'white',
      });
      // 数字
      this.num = num;
      // 数字表示用ラベル
      this.label = Label({
        text: this.num + '',
        fontSize: PIECE_SIZE * 0.8,
        fill: 'white',
      }).addChildTo(this);
    },
});
// メイン
phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
  });
  app.run();
});

[runstant로 확인]

코드 설명

터치 이벤트 추가

조각 작성시의 처리를 다음과 같이 변경합니다.

// ピース配置
PIECE_NUM_XY.times(function(spanX) {
  PIECE_NUM_XY.times(function(spanY) {
    // 番号
    var num = spanY * PIECE_NUM_XY + spanX + 1;
    // ピース作成
    var piece = Piece(num).addChildTo(pieceGroup);
    // Gridを利用して配置
    piece.x = grid.span(spanX) + PIECE_OFFSET;
    piece.y = grid.span(spanY) + PIECE_OFFSET;
    // タッチを有効にする
    piece.setInteractive(true);
    // タッチされた時の処理
    piece.onpointend = function() {
      console.log(this.num);
    };
    // 16番のピースは非表示
    if (num === 16) piece.hide();
  });
});

phina.js 에서 오브젝트의 터치를 유효하게 하려면 , obj.setInteractive(true) 로 설정합니다. 이번은, 피스 배치시에 유효하게 하므로, piece.setInteractive(true)를 추가합니다.

터치를 활성화했지만 일반 프로그램에서 사용하려면 터치 이벤트를 선택해야 합니다. 그래서 조각에 onpointend 함수를 추가하고 터치시 처리를 설명합니다. 이번에는 동작 확인용으로 터치된 피스의 숫자를 콘솔에 출력하도록 하고 있습니다.

자주 사용하는 터치 이벤트는 다음의 3종류가 있습니다. 각각 다시 써보고 동작 확인하면 차이를 알 수 있을까 생각합니다.

onpointstart --- 터치 시작시

onpointmove --- 터치 중 (이동 포함)

onpointgend --- 터치가 떨어져있을 때

이번에는 여기까지

지금까지 조각에 터치 이벤트를 추가할 수 있었습니다.
다음에는 메인이라고도 할 수 있는 피스의 이동을 구현하고 싶습니다.

(그 2)【숫자의 표시】 ←→ (그 4)【피스의 이동】