标签: phaser-framework

我们假设你得到以下数组:

foo = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,0,0,0,1,0,0],
    [0,0,0,1,0,0,0,1,0,0],
    [0,0,0,1,1,1,0,1,0,0],
    [0,0,0,0,0,1,0,1,0,0],
    [0,0,0,0,0,1,1,1,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
]

如何判断1s的模式是否为闭环？几天我一直在努力.我已经尝试了一个递归循环来查找邻居和单词,但是当你有一个更复杂的模式时,它将无法工作,例如:

foo = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,0,0,0,0],
    [0,0,0,1,0,1,0,0,0,0],
    [0,0,0,1,0,1,0,0,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
]

有人有一个神奇的算法来解决这个问题吗？:(

我正试图将一个精灵从一个点补间到另一个点,并在它移动时逐渐消失.我试过这个:

const tween = game.tweens.add({
  targets: [log.sprite],
  x: fire.x,
  y: fire.y + (fire.height * 0.2),
  opacity: 0,
  duration: 300,
  repeat: 0,
  onComplete() {
    destroyLog(log);
    resolve();
  },
});

但这不起作用.我在为Phaser 3找到好的API文档时遇到了很多麻烦,所以我不确定在哪里寻找这些信息.

我有一个用 create-react-app 创建的 React 应用程序，我也在尝试集成 Phaser 3。我按照本指南开始。我有画布渲染文本，但在预加载中加载图像似乎不起作用。我得到默认的无法加载显示的纹理图像。

import ExampleScene from "./scenes/ExampleScene";

import * as React from "react";

export default class Game extends React.Component {
  componentDidMount() {
    const config = {
      type: Phaser.AUTO,
      parent: "phaser-example",
      width: 800,
      height: 600,
      scene: [ExampleScene]
    };

    new Phaser.Game(config);
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return <div id="phaser-game" />;
  }
}

示例场景：

import Phaser from "phaser";

export default class ExampleScene extends Phaser.Scene {
  preload() {
    this.load.image("logo", "assets/logo.png");
  }
  create() {
    const text …

我正在 Phaser 3 中制作游戏。我从互联网上下载了高质量 (1100x1000px) 的图像以供使用。但是每当我缩小它们（大约 80x70 像素）时，它们就会失去质量（要么变得像素化，要么看起来很奇怪）。如何正确调整图像大小以保持质量？

我使用 image.setDisplaySize() 重新调整了图像的大小，但图像看起来很奇怪。我不知道为什么，但图像对比发生了变化。确切代码-

gameState.team_player_icon = gameState.screen_team_group.create(100, 130, (gameState.all_player_team[0].skin))

gameState.scale_size = gameState.team_player_icon.displayHeight/70
gameState.team_player_icon.setDisplaySize(gameState.team_player_icon.displayWidth/gameState.scale_size, 70)

我已经在绘画编辑器 3 中使用画布调整了大小，图像看起来不错，但我想知道如何在 Phaser 3 中执行此操作，以节省为我的游戏重新编辑所有图像的过程。下面是——

移相器 3 图像在这里-

画布在这里编辑-

如果不清楚，我希望图像看起来像底部图像，但使用移相器 3。提前感谢您的任何帮助。

我是 Webpack 的新手，所以我的条款可能不完全正确。我想要做的是首先构建一个自定义 Phaser 模块，然后将其导入到另一个入口点，这取决于它。

编辑：我尝试过使用 SplitChunks、动态导入和别名。但无济于事。有没有办法通过插件或方法来实现这一点？

来自 webpack.config.js：

entry: {
       'phaser.min': './phaser-builder.js',
       game: './src/index.js'

   },

   resolve: {
       alias: {
           'eventemitter3': path.resolve(__dirname, './node_modules/eventemitter3')
       },
       modules: [ 'node_modules/phaser/src', 'node_modules' ]
   },

   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       library: 'Phaser',
       libraryTarget: 'umd',
       sourceMapFilename: '[file].map',
       devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
       devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]',
       umdNamedDefine: true
   },

phaser-builder.js 的内容：

require('polyfills');

var CONST = require('const');
var Extend = require('utils/object/Extend');

var Phaser = {

   ... code ...
};

Phaser = Extend(false, Phaser, CONST);
module.exports = Phaser;
global.Phaser = Phaser; …

我有一个带有 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 …