我正在嘗試使用 Phaser 3 繪制某種“射線”。
我用一個簡單的矩形來表示射線開始實驗。這是代碼。
this.add.circle(90, 290, 10, 0xf00000);
this.add.circle(290, 190, 10, 0xf00000);
let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
let reference = this.add.rectangle(90, 290, 600, 5, 0x00f000).setOrigin(0);
reference.rotation = angle
這條線不是從其起點的中心開始的。
我知道原因是 Phaser 從左上角 90、290 開始畫線（實際上是矩形），矩形的中心線應該從這里開始。
要修復它，我只需要更改y左上角
let reference = this.add.rectangle(90, 290-5/2, 600, 5, 0x00f000).setOrigin(0);
其中5in5/2表示綠色矩形的高度。
然后我得到了我想要的
但是，當我嘗試沿著“射線”移動某些東西時，事情變得復雜了。
這是代碼。
var game = new Phaser.Game({
scene: {
preload: preload,
create: create
}
});
function preload() {
this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}
function create() {
this.add.circle(90, 290, 10, 0xf00000);
this.add.circle(290, 190, 10, 0xf00000);
let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
let reference = this.add.rectangle(90, 290 - 5 / 2, 600, 5, 0x00f000).setOrigin(0);
reference.rotation = angle
let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
bolt.rotation = angle;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>我只是根據之前的作業代碼添加了2行代碼，想法相同
let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
bolt.rotation = angle;
76in代表我放置的螺栓（影像/矩形）的76/2高度。
290 表示起點中心的y坐標。
完全相同的想法將綠色矩形放在它的中心線上，雖然不能把它放在bolt正確的位置（沿著綠色矩形的中心線），這是為什么呢？我錯過了什么？
uj5u.com熱心網友回復：
要定位影像/矩形，...移相器使用origin.
快速解決問題的方法是使用setOrigin(0, .5)
（Phasers Origin 的詳細資訊）
這里的引數說明：
- 第一個引數是 x - 值：0 = 0% = 左
- 第二個引數是 y - 值：0.5 = 50% = middle
資訊：如果您只設定一個，例如
setOrigin(0)，兩者x和y都設定為0。
這里更新的例子：
var game = new Phaser.Game({
scene: {
preload: preload,
create: create
}
});
function preload() {
this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}
function create() {
this.add.circle(90, 290, 10, 0xf00000);
this.add.circle(290, 190, 10, 0xf00000);
let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
let reference = this.add.rectangle(90, 290 , 600, 5, 0x00f000).setOrigin(0, .5);
reference.rotation = angle
let bolt = this.add.sprite(90, 290, 'bolt', 'bolt_strike_0002').setOrigin(0, .5);
bolt.rotation = angle;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>資訊：在此答案中：https : //stackoverflow.com/a/70803036/1679286，您可以看到不同的集合原點如何改變 scale 屬性的效果。
uj5u.com熱心網友回復：
您需要一個偏移量，該偏移量可以改變其在區域坐標中的位置，并且任何物件的介質都被(width/2,height/2)賦予原點位于左上角。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420317.html
標籤：