[英]How do I get pixi to expand my canvas and zoom in?
我正在制作一个使用pixi的游戏,它在640x480像素的画布上渲染。 可以想象,在PC上观看时,这很小。 我想做到这一点:
当我在pixi中搜寻如何执行此操作时,我可以分别找到每个。 但是,我想获得有关如何在一处和全部执行此操作的信息,因为您通常希望一起完成所有这些操作。
我在创建者创建的此示例中修改了源代码: 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
居中的阶段中来做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.