Search the Community

Showing results for tags 'phaser'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 3,368 results

  1. Vvalent

    [Phaser] HADRON

    You are the Large Hadron Collider, but are you the best Hadron Collider? --- This is my first complete game. It's far from perfect, but I put a good deal of work into it so I hope you guys enjoy it. Any comments or impressions are welcome. Play it here on Desktop or Mobile (recommended): https://ametrine.itch.io/hadron Details: Stack: JS (ES6) + Webpack + Babel Built with Phaser 2 (started development before v3 release) Source repo: https://github.com/JHAvrick/hadron
  2. ArcadixInfotech

    Texture in box2d rope/distance joint

    Hello, Is it possible to give a texture to box2d's rope or distance joint. I can see the joints in draw debug mode, but need something like an actual rope texture. Thanks
  3. I'm trying to create a pie chart with Phaser, using `graphics` to draw each slice of the pie (`graphics.arc(...)`). The problem is that when it renders I get (what I think) an unexpected result. I basically want to draw 3 slices the same size, the code I use looks something like this: function degToRad(degrees) { return (degrees * Math.PI)/180; } var total = 3; var width = 300; for (var i = 0; i < total; i++) { var radius = Math.floor(width / 2); var deg = 360 / total; var start = degToRad(i * deg); var end = degToRad((i + 1) * deg); graphics = game.add.graphics() graphics.beginFill(0xFF0000) graphics.lineStyle(2, 0x000000) graphics.moveTo(0, 0); graphics.arc(0, 0, radius, start, end, false); graphics.endFill() } I've created 3 fiddles to show the difference between a canvas, pixi and phaser based examples, each of them using the same process to draw the slices: canvas: https://jsfiddle.net/oL414v9t/1/ pixi: http://jsfiddle.net/ngma7snq/59/ phaser: https://jsfiddle.net/1ck39fos/1/ Does anyone know why this happens and how can I achieve what I want?
  4. I was trying with Phaser where i saw that this gets some kind of blurred when moving (ingame) Testet it in Canvas & WebGL both had the same result then i tried it to setting `pixelArt` to false in the gameconfig and when i tried it then, it worked smooth, but it seemd that it had activated some kind of antialiasing so it got washed-out but the moving was smooth Phaser 3.8 (Original) Tileset tiles 16x16 (no spaceing / margin) (Extruded) Tileset tiles 16x15 (1px margin / 2px spaceing) Map made with Tiled Vivaldi & Chrome & Windows Edge Tileset Extruder: https://github.com/sporadic-labs/tile-extruder Code Example / Project: https://github.com/hasezoey/phaser-tiled-test Original Question: https://github.com/photonstorm/phaser/issues/3685 (moved to here)
  5. Hi there. Does anyone had a pleasure to build a Facebook Instant Game? I've spent two days trying to scale my Phaser game in the Facebook for Android. Currently scaling works nicely on desktop, in a responsive viewport of the dev console, in the mobile Chrome -- namely everywhere, except the Facebook app. Seems like it just ignores my settings, sprites are displayed at full width, despite the canvas (and game) dimensions are correct. Here are my init and boot scripts, the scaling logic is copypasted from a random gist: // init code FBInstant.initializeAsync().then(function() { FBInstant.setLoadingProgress(50); FBInstant.setLoadingProgress(100); FBInstant.startGameAsync().then(function() { /** Config part */ var FIXED_SIZE = 720; var FIXED_MEASURE = 'Width'; /** Name mapping */ var fixedName = FIXED_MEASURE; var resName = fixedName === 'Height' ? 'Width' : 'Height'; var FIXED_NAME = fixedName.toUpperCase(); var RES_NAME = resName.toUpperCase(); /** Measures of document */ var documentElement = document.documentElement; var documentFixed = window['inner' + fixedName]; var documentRes = window['inner' + resName]; var ratio = documentRes / documentFixed; /** Canvas measures */ var canvasFixed = FIXED_SIZE; var canvasRes = FIXED_SIZE * ratio; var screen = {}; screen['CANVAS_' + FIXED_NAME] = canvasFixed; screen['CANVAS_' + RES_NAME] = canvasRes; console.log(screen.CANVAS_WIDTH); console.log(screen.CANVAS_HEIGHT); game = new Phaser.Game(screen.CANVAS_WIDTH, screen.CANVAS_HEIGHT, Phaser.CANVAS); game.state.add('Boot', Boot); game.state.add('Preload', Preload); game.state.add('GameTitle', GameTitle); game.state.add('Main', Main); game.state.add('GameOver', GameOver); //Start the first state game.state.start('Boot'); }); }); // boot code var Boot = function(game) {}; Boot.prototype = { preload: function() { }, create: function() { this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.game.scale.refresh(); this.game.state.start("Preload"); } } Would appreciate any help!
  6. Hi guys, We developed a game last year with phaser 2.3.0 and webgl, it worked fine on computer browsers and mobile devices. But since the last update of chrome for android (v53.0.2785.97), the screen is flickering until it becomes totally black, without any error or warning. The issue is present on mobile only, it worked on chrome for android v52, but not v53. We tried to upgrade to phaser 2.6.2, same issue on chrome for android v53. If we use Phaser.CANVAS instead of webgl, it works fine, but we prefer using webgl for performances. Does anyone encounter the same problem? Thanks for your help. Joe K.
  7. Hey everyone, I want to add different buttons with 2 different clickevents. If I add one button it works, if I add another one it doesn't. The Images and sounds are in my Preloader file and i tested them, so they work and aren't the problem. Any Solutions? Thank you! Game.Level0_5 = function(){}; var frido; var back; Game.Level0_5.prototype = { create:function(game){ back = this.add.sprite(game.world.centerX, game.world.centerY, 'hauptkirche'); back.scale.setTo(1.335,1); back.anchor.setTo(0.75, 0.5); frido = this.add.sprite(game.world.centerX, game.world.centerY, 'frido2'); frido.scale.setTo(0.5,0.5); frido.anchor.setTo(2.0, 0.67); this.createButton(game, " Das ist die Hauptkirche.\n \n Die Hauptkirche wurde 1085 erbaut.\n Bis zur Reformation war sie katholisch \n und wurde danach \n im Jahr 1560 evangelisch. \n Im Dreißigjährigen Krieg (1618-1648) \n wurde die Kirche zerstört \n und musste neu gebaut werden. \n \n Frage: \n Wann wurde die Hauptkirche zerstört? ", game.world.centerX +266, game.world.centerY + 155, 268, 900.0,); var button = game.add.button( game.world.centerX+265, game.world.centerY+45, 'aki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); button.anchor.x = .5; button.anchor.y = .5; button.input.useHandCursor = true; }, var btn = game.add.button( game.world.centerX+200, game.world.centerY+60, 'bki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); btn.anchor.x = .5; btn.anchor.y = .5; btn.input.useHandCursor = true; }, update: function(){ }, createButton:function(game, string, x, y, w, h, callback) { var button1 = game.add.button(x, y, 'button1', callback, this, 2, 1, 0); button1.anchor.setTo(0.5, 0.6); button1.width = w; button1.height = h; var txt = game.add.text(button1.x, button1.y, string, { font: 'bold 14px palatino linotype', fill: '#0000000', align:'center', wordWrap: true, wordWrapWidth: 600 }); txt.anchor.setTo(0.5, 1.5); } };
  8. The Issue Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached) The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. Possible Cause I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing. Current Workaround The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing. But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'. I would rather not use BitmapText as i need to use different font sizes. Solutions Has anybody else encountered this issue? Found a solution or a better work-around? Thanks.
  9. So i'm trying to switch scenes when a tween is complete, however i get the titular error 'Cannot read property 'start' of undefined' , and i don't know why this is... Here's the code: class StartScreen extends Phaser.Scene{ constructor(){ super({key: "StartScreen"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); } create() { this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.logo = this.add.image(1024/2 , 300, 'Logo').setScale(2); this.text = this.add.text(320, 450, 'Push Enter', { font: '50px NES', fill: '#FFF'}); this.enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER); } update(){ if(this.enter.isDown){ this.text.destroy(); this.enter = ''; this.tweens.add({ targets: this.logo, y: 150, duration: 2000, onComplete: this.onCompleteHandler }); } } onCompleteHandler(){ this.scene.start('MainMenu'); } } class MainMenu extends Phaser.Scene{ constructor(){ super({key: "MainMenu"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.add.image(150 , 300, 'Logo').setScale(2); } create() { } }
  10. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  11. this.game.physics.startSystem(Phaser.Physics.P2JS); this.game.physics.p2.setImpactEvents(true); var wallCollisionGroup = this.game.physics.p2.createCollisionGroup(); var playerCollisionGroup = this.game.physics.p2.createCollisionGroup(); var doorCollisionGroup = this.game.physics.p2.createCollisionGroup(); this.game.physics.p2.updateBoundsCollisionGroup(); // I've created all the necessary collisions as in expamle: https://phaser.io/examples/v2/p2-physics/collision-groups and it works perfect. player.body.collides(wallCollisionGroup); player.body.collides(doorCollisionGroup, wrongDoor, this); cursors = this.game.input.keyboard.createCursorKeys(); } wrongDoor() { player.body.velocity.x = 0; player.body.velocity.y = 0; //player.body.setZeroVelocity(); //player.body.velocity.x = -20000; //player.body.velocity.y = -20000; //player.body.static = true; result = 'You last hit: The wall :)'; this.game.displayDialogLine('Message', 'text'); } update() { player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -300; } else if (cursors.right.isDown) { player.body.velocity.x = 300; } if (cursors.up.isDown) { player.body.velocity.y = -300; } else if (cursors.down.isDown) { player.body.velocity.y = 300; } } Hello. I'm making a game where player have to reach the right door and created all the necessary collisions and it works almost perfect, except the call back function wrongDoor. I want to create a dialog line when player collides wrong door and make his velocity = 0 while dialog line is on screen, but I can't. Every time player colldes the door dialog line displays on screen but the player sprite still moves. How can I make him stop on collision with door? All the //commented stuff I've tried and it didn't help. I tried to add this function in Update function but it triggers wrongDoor all the time and displays dialog line again and again from the start of the game. I've tried set velocity = -20000 but it doesn't set -20000 velocity, like it doesn't see the player. On screenshots I press up and right buttons so character moves up and right after wrongDoor triggers.
  12. kleepklep

    Seamless Audio Loops in Phaser

    I'm working on a game with seamless background music and figured I'd share my findings to help others. I'm just using Phaser's standard sound.play('', 0, 1, true) code to play loops. (Have since discovered I can also use sound.loopFull()). I didn't want to mess with outside solutions like seamlessLoop.js, which I'm not sure would work across all browsers anyway. Here's the run down on the file formats: OGG - Good for seamless loops in Firefox and Chrome. M4A - Good for seamless loops in iOS. When I first posted this I thought that I was stuck using the Apple Lossless codec (lossless = huge file sizes) because when I used any other M4A generating codec the resulting audio had blank space added at both ends. I wound up using the fre:ac open source audio converter which adds information for gapless playback according to its developer, who was extremely responsive and helpful (Thanks Robert!). Sure enough, the audio played seamlessly on my iPad with much smaller files. MP3 - Not good for seamless loops, but needed for IE. Even if your MP3 has no silence on either end, when the sound is done playing there will be a small audio gap before it loops. There are some techniques like the ones here that seem promising, so if I can overcome this issue I will post the code. Good for all other use cases because all browsers support it and it has the smallest file size of the three formats when exported with reasonable quality settings. So here's what I'm using to load my seamless loop audio. M4A is in a separate conditional because when I put it as the first option Firefox would load it instead of falling back to OGG and not play the sound. I'm loading all my other sounds as MP3s (in a different code block - not shown) to keep my total file size as low as possible. // load seamless intro audio loadLoop('musicIntro', 'intro_music_loop'); function loadLoop(key, file) { if (game.device.iOS || game.device.macOS) { game.load.audio(key, ['sounds/' + file + '.m4a']); } else { // Firefox and Chrome will use OGG // IE11 will fall back to MP3, which will have a small gap at the end before replaying game.load.audio(key, ['sounds/' + file + '.ogg', 'sounds/' + file + '.mp3']); } } Hope someone finds this helpful
  13. Is web camera access is possible in phaser 3? If yes. Any one can, please provide me a sample code. How to use webcam.js plugin with phaser 3 game, To access the system web camera.
  14. Oliver77

    [phaser]Solitaire Jump it!

    Hi, I made a simple logic game, soon as App too. I want to publish it, does anyone have a good tip? The graphics could be better, am I right? Thanks for any feedback! Play it : http://mg-otterson.de/fileadmin/solitaire/game.html
  15. Evening Guys Im working on a game for an iso platform that houses several games. This platform handles the loading of assets and sends them back to my game as base64 assets. Im loading in 3 different types of assets: *XML *Sound *TextureAtlas my questions are these: 1) how can i load and play an audio file recieved as a base64 string? 2) how can i load and create a new XML object from a base64 string? 3) how can i create a game.load.atlasXML from base64 strings? any help or notch in the right direction is appreciated. thanks
  16. I would like to show you the game I am working on: Lier.io: https://lier.io It is a multiplayer shooter 2D (platformer) similar to old games like Liero, Soldat or Worms (a little). Game is written in html5 (Phaser 2) and now has not many features now. Playing: - moving soldier: W, A, S, D (can be changed in settings) - aiming & shoting: mouse (mobile playing is not finished yet) It would be great if you could write me what do you thing about it or maybe what problems do you have with the game.
  17. Rock Cat

    Nano Niels - Match 3 game

    Hi guys I just wanted to share a match 3 game i made with phaser last year. There are 40 levels no 'pay to win' and its quite difficult. www.nanoniels.com Kind regards Niels
  18. kenneth12

    [WIP] Phaser Puzzle Bobble

    Hello everyone this is my first post on this forum. I wanted to share the Puzzle Bobble clone (gameboy version) I made with Phaser, ES6, and webpack. I tried to make the stages similar to the original series. Currently there is a total of 50 stages but I plan to add the rest of the stages if I can find them on the internet. I also drew all the sprites in photoshop. Hope you guys enjoy it! https://html5bubbleshooter.co/
  19. Titus

    Emitter Rotation Question

    Hi, I'm having some trouble with my emitter that is used as spray particles for a fire extinguisher. I've set the emitX and emitY to position relative to the player's front arm and set the emitter.rotation = frontArm.rotation. The problem I'm having is that when the arm rotates the particle's emit location is moved. I've attached some screenshots and code to show what I mean. I'm sure it is something simple that I'm missing but I've searched on the forums for quite a while and can't seem to find a solution. Any help would be appreciated. FireSim.test = { create: function() { this.game.stage.backgroundColor = "#d36a6a"; this.waterSpray = this.game.add.emitter(0, 0);// (x, y, max particles) this.waterSpray.makeParticles('whiteParticle', '', 5000, true, false); this.waterSpray.maxParticleScale = 5; this.waterSpray.minParticleScale = 1; this.waterSpray.flow(1000, 100, 50, -1, false); this.waterSpray.minParticleSpeed.setTo(400); this.waterSpray.maxParticleSpeed.setTo(800); this.waterSpray.setYSpeed(-30, 30); this.waterSpray.gravity = 0; this.frontArm = this.game.add.sprite(150, 100, 'frontArm5'); }, update: function() { if(this.game.physics.arcade.angleToPointer(this.frontArm.world) < 1) //only move the arms towards the mouse angle if it is less than 1. This prevents erratic movement when the mouse pointer is positioned behind the player { this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world); } this.waterSpray.emitX = this.frontArm.world.x + 270; this.waterSpray.emitY = this.frontArm.world.y + 160; this.waterSpray.rotation = this.frontArm.rotation; if (this.game.input.activePointer.isDown) { this.waterSpray.on = true; } else { this.waterSpray.on = false; } }, };
  20. Play Cool Math

    Math Number Challenge

    Math Number Challenge In this game, you need be finding figures for speed. It looks quite easy for the first time. However, at every level new tasks appear complicating the search for numbers. In the game, you will learn figures in the decimal system. You will find out how to count to 10 with Roman figures. Moreover, you are going to learn to quickly search for figures matching the sides of the dice. Some figures (in complex levels) are represented as arithmetic expressions and you will have to calculate the amount or difference before to choose the right number. Play Online Version Play iOS Version Play Android Version
  21. PIXIEDUST CATBOX

    [Phaser] Mondo Hop

    Introducing Mondo Hop, a bouncing side-scrolling platformer. Please try it out. GAME FEATURES: Addictive quick-paced gameplay, beautiful 3d modeled graphics, original sounds and music, and smooth performance on both mobile and desktop. TO PLAY: Use the bottom on-screen buttons or the arrow keys to move. Bounce from platform to platform (some of which are moving) without falling. Jump on the springs for a boost. Make it to the end before time runs out and try to collect all the coins along the way. There are 64 progressively harder levels in all. PLAY AT: http://pixiedustcatbox.likesyou.org/mondo_hop.html All feedback is welcome. Developed with Phaser.
  22. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  23. I have an idea of how I want to spawn obstacles for my endless runner game; what I want to do is spawn them randomly on the right and move them towards the left hand side of the screen. And once they are out of bounds of the screen, I want to kill them. But I need some help figuring out how to write the function that would do this. So far I've made a title screen, and the basic "treadmill" structure of the endless runner with player movement. var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.background = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.background.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true); this.player.animations.play('run', 10, true); // logo this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, 'sprites', 'logo'); this.splash.anchor.setTo(0.5); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('gamePlay'); } } }; var gamePlay = function(game) {}; gamePlay.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // physics engine this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = 2000; // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.ground = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.ground.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true); this.player.animations.play('right', 10, true); // physics on sprites this.game.physics.arcade.enable([this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; this.player.body.collideWorldBounds = true; //add spacebar for jump this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function () { // look for collisions between sprites this.game.physics.arcade.collide(this.player, this.ground); //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving right if (cursors.right.isDown) { this.player.body.velocity.x = 90; this.player.animations.play('right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90; this.player.animations.play('right'); } // jump if (this.jumpButton.isDown && (this.player.body.touching.down)) { this.player.body.velocity.y = -800; } } }; var gameOver = function(game) {}; gameOver.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { console.log('create'); game.stage.backgroundColor = '#4488AA'; //click to start text this.game.add.text(this.game.world.centerX - 100, this.game.world.centerY + 80, 'Click to return to main menu', { font: "30px Raleway"} ); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('mainMenu'); } } } game.state.add('mainMenu', mainMenu); game.state.add('gamePlay', gamePlay); game.state.add('gameOver', gameOver); game.state.start('mainMenu'); sprites.json
  24. Hello! I'm glad to present you our new game called "ChopChop" - link It was never published before, so both exclusive and non-exclusive licenses are available.
  25. smdool

    init parameters is undefined

    In Phaser 2.7.5 I'm trying to pass an object as a parameter from one state to another but the object is showing as undefined. Below is the code from GameState whereby I'm looking to pass an object containing a score, time and seconds. this.game.state.start( "Congratulations", true, false, { score: this.killedGerms, time: this.timeLabel.text, seconds: this.remainingSeconds }); Below is the CongratulationsState where the parameter, "data", is coming through as "undefined". init: function(data) { console.log('data', data); data = data || { score: 0, time: "00:00", seconds: 0 }; } Any ideas on where I have gone wrong would be greatly appreciated.