HUD background

[Hashasm]

Hi,

can anyone help to set the background for HUD objects 

 

 

[agmcleod]

For UI, it's best to use an instance of me.Container, with the floating set to true. floating means it will use screen coordinates, not world coordinates.

Implement the draw method of each container to have a semi transparent opaque white background. draw() is passed the renderer, which has methods for setting alpha, and drawing coloured rectangles. Be sure when overriding draw() on a container to call the super method as well.

From there, add each of the menus as a child. I would then have the slide out menus as another container, and then show/hide them based on clicks of the main menu items.

[obiot]

in the UI Example, that's exactly what we do : we use a container, but then we have a child renderable that we use for the background (i personally find it cleaner that overriding the draw method). It is a sprite object in this case, but you could use a renderable and using the renderer (arguments from the draw method) to draw it, add opacity, etc... as explained by Aaron.

https://github.com/melonjs/melonJS/blob/master/examples/UI/js/entities/UIContainer.js

[gamify]

okay fine thank you i will try

[Hashasm]

but here i am using GUi_object

i am trying to give for gui_object directly

To give opatcity we can set opacity like   this.setOpacity(0.5)  is their any property in which we can give background color like this.bgcolor("white") or this.background_color("white")  (just asking if their any properties like this)

game.HUD.menu2 = me.GUI_Object.extend({
    init: function (x, y) {
        var settings = {}
        settings.image = "Untitled-1-01";
        settings.framewidth = 300;
        settings.frameheight = 74;
        // super constructor

 

        // me.game.world.addChild(camera, 10);
        this._super(me.GUI_Object, "init", [x, y, settings]);
        // create a standalone sprite, with anchor in the center

        // define the object z order
        this.pos.z = 4;

        this.setOpacity(0.5);
        this.anchorPoint.set(0, 0);
        this.isHoldable = true;
        // status flags
        this.selected = false;
        this.hover = false;
        //  me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
        //me.game.viewport.shake(10, 500, me.game.viewport.AXIS.BOTH);
        // to memorize where we grab the shape
        this.grabOffset = new me.Vector2d(0, 0);
    },
    /**
     * function called when the pointer is over the object
     */
    onOver: function (event) {
        this.setOpacity(1.0);
        //console.log(this)
        //console.log(me.game.world.getChildByGUID("4349545931-16"))
 
menu1,menu2,menu3,menu4="";
//        
//        me.game.viewport.fadeIn("#FFFFFF",100, function () {
//          me.game.world.removeChild(mybutton,true);
//        });
    },

    /**
     * function called when the pointer is leaving the object area
     */
    onOut: function ( /* event */ ) {
        this.setOpacity(0.5);
//        me.game.world.addChild(mybutton)
//                me.game.viewport.fadeOut("#FFFFFF", 100, function () {
//          me.game.world.addChild(mybutton);
//        });
        console.log(menu1)
        if(menu1 !=undefined){
           //  me.game.viewport.fadeIn("#FFFFFF",100, function () {
//          me.game.world.removeChild(mybutton,true);
                  me.game.world.removeChild(menu1);
       me.game.world.removeChild(menu2);
       me.game.world.removeChild(menu3);
       //me.game.world.removeChild(menu4);
    //   });
      
            // menu1,menu2,menu3,menu4=null;
        }
        else{
            console.log(menu1)
            menu1,menu2,menu3,menu4=null;
        }
        
      //  console.log(menu1)
    },
    // output something in the console
    // when the object is clicked
    onClick: function (event) {
        console.log("clicked!");
        if(menu1 == undefined){
            
        
     menu1= me.game.world.addChild(new game.HUD.menu3(70, 70));
          menu2=me.game.world.addChild(new game.HUD.menu4(140, 70));
         menu3=me.game.world.addChild(new game.HUD.menu5(200, 70));
        // menu4=me.game.world.addChild(new game.HUD.menu6(260, 70));
        }
        else{
            console.log("already have a child");
        }
        
        path=[];
me.input.registerPointerEvent("pointerdown", me.game.viewport, function (event) {
            me.event.publish("pointerdown", [event]);
        }, false);
        //  me.collision.check();
        var camera = new me.Sprite(500, 500, {
            image: "building_64_64-02",
            spritewidth: 30,
            spriteheight: 30,
                  
        });
      me.game.world.addChild(new me.Entity(500, 500, {
            width         : 30,
            height        : 30,
            type : me.collision.types.WORLD_SHAPE,
        }));

        me.game.world.addChild(camera, 10);
        camera.animationpause = true;
        camera.addAnimation("stand", [1]);
        camera.setCurrentAnimation("stand");
        setTimeout(function () {
            me.game.world.removeChild(camera);
        }, 10000);
        //  camera.flicker(1000, function () {
        //    me.game.world.removeChild(camera);
        //});
        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;
        }
        var tile = this.refLayer.getTile(event.gameWorldX, event.gameWorldY);
        console.log(tile);
        //  me.game.world.addChild(new mycopy(10, 15));
        //  me.game.world.addChild(new MySprite());

        // don't propagate the event
        return false;
    },

    onRelease: function (event) {
        console.log("onRelease!");
        this.selected = false;

    },

    onHold: function (event) {

        console.log("holding mouse");
        // don't propagate the event
        me.input.registerPointerEvent("pointermove", this, this.pointerMove.bind(this));
        // this.handler = me.event.subscribe(me.event.POINTERMOVE, this.pointerMove.bind(this));
        //  return false;
    },

    pointerMove: function (event) {
        //console.log(this.getBounds().containsPoint(event.gameX, event.gameY));
        //    me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
        this.hover = this.getBounds().containsPoint(event.gameX, event.gameY);
        console.log(this.hover);
        // 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;

          }*/

        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;

        }
    },
     
});
 

