haramrit09k

Oscillating particle which detects collision

Recommended Posts

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

Share this post


Link to post
Share on other sites

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();
})();

 

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. :D You seem to be really good at making games and stuff. Thanks for the help.

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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 by haramrit09k

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.