Endless Driving game

Help & Support
1

Hello
I am new at Playcanvas , I am trying to make an endless driving game so could anyone help me how can i make an endless road and spawn cars randomly as enemy from opposite direction…
Thanks in advance

2

Hello @Roman_Kabir,

coincidentally I made an endless road yesterday. I cannot share the code with you but maybe my path of logic helps you:

  1. Create a road segment and save it as a template
  2. Instantiate 10 segments in front of the player and save them to an array
  3. Once the player passes a segment, disable it and move it back to the front, ahead of all other active segments
  4. Repeat

:rocket:

5 Likes
3

Thanks man! let me try this way hope i can get it soon
please have in touch with me

4

Hello @Sebastian could you please provide me a demo script how can i do that?

5

What have you tried so far and what issues are you running into? Can you post a project link and the community can try to improve what you have.

1 Like
6

https://playcanvas.com/editor/scene/1014562
here is the link of my project.
what I need now is generate roads automatically and spawn cars in different times from opposite directions.
Thanks in advance

7

Hi @Roman_Kabir,

so this is no complex task but it isn’t easy either. There are several solutions to the problem and you should choose one you understand. As I stated earlier I cannot give you my complete code (customer-owned) but I will share some mockup code I fiddled with in the process.

I would advise you to break down the problem. Maybe create a MapHandler.js and add your roadblock template as an attribute ( I called mine ‘floor’ instead of ‘road’ )

var MapHandler = pc.createScript('mapHandler');
MapHandler.attributes.add('floor', { type: 'asset', assetType: 'template' });

Now generate the initial road sequence. My road tiles are exactly 1x1 big so I can set the newPos variable Y always 1 tile ahead of the last.

MapHandler.prototype.generateTiles = function () {
    this.floorTiles = [];

    for(var i = 0; i < 10; i++)   {
        var instance = this.floor.resource.instantiate();     
        instance.name = "Floor("+i+")";
        
        var newPos = new pc.Vec3(0,0,i); 
       
        instance.setPosition(newPos);
        this.app.root.addChild(instance);
        this.floorTiles.push(instance);
    }
  
};

Once you have these basics set up you could continuously (in your update function) check the distance to road tiles and enable/disable them according to their position. Disabled tiles need to be moved to the front (ahead of all other active tiles). Use the Camera to check the distance between the road tile and the player. We will assume new roads are in front of us, coming closer so we check on distance < 3.5. Everything further away would be behind us and should be moved to the front.

MapHandler.prototype.update = function(dt) {
    this.checkTileDistances(this.mainCamera);
};

MapHandler.prototype.checkTileDistances = function (player) {
    for(var i = 0; i < this.floorTiles.length; i++) {
        var distance = this.getDistance(player.getPosition(), this.floorTiles[i].getPosition());    
   
        // activate in front
        if(distance < 3.5 && !this.floorTiles[i].enabled) {
            this.floorTiles[i].enabled = true;
        }else {          
            // deativate, reset tiles and move in front
            if(this.floorTiles[i].enabled && distance > 3.5) {
                this.floorTiles[i].enabled = false; 
                this.floorTiles[i].setPosition(new pc.Vec3(0,0,(Math.floor(this.mainCamera.getPosition().z)+5)));
            }
        }
    }
};

MapHandler.prototype.getDistance = function (pos1, pos2) {
    var x = pos1.x - pos2.x;
    var y = pos1.y - pos2.y;
    var z = pos1.z - pos2.z;

    var temp = new pc.Vec3(x, y, z);
    return temp.length ();
};

This is the result (two cameras):

tapcootw_tiles_pooling

I know this is a lot of code but really try to understand it. If you encounter a problem and can’t seem to fix it then try to break the problem down. Can’t spawn the initial 10 road tiles? Try instantiating one.

Debug parameters you are unsure about!

console.log("tile "+i+ "enabled:"+this.floorTiles[i].enabled);

Godspeed! :rocket:

2 Likes
8

Hello @Sebastian I’m very thankful to you for your great suggestion.
By any chance could you please check up in my project and see if I’m doing MapHandler correctly or not?
https://playcanvas.com/editor/scene/1014562

9

Hi @Roman_Kabir,

there are a couple of issues here.

TypeError: Cannot read property '0' of undefined
    at scriptType.MapHandler.checkTileDistances

You added the getDistance function in the middle of the generateTiles function. This will not work. Move it to the end of the script. You can easily check where your function ends when clicking on the opening { of your function because this highlights the closing };

  1. You have to call this.generateTiles() in your initialize function or else no roadblocks will be created.
  2. this.mainCamera is not defined anywhere. There are a couple of ways of doing this so I left it up to you. probably the easiest way would be to also set it in the initialize function:
    this.mainCamera = this.app.root.findByName("Camera");
  1. You added the MapHandler to your taxi script which moves around. While this isn’t a direct problem (not yet) I really do prefer adding handlers to non-moving empty entities. Just create and name one ‘maphandler’ add the script, fill in the attribute and you should be good to go :slight_smile: