Swapping and managing containers

[01271]

side note: sorry for making so many threads ( 3 in ~2 months ) but I have different issues and I think threads should be problem-centric rather than project-centric.

So I wanted to know how to swap containers.

Here's one of my containers.

/**
 * a HUD container and child items
 */

game.inventoryContainer = game.inventoryContainer || {};
game.containers = game.containers || {};

game.containers.inventory = me.Container.extend({

	init: function() {
		// call the constructor
		this._super(me.Container, 'init');
		// persistent across level change
		this.isPersistent = true;
		// make sure we use screen coordinates
		this.floating = false;
		this.alwaysUpdate = false;
		this.visible = false;
		// give a name
		this.name = "inventoryContainer";

		me.levelDirector.loadLevel("collision");
		this.addChild(new me.ColorLayer("invbg", "#55233B"), 0);
		this.addChild(new game.invLayer1, 1);
		this.addChild(new game.ManagerEntity(0, 0), 2);
		game.pointers.containers.inventory = this;
	},
	update: function(dt) {
		if (game.screenspace === this.name) {
			return this._super(me.Container, 'update', [dt]);
		}
		return false;
	},

	draw: function(renderer, rect) {
		if (game.screenspace === this.name) {
			return this._super(me.Container, 'draw', [renderer, rect]);
		}
		return false;
	},
	reactivate: function() {
		this.isRenderable = true;
	},
	deactivate: function() {
		// this.isRenderable = false;
		// for (var i = this.children.length - 1; i >= 0; i--) {
		// this.children[i].pos.x +=1000;
		// }
		// me.game.world.removeChild(this);
	}

});

It's added to the game via

this.inventoryContainer = new game.containers.inventory();
        me.game.world.addChild(this.inventoryContainer);

How do I swap it out without losing its children? All I want is not to have it or its children use up processor cycles while another container is displayed.

This I think would be interesting to other developers too.

[agmcleod]

Ah, just responded to your PM. Yeah you should be able to simply do: me.game.world.removeChild(this.inventoryContainer); That will keep the container itself intact, but just detached from the game world.

[Parasyte]

You have to pass true as the second arg to removeChild. See documentation: http://melonjs.github.io/melonJS/docs/me.Container.html#removeChild

[01271]

My viewport doesn't like the new system. It refuses to follow the player now that he's divorced from the game world, I tried making the container floating or not, tried updating the viewport bounds. It doesn't move from 0,0. Any ideas now?

[01271]

Ok so far so good. I added a viewport to the container.

this.viewport = new me.Viewport(0, 0, 960, 640);

this.viewport.follow(game.pointers.mainPlayer, me.game.viewport.AXIS.BOTH);

but it doesn't actually follow the player and it dropped the fps down by half. I think the scene is being rendered twice.

[01271]

I'm still at a loss with both viewports seemingly supposed to follow the player at the same time.

I feel the game should at least move the place it's rendering when I do moveTo.

Any ideas at all?

[Parasyte]

You can access the global viewport through me.game.viewport. The most you should have to do with the viewport is calling me.game.viewport.follow(target) each time the target needs to change. E.g. if your player object is different between the two containers, just switch the follow target every time you switch containers. That should do it.

[obiot]

also, today melonJS is not able to properly manage multiple viewport, so unless you want to dig into the code, you can "only" use the main one (me.game.viewport). Note that by following the newly active entity (by calling me.game.viewport.follow(target)), it will automatically "unfollow" the previous one.

 

https://github.com/melonjs/melonJS/blob/master/src/renderable/viewport.js#L225-L241

[01271]

damn so if I want a level to scroll I can only use states and not containers?

I only use

        me.game.viewport.follow(this, 3);

once but I also gave viewports inside the containers a try, even both at once.

I think there's an extra factor about the level because I changed the order my containers were being initialized and I got some weird "scrolling" that came from the opposite side of the screen.

(yes the level loader has the second parameter with the container:this in it)

[01271]

for some reason doing me.levelDirector.reloadLevel(); makes the level come in as a second layer over top of the first level and fixes the issue of the level not scrolling, except it scrolls forwards while advancing over the previous container. This is such strange behaviour...

[obiot]

be sure to also call reloadLevel(), with the same options.container value than the one you use initially, this probably needs some improvements but the way it works now is the following (upong calling loadLevel/reloadLevel) :

- clean the specifier container (or world container if not specified)

- load the new level in the specified container (or world container if not specified)

and where the proper default way should definitely be to clean the container in which the level is contained.