Jump to content

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


Hashasm
 Share

Recommended Posts

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

Link to comment
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 :)

Link to comment
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.

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

Link to comment
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

Link to comment
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.

Link to comment
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.

Link to comment
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)
        });

    }


});

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...