I just started with game development and I went through these links you sent me.
But I need a little more help understanding what these links are telling me to do
Hello @Krish_USCan,
For sure, starting in Game Development can be overwelming. We all have been there. Playcanvas forums are very active and very helpful. So, feel free to post any questions you may have.
Do you have any spesific questions regarding this topic?
Hi @Leonidas
Do you think you can help with the project if I add you to it.
Only to help me add the html code.
Thank you
I added you
Thank you for your help
The button loads. But my teammate and I do not know how to make the dropdown buttons perform actions
Do some HTML/CSS/Javascript tutorials online to get some experience on, and you will be able to easily write any UI code.
From the moment you load your HTML, you don’t have to call or write any Playcanvas specific code.
@Leonidas
The code I used for the buttons does work. I know that because I ran the code on editors such as repl and atom and it does work. But my teammate and I have been working on this for a day now and we don’t know what we are doing wrong. If you guide us even more that would help.
Sorry for taking so much of you time but please do assist us.
Your query selector is wrong, you don’t have any class named .button:
Change line 35 to the following and it should work:
var button = this.div.querySelector('button');
You will have to leverage Javascript with CSS to show/hide the options, definitely some HTML/CSS skills will help you a lot here.
Thank you that definitely helped.
But is there a way where I can see the dropdowns from the button.
There is a dropdown-menu class but it doesn’t work on playcanvas
You will have to use Javascript/CSS to show hide the menu options (elements) when the button is clicked.
The above is a repl.it code where the buttons works perfectly. I am using the same code in Major.html in PC however it doesn’t work
That’s HTML, that will put the elements in the DOM, which from I see works. The buttons gets rendered above your Playcanvas scene.
But that won’t provide the dropdown functionality you are asking for. You need Javascript or at least some CSS to show/hide the dropdown options.
@Leonidas, I don’t think you’ve noticed the Bootstrap cdn in the HTML code above. No JS code or CSS code is required for the dropdown to work. Is there any other reason that could cause the error?
Yes, if you are adding the functionality from a library you can’t append the library inside the HTML.
You have to include it in your Playcanvas project either by uploading the bootstrap.js file as an asset or loading it manually in code:
You need to do that before attaching your HTML, so bootstrap is already available.
Also make sure to remove the <html>,<head>,<body>
elements from your HTML file. Since you aren’t attaching an HTML document, only appending elements to the existing main HTML document (in short you can’t have many <html>
elements in the same HTML document).
Just this:
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item" href="#">C#</a>
<a class="dropdown-item" href="#">D</a>
<a class="dropdown-item" href="#">D#</a>
<a class="dropdown-item" href="#">E</a>
<a class="dropdown-item" href="#">F</a>
<a class="dropdown-item" href="#">F#</a>
<a class="dropdown-item" href="#">G</a>
<a class="dropdown-item" href="#">G#</a>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">A#</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
Thanks, will try and revert.
We found a way for it to work when we downloaded the project. Since this is only a part of a complete web app, we found it worked much better when downloaded.