Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

phina.js の Shape での origin による座標計算は padding を含む

More than 1 year has passed since last update.

phina.js の小ネタです。

以前に調べて知っていたはずなのに、久しぶりにまた引っかかったので記事に残しておきます。

実のところタイトルがほぼ全てなのですが、それでは寂しいので少し解説を書いてみます。

origin について

Object2D を継承している各クラスは origin で座標の基準を指定することが出来ます。
(0.0, 0.0) で左上が、(0.5, 0.5) で真ん中が、(1.0, 1.0) では右下が基準になります。
0.0 ~ 1.0 の範囲外を指定することで図形の外に基準を置くことも出来ます。
ちなみにデフォルトは (0.5, 0.5) です。

参考: [phina.js-Tips] Shapeの原点を変更する

Shape の origin

ここからが本題です。

RectangleShape などの各 ShapeObject2D を継承していますので、もちろん origin を指定できます。

ただし Shape を継承したクラスの場合は origin による座標の計算時に widthheight だけでなく padding も考慮されます。

例えば RectangleShape の場合 origin の (0, 0) は矩形の左上ではなく矩形からさらに padding 分左上の位置になります。

こんな感じです。

phina.globalize();

phina.define('MainScene', {
  superClass: 'DisplayScene',

  init: function(params) {
    this.superInit(params);

    // シーンの背景を赤にしておく
    this.backgroundColor = "red";

    // シーンと同じ大きさの矩形を左上に合わせて追加(したつもり)
    var rect = RectangleShape()
     .setOrigin(0.0, 0.0)
     .setPosition(0, 0)
     .setSize(this.width, this.height)
      .addChildTo(this);
  },
});

phina.main(function() {
  // 結果を見やすくするためにゲームサイズを小さくする
  GameApp({
    width: 100,
    height: 100,
    startLabel: 'main'
  }).run();
});

実行結果:
RectangleShape.png

コードだけ見るとシーン全体を矩形で埋め尽くしそうな気がしますが、実際には padding 分右下にずれて描画されました。

ちなみに padding のデフォルトは 8 です。

padding について

上の例では padding を 0 にすることで矩形がシーンにぴったり重なるようになります。

しかし padding のデフォルトがなぜ 0 ではないのか? あるいはそもそも padding の役割は? といった話はググっても全然ヒットしませんでした。

なので、元の話題からちょっと派生して padding についても簡単に書いておきます。

Shape の派生クラスでは strokestrokeWidth で枠を描画することが出来ます。
そしてこの枠は strokeWidth の半分の幅で元の図形の外側に描画されます。

例えば、

var rect = RectangleShape({
  width: 100,
  height: 100,
  stroke: "red",
  strokeWidth: 10
});

と指定すると、縦横 100px の矩形の外側に幅 5px の赤い枠が描画されます。

ここでもし padding を 0 にしてしまうと、この赤い枠が描画されなくなります。

なぜなら RectangleShape では、width および height で指定された範囲 + padding 分の領域だけシーンに描画される仕組みになっているためです1

padding のデフォルトは 8 でしたので、strokeWidth が 16 を超えると、それ以上いくら数字を大きくしても枠は太くなりません2
この場合 padding をその分大きくすることで描画されるようになります。

なお shadowshadowBlur を指定する場合も同様です。


  1. Shape から派生している他のクラスも基本的に同様です。 

  2. 丸い角が直角になるという変化はあったりします。 

hansel_no_kioku
組み込み系(主にC言語)です。 趣味でいろいろ遊んでいます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away