Pixi.js视口跟随对象
Pixi.js视口跟随对象
提问于 2018-11-22 14:02:16
我在做一个简单的游戏，用户和一个人一起走来走去。那个人的枪总是指着老鼠。我想要的是允许这个人走出视口，让这个视口适应这一点。视图应该总是让人在中间。我已经试过这个图书馆了，但我没能让它开始工作。我所指的一个很好的例子是Agar.io，玩家总是看到自己站在视口中间，周围的一切都在移动。
有人知道我该如何用Pixi.js来做这件事吗？
我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style>
canvas{border:2px solid #000;}
</style>
</head>
<script src="pixi.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<script type="text/javascript">
function keyboard(value) {
let key = {};
key.value = value;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
//The `downHandler`
key.downHandler = event => {
if (event.key === key.value) {
if (key.isUp && key.press) key.press();
key.isDown = true;
key.isUp = false;
event.preventDefault();
}
};
//The `upHandler`
key.upHandler = event => {
if (event.key === key.value) {
if (key.isDown && key.release) key.release();
key.isDown = false;
key.isUp = true;
event.preventDefault();
}
};
//Attach event listeners
const downListener = key.downHandler.bind(key);
const upListener = key.upHandler.bind(key);
window.addEventListener(
"keydown", downListener, false
);
window.addEventListener(
"keyup", upListener, false
);
// Detach event listeners
key.unsubscribe = () => {
window.removeEventListener("keydown", downListener);
window.removeEventListener("keyup", upListener);
};
return key;
}
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a Pixi Application
let app = new Application();
app.renderer.backgroundColor = 0xffffff;
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
loader
.add([
"sprite.png",
"img/walking/walking1.png",
"img/walking/walking2.png"
])
.load(setup);
let alienImages = ["img/walking/walking1.png","img/walking/walking2.png","img/walking/walking3.png","img/walking/walking4.png","img/walking/walking5.png","img/walking/walking6.png","img/walking/walking7.png","img/walking/walking8.png"];
let textureArray = [];
for (let i=0; i < 8; i++)
{
let texture = PIXI.Texture.fromImage(alienImages[i]);
textureArray.push(texture);
};
console.log(textureArray);
let cat;
let pixie = new PIXI.MovieClip(textureArray);
let radian;
let radianLast;
let mouseX;
let mouseY;
let left = keyboard("a"),
up = keyboard("w"),
right = keyboard("d"),
down = keyboard("s");
function checkIfAnimationStop(){
if(!right.isDown && !left.isDown && !down.isDown && !up.isDown){
pixie.gotoAndStop(0);
}
}
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
cat = new Sprite(resources["sprite.png"].texture);
//cat.anchor.set(84.5, 115.5);
pixie.vx = 0;
pixie.vy = 0;
//Add the cat to the stage
pixie.position.set(32, 32);
app.stage.addChild(pixie);
pixie.animationSpeed = 0.2;
left.press = () => {
//Change the cat's velocity when the key is pressed
pixie.play();
pixie.vx = -4;
};
//Left arrow key `release` method
left.release = () => {
//If the left arrow has been released, and the right arrow isn't down,
//and the cat isn't moving vertically:
//Stop the cat
if (!right.isDown) {
pixie.vx = 0;
}
left.isDown = false;
checkIfAnimationStop();
};
//Up
up.press = () => {
pixie.play();
pixie.vy = -4;
};
up.release = () => {
if (!down.isDown) {
pixie.vy = 0;
}
up.isDown = false;
checkIfAnimationStop();
};
//Right
right.press = () => {
pixie.play();
pixie.vx = 4;
};
right.release = () => {
if (!left.isDown) {
pixie.vx = 0;
}
right.isDown = false;
checkIfAnimationStop();
};
//Down
down.press = () => {
pixie.play();
pixie.vy = 4;
};
down.release = () => {
if (!up.isDown) {
pixie.vy = 0;
}
down.isDown = false;
checkIfAnimationStop();
};
pixie.rotation = 0.5;
state = play;
app.ticker.add(delta => gameLoop(delta));
}
function gameLoop(delta){
state(delta);
}
function play(delta){
pixie.anchor.x = 0.9;
pixie.anchor.y = 0.5;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
radianLast = radian;
});
radian = Math.atan2(mouseX-pixie.x,-(mouseY-pixie.y));
if((radian - pixie.rotation) > 0){
if((radian - pixie.rotation) > 3.14){
pixie.rotation -= 0.05;
if(pixie.rotation < -3.1){
pixie.rotation = 3.13;
}
} else {
pixie.rotation += 0.05;
}
}
if((radian - pixie.rotation) < 0){
if((radian - pixie.rotation) < -3.14){
pixie.rotation += 0.05;
if(pixie.rotation > 3.1){
pixie.rotation = -3.13;
}
} else {
pixie.rotation -= 0.05;
}
}
$("#angle").text(pixie.vx);
$("#info").text(pixie.vy);
if(pixie.vx != 0 && pixie.vy != 0){
if(pixie.vx > 0){
pixie.vx2 = 2.828;
} else if(pixie.vx < 0){
pixie.vx2 = -2.828;
}
if(pixie.vy > 0){
pixie.vy2 = 2.828;
} else if(pixie.vy < 0){
pixie.vy2 = -2.828;
}
pixie.x += pixie.vx2;
pixie.y += pixie.vy2;
$("#angle").text(pixie.vx2);
$("#info").text(pixie.vy2);
} else {
pixie.x += pixie.vx;
pixie.y += pixie.vy;
}
}
</script>
<div id="angle"></div>
<div id="info"></div>
<div id="t"></div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2022-05-09 22:00:56
- 创建一个容器来充当您的世界。
- 把你的精灵放在容器里
- 移动播放机时，更新容器的枢轴。
const world = new PIXI.Container();
world.height = 4000;
world.width = 4000;
world.x = app.screen.width / 2;
world.y = app.screen.height / 2;
world.pivot.x = world.width / 2;
world.pivot.y = world.height / 2;
//create sprites
world.addChild(sprite3);
world.addChild(sprite2);
world.addChild(player);
app.stage.addChild(world);
app.ticker.add((delta) => {
let distance = delta * 10;
if(Input.Left) { //Get player input however you please
player.x -= distance;
world.pivot.x = player.x;
}
else if (Input.Right) {
player.x += distance;
world.pivot.x = player.x;
}
});您可能需要调整一些位置等，以正确地排列事情，但这是一般的想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53432658
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号