Adding moving cars to map_city

[r4pt0s]

The streets are currently empty in map_city. This issue should add moving cars to the streets. They should get spawned on one of the street edges, drive the entire street along and should disappear once they reach the boundaries of the map. You can use one of these spritesheets which I already found

https://tokka.itch.io/top-down-car https://www.kenney.nl/assets/pixel-vehicle-pack https://minzinn.itch.io/pixelvehicles

Regardless of if you are using one of the mentioned spritesheets of not, please don't forget to add them to asset_credits.md to give a shoutout to the creators.

[leonyangela]

Hi, can I work on this? Thanks

[r4pt0s]

Absolutely @leonyangela. Go for it 🎉🚀

[gdsouza1992]

@leonyangela, I tried to research doing this last week but gave up due to not having enough time, but some good starting points are exploring the Navmesh / patrol functions that kaplay gives ootb.

Without the nav mesh here is what i came up with

import { scaleFactor, speedByScaleFactor } from '../../constants';
  export const carGreen = (k, map, spawnpoints) => {
    k.loadSprite('car_green', './car_green.png');
    const carGreenSpawnX = 0;
    const carGreenSpawnY = 313;

    const carGreenObj = k.make([
        k.sprite('car_green'),
        k.area({
            shape: new k.Rect(k.vec2(0), 16, 16),
        }),
        k.body({ isStatic: true }),
        k.anchor('center'),
        k.pos(map.pos.x + carGreenSpawnX, map.pos.y + carGreenSpawnY),
        k.rotate(90),
        k.scale(scaleFactor),
        k.offscreen({ hide: true, distance: 10 }),
        'car_green',
    ]);

    k.onUpdate("car_green", (car) => {
        carGreenObj.move(speedByScaleFactor, 0)
        console.log(map);
        const mainMap = k.get('main_map')[0];
        if (carGreenObj.pos.x > mainMap.width) {
            carGreenObj.pos.x = 0;
        }
    });
    return carGreenObj;
};