place one object to another object

[lightgreen]

Good afternoon, im newbie for melonjs, i want to make game like diner dash.
im using melonjs v4.1.1
my question is:
1. how to add text on HUD that describing our selected object
2. how to find center point of an object
3. how to place an object automatically (e.g. Enemy) to another object (or collision), like on diner dash game when user place the customer to the table.

Thank you

[agmcleod]

Hey there. I would suggest giving the tutorials a try if you haven't already in the getting started: http://melonjs.org/index.html#getting-started

The platformer has some examples on rendering text.

Our examples can also be super useful for learning how to do different things. The shapes example has logic for clicking/hovering over target objects. https://github.com/melonjs/melonJS/tree/master/examples

To find the center point of an object, it really depends on your shape. By default, melonjs sets the anchorPoint property to the middle of the object. So if you have a 50x50 square, and set its position to 25, 25. The top left of the square would be sitting at the corner of the screen. So really you should be able to use `this.pos` to get the center point.

 

[lightgreen]

11 hours ago, agmcleod said:

Hey there. I would suggest giving the tutorials a try if you haven't already in the getting started: http://melonjs.org/index.html#getting-started

The platformer has some examples on rendering text.

Our examples can also be super useful for learning how to do different things. The shapes example has logic for clicking/hovering over target objects. https://github.com/melonjs/melonJS/tree/master/examples

To find the center point of an object, it really depends on your shape. By default, melonjs sets the anchorPoint property to the middle of the object. So if you have a 50x50 square, and set its position to 25, 25. The top left of the square would be sitting at the corner of the screen. So really you should be able to use `this.pos` to get the center point.

 

Thank you for the reply
i will try it

for the anchorPoint, what should i do if i want to make it automatically set? width/2, height/2?

[agmcleod]

Anchor point is a Vector2d, where x & y are a number between 0 to 1. It defaults to 0.5, 0.5, so half way between the width and height. You can update this like any other Vector2d object:

this.anchorPoint.set(0, 0.5)

[lightgreen]

27 minutes ago, agmcleod said:

Anchor point is a Vector2d, where x & y are a number between 0 to 1. It defaults to 0.5, 0.5, so half way between the width and height. You can update this like any other Vector2d object:

this.anchorPoint.set(0, 0.5)

thankyou

if i want to show the description (width, lenght, anchor point, etc) about a selected draggable object, on HUD (maybe?), what should i do?
 

[lightgreen]

2 hours ago, agmcleod said:

Anchor point is a Vector2d, where x & y are a number between 0 to 1. It defaults to 0.5, 0.5, so half way between the width and height. You can update this like any other Vector2d object:

this.anchorPoint.set(0, 0.5)

and is it possible if a collision is also a dropTarget?

[agmcleod]

For your first question, I would create a subclass of me.Renderable that uses me.Font to draw the text you need. Note that me.Renderable implements no drawing logic, you'll need to call the renderer to draw the text. Here's a simple example:

const MyRenderable = me.Renderable.extend({
  init (x, y, w, h) {
    this._super(me.Renderable, 'init', [x, y, w, h])
    this.font = new me.Font('Arial', '20px', '#f00')
  }

  draw (renderer) {
    renderer.translate(this.pos.x, this.pos.y)
    this.font.draw(renderer, 'Hi there!' 10, 10)
    this.font.draw(renderer, 'Hows it going?', 10, 20)
    renderer.translate(-this.pos.y, -this.pos.y)
  }
})

You can put any text in the font.draw() function, so you could pull the width, height, etc. from the object, and set it on this one. How you do that is really up to you in terms of code structure.

For your second question, yes I believe that should work. If your draggable object has a physics body, youll want to make sure you exclude those two objects from colliding into each other. Much like how the player in the platformer tutorial controls that logic. https://github.com/melonjs/tutorial-platformer/blob/gh-pages/tutorial_step9/js/entities/entities.js#L92