How to load a image to an hud and make it dragabble

[Hashasm]

HI can any one tell me how to load image to an hud and make it clone and drag ..

If you guys have any example please share with me thank you.

[obiot]

two possibilities :

1) using standard event (pointerMove, pointerDown, etc...) :

  see the shape example : http://melonjs.github.io/melonJS/examples/shapes/

  and the corresponding source code here : https://github.com/melonjs/melonJS/blob/master/examples/shapes/js/entities/entities.js

 

2) using the drag event :

   see the drag example : http://melonjs.github.io/melonJS/examples/drag-and-drop/

   and the corresponding source code here : https://github.com/melonjs/melonJS/blob/master/examples/drag-and-drop/js/entities/entities.js

[Hashasm]

How can i do it for HUD element ..

now i am able to insert image into HUD ,now i want to drag the copy of image from HUD 

loading image like this:-

game.HUD.menuItem= me.GUI_Object.extend({
    init : function (x, y) {
        var settings = {};
        settings.image = 'gripe_run_right';
        settings.framewidth = 64;
        settings.frameheight = 64;

        this._super(me.GUI_Object, "init", [x, y, settings]);
        this.pos.z = 4;
        
        
    },

    
});

now what can i add to this code to make my image('gripe_run_right') drag and clone(copy of the image).

 

thank you 

[obiot]

HUD is just a name we give to object part of the interface (and not of the game). In melonJS they are just objects like others and you can change their position using their your_item.pos vector, as they all inherit from me.Renderable: http://melonjs.github.io/melonJS/docs/me.Renderable.html#pos

if you need to make your item following your mouse, just check the two examples I provided to you, they both exactly do that.

[obiot]

there is no clone function for me.Sprite, but you can just create a new Sprite using the same image.

[Hashasm]

I have few images in HUD  and when i drag that HUD image it should be draggable and should drop a copy of that image in my map.

can you please help me how can i achieve it.

Thank You

[Hashasm]

my sys spc:-

windows 8.1

browsers:- chrome and firefox,

ver of melon is:-http://melonjs-builds.s3.amazonaws.com/index.html?prefix=artifacts/master/1920/build/

 

[obiot]

i replied to you already :

for the drag part, see my previous post, there is two method to achieve it.

to create a "clone" of the image, just create a new me.Sprite using the same image.

 

I'm not sure how clearer I could be to be honest.

[Hashasm]

Hi @obiot  i am trying as you sugestted me but i am facing problem like how can i get or hold the control to my sprite image which i defined in my code 

i am sharing my code

 

game.HUD.buttonJump = me.GUI_Object.extend({
    init : function (x, y,settings) {
        
        var settings = {};
        settings.image = 'gripe_run_right';
        settings.framewidth = 64;
        settings.frameheight = 64;
 settings.shapes = [];
        this._super(me.GUI_Object, "init", [x, y, settings]);
        this.pos.z = 4;
        
          // status flags
        this.selected = false;
        this.hover = false;

        // to memorize where we grab the shape
        this.grabOffset = new me.Vector2d(0,0);
        
        
        

        // tomato
        this.renderable = new me.Sprite(100, 100, {image: me.loader.getImage("gripe_run_right")});
        
    },
     // onActivate function
    onActivateEvent: function () {
        // register on the 'pointerdown' event
        me.input.registerPointerEvent('pointerdown', this, this.pointerDown.bind(this));
        
      //  me.input.registerPointerEvent("pointerdown", this, this.onSelect.bind(this));
       // me.input.registerPointerEvent("pointerup", this, this.onRelease.bind(this));
      //  me.input.registerPointerEvent("pointercancel", this, this.onRelease.bind(this));

        // register on the global pointermove event
        this.handler = me.event.subscribe(me.event.POINTERMOVE, this.pointerMove.bind(this));
    //    
       
    },

    // pointerDown event callback
    pointerDown: function (event) {  //working fine
        console.log("haiiii");
        console.log(me.loader.getImage);
        console.log( this.getBounds().containsPoint(event.gameX, event.gameY));
         
        return true;
    },
       /**
     * pointermove function
     */
    pointerMove: function (event) {
        this.hover = false;

        // move event is global (relative to the viewport)
        if (this.getBounds().containsPoint(event.gameX, event.gameY)) {
            // calculate the final coordinates
            var parentPos = this.ancestor.getBounds().pos;
            var x = event.gameX - this.pos.x - parentPos.x;
            var y = event.gameY - this.pos.y - parentPos.y;

            // the pointer event system will use the object bounding rect, check then with with all defined shapes
            for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes);) {  // here what can i use instead of this.body.shapes.length to get my image control
                if (shape.containsPoint(x, y)) {
                    this.hover = true;
                    break;
                }
            }
        }

        if (this.selected) {
            // follow the pointer
            me.game.world.moveUp(this);
            this.pos.set(event.gameX, event.gameY, this.pos.z);
            this.pos.sub(this.grabOffset);
        }

        if (this.hover || this.selected) {
            return false;
        }
    },
    
    
    
});

