Jump to content

HUD background


Recommended Posts

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.

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.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) {
//        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 */ ) {
//        me.game.world.addChild(mybutton)
//                me.game.viewport.fadeOut("#FFFFFF", 100, function () {
//          me.game.world.addChild(mybutton);
//        });
        if(menu1 !=undefined){
           //  me.game.viewport.fadeIn("#FFFFFF",100, function () {
//          me.game.world.removeChild(mybutton,true);
    //   });
            // menu1,menu2,menu3,menu4=null;
      //  console.log(menu1)
    // output something in the console
    // when the object is clicked
    onClick: function (event) {
        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));
            console.log("already have a child");
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]);
        setTimeout(function () {
        }, 10000);
        //  camera.flicker(1000, function () {
        //    me.game.world.removeChild(camera);
        if (this.hover === true) {
            this.grabOffset.set(event.gameX, event.gameY);
            this.selected = true;
            // don"t propagate the event furthermore
            return false;
        var tile = this.refLayer.getTile(event.gameWorldX, event.gameWorldY);
        //  me.game.world.addChild(new mycopy(10, 15));
        //  me.game.world.addChild(new MySprite());

        // don't propagate the event
        return false;

    onRelease: function (event) {
        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);
        // 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);


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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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


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







Link to comment
Share on other sites


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.

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.

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.


  • Recently Browsing   0 members

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