[Parasyte]

The UIContainer that obiot posted shows you how to set a background; it's a container object that contains two renderables; one for the background, and one for the image. The background renderable is just a color layer that draws a color using the canvas APIs. Here's an example class that implements a color layer. You should be able to adapt this to your needs: https://github.com/melonjs/melonJS/blob/91e1ca185a21f7d44b871b5542282e14c134e7a5/src/level/TMXLayer.js#L9-L59

With a color layer and a sprite object as children of a UIContainer, you will have a HUD item with a background that you can change any way you like; change its color, change its opacity, change its drawing style, etc.

[Hashasm]

okie..

for toggle of hud element(munu) can i use addChild and removeChild methods.

[gamify]

how to set opacity for renderer.setColor("white"); 

not affected :

renderer.setColor("white",0.1); ->not working

this.setopacity(0.1); ->not affected

 

[Parasyte]

http://melonjs.github.io/melonJS/docs/me.CanvasRenderer.html#setColor

You can use any CSS string, such as "rgba(255, 255, 255, 0.1)"

Alternatively, you can use a me.Color object, which has a very useful API for animating the individual RGBA components and whatnot: http://melonjs.github.io/melonJS/docs/me.Color.html

[gamify]

 

sorry not working : 

 renderer.setColor(0, 0, 0, 0.1);

 renderer.fillRect(10, 0, 150, 750);

 

-> not working opacity not taking

 

[gamify]

can anyone help on this why its not getting affected in the ui

[obiot]

if you would check the documentation, you would realize that the setColor function only take as input a me.Color object or a CSS string, so you should use either :

renderer.setColor(myColor); // where myColor is an instance of me.Color

or

renderer.setColor("#0000007F"); // the forth byte (7F) is to specify the opacity level

 

http://melonjs.github.io/melonJS/docs/index.html

 

 

 

 

[Parasyte]

Hi,

Maybe there's some communication barrier, I don't know. In my last reply, I gave an example of a CSS string that is usable, and your second attempt was to continue using this incorrect notion of four number arguments.

To make sure there is no possible way to continue the confusion, here are two code snippets. The first snippet is the right way to do this (using a CSS color string) The second snippet is this invalid call that you keep attempting to use, but is completely unsupported.

// Do this
renderer.setColor("rgba(0, 0, 0, 0.1)");

// NOT this!
renderer.setColor(0, 0, 0, 0.1);

If you continue doing things incorrectly after being told it does not work, we will not be able to help you.

To complement obiot's suggestions: Read the documentation, read it very carefully. Read forum answers, read them very carefully. Do not try the same thing repeatedly expecting a different result.

Cheers, and best of luck to you.

[gamify]

okay thank you i will try and let you know