Oscillating particle which detects collision

[haramrit09k]

I am trying to make a game similar to a game on the Play Store, called 'Sine Line'. 

I am not able to figure out how to keep the particle oscillating when input is not given. When input is given, the particle should travel in a sinusoidal manner. But when you release the input, it shouldn't stop. Instead, it should keep oscillating along the X axis. Any help appreciated. 

Thank you in advance. 

P.S. I am attaching the JS file. I've written it in a very messy manner. Sorry for that.

game.js

[phreaknation]

Do not use a while. The reason for this is that the game works in ticks, and a while statement keeps the pointer inside the while until the condition is met. So essentially for each update sequence it does the entire wave in the while loop and the renders after the while is done. Also Do not separate the osc function and call two different mechanisms unless you want different speeds, in that case, you can add in some arguments and change up things that way.

 

/* global console */
/* global Phaser */

(function() {
    'use strict';

    var game, rocket, obstacle, cursors, i, y;
    var oscIndex = 1;

    var preload = function preload() {
        // game.load.image('rocket', 'rocket.png');
        // game.load.image('obstacle', 'obstacle.png');
        // game.load.image('sky', 'sky.png');
    };

    var create = function create() {
        // game.physics.startSystem(Phaser.Physics.ARCADE);
        //Started P2 Physics System
        game.physics.startSystem(Phaser.Physics.P2JS);
        //Resized game world
        game.world.resize(6000, 6000);
        //Add sprites
        var sky = game.add.tileSprite(0, 0, 1920, 1920, 'sky');
        rocket = game.add.sprite(300, 5500, 'rocket');
        //Scale sprites
        rocket.scale.setTo(0.3, 0.3);
        sky.scale.setTo(7, 7);

        // rocket.x.fixedToCamera = true;
        //tweenA = game.add.tween(rocket).to( { angle: 45 }, 2, "Quart.easeOut").to( { x: 550, y:700 }, 1200, "Quart.easeInOut").to( { angle: 0 }, 20, "Quart.easeOut").to( { angle: -45 }, 20, "Quart.easeOut").to( { x: 30 }, 1200, "Quart.easeInOut").to( { angle: 0 }, 20, "Quart.easeOut").loop(true);
        //game.input.onDown.addOnce(start, this);
        //obstacles = game.add.group();
        //    obstacles.enableBody = true;
        //      x = 40;
        //    for(var i=0; i<5; i++){
        //    var obstacle = obstacles.create(x, game.world.randomY, 'obstacle');
        // //obstacle.body.velocity.y = 0;
        //    x += game.rnd.integerInRange(100,250);
        // }
        // obstacles.outOfBoundsKill = true;

        rocket.enableBody = true;

        //Camera follows rocket
        game.camera.follow(rocket);

        cursors = game.input.keyboard.createCursorKeys();
        // console.log(rocket.y);
    };

    var update = function update() {
        //obstacles.forEach(checkPos, this);

        // game.physics.arcade.overlap(rocket, obstacles, collisionHandler, null, this);

        //On pressing the up arrow key, the rocket moves forward in a sine wave path
        if (cursors.up.isDown) {
            //game.camera.y -= 5;
            rocket.y -= 5;
            // rocket.body.moveUp(200);
        } else if (cursors.down.isDown) {
            //game.camera.y -= 5;
            rocket.y += 5;
            // rocket.body.moveUp(200);
        }
        oscillation(); //Not working :(
    };

    // var start = function start() {
    //     tweenA.start();
    // };

    // var checkPos = function checkPos(obstacle) {
    //     if (obstacle.y > 800) {
    //         obstacle.y = -100;
    //     }
    // };

    // var collisionHandler = function collisionHandler(rocket, obstacle) {
    //     rocket.x = 300;
    //     rocket.y = 700;
    // };

    var calcSin = function calcSin (amp, osc, sinD) {
        return amp * Math.sin(osc / sinD);
    };

    //Oscillation function defined separately to oscillate the particle
    var oscillation = function oscillation() {
        var y = rocket.y;
        if (oscIndex === 300) oscIndex = 1;
        var sin = calcSin(200, oscIndex, 15);
        rocket.x = 600 + parseInt(sin);
        y = y - 3;
        oscIndex++;

        console.log(rocket.x);
    };



    window.onload = function() {
      // var cp = Phaser.Tile.prototype.containsPoint;
      game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', {
        preload: preload,
        create: create,
        update: update,
      });
    };

    window.onload();
})();

 

[haramrit09k]

14 hours ago, phreaknation said:

Do not use a while. The reason for this is that the game works in ticks, and a while statement keeps the pointer inside the while until the condition is met. So essentially for each update sequence it does the entire wave in the while loop and the renders after the while is done. Also Do not separate the osc function and call two different mechanisms unless you want different speeds, in that case, you can add in some arguments and change up things that way.

 

/* global console */
/* global Phaser */

