adding an element to the world that can be manipulated by mouse, and placed

17 views
Skip to first unread message

jack...@oregonstate.edu

unread,
Oct 18, 2016, 1:49:19 PM10/18/16
to melonJS - A lightweight HTML5 game engine
I'm having a bit of trouble coming up with the right structure for doing the following:
User presses b, an element spawns in the world, that can then be moved, and affixed permanently to a place on the map with the mouse.

I played at bit with this http://melonjs.github.io/melonJS/examples/drag-and-drop/

and a bit with http://melonjs.github.io/melonJS/examples/shapes/

Neither of which I could manage to get functioning in the world. It seems the focus stays on the player entity in the world, who is controlled by common keys.

In addition, I'm unsure where to put the key input even that would control or initialize this behavior.

Could someone help me outline that. I'm new to the engine and still in the struggling phase, of trying to understand the parts.

aaron.g...@gmail.com

unread,
Oct 18, 2016, 2:16:17 PM10/18/16
to melonJS - A lightweight HTML5 game engine, jack...@oregonstate.edu
Hi there!

That should be quite doable. Without knowing too much about your existing code base, effectively what you need to do is bind the b key to an event name, similar to the tutorial. Do this in your playScreen's onResetEvent()

me.input.bindKey(me.input.KEY.B, "spawn", true);

The string value in the second parameter can be any value. It's an identifier. The 3rd value is a flag. When set to true, the key must be released in order for an event to be triggered again.

Then in an update method somewhere, you need to put the if statement that checks for the button getting pressed.

For this, I usually just have an object or something that manages the game. Something like:

game.Level = me.Renderable.extend({
init: function () {
// set the coordinates to fit in the screen. Really it just needs any size greather than 0x0, and needs to be floating, so when the camera moves, it's always on screen
this._super(me.Renderable, "init", [0, 0, me.game.viewport.width, me.game.viewport.height]);
this.floating = true;
},

update: function () {
if (me.input.isKeyPressed("spawn")) {
me.game.world.addChild(new Element());
}
}
});

Then add an instance of that to the game world from your playscreen:

me.game.world.addChild(new game.Level);

I would then leverage the drag & drop entity if possible to move the Element around from there.

aaron.g...@gmail.com

unread,
Oct 18, 2016, 2:17:23 PM10/18/16
to melonJS - A lightweight HTML5 game engine, jack...@oregonstate.edu, aaron.g...@gmail.com
Sorry, should say: me.game.world.addChild(new game.Level());

missed the parenthesis for the Level instantiate.

Reply all
Reply to author
Forward
0 new messages