3man7

Members
  • Content Count

    31
  • Joined

  • Last visited

Posts posted by 3man7


  1. in create():

    //add the animation
    player.animations.add('crouch', Phaser.Animation.generateFrameNames(prefix, start, stop, suffix, zeroPad), fps, loop);
    
    //play the animation
    player.animations.play('crouch');

    Reply back with the .json file if you need more help.


  2. Hey,

    So you have 4 seconds for each of the messages to read; clicking on the screen will skip the current one but also resets the timer back.

    Take your time looking/understanding the code below and let me know if something doesn't seem to make sense to you.

    Main.Game = function (game) {};
    
    var myTimer, count = 0;
    
    Main.Game.prototype = {
        create: function () {
            this.cursor = game.input.keyboard.createCursorKeys();
    
            game.stage.backgroundColor = "#4488AA";
            this.player = game.add.sprite(600, 250, 'player');
            this.player.anchor.setTo(0.5, 0.5);
            game.physics.arcade.enable(this.player);
    
            this.friend = game.add.sprite(400, 250, 'friend');
            this.friend.anchor.setTo(0.5, 0.5);
            game.physics.arcade.enable(this.friend);
    
            //  Create a Rectangle
            var rectangle = new Phaser.Rectangle(0, 515, 1000, 200);
            //  Create a BitmapData just to plot the points to
            var bmd = game.add.bitmapData(game.width, game.height);
            bmd.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height, '#ffffff');
            bmd.addToWorld();
    
            //myMessage
            this.myMessage = game.add.text(500, 540, '', {
                font: "18px Arial",
                fill: "#333333",
                align: "center"
            });
            this.myMessage.anchor.setTo(0.5, 0.5);
    
            //myTimer
            myTimer = game.time.create(false);
    
            //input enabler
            game.inputEnabled = true;
            game.input.onDown.add(this.updateMsg, this);
    
            this.updateMsg();
        },
    
        updateTmr: function () {
            if (count <= 2) {
                count++;
                myTimer.destroy();
                myTimer.add(Phaser.Timer.SECOND * 4, this.updateMsg, this);
                myTimer.start();
                myTimer.resume();
            } else {
                myTimer.destroy();
            }
        },
    
        updateMsg: function () {
            switch (count) {
                case 0:
                    this.myMessage.setText('Hello, thank you for coming to save us.');
                    break;
                case 1:
                    this.myMessage.setText('1. We need your help to save the world');
                    break;
                case 2:
                    this.myMessage.setText('To be able to save the world, you must gain magic.');
                    break;
                case 3:
                    this.myMessage.setText('The mini games in each world will give you a new magic spell. You must complete the mini-game before exploring the rest of the world. Good luck to you.');
                    break;
            }
            this.updateTmr();
        },
    
        update: function () {
            //stuff to run at 60 times per second
        },
    
        render: function () {
            game.debug.text("count: " + count, 32, 40);
            game.debug.text("myTimer: " + myTimer.duration.toFixed(0), 32, 60);
        }
    };

    The render function will make you see things better - although it has an impact on fps so be sure to remove it whenever you try to get the best out of your project/game.

    Good luck! :)


  3. @isepulveda

    Everything in 'update' is going to run 60 times/second. The clicking event should be put in 'create'.

    game.inputEnabled = true;
    game.input.onDown.add(function () {
        count++;
        if (count <= 1) {
            this.message.setText("We need your help to save the world");
        }
    }, this);

     

    Could you explain a little bit what you are trying to achieve exactly?

    Any slight changes to the code will return different cases.


  4. Hi,

    If you mean like a grid out of a sprite then...

    //create grid group
    this.mygridGroup = game.add.group();
    this.mygridGroup.enableBody = false;
    for (i = 0; i <= 5; i++) {
        for (j = 0; j <= 5; j++) {
            var mygrid = this.mygridGroup.game.add.sprite(50 * j, 50 * i, 'mySprite');
            this.mygridGroup.add(mygrid);
        }
    }
    
    //later on you can set properties to the grid like so...
    this.mygridGroup.setAll('anchor.x', 0.5);
    this.mygridGroup.setAll('anchor.y', 0.5);

    img.png

    Good luck! :)


  5. Hi,

    There's just a couple of minor problems with your game. Visit the links below to check the errors.

    index.html = https://www.diffchecker.com/OJDuSSht
    load.js = https://www.diffchecker.com/vtrZJTg9
    menu.js = https://www.diffchecker.com/QKSn5QeI
    play.js = https://www.diffchecker.com/wCfx8nyS
    win.js = https://www.diffchecker.com/dmXpemAh

    I've attached the fixed files in this post.

    Good luck! :)


  6. Hey,

    I haven't had any problems like that so I'm not entirely sure why that happens.

    Try adding: game.input.onDown.remove (this.myfunction, this);
    at the end of the function (this.myfunction)

    If that doesnt work... then

    Try adding: game.input.onUp.add (function(){}, this);
    below game.input.onDown.add (this.myfunction, this);


  7. Hey,

    Delete the ' ' from the resolution specified.

    var game = new Phaser.Game(100, 100, Phaser.AUTO ....

    Delete #1 from update() and add #2 in create()

    #1
    if (game.input.pointer1.isDown) {
        ball.body.gravity.y = 3000;
    }
    
    #2
    game.inputEnabled = true;
    game.input.onDown.add(function () {
        ball.body.gravity.y = 3000;
    }, this);

     


  8. @Fenopiù - I think the 'update' gives him problems because the sound is playing continuously.

    @jevisan - This might look complicated but it's pretty easy to understand. I apologize for the long post but I've felt like you may want a different approach of playing the sounds.

    Methods:

    1. sounds will be played like: A-B-A-B etc.
    2. sounds will be played in groups like: ( A-B ) -> ( A-B ) -> ( B-A ) -> ( A-B ) -> ( B-A ) etc.
    3. sounds will be played randomly like so: A-A-A-A-A-A-A-B-B-B-A-A-A-B etc.

    Test all 3 and use what you like the most. I recommend the second method as it sounds more naturally.

    Necessary:

    //in variables
    var cursors;
    var footstep_var = 0;
    var footstep_rnd_var = 0; //remove this if you use the first method
    var keyleft_var = 0;
    
    //in create
    this.cursors = game.input.keyboard.createCursorKeys();
    
    //in update
    update: function () {
        if (this.cursors.left.isDown) {
            keyleft_var = 1;
            
            //include other stuff here
            
            this.footstep_fn();
        } else {
            keyleft_var = 0;
        }
    }

    'keyleft_var' checks if you still hold the left key or not. (0 no / 1 yes)

     

    1st Method:

    
    footstep_fn: function () {
        if (footstep_var == 0) {
            footstep_var = 1;
    
            footstepA.play();
            footstepA.onStop.addOnce(function () {
                if (keyleft_var == 0) {
                    footstep_var = 0;
                } else {
                    footstep_var = 2;
                    footstepB.play();
                    footstepB.onStop.addOnce(function () {
                        footstep_var = 0;
                    }, this);
                }
            }, this);
        }
    }

    This function is executed in 'update'. Here 'footstep_var' changes to 1 if it's 0 (an easy method of running stuff in 'update' only once).

    Play sound A -> 'onStop' will check if sound A has been finished playing -> Check if the left key is still held down (if keyleft_var == 0) -> NO? reset 'footstep_var' to 0 -> YES? change 'footstep_var' to 2 so it won't interfere -> Play sound B -> 'onStop' will check if sound B has been finished playing -> reset 'footstep_var' to 0 so the code will run again.

     

    2nd Method:

    footstep_fn: function () {
        if (footstep_var == 0) {
            footstep_var = 1;
    
            footstep_rnd_var = Math.round(Math.random());
            console.log(footstep_rnd_var); //watch the console to see the randomness
    
            switch (footstep_rnd_var) {
                case 0:
                    footstepA.play();
                    footstepA.onStop.addOnce(function () {
                        if (keyleft_var == 0) {
                            footstep_var = 0;
                        } else {
                            footstep_var = 2;
                            footstepB.play();
                            footstepB.onStop.addOnce(function () {
                                footstep_var = 0;
                            }, this);
                        }
                    }, this);
                    break;
                case 1:
                    footstepB.play();
                    footstepB.onStop.addOnce(function () {
                        if (keyleft_var == 0) {
                            footstep_var = 0;
                        } else {
                            footstep_var = 2;
                            footstepA.play();
                            footstepA.onStop.addOnce(function () {
                                footstep_var = 0;
                            }, this);
                        }
                    }, this);
                    break;
            }
        }
    }

    Minor changes from the first method.

    The variable 'footstep_rnd_var' will be 0 or 1 (randomizes everytime you hold the left key) -> 'switch' checks this random value and if it's:

    • 0 : play A then B (same code from 1st method) (check explanation there)
    • 1 : play B then A (same code from 1st method but reverses footstepA with B) (check explanation there)
     

    3rd Method:

    footstep_fn: function () {
        if (footstep_var == 0 || footstep_var == 2) { //HERE
            footstep_var = 1;
    
            footstep_rnd_var = Math.round(Math.random());
            console.log(footstep_rnd_var); //watch the console to see the randomness
    
            switch (footstep_rnd_var) {
                case 0:
                    footstepA.play();
                    footstepA.onStop.addOnce(function () {
                        if (keyleft_var == 0) {
                            footstep_var = 0;
                        } else {
                            footstep_var = 2;
                            this.footstep_fn(); //HERE
                        }
                    }, this);
                    break;
                case 1:
                    footstepB.play();
                    footstepB.onStop.addOnce(function () {
                        if (keyleft_var == 0) {
                            footstep_var = 0;
                        } else {
                            footstep_var = 2;
                            this.footstep_fn(); //HERE
                        }
                    }, this);
                    break;
            }
        }
    }

    Same as the second method. //HERE means changes to the code.

     

    Let me know if there's something that you may find confusing.

    Good luck!


  9. Hey,

    I think the problem is merely the code ordering + omitting specifying default proprieties + confusion.. ?

    Here's how I'd do it:

    Main.Game = function (game) {};
    
    var pressedOne_bool = false;
    var pressedTwo_bool = false;
    var pressedThree_bool = false;
    var arr;
    
    Main.Game.prototype = {
        preload: function () {
            this.game.load.image('one', 'phone/phone1.png');
            this.game.load.image('two', 'phone/phone2.png');
            this.game.load.image('three', 'phone/phone3.png');
            this.game.load.image('enter', 'images/enter.png');
        },
    
        create: function () {
            this.one = this.game.add.button(100, 100, 'one', this.pressedOne, this);
            this.one.tint = 0xFFFFFF;
    
            this.two = this.game.add.button(200, 100, 'two', this.pressedTwo, this);
            this.two.tint = 0xFFFFFF;
    
            this.three = this.game.add.button(300, 100, 'three', this.pressedThree, this);
            this.three.tint = 0xFFFFFF;
    
            this.arr = [0, 0, 0];
        },
    
        pressedOne: function () {
            switch (pressedOne_bool) {
                case false:
                    pressedOne_bool = true;
                    this.one.tint = 0xE6E2F4;
                    this.arr[0] = 1;
    
                    break;
                case true:
                    pressedOne_bool = false;
                    this.one.tint = 0xFFFFFF;
                    this.arr[0] = 0;
    
                    break;
            }
        },
    
        pressedTwo: function () {
            switch (pressedTwo_bool) {
                case false:
                    pressedTwo_bool = true;
                    this.two.tint = 0xE6E2F4;
                    this.arr[1] = 1;
    
                    break;
                case true:
                    pressedTwo_bool = false;
                    this.two.tint = 0xFFFFFF;
                    this.arr[1] = 0;
    
                    break;
            }
        },
    
        pressedThree: function () {
            switch (pressedThree_bool) {
                case false:
                    pressedThree_bool = true;
                    this.three.tint = 0xE6E2F4;
                    this.arr[2] = 1;
    
                    break;
                case true:
                    pressedThree_bool = false;
                    this.three.tint = 0xFFFFFF;
                    this.arr[2] = 0;
    
                    break;
            }
        },
    
        EnterBtn: function () {
            console.log(this.arr);
        },
    
        render: function () {
            game.debug.text("pressedOne_bool: " + pressedOne_bool, 32, 40);
            game.debug.text("pressedTwo_bool: " + pressedTwo_bool, 32, 60);
            game.debug.text("pressedThree_bool: " + pressedThree_bool, 32, 80);
    
            game.debug.text("arr: " + this.arr, 32, 120);
        }
    
    }

    The render function will make you see things better - although it has an impact on fps so be sure to remove it whenever you try to get the best out of your project/game.

    Good luck! ;)


  10. Happy new year! : )

    EDITED:

    //variables
    var flip = 0;
    var gun_distX;
    
    //update
    gun_distX = game.input.x - this.gun.x;
    
    /*
    flip = 0 - mouse is on the right side of the gun
    flip = 1 - mouse is on the left side of the gun
    */
    
    switch (flip) {
        case 0:
            if (gun_distX < 0) {
                flip = 1;
                this.gun.scale.y *= -1;
            }
            break;
        case 1:
            if (gun_distX >= 0) {
                flip = 0;
                this.gun.scale.y *= -1;
            }
            break;
    }

    You basically subtract x position of mouse and gun to get the distance between the two.

    If the value is positive then the mouse is on the right side of the gun and vice versa; flipping the gun accordingly.

    ~~~

    You might work with these too later on, altough the above is enough.

    var gun_distX,
        gun_distY,
        gun_angle,
        gun_degree;
    
    gun_distX = game.input.x - this.gun.x;
    gun_distY = game.input.y - this.gun.y;
    gun_angle = Math.atan2(gun_distX, gun_distY);
    gun_degree = gun_angle * 180 / Math.PI;

     

    Good luck! ;)


  11. @DanielKlava answer is spot on. I don't see why it wouldn't work for you.

    Credit goes to him for answer; I'll just provide the code if that's easier to understand.

    1.

    Delete the '1' at the end to make the default frame 0. (aka unslashed/unmuted sprite). (or change it to 0, same thing).

    this.button = game.add.button(this.posx, this.posy, this.image, this.anim_on_click, this, 0);

    Frames starts at 0; so you specified the button to go to the next frame (aka slashed/muted sprite) therefore the code skipped the first part.

    2.

    Use a variable instead of checking the current frame of the sprite.

    var mutedYN = 0;
    
    _button_stay.prototype.anim_on_click = function () {
        switch (mutedYN) {
            case 0:
                //mute
                this.audio_click();
                music.pause();
                music_ambiance_mute();
                this.button.frame = 1;
                break;
            case 1:
                //unmute
                this.audio_click();
                music.resume();
                music_ambiance_activate();
                this.button.frame = 0;
                break;
        }
        mutedYN = mutedYN ? 0 : 1;
    };

     


  12. Hopefully no one minds but I've already posted my game on 'Game Showcase' section and I've wanted to post it here too as this is my first launch on Google Play! :D

        Jelly Haven is an action-arcade HTML5 game in which you control a jellyfish going through the space gathering shiny gems and avoid being hit by dangerous obstacles like meteors and rockets. The game gets really fast paced as you purchase upgrades from the store which helps you survive much longer.

    * Translated in 9 languages: English, Russian, French, German, Italian, Spanish, Portuguese, Turkish and Romanian.

    Link to game: http://37dev.ga/jelly
    Quick Gameplay: https://youtu.be/nRIHGlr1X64

    Google Play: https://play.google.com/store/apps/details?id=com.thirtyseven.jellyhaven

    jellyhaven.png


  13. 17 minutes ago, Yehuda Katz said:

    @3man7 Nope, I need only gray scale image to display locked levels on level selection menu. I thought may be Phaser can somehow do the job once, cache that gray scale image and use it with every update... instead of simply doing whole filter job all the time =) Once I will have free time, I will try write some code which will cache that gray scale image of image and share the code here (in case of success)

    Ohh I get it.

    What I would've done instead is this: create a black box with the transparency of 60% and save it as .png. After that just duplicate the .png image with 'for loop', put them in a group and place them over the colored levels (aka unlocked). Then kill() the image specific to the levels unlocked.

    It won't be grayscale but it's a similar effect.

    In the end it's up to you :)


  14. 5 hours ago, Yehuda Katz said:

    @3man7 I decided to give up with using filters as they drop frame rate to 15-20 from 60 on my PC (I can imagine what will happen on tablet or mobile devises). I have only 80 different sprites created from PNG file and moving them around (scrolling) glitches the screen. Does anyone have have any idea how to fix that or simply do one time dirty work in Photoshop and give up with filters?

    The filter option will definitely have an impact on the performance. I would personally apply the filter to the batch of images in Photoshop using 'Action'.

    Here's a good tutorial: youtube.com/watch?v=lcZp2h5WXdA

    Don't forget to backup your original images!

    This method only applies if your sprites will remain grayscale the entire project. If you want to transition from color to grayscale and back on color then I would advice against this method and instead try to find a fix for the code.

    Sorry that I cannot help you enough with the filter code as I haven't used them before.


  15. Well, like @samid737 said, the issue is that you are using CANVAS.

    In the testing I've used Phaser 2.6.2 and Phaser.AUTO.

    I am not entirely sure if there are filters that can be used with CANVAS as they are meant to work with WEBGL only.

     

    Refer to:
    https://github.com/photonstorm/phaser/issues/2223
    http://phaser.io/docs/2.6.2/Phaser.Filter.html

    Quote

    @rich: Filters are basically Shaders, and shaders are WebGL only I'm afraid. I have updated the docs to reflect this.

    Quote

    The vast majority of filters (including all of those that ship with Phaser) use fragment shaders, and
    therefore only work in WebGL and are not supported by Canvas at all.

     


  16. Hey guys,

    I just wanted to let you know about my first HTML5 game made with Phaser!

    It is an action-arcade game in which you control a jellyfish going through the space gathering shiny gems and avoid being hit by dangerous obstacles like meteors and rockets.

    Link to game: http://37dev.ga/jelly
    Quick Gameplay: https://youtu.be/nRIHGlr1X64

    1.png

    2.png

    3.png

    The game starts off slowly but it gets really fast paced as you purchase upgrades from the store which helps you survive much longer.

    • Endless fun game with great performance.
    • Optimized for mobile devices but fully playable in desktop as well.
    • Audio support for all mobile operating systems.
    • Easily localized as the texts are stored in a .json file.
    • Saving/loading game with cookies system.
    • Translated in 9 languages: English, Russian, French, German, Italian, Spanish, Portuguese, Turkish and Romanian.

     

    The game is currently looking for sponsorship and has not yet been published before.

    Let me know what you guys think!

    Enjoy! :)


  17. Well I'm new to Phaser as well but here's my take:

    The problem here is the value given to the radius in tween.
    Should've been half of the size given in 'outerCircle', which is 150. (this.outerCircle = new Phaser.Circle(200, 200, 300);)

    But for some reason it doesn't accept the perfect half, but by a point off. (149.9) (not sure why, hopefully someone could help me on this one)

    This is a dirty hack and I would definitely look into other ways of dealing with this kind of effect.

    //define variable
    var circleRadius = 300;
    
    //create
    this.outerCircle = new Phaser.Circle(200, 200, circleRadius);
    
    //update
    this.smokeTween = this.game.add.tween(this.radCircle).to( { radius: circleRadius / 2 - .1 }, 20000, Phaser.Easing.Sinusoidal.Out, true);

     


  18. @samme
    Yeah there's definetely an easier way of coding this. Basically I needed a button to pause/resume everything at a quick click. I did get it to work but I didn't understand why my methods acted like that.

    @samid737
    Well that makes more sense now! I appreciate your detailed message! I'm gonna have to take a second and read your reply several times because I'm not quite familiar with method chaining in Javascript. I might've skipped some basic lessons.

    Thanks both of you for the replies!


  19. Hello guys,
    I have 2 'simple questions' (I assume) that kinda bugs me for a while now. I wouldn't want to get too in-depth with this mainly because I'm not good at explaining stuff; but I'll try to keep it simple.

    1st question:
    Is 'fig 1' and 'fig 2' supposed to be the same thing?

    pic1.png


    2nd question:
    I got a button that is supposed to pause the game.
    'mygamepaused' is a variable that goes true/false on a click.
    'mytimepass' is a 3 seconds timer that runs the tween from the first question.
    'smiley_tw_pass' is a variable that goes true when the timer is finished (aka my way of telling the program that the tween just started)
    'smiley_tw' is the name assigned to the tween (see question 1).

    pic2.png

    After the tween is completed (see question 1) - the sprite (this.smiley) goes to 100 on y axis and changes alpha to 0.1.

    Here's where I run into problems.
    1st: "smiley_tw is not defined"
         console error when trying to press the button before the timer passess (aka it cannot find the tween)
         fixed it by assigning a variable (smiley_tw_pass) right after the timer runs out.
         ...is that a good way of checking if the tween just started?...

    pic3.png

     

    2nd: "smiley_tw.pause is not a function"
         console error when using fig 1 (see question 1)
         fixed it by using fig 2 (see question 1)
         ...this bugs me because in my mind the two methods should work the same way, right?...

    pic4.png

    So that's how I solved the problem - by using a variable to detect if the tween just started AND using fig 2 instead of the first one - But WHY?

    Why does the 2 methods doesn't work the same way here - AND - is declaring a variable (smiley_tw_pass) to check if a tween is running - a good thing?

    I would really appreciate if someone can figure this 'mistery' and can clear my mind a little.

    Full code: (480x720)

    var Test = function (game) {};
    
    var mygamepaused = false;
    var smiley_tw_pass = false;
    
    Test.prototype = {
        create: function () {
            //create button
            this.mybutton = game.add.button(this.world.centerX, 600, 'smiley', this.myfunction, this);
            this.mybutton.anchor.setTo(.5);
            this.mybutton.scale.setTo(.2);
            this.mybutton.inputEnabled = true;
    
            //create smiley
            this.smiley = game.add.sprite(this.world.centerX, this.world.centerY, 'smiley');
            this.smiley.anchor.setTo(.5);
            this.smiley.scale.setTo(.5);
    
            //create mytimepass
            mytimepass = game.time.create(false);
    
            mytimepass.add(3000, function () {
                if (!smiley_tw_pass)
                    smiley_tw_pass = true;
                smiley_tw = game.add.tween(this.smiley).to({
                    alpha: 0
                }, 1200, Phaser.Easing.Quadratic.InOut, true);
    
                smiley_tw.onComplete.add(function () {
                    this.smiley.y = 100;
                    this.smiley.alpha = 0.1;
                }, this);
            }, this);
    
            mytimepass.start();
        },
    
        myfunction: function () {
            switch (mygamepaused) {
                case false:
                    mygamepaused = true;
    
                    mytimepass.pause();
    
                    if (smiley_tw_pass)
                        smiley_tw.pause();
                    break;
                case true:
                    mygamepaused = false;
    
                    mytimepass.resume();
    
                    if (smiley_tw_pass)
                        smiley_tw.resume();
                    break;
            }
        },
    
        render: function () {
            game.debug.text('mygamepaused: ' + mygamepaused, 20, 20);
            game.debug.text('smiley_tw_pass: ' + smiley_tw_pass, 20, 40);
    
            game.debug.text('mytimepass: ' + mytimepass.duration.toFixed(0), 20, 80);
        }
    };