标签: phaser-framework

如何从Phaser的Sprite/Background中消除抖动

我设置了一个示例jsfiddle,用适当的资产来说明这一点.

当你的角色移动并且相机开始平移时,你会注意到背景有一个小的"抖动".可以通过设置game.camera.roundPx为true 来禁用此功能.

但是,如果禁用它并移动角色.你的角色开始抖动.我在这次冒险中发现的一些事情:

这种情况只发生body.velocity.x在两者P2和Arcade物理学家之间.
如果你移动角色body.x或者只是x它绝对没问题.
如果你移除了瓷砖贴图纹理,你可以从字面上看到在移动时发生的抖动.示例此处 - 确保您移动足够远以使相机平移.
我也尝试game.renderer.renderSession.roundPixels = false;过没有优势.
这在CANVAS和WEBGL渲染模式下发生

javascript phaser-framework

7
推荐指数

1
解决办法

347
查看次数

如何在智能手机和平板电脑上扩展Phaser 3游戏及其资产？

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

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

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

谢谢

javascript cordova phaser-framework

7
推荐指数

1
解决办法

2089
查看次数

phaser.io多个phaser.game实例

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

这是我用户的HTML代码

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

Run Code Online (Sandbox Code Playgroud)

这是我用户的JavaScript代码

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

Run Code Online (Sandbox Code Playgroud)

javascript webgl html5-canvas phaser-framework

6
推荐指数

1
解决办法

1806
查看次数

来自 Tiled 的 Tilemap 未在 Phaser 中呈现

我对我正在尝试制作的这个游戏陷入了困境。我尝试使用的瓦片地图有一个错误说明如下

Error 1: "Phaser.Tileset - image tile area is not an even multiple of tile size"
Error 2: "Uncaught TypeError: Cannot read property '2' of undefined"
Error 3: "Uncaught TypeError: Cannot read property 'type' of undefined"2

Run Code Online (Sandbox Code Playgroud)

这是我正在使用的代码的链接。http://pastebin.com/Dv00KGii

html javascript phaser-framework

6
推荐指数

2
解决办法

3986
查看次数

为移相器游戏添加 requirejs 后未调用 Typescript window.onload

我正在尝试使用移相器和打字稿制作游戏。我按照这里的说明进行操作，它最初有效。当我尝试使用 AMD 和 requirejs 模块化我的代码时出现了问题

索引.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Resonate</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="http://requirejs.org/docs/release/2.1.20/minified/require.js" data-main="app"></script>
</head>
<body>
    <h1>RESONATE</h1>

    <div id="content"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

播放器.ts

export class Player {

    color: string;

    constructor() {
        this.color = "#0000ff";
    }
}

Run Code Online (Sandbox Code Playgroud)

应用程序

import player = require("Player");

class PhaserDemo {

    game: Phaser.Game;

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content', { preload: this.preload, create: this.create });
    }

    preload() {
        this.game.load.image('phaser_run', 'run.png');
    }

    create() …

Run Code Online (Sandbox Code Playgroud)

javascript requirejs js-amd typescript phaser-framework

6
推荐指数

1
解决办法

3万
查看次数

如何在不改变像素值的情况下调整Phaser的Canvas大小？

我正在寻找一种方法来放大/缩小我的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);
            }

        } …

Run Code Online (Sandbox Code Playgroud)

javascript css html5 phaser-framework

6
推荐指数

1
解决办法

795
查看次数

在 Phaser3 类方法之间共享变量的最佳方式是什么？

我试图找到一种干净、可读的方法来管理 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();
            }
        });
    }
});

Run Code Online (Sandbox Code Playgroud)

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 …

Run Code Online (Sandbox Code Playgroud)

javascript phaser-framework

6
推荐指数

1
解决办法

8807
查看次数

在反应组件中渲染Phaser.io画布

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>
    )
  }
}

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

javascript reactjs phaser-framework

6
推荐指数

1
解决办法

740
查看次数

如何在 Phaser 3 中正确更新我的乐谱文本？

我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, …

Run Code Online (Sandbox Code Playgroud)

javascript game-engine phaser-framework

6
推荐指数

1
解决办法

4255
查看次数

Phaser 3 中特定动画完成时的回调？

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

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

Run Code Online (Sandbox Code Playgroud)

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

我目前在 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);

Run Code Online (Sandbox Code Playgroud)

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

配置

//Configurations for the physics engine
var …

Run Code Online (Sandbox Code Playgroud)

javascript animation phaser-framework

6
推荐指数

1
解决办法

5772
查看次数

标签统计

javascript ×10

phaser-framework ×10

css ×1

game-engine ×1

html ×1

html5-canvas ×1

«
1
…
2
3
4
5
6
…
14
»