カラフルなShapeをランダムな位置にたくさん表示させる【Phina.js】

カラフルなShapeをランダムな位置にたくさん表示させる

// グローバルに展開
phina.globalize();

var SCREEN_WIDTH = 640;
var SCREEN_HEIGHT = 960;
var SHAPE_SIZE = 16;
var SHAPE_HALF = SHAPE_SIZE / 2;
var NUM = 50;
var SATURATION = 100; //彩度
var LIGHTNESS = 50; //輝度

// メインシーン
phina.define("MainScene", {

  // 継承
  superClass: 'DisplayScene',

  //初期化
  init: function () {
    //親クラス初期化
    this.superInit();
    //背景色
    this.backgroundColor = 'lightgray';
    // function内でthisを参照するための設定
    var self = this;
    //繰り返し処理
    (NUM).times(function (i) {
      // Shapeを作成してシーンに追加
      var shape = Shape({
        width: SHAPE_SIZE,
        height: SHAPE_SIZE,
        backgroundColor: 'red',
      }).addChildTo(self);

      //画面上に収まるランダムな位置に配置
      shape.x = Random.randint(SHAPE_HALF, SCREEN_WIDTH - SHAPE_HALF);
      shape.y = Random.randint(SHAPE_HALF, SCREEN_HEIGHT - SHAPE_HALF);
      //背景色をランダムに設定
      var hue = Random.randint(0, 360);
      shape.backgroundColor = 'hsl({0}, 75%, 50%)'.format(hue);
    });
  },

  //毎フレーム更新処理
  update: function () {

    //以下にコードを書いていく

  },
});

//メイン処理

phina.main(function () {
  // アプリケーションを生成
  var app = GameApp({
    // MainSceneから開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  //実行
  app.run();
});

▷hslとfomatメソッドを使った色指定

//背景色をランダムに設定
var hue = Random.randint(0, 360);
shape.backgroundColor = 'hsl({0}, 75%, 50%)'.format(hue);

HSL色空間は、色相（Hue）、彩度（Saturation）、輝度（Lightness）で色を指定する。

formatはStringクラスの拡張メソッドで、引数で与えられた値を文字列に引き渡す。
変数hueに代入されたランダムな整数値をformatメソッドに与えることで前段の文字列内の{0}がhueの値に置き換わる。
‘hsl({0}, {1}, 50%)’.format(hue, saturation)のように引数を増やすこともできる。