标签: phaser-framework

我想知道如何在 Phaser.js 中循环音频。

目前我正在开发一款游戏，我正在尝试实现在结束时重新开始的音频。有没有像 sound.loop.play(); 这样的东西 或任何东西。

谢谢 ：）

我正在开发一个 HTML5 游戏，在高级模式下使用 Phaser 和 Google Closure 编译器来打包游戏。

我遇到了一个问题，似乎我无法销毁精灵。检查编译器的输出后，我注意到它不断删除我的销毁函数调用。

我的代码很简单，我已经测试了以下内容：

sprite.destroy();和Phaser.Component.Destroy.prototype.destroy.call(sprite);

这两行都只是从我的代码库中删除。这并不是因为它是无法访问的代码，如果我将console.log语句放在相同的范围内，它们就会保留在那里。

所以原来的代码是这样的：

if (typeof this.sprite != 'undefined'){
    console.log('destroy sprite');
    this.sprite.destroy();
    Phaser.Component.Destroy.prototype.destroy.call(this.sprite);
    console.log('sprite destroyed');
}

它被编译为：

"undefined"!=typeof this.sprite&&(console.log("destroy sprite"),console.log("sprite destroyed"))

我不明白为什么代码被删除，Phaser 设置为外部，并且我没有使用任何其他方法或 Phaser 类遇到此问题。

顺便说一下，简单地调用eval('this.sprite.destroy();');就可以了。这证明该函数确实存在。然而，这是一个非常糟糕的解决方案，并且只有在编译器在这种情况下没有替换时才有效sprite。

更新

我已经能够用很少的代码可靠地重现该问题，请参阅下面的答案。但我还不知道为什么会发生这种情况。

更新2

感谢 Hacketo，我们发现出现此问题是因为缺少正确的 Phaser 外部文件。专门针对此问题创建一个文件可以修复它，但是如果没有完整的文件，总会有可能出现更多问题。

对于这个特定问题，添加以下文件作为 extern 修复了它：http ://pastebin.com/nXA0fiZr

所以我是 Phaser 的新手。在我的游戏中，我需要检测何时按下“W”和“S”键。我查阅了文档但无法弄清楚。请帮帮我。

我有 Webpack/Phaser/Express 项目。当我加载应用程序时，Chrome 控制台中无法加载图像并出现以下错误：

GET http://localhost:8080/assets/ui/blue_button03.png 500 (Internal Server Error)

GET http://localhost:8080/assets/ui/blue_button02.png 500 (Internal Server Error)

将这些图像加载到移相器中：

this.load.image('blueButton1', 'assets/ui/blue_button02.png');
this.load.image('blueButton2', 'assets/ui/blue_button03.png');

我在尝试包含在移相器代码中的每个静态文件上都遇到了相同的错误。

网页包配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Phaser webpack config
const phaserModule = path.join(__dirname, '/node_modules/phaser/')
const phaser = path.join(phaserModule, 'src/phaser.js')

const definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
    WEBGL_RENDERER: true, // I did this to make webpack work, but I'm not really sure it should always be true
    CANVAS_RENDERER: true …

我有一个带有 Webpack 和 Phaser 3 的 Vue 应用程序，我正在尝试在我的主场景中加载图像和精灵表。

import Phaser from 'phaser'

export class MainScene extends Phaser.Scene {
  constructor () {
    super({
      key: 'MainScene'
    })
  };

  preload () {
    this.load.image('sand', require('@/assets/sand.png'))
    this.load.spritesheet('dude', require('@/assets/dude.png'), { frameWidth: 32, frameHeight: 48 })
  };

  create () {
   this.add.tileSprite(0, 0, 800, 600, 'sand').setOrigin(0, 0)

   let player = this.physics.add.sprite(100, 450, 'dude')
   player.setCollideWorldBounds(true)
  }

  update () {
   // update
  }
}

这对于沙子图像效果很好，但对于 spritesheet dude.png 则不然，我从这里的Phaser 教程下载了它。我的浏览器控制台输出是

Local data URIs are not supported: dude

经过研究，我发现本教程 …

设置

我使用 Phaser.io 和 Typescript 来开发浏览器游戏。我的回购协议是这样设置的。

