Fl4m3Ph03n1x Posted November 15, 2013 Share Posted November 15, 2013 Hey all, I am learning Phaser by studying a prototype from one of my friends and I have a few problems.I am using Firefox:https://dl.dropboxusercontent.com/u/785815/firefix-version.pngBut the music does not load. The file paths are correct, and the music plays on Chrome and on the Windows version of Firefox. Could this be a problem of my browser, am I doing something wrong, or could it be a Phaser bug?<html> <head> <script src="Phaser.js"></script> </head> <body> <script> // get users screen size var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; // get users screen size //winW = document.body.offsetWidth; //winH = document.body.offsetHeight; // choose a random image for game background var backgrounds = [ "images/brown & purple.jpg","images/green & black.jpg", "images/multi.jpg", "images/simple.jpg","images/grey.jpg" ], background = backgrounds[Math.floor(Math.random() * backgrounds.length)]; (function () { var game = new Phaser.Game(x, y, Phaser.CANVAS, '', { preload: preload, create: create, update:update}); //w, h function preload() { // load and name the game assets game.load.image('player', 'images/player1_01.png'); game.load.image('background', background); game.load.image('part', 'images/particle.png'); game.load.image('partS', 'images/particle-small.png'); game.load.image('partM', 'images/particle-med.png'); game.load.image('orbs', 'images/orb_small.png'); // load the games main music game.load.audio('EmbryonicW', ['Sounds/Embryonic_Waves.mp3', 'Sounds/Embryonic_Waves.ogg']); // load collect chirp sound game.load.audio('Randomize5', ['Sounds/Randomize5.mp3']); } // pre create variables and assign them names var group; var player; var score = 0; var scoreText; var music; var chirp; function create() { // add music to game world and play music = game.add.audio('EmbryonicW',1,true); music.play('',0,1,true); chirp = game.add.audio('Randomize5'); // assign the game assets bg = game.add.tileSprite(0, 0, 3040, 1944, 'background'); /*set the game worlds size game.world.setSize(3040,1944);*/ // game.world.setSize no longer is supported // no we use game.world.setBounds(0, 0, 3040, 1944); // add player to game world player = game.add.sprite(game.world.centerX, game.world.centerY, 'player'); player.name = "player"; // confines players body to the game world player.body.collideWorldBounds=true; // create a group for plaver vs orb collision collect = game.add.group(); // create a camera that will follow the player game.camera.follow(player); // create game score board and set it to center of world set color and font size scoreText = game.add.text(game.world.centerX, game.world.centerY, 'score: 0', { font: "70px Arial", fill: "#ffffff", align: "center" }); // create a hover / float effect to the score board game.add.tween(scoreText) .to({ y: game.world.centerY - 7 }, 1000, Phaser.Easing.Linear.None, true) .to({ y: game.world.centerY + 7 }, 1000, Phaser.Easing.Linear.None) .loop(); // randomly place 3 orbs around the game world for(var i=0, nb=3; i<nb; i++){ // add the newley made orbs to collect group orbs = collect.create(game.world.randomX,game.world.randomY,'orbs'); orbs.name = "orbs"; orbs.body.immovable = true; }// this is the end of orbs for loop // create a particle emitter emitter = game.add.emitter(player.body.x, player.body.y, 35); // set the partcles emitter.makeParticles(['part', 'partM' ,'partS']); emitter.minParticleSpeed.setTo(-4, -4); emitter.maxParticleSpeed.setTo(100, 100); emitter.gravity = 0; emitter.start(false, 500, 10); // set this to null so the defult cursor can be set using css or js this.game.stage.canvas.style.cursor = null; } // this is the main game loop function update() { // treat the Sprites x/y coordinates as being the middle of the player player.anchor.x = 0.5; player.anchor.y = 0.5; spin = 15; /*// set emmiter position to the location of the player // this player.body is no longer needed emitter.x = player.body.x; emitter.y = player.body.y;*/ // now we just use emitter.x = player.x; emitter.y = player.y; // set up collison rules, the first object assigned will become obj1 // the second object will become obj2 game.physics.collide(player, collect, collisionHandler, null, this); // this will cause the orbs to follow the player // game.physics.moveTowardsObject(orbs, player, 100); // if mouse button is pressed down then player spite should follow the mouse if (game.input.mousePointer.isDown) { // moveTowardsMouse is no longer supported // game.physics.moveTowardsMouse(player, 200); //now we use game.physics.moveToPointer(player, 200); // 200 is the speed player will move towards the mouse // rotate the player player.angle += spin; // this turns the emitter on if the mouse is pressed emitter.exists = true; if (Phaser.Rectangle.contains(player.body, game.input.x, game.input.y)) {// if it's overlapping the mouse, don't move any more player.body.velocity.setTo(0, 0); }} else { player.body.velocity.setTo(0, 0); // rotate the player at a slower speed player.angle += 2; // this turn the emitter off if no keys are pressed emitter.exists = false; } } function collisionHandler (obj1, obj2) { // if a collision occurs betewn the player and group // kill the collided orb and spawn a new one randomly // without .kill when the player bumps into another obj the obj will just roll away obj2.kill(); collect.create(game.world.randomX,game.world.randomY,'orbs'); // increase and update score if player collects orb score += 1; // i no longer need to use .text now you can just add your Name.content to access text //scoreText.text = 'score: ' + score; scoreText.content = 'score: ' + score; // play chirp sound one time, if player collects orb chirp.play(); } })(); </script> </body></html><style> canvas{ cursor:url(images/cursor.png); }</style> Link to comment Share on other sites More sharing options...
rich Posted November 15, 2013 Share Posted November 15, 2013 If it doesn't work on Linux Firefox but does work on Windows Firefox then I would suspect it is a path issue. Linux is case sensitive - are you sure the folder is called Sounds with a capital S? Do you get an errors in Firebug? Link to comment Share on other sites More sharing options...
kass Posted November 15, 2013 Share Posted November 15, 2013 did rich's suggestion fix it? Link to comment Share on other sites More sharing options...
Fl4m3Ph03n1x Posted November 15, 2013 Author Share Posted November 15, 2013 The path is correct. I also forgot to mention that the example works on Linux Chrome when I use the --allow-file-access-from-files flag to launch it, so I assume the paths must be correct, otherwise I would have the same problem on Chrome as well. Could you or someone else test the code on some Firefox version running on Linux?Here is a zip file with everything: https://dl.dropboxusercontent.com/u/785815/phaser%20tut.zip There are two files, index.html and index_orig.html, they are the same code with a minor difference (one uses the entire screen while the other does not) and they both share the same problem. Link to comment Share on other sites More sharing options...
rich Posted November 15, 2013 Share Posted November 15, 2013 I still reckon you would be seeing errors in Firebug that would tell what is going on. You're launching this from a proper web server, yes? (dropbox would do too). Is it even getting the mp3? (in the Net tab of Firebug). Does the Audio Example work that comes in the Examples folder? Link to comment Share on other sites More sharing options...
powerfear Posted November 15, 2013 Share Posted November 15, 2013 I am not sure about firefox 25 but firefox 24 for linux need manual activation for mp3 to work: http://www.ghacks.net/2013/06/23/firefox-24-for-linux-gets-native-mp3-aac-and-h-264-support/ Link to comment Share on other sites More sharing options...
Recommended Posts