[Hashasm]

how can i hover  my sprite image..

[Hashasm]

Hi @obiot i am able to clone the image from this code..

 

   var settings = {};
        settings.image = 'gripe_run_right';
        settings.framewidth = 64;
        settings.frameheight = 64;
          this._super(me.GUI_Object, "init", [10, 10, settings]).

 

I know how to drag and drop but i dont know how  to take control of this sprite how can i do this please help me .

thank you

[obiot]

you had it almost, take your code here above discard the whole shape thing, as you can just use the the GUI object bounding box and then just set the new position of the GUI_object, as also in the code here above :

Quote

      if (this.selected) {
            // follow the pointer
            me.game.world.moveUp(this);
            this.pos.set(event.gameX, event.gameY, this.pos.z);
            this.pos.sub(this.grabOffset);
        }

at some point you do have to experiment with the API yourself, the next step of me helping you it's for me to write your code, and I don't have the time for that, sorry. Furthermore I already provided you two examples that achieve the same thing, one with standard event, and one with the drag entities, these and the documentation should be enough to get your started.

the other thing you could do is to clone this fiddle  and then use it as a base for your experiment. Then it's easier to show you or modify it in order to show how it should be and therefore help you.

[Hashasm]

i was able to drag  but i am facing two issues

1: dropping is not happening 

2: while dragging image is follwing the mouse pointer, but it has some GAP  between mouse pointer and image 

[Hashasm]

HI @obiot  first  I am thanking you for your suggestions and  GOOD NEWS finally i am able to drag and drop the hud element     By using  me.GUI_Object   methods .

 

now i am  trying to clone it.when i am dropping the copy of image it should become part of my map how can i do this please suggest me some methods

thank you.

[obiot]

great news !

if this is just a static visual item, I would suggest to create a me.Sprite object and then just position it where it should on your map.

any live demo maybe somwhere to get a better sense at what you are trying to achieve ?

[Hashasm]

thank you for your response

 

https://github.com/hashamkm/game-demo

when i drag and drop this hud object it should become part of my map.

this drag and drop functionality i wrote in HUD.js

[obiot]

just create a new me.Sprite or an entity (if it's a collidable element), and add it to the world container (me.game.world.addChild(xxx)) at the desired position.

[Hashasm]

I am adding the child in onclick event of GUI_OBJECT of HUD element but i am not getting the output have a look on this code

// create a basic GUI Object
var myButton = me.GUI_Object.extend({
   ........

   ......

   ......
    onClick: function (event) {
        console.log("clicked!");

        if (this.hover === true) {
            this.grabOffset.set(event.gameX, event.gameY);
            this.grabOffset.sub(this.pos);
            this.selected = true;
            // don"t propagate the event furthermore
            return false;
        }
        me.game.world.addChild(new mycopy(10, 15));//adding my entity n calling it
        // don't propagate the event
        return false;
    },

    ......

    .........

   ...........
    },
});

//my entity code for crateing new sprite which act as clone
var mycopy = me.Entity.extend({

    init: function (x, y) {
        console.log("in entity object");
        var sprite = new me.Sprite(x, y, {
            image: "gripe_run_right",
            framewidth: 64,
            frameheight: 64,
            anchorPoint: new me.Vector2d(0.5, 0.5)
        });

    }

});