ts配置：

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "CommonJS",
        "moduleResolution": "node",
        "sourceMap": true,
        "typeRoots": [
            "node_modules/@types",
            "node_module/phaser/types"
        ],
        "types": [
            "phaser"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

webpack.config：

const path = require('path');
const debug = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: './src/js/game.ts',
  mode: debug ? 'development' : 'production',
  watchOptions: {
    ignored: /node_modules/,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }, …

我正在创建的游戏不需要任何物理原理，但是当您将鼠标悬停在/单击精灵上时，您可以使用sprite.setInteractive({cursor: "pointer"});、sprite.on('pointermove', function(activePointer) {...});等进行交互。但是我注意到两个问题：

1. 精灵有一些透明的区域。点击那些透明区域时，交互功能仍然会触发，这是不理想的。

2. 当播放精灵动画时，交互区域似乎没有完全（根本？）改变，因此如果精灵在比前一个更大的帧上结束，最终会出现我无法交互的小区域。

我想到的一个选择是在我的精灵上创建一个多边形，它覆盖了我想要交互的区域。然而，在此之前，我只是想问是否有更简单的方法来解决这些问题。

如何在 create React app 或 craco 中完全关闭捆绑？我正在尝试使用 craco 来完成此操作，我的 webpack 配置如下：

        configure: {
            /* Any webpack configuration options: https://webpack.js.org/configuration */
            mode: 'development',
            optimization: {
                minimize: false,
            },
            devtool: 'eval-source-map',
        },

我需要关闭捆绑，因为即使使用源映射，Firefox 中的性能分析器（瀑布）仍然显示一些来自bundle.js 的调用，这...根本没有帮助，因为一些调用来自“bundle.js 行” 3051 %3E eval:81828” - 单击时，显示“未找到行”。“性能”选项卡中的“调用树”也只显示bundle.js (eval:####) 调用。当单击这些行时，它会将我带到如下所示的代码：

我正在尝试优化 Phaser webgl 游戏，但捆绑使事情变得非常困难。任何帮助，将不胜感激。

哦，还有一件奇怪的事情 - 当查看 Phaser 调用的 Waterfall 记录时 - 它通常以奇怪的损坏的“bundle.js%20line%20####%20%3E%20eval:######”开始#" 调用，但在其下方有phaser.js 调用，并带有指向调用它的代码行的工作链接。

相关package.json依赖项：

"@craco/craco": "^7.0.0-alpha.3",
"phaser": "^3.55.2",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",

我想用 Phaser 3 做一个音频输入可视化器，我\xe2\x80\x99m 试图将麦克风输入到着色器，但我\xe2\x80\x99t 找不到一种方法让它工作。

我对着色器有基本的了解，我可以使用图像纹理，但我真的不了解如何提供声音。我检查了在 Three.js 中制作的工作示例：Three.js webaudio - 可视化工具，并且我已经设法以 1024 个数字的 Uint8Array 形式从麦克风获取声音输入。

这里 \xe2\x80\x99s 着色器 I\xe2\x80\x99m 使用：

// simplesound.gsl.js\n#ifdef GL_ES\nprecision highp float;\n#endif\n\nprecision mediump float;\nuniform vec2 resolution;\nuniform sampler2D iChannel0;\n\nvarying vec2 fragCoord;\n\nvoid main() {\n  vec2 uv = fragCoord.xy / resolution.xy;\n  vec2 mu = texture2D(iChannel0, uv).rg;\n\n  float y = uv.y - mu.x;\n  y = smoothstep(0., 0.02, abs(y - 0.1));\n\n  gl_FragColor = vec4(y);\n}\n

这是我的场景代码，试图使其工作：

import Phaser from \'phaser\';\n// This will provide the array …

正如它所说,在Phaser.js中,如何为组内的每个对象应用一个动作.我想对每个项目应用以下行:

game.physics.arcade.collide(something, platforms);
game.physics.arcade.overlap(player, something, gameOver, null, this);
something.body.velocity.x = -120;

"Something"是对象名称,但我的组名称为"obstacleGroup".我想这样做,因为我有另一个功能一直向组创建新对象,所以我不一定知道它们被称为什么.