【phina.js】게임 작성 튜토리얼(마인 스위퍼)(그 1)【패널의 배치】

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

소개

이 튜토리얼은 "phina.js에서 게임 만들기"를 조금 알고 있다고 가정합니다.

이번 목표

다음과 같이 패널을 정렬합니다.

이번 코드

phina.globalize();
// 定数
var SCREEN_WIDTH = 640; // 画面横サイズ
var PANEL_NUM_XY = 9; // 縦横のパネル数
var GRID_SIZE = (SCREEN_WIDTH - 10) / PANEL_NUM_XY; // グリッドのサイズ
var SCREEN_HEIGHT = GRID_SIZE * 11; // 画面縦サイズ
var PANEL_SIZE = GRID_SIZE * 0.9; // パネルの大きさ
var PANEL_OFFSET = (GRID_SIZE + 10) / 2; // オフセット値
// メインシーン
phina.define('MainScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit({
      width: SCREEN_WIDTH,
      height: SCREEN_HEIGHT,
    });
    // 背景色
    this.backgroundColor = 'gray';
    // グリッド
    var grid = Grid(GRID_SIZE * PANEL_NUM_XY, PANEL_NUM_XY);
    // グループ
    var panelGroup = DisplayElement().addChildTo(this);
    // ピース配置
    PANEL_NUM_XY.times(function(spanX) {
      PANEL_NUM_XY.times(function(spanY) {
        // パネル作成
        var panel = Panel().addChildTo(panelGroup);
        // Gridを利用して配置
        panel.x = grid.span(spanX) + PANEL_OFFSET;
        panel.y = grid.span(spanY) + PANEL_OFFSET;
      });
    });
  },
});
// パネルクラス
phina.define('Panel', {
  // RectangleShapeを継承
  superClass: 'RectangleShape',
    // コンストラクタ
    init: function() {
      // 親クラス初期化
      this.superInit({
        width: PANEL_SIZE,
        height: PANEL_SIZE,
        fill: 'silver', // 塗りつぶし色
        stroke: 'white', // 枠の色
        cornerRadius: 2, // 角の丸み
      });
    },
});
// メイン
phina.main(function() {
  var app = GameApp({
    startLabel: 'main', // メイン画面からスタート
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  });
  app.run();
});

[runstant로 확인]

코드 설명

상수 정의

// 定数
var SCREEN_WIDTH = 640; // 画面横サイズ
var PANEL_NUM_XY = 9; // 縦横のパネル数
var GRID_SIZE = (SCREEN_WIDTH - 10) / PANEL_NUM_XY; // グリッドのサイズ
var SCREEN_HEIGHT = GRID_SIZE * 11; // 画面縦サイズ
var PANEL_SIZE = GRID_SIZE * 0.9; // パネルの大きさ
var PANEL_OFFSET = (GRID_SIZE + 10) / 2; // オフセット値

게임에 필요한 각종 정수를 정의하고 있습니다.

그리드의 사이즈는, 가능한 한 큰 사이즈로 패널수로 분할할 수 있도록(듯이) 계산으로 구하고 있습니다.

패널의 크기를 그리드 크기보다 약간 작게 하는 것은 배치할 때 틈을 열기 때문입니다.

패널을 올바른 위치에 배치할 수 있도록 오프셋 값을 계산합니다.

Panel 클래스

메인 처리 전에 패널 클래스에 대해 설명합니다.

// パネルクラス
phina.define('Panel', {
  // RectangleShapeを継承
  superClass: 'RectangleShape',
    // コンストラクタ
    init: function() {
      // 親クラス初期化
      this.superInit({
        width: PANEL_SIZE,
        height: PANEL_SIZE,
        fill: 'silver', // 塗りつぶし色
        stroke: 'white', // 枠の色
        cornerRadius: 2, // 角の丸み
      });
    },
});

phina.define에서 클래스를 정의합니다.

패널은 사각형이므로 RectangleShape(사각형) 클래스를 상속합니다.

this.superInit에서 상위 클래스에 매개 변수를 제공하여 초기화합니다.

cornerRadius는 모서리 둥근을 ​​지정합니다. (tmlib.js에서 RoundRectangleShape)

메인 장면

// コンストラクタ
init: function() {
  // 親クラス初期化
  this.superInit({
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  });

화면 크기를 반영하려면 DisplayScene의 상위 클래스에도 width와 height를 지정해야 합니다.

  // 背景色
  this.backgroundColor = 'gray';

Scene의 배경색을 지정합니다.

  // グリッド
  var grid = Grid(GRID_SIZE * PANEL_NUM_XY, PANEL_NUM_XY);

Grid 클래스를 사용하여 배포에 대한 정보를 생성합니다. 여기서 1 그리드의 크기가 결정됩니다.

  // グループ
  var panelGroup = DisplayElement().addChildTo(this);

DisplayElement를 사용하여 패널을 저장하는 그룹을 만듭니다.

  // ピース配置
  PANEL_NUM_XY.times(function(spanX) {
    PANEL_NUM_XY.times(function(spanY) {
      // パネル作成
      var panel = Panel().addChildTo(panelGroup);
      // Gridを利用して配置
      panel.x = grid.span(spanX) + PANEL_OFFSET;
      panel.y = grid.span(spanY) + PANEL_OFFSET;
    });
  });
},

패널을 그리드 형태로 배치하는 처리입니다.

times 함수는, phina.js 독자적인 사양으로, 앞에 붙은 값의 회수만 처리를 반복합니다. 여기에서는 PANEL_NUM_XY회, 즉 9회 반복입니다. 중첩하여 그리드 모양으로 배치합니다.

Panel을 만들고 panelGroup에 추가하고 있습니다.

마지막으로 패널의 위치를 ​​지정합니다. span에 인덱스 값을 지정함으로써 그리드 형태로 깨끗하게 배치할 수 있습니다.

이번에는 여기까지

지금까지 패널을 배치 할 수있었습니다.
다음 번은 폭탄 배치입니다.