Fl4m3Ph03n1x Posted November 15, 2013 Share Posted November 15, 2013 Hello all, I have a prototype made by a friend of mine, and with all simple prototypes I have images and music that need to be loaded.The images load pretty fast (in fact, they do it instantly) but the music does not. Most of the time (specialy in the Windows version of Chrome) I end up playing the game, and then only after a long while the music starts playing. How can I avoid this so the music and the game start at the same time? I though that adding a loading screen could fix the problem, but after googling I could not find an example on how to do it using Phaser. Can someone help me do it or give me tips please?<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 Have a look at the files in here, it explains what is going on: https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Basic Link to comment Share on other sites More sharing options...
sergil Posted November 15, 2013 Share Posted November 15, 2013 I'm using game states to avoid problems with loading resources, and for maintaining a basic game structure... you can see and example here https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Basic Link to comment Share on other sites More sharing options...
rich Posted November 15, 2013 Share Posted November 15, 2013 Even with a game state the issue here is the audio file decoding, not the way the code is structured. But as we've both said, look at the template because it explains how to pause for the audio to be ready first. kass 1 Link to comment Share on other sites More sharing options...
en4ce Posted November 15, 2013 Share Posted November 15, 2013 if (this.cache.isSoundDecoded('yourMusic')){} Link to comment Share on other sites More sharing options...
kass Posted November 15, 2013 Share Posted November 15, 2013 Even with a game state the issue here is the audio file decoding, not the way the code is structured. But as we've both said, look at the template because it explains how to pause for the audio to be ready first.maybe we could do like this http://gametest.mobi/phaser/examples/_site/view_full.html?d=games&f=tanks.js&t=tanks and use what rich suggested.we could add a logo(or whatever else) in front of the game screen and pause while the audio loads ,then when the audio has finished loading we could kill the logo and start the game. Link to comment Share on other sites More sharing options...
rich Posted November 15, 2013 Share Posted November 15, 2013 Yes, or add a preloader bar? Then just pause at the end of it while the audio decodes? It depends how long it will take though. Also - the way the mp3 is encoded makes a huge difference to decoding times. Some encoders take longer than others, different formats (ogg for example) are much faster too. kass 1 Link to comment Share on other sites More sharing options...
Recommended Posts