[phina.js] 마리오 같은 적을 무찌르는 효과.

개시하다

대상을 이해하는 오리진

적 붕괴 효과

// 縦方向に縮小
bugbow.tweener.clear().to({scaleY: 0.1}, 200);

origin의 변경 및 위치 조정

// origin変更
bugbow.setOrigin(0.5, 1.0);
// 位置調整
bugbow.y += bugbow.height / 2;
// 縦方向に縮小
bugbow.tweener.clear().to({scaleY: 0.1}, 200);

끝말

샘플 코드

phina.globalize();
// アセット
var ASSETS = {
  // 画像
  image: {
    'tiles': 'https://cdn.jsdelivr.net/gh/alkn203/assets_etc/tiles.png',
    'bugbow': 'https://cdn.jsdelivr.net/gh/alkn203/assets_etc/bugbow.png',
  },
};
// 定数
var GRID_SIZE = 64; // グリッドのサイズ
// ステージデータ
var STAGE = ['4444444444',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4333333334',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004',
             '4000000004'];
             
// メインシーン
phina.define('MainScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'skyblue';
    // グリッド
    this.gx = Grid(640, 10);
    this.gy = Grid(960, 15);
    // グループ
    this.objectGroup = DisplayElement().addChildTo(this);
    this.setStage(STAGE);

    var stone = RectangleShape({
      fill: 'gray',
      cornerRadius: 10,
    }).addChildTo(this);
    // 落下
    stone.setPosition(this.gx.center(), this.gy.center(-4)).physical.gravity.y = 0.5;
    
    var bugbow = Sprite('bugbow', GRID_SIZE, GRID_SIZE).addChildTo(this);
    bugbow.setPosition(this.gx.center(), this.gy.center(1));
    // 潰れイベント（1回限り）
    bugbow.one('stump', function() {
      // origin変更
      bugbow.setOrigin(0.5, 1.0);
      // 位置調整
      bugbow.y += bugbow.height / 2;
      // 縦方向に縮小
      bugbow.tweener.clear().to({scaleY: 0.1}, 200);
    });
    
    this.update = function() {
      // 当たり判定
      if (stone.hitTestElement(bugbow)) {
        stone.remove();
        bugbow.flare('stump');
      }
    };
  },
  // マップ作成
  setStage: function(stage) {
    var half = GRID_SIZE / 2;
    var self = this;
    // マップデータをループ
    stage.each(function(arr, j) {
      // 文字列を配列に変換
      arr.toArray().each(function(id, i) {
        var x = self.gx.span(i) + half;
        var y = self.gx.span(j) + half;
        // 空白以外の場合
        if (id > 0) {
          // タイルセットからスプライト作成
          var elem = Sprite('tiles', GRID_SIZE, GRID_SIZE).addChildTo(self.objectGroup);
          elem.setPosition(x, y);
          // フレームインデックス指定
          elem.frameIndex = id - 1;
          return;
        }
      });
    });
  },
});
// メイン
phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
    // アセット読み込み
    assets: ASSETS,
  });
  
  app.run();
});

runstant 프로젝트