Search the Community

EDITED: This problem is solved. The solution is in this message. Hello, Require.js does not understand '.' (dot) in the module name: "pixi.js". Here in the RequireConfig.ts file: RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min" } }); requirejs(["Program"], () => { }); I changed "pixi.js" to "pixijs" in this file: "node_modules\pixi.js\pixi.js.d.ts" here: declare module "pixijs" { export = PIXI; } But now PIXI is undefined in my example: import * as PIXI from "pixijs"; export class Game { public constructor() { const app = new PIXI.Application(); console.log(app); } }

A friend of mine and myself just recently graduated from the Ironyard(a full-stack web development boot camp) and have begun work on our final project, choosing to do a game through Phaser. My friend had already begun work on the game and had it working, but not to the scale we wished to bring it. The end goal was to use Nodejs to navigate through a login, sign up, and game page, saving the user info(as well as the game state) to a mongoose/mongodb. We also wanted to use socket.io to make it multiplayer, working on mobile and desktop. In its state before beginning this endevour, it had six game states(Boot, Preloader, MainMenu, level outside, level house) all as functions with prototypes, rendered by placing them in scripts in the head of the index.html file and then running a script to add all these to the game state manager on the windows load. link here https://github.com/AHarryHughes/Top-Down-Shooter/tree/master When we added the Node.js server, we had to add all the game and Phaser files to the static directory in nodejs, serving them up to the browser, the problem with this is that now we were unable to modularize the code. I attempted to utilize Requirejs but it can't seem to find my src file instead I just get an error reading "404 main.src not found" when my src="main.js" inside the script. That current code is here https://github.com/AHarryHughes/Top-Down-Shooter/tree/modPt3 I have also seen that browsers are starting to support type=module in scripts and am thinking this may be a path for better modularization of our game, but I'm looking for advice on the subject if anybody has experience using it. Another problem I see in the distance is saving the game to the MongoDB server, it is a wave based game utilizing tower defense and gun purchasing, so the only thing to save would be which wave, what tower is placed and where, as well as what guns the player has. I'm having trouble seeing how the phaser game will be able to communicate with the server. Any advice would be greatly appreciated, I'm new to this blog but I've gathered a lot of helpful information thus far from other posts on this subject, but it seems my problem might be a little more specific than any other posts I've read, if I'm wrong in this, a point in the right direction would help just as much, thank you.

Hi, I've just updated v3.0 to 3.2 and am getting this error: Uncaught ReferenceError: BABYLON is not defined. I'm using requirejs to load BJS, PEP and some other libs. Has something changed in 3.2 definitions?

