Developing with Rails and Phaser

[EulaConstellar]

Hello!

 

I need some serious help ASAP! We're trying to develop a game using Phaser for our final project, but we can not figure out how to do this on Rails! I've tried using Rails, Phaser, and RequireJS. I've tried using Rails and the Phaser Rails gem. I do not understand how these modules communicate with one another.

 

So far, my files are set up with RequireJS. I realize this is overkill because Rails has the Asset Pipeline, but it's already set up so we're going to have to make RequireJS work. My file structure looks like this:

 

app

     assets

          bower_components

               > phaser-official

          images

          javascripts

               > modules

                      > factories

                      > states

                      > units

                      > CarouselGame.js

               > application.js

               > runtime.js

          stylesheets

     controllers

     helpers

     mailers

     models

     views

 

 

In my runtime.js file, I have:

 

requirejs.config({paths: {Phaser: 'bower_components/phaser-official/build/phaser'}});require(['app/assets/javascripts/modules/CarouselGame','app/assets/javascripts/modules/states/Boot','app/assets/javascripts/modules/states/Preload','app/assets/javascripts/modules/states/Oaktree','app/assets/javascripts/modules/states/Stream','app/assets/javascripts/modules/states/Minimenu','app/assets/javascripts/modules/states/Minigame','app/assets/javascripts/modules/states/EndDemo'],function (CarouselGame, BootState, PreloadState, OaktreeState, StreamState, MinimenuState, MinigameState, EndDemoState) {var game = new PhaserGame(640, 480);game.state.add('Boot', BootState);game.state.add('Preload', PreloadState);game.state.add('Oaktree', OaktreeState);game.state.add('Stream', StreamState);game.state.add('Minimenu', MinimenuState);game.state.add('Minigame', MinigameState);game.state.add('EndDemo', EndDemoState);game.state.start('Boot');});

In my CarouselGame.js file, I have this:
 

define(['CarouselGame','modules/extensions/','modules/units/backgrounds/oaktree.jpg','modules/units/backgrounds/stream.jpg','modules/units/backgrounds/temp_minigamebackground.png','modules/units/music/Firefly.mp3','modules/units/sounds/firefly_surprise.mp3','modules/factories/firefly'],function (Phaser) {var PhaserGame = function (w, h) {return new Phaser.Game(w, h, Phaser.AUTO);};return PhaserGame;});

Right now, we keep getting the following errors:

 

1. Uncaught Error: Load timeout for modules: applicationhttp://requirejs.org/docs/errors.html#timeoutmakeError @ require.js:167checkLoaded @ require.js:693(anonymous function) @ require.js:7142. require.js:167 Uncaught Error: Mismatched anonymous define() module: function (Phaser) {var PhaserGame = function (w, h) {return new Phaser.Game(w, h, Phaser.AUTO);};return PhaserGame;}http://requirejs.org/docs/errors.html#mismatchmakeError @ require.js:167intakeDefines @ require.js:1240localRequire @ require.js:1422requirejs @ require.js:1758req.config @ require.js:1766(anonymous function) @ runtime.js?body=1:13. require.js:167 Uncaught Error: Mismatched anonymous define() module: function () {/*** FireFly defined*/var FireFly = function (game, x, y) {Phaser.Sprite.call(this, game, x, y, 'firefly');game.physics.enable(this, Phaser.Physics.ARCADE);this.body.collideWorldBounds = true;game.physics.arcade.velocityFromRotation(game.rnd.angle(), 500, this.body.velocity);};/*** FireFly instance creation.*/FireFly.prototype = Object.create(Phaser.Sprite.prototype);FireFly.prototype.constructor = FireFly;FireFly.prototype.update = function(){if(Math.ceil(Math.random() * 100) < 25){game.physics.arcade.velocityFromRotation(this.angle + game.rnd.integerInRange(-60, 60), 500, this.body.velocity);}};/*** return the created FireFly object.*/return FireFly;}http://requirejs.org/docs/errors.html#mismatchmakeError @ require.js:167intakeDefines @ require.js:1240localRequire @ require.js:1422requirejs @ require.js:1758req.config @ require.js:1766(anonymous function) @ application.js:118594. require.js:1919 GET http://localhost:3000/assets/bower_components/phaser-official/build/phaser.js req.load @ require.js:1919context.load @ require.js:1660Module.load @ require.js:829Module.fetch @ require.js:819Module.check @ require.js:849Module.enable @ require.js:1162context.enable @ require.js:1532(anonymous function) @ require.js:1147(anonymous function) @ require.js:133each @ require.js:58Module.enable @ require.js:1099Module.init @ require.js:783callGetModule @ require.js:1189context.completeLoad @ require.js:1565context.onScriptLoad @ require.js:16925. require.js:167 Uncaught Error: Script error for: Phaserhttp://requirejs.org/docs/errors.html#scripterror

Could someone please help me figure this out?

[EulaConstellar]

I've figured this out for now. I've put my Javascript into the Public folder for the time being and switched to Rails Asset Pipeline instead of RequireJS. I think I'll write a tutorial once this game is done.

[ylluminarious]

@EulaConstellar Hey, if you're working with Ruby and Phaser, you might be interested in the opal-phaser gem, which allows you to write Phaser games in Ruby. It's got a good bit of impressive work and projects behind it so far, and is compatible with recent Phaser versions, even the most recent, 2.4.2.