📋

phina.jsでスライドメニュー作成

2021/02/20に公開

JavaScript

HTML 5

phina

tech

はじめに

以前にRunstantでコーディングしていたのですが、phina.jsでスライドメニューのようなものを作成しましたので、作り方を説明したいと思います。

実行サンプル

以下のrunstantプロジェクトを実行すると、画面左側から時間差でメニューがスライド表示されるのが確認できるかと思います。

サンプルコード

// グローバルに展開
phina.globalize();
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // グループ
    var menuGroup = DisplayElement().addChildTo(this);
    // メニューを並べる
    Array.range(2, 10, 2).each(function(i) {
      var menu = Button({text: 'menu' + i}).addChildTo(menuGroup);
      menu.setPosition(this.gridX.span(-3), this.gridY.span(i));
      // クリック時処理
      menu.onpush = function() {
        console.log(menu.text);
      };
    }, this);
    // 時間差で表示
    menuGroup.children.each(function(menu, i) {
      menu.tweener.wait(i * 100).by({x: 250}, 400, 'easeOutCubic').play();
    });
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

コード説明

ポイントを順に説明します。

メニューグループの作成

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

DisplayElement クラスを利用してメニューグループを作成し、MainScene に追加しています。

メニューを並べる

// メニューを並べる
Array.range(2, 10, 2).each(function(i) {
  var menu = Button({text: 'menu' + i}).addChildTo(menuGroup);
  menu.setPosition(this.gridX.span(-3), this.gridY.span(i));
  // クリック時処理
  menu.onpush = function() {
    console.log(menu.text);
  };
}, this);

メニューとしてButtonを使用しています。
拡張Arrayクラスのメソッドrangeと繰り返し用のeachメソッドを使って、インデックス2つ飛ばしで5個のボタンを作成しています。
Sceneにあらかじめ設定されているGridを使って、ボタンを並べて配置しています。一旦画面の左外側で見えない場所に配置しています。
ボタンのクリック時にonpushメソッドが呼ばれるので、例としてボタンのテキストをログに表示しています。

メニューのスライド表示

// 時間差で表示
menuGroup.children.each(function(menu, i) {
  menu.tweener.wait(i * 100).by({x: 250}, 400, 'easeOutCubic').play();
});

メニューグループの子要素に対して、tweener で移動アニメーションを設定しています。
wait で、その後の処理の実行までの待ち時間を一定時間ずらして設定し、by で一定時間（400ミリ秒）かけて、x の正方向に一定距離移動させています。
easeOutCubicは、イージングと呼ばれるものの一種で、動きに緩急の効果をつけることができます。

使い方

htmlファイルで phina.js を以下のように読み込みます。

<script src="https://cdn.jsdelivr.net/gh/phinajs/phina.js@v0.2.3/build/phina.js"></script>

さいごに

今回は、ゲームのUIに使えるかもしれない、ちょっとしたテクニックの紹介でした。
phina.jsには、ゲーム画面用のUIはあらかじめ用意されていませんが、工夫次第で自分好みのUIを作ることもできると思います。