我需要知道如何相应地向左,右和向上(顶部)运动添加此精灵图像的第2行,第3行,第4行.

下面的代码是底部移动,作为精灵的第一行,我能够移动它.

如果我水平创建一个长精灵,我可以实现它,还有其他方法吗？

请帮我弄清楚如何包括第二排.

精灵图片(用户/播放器):

function preload(){
    myGame.load.spritesheet('user', 'user4.png', 95, 158, 12);
}
var player;

function create(){
    player = myGame.add.sprite(500, 100, 'user');
    myGame.physics.arcade.enable(player);
    player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true);

}

function update(){
        if (cursors.left.isDown) {
            //  Move to the left
            player.body.velocity.x = -150;
            player.animations.play('left');
        }
        else if (cursors.right.isDown)
        {
            //  Move to the right
            player.body.velocity.x = 150;
            player.animations.play('right');
        }
        else if (cursors.up.isDown)
        {
            //  Move to the right
            player.body.velocity.y = -50;
            player.animations.play('top');
        }
        else if (cursors.down.isDown)
        {
            //  Move to …

所以我使用phaser.io,但我想打印一个数组,所以我在我的页面html中创建它.

要设置数组的高度和宽度,我需要知道画布的高度和宽度.

所以我应该这样做:

$('canvas').height();

任务完成.

但是没有一个陷阱,我的画布看起来像这样:

<canvas width="1261" height="1101" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; cursor: inherit; margin-left: 1px; margin-right: 0px; margin-top: 0px;"></canvas>

每次它返回高度值而不是样式中的值.

所以我尝试其他方式:

$('canvas').css('height');
$('canvas').[0].style.height;
$('canvas')[0].style.cssText;

但我总是得到错误的结果

什么是超级奇怪的是,当我这样做:

console.log($('canvas')[0].style)

我在元素'height'和'cssText'中看到了我想要的结果.我把结果的一部分放在这里:

 0:"display"
    1:"touch-action"
    2:"user-select"
    3:"-webkit-tap-highlight-color"
    4:"width"
    5:"height"
    6:"margin-left"
    7:"margin-right"
    8:"margin-top"
    ...
    cssText:"display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; margin-left: 1px; margin-right: 0px; margin-top: 0px;"
    ...
    height:"925px"
    ...

有人可以告诉我为什么？并给我一个解决方案也可以很好.

=======编辑=======

当我执行$('canvas').height()点击一个元素时,我得到一些新闻.Actualy我可以处理它但我仍然不明白为什么当我这样做: …

是否有任何方法可以在Phaser-3框架中暂停正在运行的游戏并恢复（使用按钮）？为Phaser-2提供的那个不起作用。

我是游戏开发的新手,我想学习gamedev,我发现PhaserJS框架存在于GitHub中,我想用它开始编码

Phaser 3和Phaser 2/CE之间的差异是什么？

嗨,请帮助我了解如何使用Phaser3创建响应迅速的游戏.

限制是至关重要的,因为游戏(Blockly工作区的表示层)应该能够在屏幕上被扩展到更大的部分并在会话期间缩回很多次.

问题是如何在运行时改变游戏的尺寸？

---编辑---

这个

game.resize(window.innerWidth, window.innerHeight, 1.0);

不影响游戏本身,它只改变画布的大小,例如标志setCollideWorldBounds设置为的对象true仍然使用初始世界大小:(

最后这个例子100%ok labs.phaser.io

我是与Phaser 3和ApacheCórdova一起合作创建移动Android游戏的新手。

我创建了一个1200 x 800像素的游戏。在平板电脑上看起来不错，但在智能手机上却不行。如何缩放以在多种屏幕尺寸下工作？

此外，我需要帮助来强制使用Phaser 3调整游戏​​方向。

谢谢

我是 Javascript 新手，想用 Phaser 3 制作简单的游戏，我发现 Javascript 似乎与 C++ 或 Java 等其他 OOP 语言略有不同。我查看了官方网站和其他一些教程页面中的教程，大部分代码如下：

var config = {
    ...
    scene: {
        preload: preload,
        create: create,
        update: update
    }
}
var game = new Phaser.Game(config)

function preload(){
    this.load.img(...)
}

我的问题是什么是？"this"在preload()指示到？是不是"game"我们之前定义的意思？

以及如何在控制台中检查对象的类？typeof()只告诉"object"。

我是Phaser3 的新手，在开始一个疯狂的项目之前，我想知道我应该如何开始，在场景之间切换。我看到有几个功能，启动，启动，切换，运行，恢复，暂停等。

例如，假设我想要 2 个场景，一个菜单和一个游戏。我在菜单上启动，我想进入游戏场景，如果我点击一个按钮，然后回到菜单场景。

我已经通过调用启动功能实现了这一点，但我注意到，所有的，init，preload和create函数的调用每一次，所以我加载的所有图像，将所有听众一遍又一遍。

这似乎是错误的，我应该使用启动或切换功能并暂停和恢复吗？但是如何隐藏之前的场景呢？

提前致谢。

我开始学习Phaser 3框架，我面临这个大错误，我不知道为什么会发生这种情况，错误是：无法添加具有重复键的场景：默认。

我的两个密钥完全不同，这里可能出了什么问题，我不明白，我正在观看 YouTube 播放列表教程，而那个人有完全相同的东西，并且一切对他来说都工作正常，因为它应该。

我的主要区别是我在 Node js 服务器中运行所有这些，但我认为这并不重要，我只是提供包含所有游戏的公共文件夹。

这是我的一些代码

这是我的第一个场景

class BootLoader extends Phaser.Scene {
    constructor() {
        super({
            Key: "BootLoader"
        });
    }

    preload() {
        alert("La escena del boot cargo");
    }
}

export default BootLoader;

这是第二个场景

class ScenePlay extends Phaser.Scene {
    constructor() {
        super({
            Key: "ScenePlay"
        });
    }

    preload() {
        alert("La escena del scene cargo");
    }
}

export default ScenePlay;

这是我的初始化文件，其中包含游戏的配置。

import ScenePlay from "./scenes/ScenePlay.js";
import BootLoader from "./bootloader.js";

const config = {
    width: 640,
    height: 400,
    parent: …

我将图像作为精灵添加到画布中，并使用.setScale(0.1).

问题是图像看起来像素化（而图像文件本身是高分辨率的）。

在我缩小图像之前，它看起来很好。该问题仅在缩放后发生。

这是我导入移相器 3 的图像文件（在我的计算机的图像查看器中缩放）：

这是图像在缩小之前在 Phaser 3 上的外观（很好）：

（这里的色调不同，但没关系）

这是缩小后的样子：

如您所见，结果非常像素化。 我怎样才能克服这个问题？

非常感谢提前这是我的代码的缩短版本：

var config = {
  backgroundColor: "#ffb3c9",
  type: Phaser.WEBGL,
  width: 600,
  height: 600,
  parent: "pageContent",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
  scene: {
    preload: preload,
    create: create,
  },
};
var game = new Phaser.Game(config);
function preload() {
    this.load.image("img", "img.png");
}
function create() {
    var sprite = this.add.sprite(50,50,"img").setScale(0.1);
    sprite.tint = 0x000000;
}

更新

我发现这个问题是由于使用了 HTML 画布造成的。但是，有一些方法可以克服这个问题：

• 手动编写某些算法以更好地调整大小。
• 使用 …