(function() {
    'use strict';

    var game, rocket, obstacle, cursors, i, y;
    var oscIndex = 1;

    var preload = function preload() {
        // game.load.image('rocket', 'rocket.png');
        // game.load.image('obstacle', 'obstacle.png');
        // game.load.image('sky', 'sky.png');
    };

    var create = function create() {
        // game.physics.startSystem(Phaser.Physics.ARCADE);
        //Started P2 Physics System
        game.physics.startSystem(Phaser.Physics.P2JS);
        //Resized game world
        game.world.resize(6000, 6000);
        //Add sprites
        var sky = game.add.tileSprite(0, 0, 1920, 1920, 'sky');
        rocket = game.add.sprite(300, 5500, 'rocket');
        //Scale sprites
        rocket.scale.setTo(0.3, 0.3);
        sky.scale.setTo(7, 7);

        // rocket.x.fixedToCamera = true;
        //tweenA = game.add.tween(rocket).to( { angle: 45 }, 2, "Quart.easeOut").to( { x: 550, y:700 }, 1200, "Quart.easeInOut").to( { angle: 0 }, 20, "Quart.easeOut").to( { angle: -45 }, 20, "Quart.easeOut").to( { x: 30 }, 1200, "Quart.easeInOut").to( { angle: 0 }, 20, "Quart.easeOut").loop(true);
        //game.input.onDown.addOnce(start, this);
        //obstacles = game.add.group();
        //    obstacles.enableBody = true;
        //      x = 40;
        //    for(var i=0; i<5; i++){
        //    var obstacle = obstacles.create(x, game.world.randomY, 'obstacle');
        // //obstacle.body.velocity.y = 0;
        //    x += game.rnd.integerInRange(100,250);
        // }
        // obstacles.outOfBoundsKill = true;

        rocket.enableBody = true;

        //Camera follows rocket
        game.camera.follow(rocket);

        cursors = game.input.keyboard.createCursorKeys();
        // console.log(rocket.y);
    };

    var update = function update() {
        //obstacles.forEach(checkPos, this);

        // game.physics.arcade.overlap(rocket, obstacles, collisionHandler, null, this);

        //On pressing the up arrow key, the rocket moves forward in a sine wave path
        if (cursors.up.isDown) {
            //game.camera.y -= 5;
            rocket.y -= 5;
            // rocket.body.moveUp(200);
        } else if (cursors.down.isDown) {
            //game.camera.y -= 5;
            rocket.y += 5;
            // rocket.body.moveUp(200);
        }
        oscillation(); //Not working :(
    };

    // var start = function start() {
    //     tweenA.start();
    // };

    // var checkPos = function checkPos(obstacle) {
    //     if (obstacle.y > 800) {
    //         obstacle.y = -100;
    //     }
    // };

    // var collisionHandler = function collisionHandler(rocket, obstacle) {
    //     rocket.x = 300;
    //     rocket.y = 700;
    // };

    var calcSin = function calcSin (amp, osc, sinD) {
        return amp * Math.sin(osc / sinD);
    };

    //Oscillation function defined separately to oscillate the particle
    var oscillation = function oscillation() {
        var y = rocket.y;
        if (oscIndex === 300) oscIndex = 1;
        var sin = calcSin(200, oscIndex, 15);
        rocket.x = 600 + parseInt(sin);
        y = y - 3;
        oscIndex++;

        console.log(rocket.x);
    };



    window.onload = function() {
      // var cp = Phaser.Tile.prototype.containsPoint;
      game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', {
        preload: preload,
        create: create,
        update: update,
      });
    };

    window.onload();
})();

 

 

 

BROOOOOOO!!!! Thank you so so so much dude! You don't know how much you've helped me by helping me out with this. I was stuck on this since 2 weeks. And h you just solved it like in less than a day. Thank you so much man. 

 

Also, any idea as to how I should align my obstacles? As I mentioned earlier, I'm trying out something similar on the lines of the Android game 'Sine Line'. So what do you suggest, how should I align my obstacles so that they are spaced in such a way that the game is playable? As in, the obstacles shouldn't be generated at the bottom, they should start generating from a bit above the middle of the screen. And continue to be spaced in such a way that it doesn't get too conjusted. Or the obstacles don't overlap each other.

 

Because earlier, I tried using the random function but the obstacles were overlapping. And also, how do I keep generating them till the time I don't collide with any obstacle? I want the game to randomly create obstacles and infinitely till the time my game isn't over.

 

Thanks in advance. 

[phreaknation]

I suggest randomizing both the x and y separately. I would start with the y and keep a running variable. Like as you move up imagine a line that goes up as well and that's the start of the obstacles. Then add random values with a math.max between the random value and a minimum added value. That way nothing overlaps and there is plenty of space. Now this should only be triggered once the camera top hits x pixels below that variable. So it's generated off screen. Then do what you want to it.

[haramrit09k]

5 minutes ago, phreaknation said:

I suggest randomizing both the x and y separately. I would start with the y and keep a running variable. Like as you move up imagine a line that goes up as well and that's the start of the obstacles. Then add random values with a math.max between the random value and a minimum added value. That way nothing overlaps and there is plenty of space. Now this should only be triggered once the camera top hits x pixels below that variable. So it's generated off screen. Then do what you want to it.

Damn. Thanks man.  You seem to be really good at making games and stuff. Thanks for the help.

[haramrit09k]

And do you have any good content to learn Phaser, or game development in general? Like some websites or ebooks or Youtube videos and stuff like that?

 

[phreaknation]

I'm good at solving problems. I am about to be taking a lot of the stuff I've done and make phaser plugins with them.

As far as videos and such go, only the phaser examples from the website. Everything else I pretty much know. I'm a professional software engineer who specializes in JavaScript.

If you need more help, let me know.

[haramrit09k]

I need some more help. The oscillation function that you had created, that has a fixed value of sinD. That means it oscillates with a constant speed. Now, I want to increase the speed of oscillation a little, say after 10-15 points. So how do I achieve that? I'll attach my JS file here. Just help me out please @phreaknation  or someone else please! _/|\_

Uploaded JS file down here:

game1.js

Edited January 31, 2017 by haramrit09k

[phreaknation]

Sorry for the late response. Wife is leaving out of town and wanted to spend the last couple days with her. Here is an updated example of the code I provided earlier. You can incorporate it into your own code how ever you see fit. Look for intensity.