Load new Level on collide?

[Raicon]

Hey guys,

i just got my first map loaded and now i want to do a "enter House" function for my little game.
So i thought about a onCollide Event. But it wont work and i think my loading is very inefficent.

Maybe someone can help me with my onCollide Event and tell me a better way to load my Maps

[Raicon]

Anyone?

[drhayes]

As part of your map you can create rectangles for doors. When the player overlaps with one of those doors you can load the new map as part of the overlap callback.

[Raicon]

Ok thanks,

but will i be abel to load different maps on different "door" positions?
Can you help me out with an example?

[AzraelTycka]

You can set a name to your doors and then check it with your list of levels.

Something similar to this (pseudocode):

var door1; // your sprite/tile whatever you decide to go for

var door2; // your sprite/tile whatever you decide to go for

door1.name = 'mapName#1;

door2.name = 'mapName#2';

function overlapCallback(obj1, obj2)

{

  if (obj1.name)

  {

    //load map with key from obj1.name

  }

}

If position is your deciding factor you can just set some varibale where you map your coordinates and then loop through it in collisionCallback - something along those lines (I would be VERY careful if your positions are not integers but floats):
 

var map = [{key: 'mapName#1', position: {x: 4, y: 5}}, {key: 'mapName#2', position: {x: 50, y: 25}}];

// you can use your map as a base for settign positions of your doors if you are using sprites

function overlapCallback(obj1, obj2)

{

  map.forEach(function(elm){

    if (elm.x === obj1.x && elm.y === obj1.y)

    {

      // load your map, key can be accesed through elm.key

    }

  });

}

I would probably prefer something similar to the first option because you don't need to loop through anything, or you could set an object instead of array, something similar to this:
 

var map = {};  // keys are positions

map[4] = {};

map[4][5] = {key: 'mapName#1'};

function overlapCallback(obj1, obj2)

{

  if (map[obj1.x] && map[obj1.x][obj1.y])

  {

    // load map with key map[obj1.x][obj1.y].key

  }

}

 

[Raicon]

Thanks
Now the overlap Event works fine for me but i just got i problem.
As you can see in my code in the first post my "loading" from different maps is just dump....

So if i call a new map with for example

loadHouse01(); it is overlapping the old World and my sprite isnt visible anymore.
So did someone got any ideas how i can do a better map loading? And maybe someone can tell me
how i can put some of my code in other *.js flies? (jeha im new, but i need to do a project for my web lessons and
i think phaser is a good idea for my project).

Here is a screenshot:


 

[drhayes]

You can load as many JS files as you want in your HTML. You add <script> tags with the filenames of your other JS files and they'll all load together. If you want to get more complicated and powerful, you can check out webpack and browserify. But script tags will work just fine.

You need to clear out the old world before loading the new (that's poetic). Literally, "game.world.removeAll()".

I can't give more specific examples because the code I use is pretty tightly integrated into the game I'm working on. I don't clear the whole world, just certain top-level groups that contain the tilemap layers and enemies and stuff. If I cleared the whole world I'd miss some UI and stuff that, come to think of it, probably shouldn't be in the world but on the stage. Anyway. You could do something similar.

[Raicon]

Thanks I had reworked my loading a bit now it works fine for me