How to use plugins? (Board plugin by Rex)

Phaser 3
1

I’m a beginner and I only started looking into Phaser3 a couple of days ago. I’d like to make a simple game, which must have a checker board. I was surprised to find out there’s no native checker board object in Phaser (I mean, it’s not uncommon for a 2D game to use a checker board…is it?!). Or maybe I just missed it in the documentation; in that case, just link the docs here, please.

After some research I found this external plugin: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board/#add-board-object
I don’t know if it’s the type of board I need, but I hope so.

The only problem is that it doesn’t explain how I am supposed to use this plugin. Do I have to install some NPM package? What’s the name of the package?! Do I have to download the source code? From where? I’ve tried a bunch of things, but I honestly have no idea what else to do.

I also cloned the git repository of that plugin, and then inserted this line in my code:
import BoardPlugin from ‘./cloned-repository/plugins/board-plugin.js’;

But it’s still not working.
Chrome says: “Failed to load resource: the server responded with a status of 404 (File not found) [http://localhost:9090/cloned-repository/plugins/board/chess/IsUID]”

Firefox says: “Loading module from “http://localhost:9090/cloned-repository/plugins/board/chess/IsUID” was blocked because of a disallowed MIME type (“application/octet-stream”).”

2

I’m not sure if you ever got a response, or a solution, but I’m in the same boat right now. I want to make it a bit easier on myself, but I am having a hell of a time trying to get his plugins working. I am just making my own hexmap class right now.

3

Same here…

4

Here is a demo of using rexBoard plugin.
To use rexBoard plugin in your project, try these steps:

  1. Get minify source code from here, or here
  2. Import rexBoard:
    • If you don’t use webpack, try include this minify rexBoard file by <script> tag, like that demo does.
    • If you use webpack, try include the rexBoard module by
      import RexBoardPlugin from path
  3. Install rexBoard plugin:
    • If you don’t use webpack, try install plugin by
      plugins: {
      scene: [{
          key: 'rexBoard',
          plugin: rexboardplugin,
          mapping: 'rexBoard'
      }]
}
      the value of plugin property ought to be rexboardplugin, see that demo, line 135-141
    • If you use webpack, try install plugin by
      plugins: {
      scene: [{
          key: 'rexBoard',
          plugin: RexBoardPlugin,
          mapping: 'rexBoard'
      }]
}
      the value of plugin property is equal to the import name in step 2.

Here is another demo of using rexBoard plugin, which install rexBoard in preload stage. See line 13-17

this.load.scenePlugin({
    key: 'rexboardplugin',
    url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexboardplugin.min.js',
    sceneKey: 'rexBoard'
});
3 Likes
5

Thanks Rex-- sorry to be so thick, but I’m trying to use the dragRotate plugin. the import statement refers to a js file that I can’t find…
import rexDragRotate from ‘./plugins/dragrotate.js’;
Do I need some larger-level plugin system first? It’s still very confusing.

6

Try this one, here is my test code.

7

dragrotate-plugin.js is a plugin which can install into phaser3’s plugin system, and it provides a method to create dragrotate instance. dragrotate.js is the class of dragrotate.
User can

  • Install dragrotate-plugin then create dragrotate instance by the plugin method add, or
  • Create dragrotate instance from dragrotate.js directly
8

Thank you, the question is how do I get the files I need??

9
  • Download files from github (link and get files from dist folder, or
  • Choose source code of minify file from here, download the raw data like this one, or
  • npm i phaser3-rex-plugins, import files import xxxPlugin from 'phaser3-rex-plugins/dist/xxx-plugin.js';
1 Like
10

Where do I put the files in my folder? Do I need to refer to them in my HTML? Please, more instructions.

11

Yes, it is a possible solution, put rexboard js file in your export folder, add <script> tag to load it in HTML file.