Jump to content

Integrating scrolling into a toolbar for a phaser 'map editor' game


Recommended Posts

This is my first time integrating any outside source into my phaser project, so please bear with me. Also, if there's anything that's unclear (regarding errors), lemme know so I can update this. For the first question, please check my steps below if I imported them right:

  1. Navigate into base project directory in a terminal, type in npm i / install "scroll-plugin-of-your-choice-here"
  2. Watch a lot of text scroll by (Mostly warnings)
  3. Find the folder in the node_modules directory of my project, copy the required file from the dist folder into my folders (this one is called: plugins)
  4. Import the required file in JS files that will use it
  5. ???
  6. Profit

I've tried three so far. This is the first one, heard good things about it: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

I couldn't even get past step 4 tho. Assuming it doesn't need importing, it appears my project structure is different enough (more on this later), that I'm not entirely sure where to put the "load plug-in code"; putting it in my game.js (the JS file that is called by the HTML file) gets me a "Cannot read property 'plugins' of undefined". Putting it in the 'create' function of my boot.js (the first Phaser state started) gets me a "Cannot set property 'game' of undefined".

That pretty much ends it. Also, I read it uses the camera, so I'm not sure if it was the way to go anyway. I have two things to scroll: the toolbar, and map itself.

The second one is this: https://github.com/mattcolman/phaser-list-view

It appeared to have clearer instructions than the first one, regarding import and usage. Unfortunately, there is some sort of 'Promise' code in the source, which to my limited experience is only used in async functions. This one fails outright, and throws an error the moment the game is loaded: "Cannot read property 'Promise' of undefined"

The third and final one is this: https://github.com/trueicecold/phaser-scrollable

It looks to be the simplest one of all, and is based on the amazing work of the first one, but like the first one didn't tell me about whether or not I need to copy-paste the plugin anywhere and/or import it anywhere I need to use it. Just copying the code into my mapEditor.js (the final state loaded, after boot.js - the "game" itself), results in the following error: "ScrollableArea is not defined". D'oh. So does that mean I need to import it after all? Well about that...

import ScrollableArea from '../../plugins/phaser-scrollable.min';
class CreateModeMapEditor extends Phaser.State
    create() {
        this.scroller = this.game.add.existing(new ScrollableArea(100, 100, 200, 400));
        var textStyle = {font:"30px Arial", fill:"#ffff00"};
        for (var i=0;i<10;i++) {
            for (var j=0;j<80;j++) {
                var text = game.make.text(i*330, j*30, "Yes, everything scrolls", textStyle);
export default CreateModeMapEditor;

That returns this error: "Uncaught TypeError: _phaserScrollable2.default is not a constructor".

Among the errors so far, that's probably the one that's somewhat close to being within my very, very limited understanding. But it's not close enough.

Project Structure:

    <div id="game" width="1366" height="768"></div>
    <script src="scripts/phaser.min.js"></script>
    <script src="scripts/game.js"></script>


import config from './config';
import transition from './plugins/phaser-state-transition.min';
import CreateModeBoot from './states/createMode/boot';
import CreateModePreload from './states/createMode/preload';
import CreateModePostgame from './states/createMode/postgame';
import CreateModeMapEditor from './states/createMode/mapEditor';
class Game extends Phaser.Game {
	constructor() {
		super(config.gameWidth, config.gameHeight, Phaser.AUTO, 'game');
    loadCreateModeStates(mapSize) {
        document.getElementById('mainOverlay').style.display = 'none';
        this.startCreateMode(this, mapSize);
    startCreateMode(phaserGame, mapSize) {     
        phaserGame.state.add('createModeBoot', CreateModeBoot);
        phaserGame.state.add('createModePreload', CreateModePreload);
        phaserGame.state.add('createModeMapEditor', CreateModeMapEditor);
        phaserGame.state.add('createModePostgame', CreateModePostgame);
var phaserGame = new Game();
window.globalGame = phaserGame;

Is there anything else I can try? Currently we're doing a HTML Overlay with a table on it on top of the phaser game, but it's tedious at best, and scaling is another can of worms.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...