Resizable Menu

Hello everyone,

I hope you are doing well. I’m currently working on a project that involves creating a resizable menu using the PlayCanvas engine, and I’ve encountered some challenges along the way. I would greatly appreciate any help or guidance you can provide.

Here’s a brief overview of what I’m trying to achieve:

  • I have a menu element in my PlayCanvas project that I want to make resizable.
  • The menu should have draggable corners that allow the user to resize it.
  • When a corner is dragged, the menu should adjust its size accordingly while maintaining aspect ratio.
  • The resizing should be smooth and responsive.

I have made some progress by implementing a basic draggable functionality using the ElementDragHelper class provided by PlayCanvas. However, I’m having difficulty integrating it into my existing menu structure and ensuring smooth resizing with aspect ratio preservation.

If anyone has experience with PlayCanvas or has tackled a similar challenge before, I would greatly appreciate your advice or code examples to help me accomplish this task. Specifically, I’m looking for guidance on the following:

  • How to correctly bind the draggable functionality to the menu corners.
  • How to handle resizing while maintaining aspect ratio.
  • Any additional tips or best practices for implementing a resizable menu in PlayCanvas.

I’m open to suggestions, code snippets, or any resources that can point me in the right direction. Any help you can provide would be immensely valuable to me.

Thank you so much in advance for your time and assistance. I’m looking forward to learning from your expertise!

Best regards, Gareth de Wet