Hashasm

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

18 posts in this topic

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
        }
    },
    
    
    
});

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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)
        });

    }


});

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.