laineus / phavuer Goto Github PK

@laineus さん はじめまして

Phavuer とても気に入っております。
Phavuer を使って2Dゲームを開発していますがとても楽しいです。

ところで掲題の通り、
弾のエフェクトなどに Particle を使いたいのですが可能でしょうか？

• 1. Phavuer 本体に Particle を追加する
• 2. Phaser3 で Particle を作って Phavuer scene に追加する
• 3. Particle を諦めて sprite と tween で工夫する

などの方法を想像しているのですが 2の方向性で手元でやってみても
なかなか正解に辿り着けず。。。

laineus さんだとどのように実現するのが良いとお考えでしょうか？

Hi,

Thank you for this awesome library. I really like the declarative style that the library provides.
I tried checking out the project and running npm ci but I noticed the project has no package-lock.json.

I suggest committing the package-lock.json as stated in the docs at https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json:

Describe a single representation of a dependency tree such that teammates, deployments, and continuous integration are guaranteed to install exactly the same dependencies.

I messed around with the repository to try and add a testing framework.
I initially tried to setup vitest but ran into issues not being able to mock require calls, which causes some issues internally with Phaser when ran in a node environment.

Jest

I tried again with jest and you can check out the branch here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-jest?expand=1.

It became larger than I intended because of the following issues:

• yarn v1 has a bug where in the dependency tree it installs a wrong version. Its the classic dependency of a dependency of a dependency problem, so its not easily fixed. The only workaround I found is to upgrade yarn to v3 or v4.
  • (yargs/cliui#150)
  • (isaacs/jackspeak#5)
  • (jestjs/jest#14881).
• I had to add canvas additionally to jsdom because even with the headless mode, Phaser still uses some API's when booting that require an actual implementation.
• a __mocks__/phaser3spectorjs.js is required because of a webpack DefinePlugin quirk (phaserjs/phaser#6644)
• add a props.config.banner check for the Phavuer banner to not pollute the logs when running tests. See https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Config.js#L305

Note that the test emits the boot event fails. This is because Phaser only emits that event async when the new Phaser() constructor runs before DOMContentLoaded emits. If it runs after, it will emit the boot event sync (https://github.com/phaserjs/phaser/blob/master/src/dom/DOMContentLoaded.js#L27).
Therefore in Phavuer the lines:

<script>
      const game = new Phaser.Game(Object.assign({ parent: canvasRoot.value }, props.config))
      game.events.addListener('boot', () => {
        context.emit('boot', game)
      })
</script>

Will never actually catch the boot event, because the event is emitted before the listener is attached. Since Phavuer is part of a Vue application, I doubt there will ever be an instance where the vue application is mounted before the DOMContentLoaded event is emitted.
My suggestion would be to drop the boot event. An alternative is to use the postBoot callback (see https://newdocs.phaser.io/docs/3.60.0/Phaser.Types.Core.CallbacksConfig).
But in that case the boot event will actually be emitted after the ready event. see https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Game.js#L416-L434.

Could you check out the branch and see if this is a workable setup for tests? I might try another vitest setup and see if I can avoid upgrading yarn, but I think that might give more issues since it doesn't aim to support require, and Phaser is very dependent on how require works.

Vitest

With a lot of pain I setup vitest here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-vitest?expand=1

This uses the experimental browser feature from vitest, which has your tests run in an actual browser.
This fixes so much pain with jsdom and canvas, so I think its miles better than using jest with a jsdom/canvas setup.

The only ugly thing there was having to set string-width to ^4.2.2 because of ESM issues deep in the dependency tree.

Hello!

I don’t directly use this library but I was trying to make my own version and referencing this along the way (it helps so much so thank you for making this incredible library!). While I was looking through the Libra game that referenced this library I noticed there was no use of ‘computed’ that listens to another game object reference e.g.

const newItemX = computed(() => imageGameObject.value.x + imageGameObject.value.displayWidth)

this actually doesn’t update after the displayWidth is changed since it occurs inside phaser and vue has no idea, how do we accomplish something like this?