Hi guys, I have a socket.io server running with node.js and i am trying to add players/sprites to my game. I am trying to figure out the best way to do this. As of now i have been working towards using object arrays but i know this is a better way. socket.on('addPlayer',function(data){ var thisID = data;//myArrayID; if(data.id == myID){ }else{ console.log(thisID); pFish[thisID] = this.add.sprite(); pFish[thisID].x = this.world.centerX; pFish[thisID].y = this.world.centerY; pFish[thisID].anchor.setTo(0.5, 0.5); pMouth[thisID] = this.add.sprite(0, 0, 'spMouth'); pMouth[thisID].anchor.setTo(0.5, 1); pMouth[thisID].animations.add('eat'); pMouth[thisID].animations.play('eat', 30, true); pTail[thisID] = this.add.sprite(0, 0, 'spTail'); pTail[thisID].anchor.setTo(0.5, 0); pTail[thisID].animations.add('swim'); pTail[thisID].animations.play('swim', 30, true); pTail[thisID].y = spMouth.y - 12; pFish[thisID].addChild(spMouth[thisID]); pFish[thisID].addChild(spTail[thisID]); pFish[thisID].scale.setTo(0.2, 0.2); pFish[thisID].angle = 110; } }) So what i really want to do is add a player object. This way i can have all 3 sprites inside the object and i can just change the object. Of course i will need to update each player with the corisponding input comming in from the server. Any good examples of how to do this in a OOP method for Phaser.? Example: BasicGame.Game.prototype = { preload: function () { //this.load.script('io', 'node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js'); //console.log('NODE LOADED'); }, create: function () {

I've tried the new version of Phaser, but I've noticed it doesn't like requirejs. It's giving the following error: ReferenceError: p2 is not defined phaser.js:77528:0 I've downloaded the build from the website and tested loading it via <script> with no problems. Source: index.html: <html> <head> <meta charset="utf-8" /> <script type="application/javascript" src="require.min.js" data-main="game.js"></script> </head></html>game.js: (I've also had a function inside; I've also tried starting the game and putting the new version in an already working game) require(["phaser"])+ phaser.js and require.min.js I've packaged the example in gist form (for the lazy people like me) https://gist.github.com/samarthwiz/5002c3344490e0650d2e . UPDATE: I've attached a zip too, for the event when github goes down. phasertest.zip

We use grunt templates and jasmine to run our test suite and since upgrading to v3 - our tests fail to run at all via grunt. I think it's down to the way v3 uses requireJs vs v2 and it doesn't seem to play well with our grunt template. The error I get is: Error: define: 'undefined' is not a function (evaluating 'this._loadResource.bind(this)')I'm thinking this might be because ./loaders doesn't get required properly? Did anyone face similar problems and have any solutions? For ref our grunt test template looks like: test: { src: ['src/**/*.js', '!src/main.js'], options: { display: "short", keepRunner: true, summary: true, specs: ['test/**/*Spec.js', '!test/grunt/*Spec.js'], template: require('grunt-template-jasmine-requirejs'), templateOptions: { requireConfig: { baseUrl: 'src', paths: { "test": "../test", "echo": ECHO_PATH } } }, '--local-to-remote-url-access': true } }

I'm using RequireJS to organize my game structure and tried to add this debug plugin https://github.com/englercj/phaser-debug , but I don't know how to do it. I tried to add it directly on script tag, or using requirejs to load it, but both of them fail. Anyone can help?

Good day to you all, I have just learned how to use requirejs this template really came in handy : https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/RequireJS , now i am struggling to see how it fits in with server side code with nodejs I would like to incorporated most of my backend code from nodejs and I cannot find any examples on how to do this. for example adding nodejs snippet inside of a module :: define(['phaser'], function (Phaser) {'use strict';var http = require('http'); <<<---------------- how am I supposed to incorporate nodejsvar fs = require('fs');var index = fs.readFileSync('index.html'); http.createServer(function (req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end(index);}).listen(9615);function Game() {console.log('Making the Game');}Game.prototype = {constructor: Game,start: function() {this.game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: this.preload,create: this.create});},preload: function() {this.game.load.image('logo', 'assets/phaser.png');},create: function() {var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');logo.anchor.setTo(0.5, 0.5);}};return Game;});I know node has its own server side require but it is very confusing how the backend require is supposed to work with the front end in the context of front end require. Can any body shed some light on this? Any examples will be much appreciated thank you.

Hello everyone, I wondered what the best course of action might be if you're using RequireJS with Phaser and wanting to access groups from other scripts. For instance, on the 'create' method (currently housed in its own script file) I have a bunch of groups that exist, but they only exist within that context, and it would be great to be able to access them say from another area that handles the game's update loop, etc. Current all I'm doing is this, it does work, but I can't help but wonder that it's not a nice way of doing it: this.game.groups = {};// And the groupsthis.game.groups.explosions = explosions;this.game.groups.damageHits = damageHits;Have any of you guys run in to this before? Many thanks, - D

Hi everyone I named this post "Alternatives to organize code base into different files" because it is a more general than "alternatives to make modular code" or something like that. I like javascript a lot, but it being the ONLY LANGUAGE IN THE WORLD that does not have a way to load/reference a file from within another is what pisses me off most. Every language has it. C and C++ has "include", C# has "using", Java has "import" and php has "require" and "require_once". I bet even X86 assembly may have something like that. Nonetheless, javascript yet don't have it and only God knows if (and when) the ecmascript 6 draft that proposes modules like python's will come to really become standard and come the masses. And WHEN it come, will everyone use updated browsers ??? And, when it comes, people will already be familiar with what they are already familiar, like AMD (requirejs style modules) and browserify (commonjs style modules) That being said, I would like to know your experiences and opinions about how (and why) you divide your code base into several files. It seems most use browserify and others use requirejs. But there are still others that just define and use globals into several files and put several script tags in the html. I made an attempt to create what seemed to me the simplest way to emulate a include/import/using/require in javascript, using xmlhttprequest+eval to "include" synchronously one js file into another: https://github.com/Gnumaru/executejs I think the current ecmascript 6 draft propposal for modules is probably the best. But old javascript files meant to just be included in html with a script tag will probably need to be patched to work with the modules system. My solution is just a way to use the "old way" of adding several script tags, without really adding several script tags. I would like to know, then, what you're using to manage large codebases. Are you bundling every js file into one? with what? browserify? requirejs' bundling tool? linux's cat command? If you're not building your code base into one single file, how are you calling one file from anoter? several script tags? AMD (with requirejs or others)? something with commonjs sintax? And at last, independent of bundling your code into one file or not, how the functionality of each file is exposed to other files? by exporting amd style modules? exporting commonjs style modules? defining globals? defining namespaces? The creator of UglifyJS has given some thoughts on this matter wich is really worth reading. http://lisperator.net/blog/thoughts-on-commonjs-requirejs/ He says, for example, that for many years and still today, C programmers are used to define globals using unique names and are happy with it =) (those are not his words, those are my interpretation of his whole blog post) Your experiences and opinions would be really important to me and probably to several other people that may read this thread. Thanks.

Hey guys, Over the past few weeks I have been learning more about Phaser and TypeScript and I have started a blog to share what I have learned and post code that I think will help people better use Phaser with TypeScript. I was waiting to post anything about them here until I had a post with actual code in it and a GitHub repo. (Though I saw today a link to one of the posts was on the front page, thanks Rich!) I use OSX and WebStorm, but you should be able to use the code and examples in pretty much any TypeScript environment. But keep in mind these tutorials use more advanced TypeScript features (AMD modularization etc). Posts: Set Phasers to TypeScript! - Setting up a TypeScript dev environment the hard way (Brackets, Prepros, Terminal), or the easy way (WebStorm) Big Boy TypeScript: AMD Modularization and Dependency Management – Part 1 - A preface to using AMD modularization, with some "guided reading" to explain the concepts. Big Boy TypeScript: AMD Modularization and Dependency Management – Part 2 - Has example code from a Git repo. Shows how to organize your project to use AMD Modularization. Introduces you to the three ways you have to import and reference files as well as how to export classes and modules. More AMD Modularization and Finite State Machines in Phaser - Cleared up some issues with AMD modules from the last blog. Used the TypeState library to show how to easily use Finite State Machines in Phaser! Has example code and a demo! More to come! If you haven't ever used TypeScript, I would recommend doing some reading at the TypeScript website before reading these blogs. Afterwards, do some Phaser stuff with TypeScript.

Was following a guide on using RequireJS with Phaser and my main.js starts like this: require(['lib/phaser.min','module/Player'],function(Phaser,Player){ var game = new Phaser.Game(1067, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }, false, false);And right away the console gives me the error "Uncaught TypeError: Cannot read property 'Game' of undefined" But if I try it with an older version of Phaser (the one provided with said guide, don't know how to check the version) it gets past that line. So are the new versions of Phaser incompatible with RequireJS or do I need to do something else?