如何獲得pixi來擴展畫布並放大？

Question

我正在制作一個使用pixi的游戲，它在640x480像素的畫布上渲染。 可以想象，在PC上觀看時，這很小。 我想做到這一點：

我想增加畫布的大小，以便填滿整個屏幕
我想放大內容，以便在不改變其縱橫比的情況下盡可能多地填充內容
如果上一步有剩余空間，我想將畫布居中

當我在pixi中搜尋如何執行此操作時，我可以分別找到每個。 但是，我想獲得有關如何在一處和全部執行此操作的信息，因為您通常希望一起完成所有這些操作。

Answer 1

我在創建者創建的此示例中修改了源代碼： http : //www.goodboydigital.com/pixi-js-tutorial-getting-started/ （源下載）

這是我想出的：

<!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居中的階段中來做到這一點。

如何獲得pixi來擴展畫布並放大？

問題描述

1 個解決方案

解決方案1
0 已采納 2014-05-20 01:56:28

如何獲得pixi來擴展畫布並放大？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-05-20 01:56:28

解決方案1
0 已采納 2014-05-20 01:56:28