PIXI.js

Question

でローカルそれのコンテナ内のテキストオブジェクトを中央にする方法以下のJSFiddleを確認してください：https://jsfiddle.net/r4yfozsw/1/

var stage = new PIXI.Container(), 
    renderer = PIXI.autoDetectRenderer(640, 480), 
    loader = PIXI.loader, 
    resources = loader.resources; 

var menu = createMenu(); 

document.body.appendChild(renderer.view); 
stage.addChild(menu); 

//Render the stage 
loop(); 


function loop(){ 
    setInterval(() => { 
      renderer.render(stage); 
     }, 1000/10); 
} 

function createMenu(){ 
    var buttons = new PIXI.Container(); 
    buttons.addChild(createButtonEndTurn()); 
    return buttons; 
} 

function createButtonEndTurn(){ 
    var buttonText = new PIXI.Text("End Turn", 
            { 
             fontFamily : 'Arial', 
             fontSize: 24, 
             fill : "white", 
             align : 'right' 
            }); 
    var buttonEndTurn = new PIXI.Graphics(); 

    buttonEndTurn.beginFill(0xFF2342); 
    buttonEndTurn.drawRect(400,300,150,100); 
    buttonEndTurn.endFill(); 
    buttonEndTurn.interactive = true; 
    buttonEndTurn.on('mousedown', endTurnEvent); 
    buttonEndTurn.addChild(buttonText); 

    return buttonEndTurn; 
} 

function endTurnEvent(eventData){ 
    eventData.target.children[0].setText("End Turn" + turn); 
    turn++; 
    console.log("Turn " + turn + " finished!"); 
} 

私は子供のように私のボタン長方形にテキストオブジェクトを追加しました。私はまた、テキストのためにオプションalignを追加しました。したがって、私は、テキストをローカルのボタンの中央に配置することを期待していましたが、キャンバス内の任意の位置にレンダリングされました。 PIXI.jsのコンテナシステムで私が理解できないことを教えてください。

Answer 1

あなたの矩形を描画した方法のために、テキストが再配置内に表示されない理由があります。 Graphicsオブジェクトはコンテナと考えてください。そのコンテナ内で、位置{x:400, y:300}に長方形を描画しましたが、コンテナ自体はまだ位置{x:0, y:0}に座っています。したがって、テキストオブジェクトを追加すると、コンテナ内の位置{x:0, y:0}にも配置されます。テキストを矩形内で移動させたい場合は、コンテナの位置を移動する必要があります。

buttonEndTurn.beginFill(0xFF2342); 
buttonEndTurn.drawRect(0,0,150,100); 
buttonEndTurn.endFill(); 
buttonEndTurn.x = 400; 
buttonEndTurn.y = 300; 

これでアライメントは手動で設定する必要があります。 align : 'center'の設定は、複数行のテキストで本当に便利なので、ここでは役に立ちません。親コンテナ内にテキストを配置しません。複数行テキストオブジェクトの各行が中央に揃うようにするだけです。

親コンテナ内に整列オブジェクトの中心がアンカーポイントを設定することであろうようにする最も簡単な方法：buttonText.anchor.x = 0.5;

は今テキストはそれから固定される中間点ですが、あなたが見ることができるように、そうではありません親矩形内に正しく配置されます。だからそれを上に移動します。

function createButtonEndTurn(){ 

    var buttonEndTurn = new PIXI.Graphics(); 
    buttonEndTurn.x = 400; 
    buttonEndTurn.y = 300; 
    buttonEndTurn.beginFill(0xFF2342); 
    buttonEndTurn.drawRect(0,0,150,100); 
    buttonEndTurn.endFill(); 
    buttonEndTurn.interactive = true; 
    buttonEndTurn.on('mousedown', endTurnEvent); 
    var buttonText = new PIXI.Text("End Turn", 
    { 
     fontFamily : 'Arial', 
     fontSize: 24, 
     fill : "white", 
     align : 'center' 
    }); 
    buttonText.anchor.x = 0.5; 
    buttonText.x = buttonEndTurn.width/2; 
    buttonEndTurn.addChild(buttonText); 
    return buttonEndTurn; 
} 

： buttonText.x = buttonEndTurn.width/2;は

ここで完全な機能です