Jump to content

How to make a loading screen?


Recommended Posts

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...