Jump to content

Two ways of writing JS?


Go to solution Solved by lewster32,

Recommended Posts

How come you can write this:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });function create() {var text = "hello world";var style = { font: "65px Arial", fill: "#ff0044", align: "center" };var t = game.add.text(game.world.centerX-300, 0, text, style);}

And it behaves the same as this:

 

main.js

var test = test || {};test.game = new Phaser.Game(600, 400, Phaser.AUTO, '');test.game.state.add('Game', test.Game);test.game.state.start('Game');

game.js

var test = test || {};test.Game = function(){};test.Game.prototype = {    create : function () {    var text = "hello world";    var style = { font: "65px Arial", fill: "#ff0044", align: "center" };    var t = this.game.add.text(this.game.world.centerX-300, 0, text, style);    }};

Why is the syntax different?

Link to post
Share on other sites

Either way you pass in an object that has a method called "create," that is all that matters. This is because JavaScript is not a nomimally typed language, instead it is duck typed.

 

Any object with methods that make it look like a state will work as that last param.

 

Thanks for the reply. Is there a way I can write scripts like my first example? I haven't found a template in that style anywhere that uses the standard main.js –> boot.js –> etc. system.

Link to post
Share on other sites
  • Solution

With the first example, because you're passing a state directly as an object literal, you'll never be able to access that state. It's maybe fine for very fast prototyping but it's not a good habit to get into as it will make scaling your code harder, and scaling is what you really should be thinking about all the time, for all too often prototypes become production code.

Link to post
Share on other sites

With the first example, because you're passing a state directly as an object literal, you'll never be able to access that state. It's maybe fine for very fast prototyping but it's not a good habit to get into as it will make scaling your code harder, and scaling is what you really should be thinking about all the time, for all too often prototypes become production code.

 

Good to know. I wasn't sure if there was a problem writing it one way or another. My only complaint is that it was harder to get this information than it should have been. The Phaser examples on the website are written differently than most professional projects, and the reasons why were lost to a layman like myself.

Link to post
Share on other sites

The best templates I've found are the official ones in Phaser's Github repository: https://github.com/photonstorm/phaser/tree/dev/resources/Project%20Templates/ 

 

It's true though, there are a lot of little extras that are needed to make multi-file templates workable, as just trying to include all those separate JavaScript files into a HTML page is a pain in the butt. Generally speaking most of the professional projects will be supported by something like Grunt, which can be used to automatically check, combine and minify the separate files into a 'distribution' file. I have mine set up so that every time I save any of my separate files, Grunt checks, combines and minifies the result instantly so I can refresh a page with my current experiment on. Grunt's not that easy for beginners as it requires some knowledge of nodejs, its package manager npm, JSON files and other stuff, but if you want to give it a whirl let us know and someone on here should be able to help you get it set up.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...