How do I declare functions in phaser using vue?

[Marchiuzzz]

I'm following an official Phaser tutorial and so far everything seems to work fine, however in part 8 there's a need to declare a function and use it. Where should I declare functions to be able to use them in phaser? I've tried declaring it inside scene, outside scene, outside game, all of them give me the same error when I run the game - "collectStar is not defined"

import Phaser from "phaser";
var player;
var platforms;
var stars;
var cursors;
export default {
  data() {
    return {
      initialize: false,
      game: {        
        width: 800,
        height: 600,
        type: Phaser.AUTO,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },
                debug: false
            }
        },
        scene: {
          preload(){
             //preload stuff here
          },
          init() {
          },
          create() {
            /*create stuff here
            ...
           */
            this.physics.add.overlap(player, stars, collectStar, null, this); //getting error on this line

          },
          update() {
            /* update stuff here
             ...
            */
          },
//here is the declared function?
            collectStar (player, star)
            {
                star.disableBody(true, true);
            }
        },
      }
    };
  },
  methods: {
    initializeGame() {
      this.initialize = true;
    }
  }
}; 

[jdnichollsc]

Try creating a BootScene

[jdnichollsc]

If you want to call scene methods, check this example: https://codepen.io/jdnichollsc/pen/KKKONMP

[Marchiuzzz]

@jdnichollsc I want to call a simple method, which I would declare, let's say this:

function printToConsole(text){
  console.log(text);
}

Question is - where should I declare that function so that it would be accessible from create function or any other scene function? The solutions you provided seem a little overkill for such a simple and basic task

[jdnichollsc]

Can you give me a better example only using Phaser? 🙂

[jdnichollsc]

where should I declare that function so that it would be accessible from create function or any other scene function?

wherever you want, that's a simple task as you say, you can use functional programming and with good code you can do that 🙂

[Marchiuzzz]

Can you give me a better example only using Phaser? 🙂

The thing is, I believe it is vue-specific because normally, this is the structure of how Phaser should be used (taken from official tutorial)

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },
                debug: false
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {

    }

    function create ()
    {
        myCustomFunction();
    }

    function update ()
    {

    }

    function myCustomFunction ()
    {
    }

</script>

However in vue, that is slightly different and so we get this structure:

<script>
    import Phaser from "phaser";

    export default {
    data() {
        return {
        initialize: false,
        game: {
            type: Phaser.AUTO,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 300 },
                    debug: false
                }
            },
            scene: {
                preload(){

                },
                init() {
                },
                create() {
                    myCustomFunction();
                },
                update() {

                },
                myCustomFunction(){

                },
            },
        }
        };
    },
    created(){
        this.initialize = true;
    },
    methods: {
    }
    }; 
</script>

Now in this second code I provided, I assume myCustomFunction() would work as expected, but it doesn't. I get "myCustomFunction undefined". If I put it outside "export default" scope, I can actually call it and it works, however it does not have access to Phaser objects/functions there so I can only perform basic tasks. I hope I was able to explain my issue. Thanks

[jdnichollsc]

why not creating that method outside and bind the context "myCustomFunction.bind(this)"? or also, why not creating the game config from external JS files? about your code, it looks like you need to use context "this", as you want 👍

[Marchiuzzz]

Okay, I will try that. I'm quite new to Vue framework and just learning the basics of Phaser as well, thanks for the help.