如何獲得pixi以展開我的畫布並放大？

我製作的遊戲使用pixi，它在640x480像素的畫布上呈現。正如你可以想象的那樣，這在PC上查看時非常小。我想做到這一點：如何獲得pixi以展開我的畫布並放大？

我想增加畫布的大小，因此儘可能填滿整個屏幕
我想放大的內容，使其充滿了儘可能不改變其長寬比
我想，如果有剩下的空間從前面的步驟

當我谷歌如何做到這一點的Pixi的居中的畫布，我可以分別找到這。但是我想知道如何在一個地方和計算器上完成這些工作，因爲你通常都想把所有這些東西放在一起。

2014-05-14 Daniel Kaplan

我還沒有使用Pixi，但閱讀文檔也許CanvasRenderer API應該是你的1/2點的幫助（1.屬性寬度/高度 - 2.調整大小的方法）。 http://www.goodboydigital.com/pixijs/docs/classes/CanvasRenderer.html – keypaul

@keypaul也許你正在看到我不是。看起來它只會幫助第1點 –

我修改的源代碼在這個例子創建者提出：http://www.goodboydigital.com/pixi-js-tutorial-getting-started/(source download)

這就是我想出了：

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>pixi.js example 1</title> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
      background-color: #000000; 
     } 
    </style> 
    <script src="pixi.js"></script> 

</head> 
<body> 
    <script> 

    // create an new instance of a pixi stage 
    var stage = new PIXI.Stage(0x66FF99); 

    // create a renderer instance 
    var renderer = PIXI.autoDetectRenderer(400, 300); 
    renderer.resize(800, 600); 

    // add the renderer view element to the DOM 
    document.body.appendChild(renderer.view); 

    requestAnimFrame(animate); 

    // create a texture from an image path 
    var texture = PIXI.Texture.fromImage("bunny.png"); 
    // create a new Sprite using the texture 
    var bunny = new PIXI.Sprite(texture); 

    // center the sprites anchor point 
    bunny.anchor.x = 0.5; 
    bunny.anchor.y = 0.5; 

    // move the sprite t the center of the screen 
    bunny.position.x = 200; 
    bunny.position.y = 150; 

    var container = new PIXI.DisplayObjectContainer(); 
    container.scale.x = 2; 
    container.scale.y = 2; 
    container.addChild(bunny); 
    stage.addChild(container); 

    function animate() { 

     requestAnimFrame(animate); 

     // just for fun, lets rotate mr rabbit a little 
     bunny.rotation += 0.1; 

     // render the stage 
     renderer.render(stage); 
    } 

    </script> 

    </body> 
</html>

現在有一件事我沒有做的是中心了。我看到兩種可能的方式來做到這一點。我可以使用CSS來集中canvas（我可能會用到），或者我可以在代碼中添加另一個外部顯示對象到以container爲中心的舞臺上。

來源

2014-05-20 01:56:28

如何獲得pixi以展開我的畫布並放大？

回答

相關問題