标签: phaser-framework

我想在new Phaser.GamePhaser.io中使用多个实例,但是当我创建第二个Phaser.Game对象时,我得到以下错误WebGL: INVALID_OPERATION: uniform2f: location not for current program

这是我用户的HTML代码

<div id="player1Holder"></div>
<div id="player2Holder"></div>

这是我用户的JavaScript代码

new Phaser.Game(700, 850, Phaser.AUTO, 'player1Holder');
new Phaser.Game(700, 850, Phaser.AUTO, 'player2Holder');

我通过使用定时事件动态添加Sprite.我无法找到一种方法来在生成的精灵上方引入新图形(泛光矩形).

精灵总是在上面

create()
{
  var graphics = game.add.graphics(0, 0);
  graphics.beginFill(0xFFFF0B);
  graphics.drawRect(0, 0, windowWidth, 70);
  graphics.endFill();
  timer = game.time.events.loop(1500, addSprite, this);
}

addSprite()
{  
  sprite= game.add.sprite(20, 30, 'sprite');
}

任何帮助？

这是JSFiddle.

我这里有两件事.

1. 是game.input.onDown,做一些逻辑(在我的例子生成的颗粒)
2. 是textButton.events.onInputDown,textButton是一个Phaser.Text对象实例,它执行另一个逻辑.

问题是:当我点击我的textButton时,两个事件都被触发1和2.

问题是,当我点击textButton时如何防止事件1被触发？

部分代码:

...
//This event is fired on click anywhere event # 1
game.input.onDown.add(particleBurst, this);

//This is Clickable text
textButton = game.add.text(game.world.width - 5, 5, "CLICK ME", fontStyle);
textButton.anchor.setTo(1, 0);
textButton.inputEnabled = true;

//This event is fired on click on text event # 2
textButton.events.onInputDown.add(function () {
    console.log("button is Clicked");
}, this, 2);
...

有了Phaser,我正在开发一款游戏.该游戏奖励玩家不能预加载的物品.在Ajax调用之后,我希望加载图像,然后在移相器动画中显示它.反正有没有这样做？

流程:游戏正在玩游戏完成和Ajax调用.Ajax响应使用哪个图像.Phaser加载图像并显示他们赢得的内容.

我正在寻找一种方法来放大/缩小我的Phaser应用程序,具体取决于屏幕大小,同时保持比例(而不是像素描示的那样以像素方式改变画布大小),我尝试了很多片段,但是每个人有点像寻找别的东西,这就是我正在寻找的东西(同样,下面的代码,屏幕得到"完全屏蔽"在桌面上但不在移动设备上):

var game = new Phaser.Game(1100,600, Phaser.Canvas,"gameDiv");

var mainState = {

    init: function () {

		game.renderer.renderSession.roundPixels = true;

		game.physics.startSystem(Phaser.Physics.ARCADE);

		game.physics.arcade.gravity.y = 800;

		game.physics.arcade.gravity.x = -10850;

    },
	preload: function(){

        //Loads background imagery
		game.load.image(`background`, "assets/background_1877_600.png");



	},
	create: function(){
        
        	// function to scale up the game to full screen
       // function to scale up the game to full screen
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        
        
        game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.input.onDown.add(gofull, this);

        function gofull() {

            if (game.scale.isFullScreen)
            {
                //game.scale.stopFullScreen();
            }
            else
            {
                game.scale.startFullScreen(true);
            }

        } …

我试图找到一种干净、可读的方法来管理 Phaser 类中跨函数的变量，但由于各种原因，我对我找到的解决方案不满意。

据我所知可用：

全局变量

我不太喜欢这种实现，因为其他文件可以访问变量的可能性。

var heroes = [];

var play = new Phaser.Class({
    Extends: Phaser.Scene,

    initialize: function(){
        Phaser.Scene.call(this, {key: 'play'});
    },
    create: function () {
        for(var i = 0; i < 5; i++){
            heroes.add(new Hero())
        }
    },
    update: function(){
        if(!heroes.length){
            heroes.add(new Hero())
        }

        heroes.forEach(function(hero){
            if(hero.hp <= 0){
                hero.destroy();
            }
        });
    }
});

DataManager 类（作为注册表实现）

我更喜欢这个，因为它更受控制，但对我来说 DataManager 感觉它是用于配置的，而不是作为在类方法之间处理/共享数据的手段；使用特定服务来获取和设置其值时，访问和更新变量也感觉非常繁琐。

var play = new Phaser.Class({
    Extends: Phaser.Scene,

    initialize: function(){
        this.registry.set('heroes', []);
        Phaser.Scene.call(this, {key: 'play'});
    },
    create: function () {
        var heroes …

import React, { Component } from 'react';
import Phaser from 'phaser';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.game = null;
    this.create = () => {
      this.game.stage.backgroundColor = '#124184';
    }
  }

  componentDidMount() {
    this.game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-target',
      {
        create: this.create
      }
    );

    console.log(this.create);
  }

  render() {
    return (
      <section id="phaser-target">
        hello there old friend
      </section>
    )
  }
}

所以我创建了Phaser游戏对象,在组件中做了mount方法,请注意我的html样子如下:

<body style="overflow: hidden;">
    <noscript>
      You need to enable JavaScript to run …

我score在射箭游戏中更新了变量。但是，我无法正确更新分数。每次更新时，新文本都会粘贴到旧文本上。

getMedal()我在函数内部、函数外部getMedal()、函数内部都尝试过render()。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Video Game</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">
    //Configurations for the physics engine
    var physicsConfig = {
        default: 'arcade',
        arcade: {
            debug: false //CHANGE THIS TO TRUE TO SEE LINES
        }
    }
    //Configurations for the game itself
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: physicsConfig,
        scene: {
            preload: preload,
            create: create, …

我正在使用 Phaser 3 框架创建一个游戏，它有很多动画。在我的代码中，我已经有一个在播放任何动画后播放（或恢复）的动画，这很好。它的代码是

 //This keeps the rolling animation going once the push animation is done
    skater.on('animationcomplete', () => {
        skater.anims.play('roll');
    });

但对于游戏的其余部分，我需要在相应的动画完成后执行特定的操作。是否有类似于上面的函数，我可以在其中传递动画的键或名称作为参数？

我目前在 Phaser 3 讨论板上看到的这个例子。这一切都在create()函数中。

    //Animation key
    const shuvKey = 'shuv'
    //Shuvit animation
    var shuvFrameNames = this.anims.generateFrameNames(
        'sheet', {start: 9, end: 12, zeroPad: 4,
        prefix: 'shuv/'}
    );
    this.anims.create({
        key: shuvKey, frames: shuvFrameNames, frameRate: 32, repeat: 0 
    });
    skater.once(game.Animations.Events.SPRITE_ANIMATION_KEY_COMPLETE + shuvKey, function(animation, frame) {
        score += 3;         
        }, this);

但我得到“未捕获的类型错误：无法读取未定义的属性‘事件’”。我不确定这是否与我的游戏配置有关，所以我将在下面发布。

配置

//Configurations for the physics engine
var …

如何在 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",