phina.jsでグリッドに四角形を敷き詰める - Qiita コメント:#comment-367af7204008c31bfa1f
こちらでお礼を。
一日経って見返してみればぜんぜん参考記事のコードと別物を書いていましたね…。
頂いたサンプルコードを使うとしっかりと並べることができました。
ありがとうございます。
ただ、このまま画像を載せると四角形の中から、はずれる。
これはグリッドを
Array.range(0, 16).each((X) =>{
Array.range(0, 16).each((Y) =>{
let rect = RectangleShape({
width: 40,
height: 60,
padding: 0, // パディングを0にする
strokeWidth: 1, // 線幅すっきりに
}).addChildTo(this);
rect.setPosition(this.gridX.span(X),this.gridY.span(Y));
rect.setOrigin(0,0); // 左上を原点にする
rect.fill = 'transparent';
});
});
rect.setOrigin(0,0); // 左上を原点にする
左上を原点にしたからと予想。
この、
「グリッドの点が画面中央に来ることが正しい」
のか
「グリッドの4点に囲まれた四角形(と認識する領域)の中心部が画面中央に来ることが正しい」
のかがまったくわからなくて良く混乱します…。
2進数で0から数えて1番目は0みたいな、ズレというかなんというか…。
閑話休題。
グリッドが左上原点になったので、画像も合わせる
const player = Sprite('player').addChildTo(this);
player.x = this.gridX.center();
player.y = this.gridY.center();
player.setOrigin(0,0)
行き過ぎてません？
1スタートで16ぶんの9,9グリッドに位置しています。
1時間ぐらい悩んだが、たぶんこれで正しいんだと。
原点が変わったから、画像の左上が画面中央に来ているから正しいのだと言い聞かせました。
こう…さっきの閑話に戻ると…囲碁で中央に石を置いてというのとオセロで中央に置いては違う…みたいな…。
で、前回の雑なグリッドでは目立たなかった(しサイズもちょうど似通っていた)のですが、画像サイズのせいでまだ四角の中央に立っていない。
四角形は4060。画像は3264。
左上に置くので、下に4はみ出て右に8余っている計算になる…はず。
サイズオーバーはしかたないので、はみ出すのは下ではなく上に。
左右は中央に置くので余りは左右均等割付で。
するとこんなコードに。
const player = Sprite('player').addChildTo(this);
player.xOffset = 4;
player.yOffset = -4;
player.x = this.gridX.center() + player.xOffset;
player.y = this.gridY.center() + player.yOffset;
player.setOrigin(0,0)
gridXに対してxOffsetとかoffsetがあっているかわかりませんが、これで、下のライン上で、頭がちょっと出ていて、左右の中央に立っている画像が設置できた。
参考
phina.js-Tips Shapeの原点を変更する - Qiita
今後全部原点を左上に置くことになるとその場回転したいときに困るのかも。
(画像の原点移動ではなくオフセットで対応すると)