[SOLVED] To anchor to the past?

Suggestions & Feedback
1

I have created this thread to tackle the user interfaces. In the past I have been using the DOM html/css raw system and I am currently in a sea of ​​doubts about which way to go. On the one hand move towards the use of Frameworks and on the other hand adopt the recent system of user interface of Playcanvas. As I have read the playcanvas system is much more efficient in the use of resources and therefore their behavior is more efficient. But on the other hand currently the use of css offers me more possibilities thanks to the property: transition. If I wanted to emulate this property I should make use of the Tween.js library, and it would not cover all possible types of transitions. This is the reason for my doubts, in front of two unknown paths, which one to choose?.
I hope some answers even knowing that I will be more doubts than securities :smiley:

2

You could also use this library for tweening https://github.com/playcanvas/playcanvas-tween.

The playcanvas UI system is simple and does simple things well I think. But if you need more advanced interactions you can use html and css

1 Like
3

Thats a good question, I have only briefly looked into the new ui system so far.

I liked the simplicity of it, but as I often have to do slightly more complex ui systems as well, I will probably stick with my current setup of html/css. Atleast until I have some time for a more in depth look at it, so I can implement it into my current workflow.

4

Sorry, when I referred to Tween.js I meant Tweening.js
I’ve been thinking about it all this time and after reviewing that library again I realize that everything that can be done with css can be done with Tweening.js except animations related to transparencies, because the UI of playcanvas handles textures instead of materials (I ask for correction if I am wrong). On the other hand it solves all the problems of responsive design and the elements can be handled via JS like any other entity.
Without having used the UI of playcanvas in depth it begins to convince me.

5

Both options (PlayCanvas Screen & Elements and HTML & CSS) are valid choices to make and it really depends on your use case and your skillset.

Screen & Elements

Pros

  • Rendered in WebGL context
  • Don’t cause browser reflow
  • Assets managed in your PlayCanvas application
  • No knowledge of CSS required
  • Visual design of layout in editor
  • 3D interface supported

Cons

  • New system
  • No built in widgets (yet) like buttons, scrolling, checkbox, etc

HTML & CSS

Pros

  • Use existing layout knowledge
  • Use CSS for styling
  • All the features of HTML available (buttons, scrolling,etc)

Cons

  • DOM reflows can cause framerate stutters
  • Interface is overlaid on canvas
  • 2D only
1 Like
6

Thank you, many thanks to all for the information offered from different perspectives.
Welcome Playcanvas Screen.