loading map on click event

[Hashasm]

HI ,

I am trying to load the new map on click of object layer . click event is working and map also loading but some times blank screen will appear until I press any key from key board.

 

the same problem is their in MAP LOADING EXAMPLE :-

http://melonjs.github.io/melonJS/examples/tiled_example_loader/

how can I reslove it, and I wana give duration,fade,and color.

[Parasyte]

Do you have any objects on the map that do idle animations? This is the recommended solution; keep the renderer busy. A fade will be suitable as well. Just read the docs; the global viewport is accessible from me.game.viewport.

Otherwise you can always put a call to me.game.repaint() inside the onLoaded callback. See also the LEVEL_LOADED event.

[Hashasm]

how about using me.LevelEntity for click event. and about idle animations I dont have player in my game its kind of simcity game.

[obiot]

you don't need a player, you just need any objects that actually returns true from their update method, so as soon as you add any NPC in your game it will refresh automatically. Same if you do add camera effect (fading and so).

[Hashasm]

i dont have any object but i specified object layer and on clicking on that layer i am loading new map.

as shown below image. 

by using object layer name(map1) i am writing the function as shown below

game.redirect = me.Entity.extend({

    init: function (x, y, settings) {

.....

 .......

.......
        // set the display to follow our position on both axis
        //  me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

        // ensure the player is updated even when outside of the viewport
        //this.alwaysUpdate = true;
        // the main player spritesheet

    },

    onActivateEvent: function () {
        //register on mouse/touch event
        me.input.registerPointerEvent("pointerdown", this, this.onSelect.bind(this));

    },

    // mouse down function
    onSelect: function (event) {

        console.log("haiiiiiiii");

        // console.log(me.TMXObjectGroup(this));
        //  me.state.transition("fade", "#FFFFFF", 250);  //fade not workin
        me.levelDirector.loadLevel("temp"); //changing state
        }

     

});

 

now map will change but sometime browser screen get blak or map wont change until i press some key from keyboard ,then it will come.

Note : some time map will load and appear correctly ..sometimes i wont come untill i press a key

 

 

[Parasyte]

The target map ("temp" in your example code) needs something to animate (or use the camera effects to fade). Same things mentioned above.

Also your commented code is missing the point of the me.state.transition() method; this is for global configuration. You still have to enable the effect with me.state.setTransition(). And both of these should be called at boot up, not before loading a level. It also doesn't work across level loads, only across state transitions (as the name implies). Here's an example of implementing fade for level loading:

me.game.viewport.fadeIn("#FFFFFF", 250, function () {
    me.levelDirector.loadLevel("temp", {
        "onLoaded" : function () {
            me.game.viewport.fadeOut("#FFFFFF", 250);
        }
    });
});

 

[Hashasm]

yesss i got it thanks @Parasyte..

i tried me.viewport.fadeIn(..) but i was getting error as "TypeError: me.viewport is undefined".

in documentation i didt get how to use or how to give me.game.viewport.fadeIn() insted of me.viewport.fadeIn(..).

I think i am not able to understand the document properly. can you Please suggest me some tips how can i improve myself in better understanding of MelonJS document

[Parasyte]

I mentioned that the reference to the global viewport is available through me.game.viewport a few days ago: 

 

The documentation is comprehensive, which can make it a bit challenging for new developers to grok. The best tips I have are to read the forum replies very closely, and if there is something that you are not fully clear on, it's OK to ask for clarification. The second tip is looking through source code. Mountains and mountains of source code! You might find some useful snippet in the examples, or in a game someone else made. The best source of information though, is the melonJS source itself. The directory structure and layout is pretty much like what you see in the documentation, and the documentation even gives you file names and line numbers in the source code, if there is anything you are particularly interested in. One final tip; clone the repository and use local search tools to find interesting things. See attached for an example that would have showed you how to find the global viewport reference.

[Hashasm]

thank you bro i understood