Define Simple Panel

Sometimes we wish to create a simple panel, that doesn't need to dock to workspace. This can be done by set the type to simple.


In the panel field in package.json:

  "name": "simple-package",
  "panel": {
    "main": "panel/index.html",
    "type": "simple",
    "title": "Simple Panel",
    "width": 400,
    "height": 300

By defining the panel feild, and set the type to simple, our panel will be opened as simple panel. The simple panel will accept a html page as its entry point in main.

The rest of things is just a web page:

    <title>Simple Panel Window</title>
    <meta charset="utf-8">
      body {
        margin: 10px;

      h1 {
        color: #f90

    <h1>A simple panel window</h1>
    <button id="btn">Send Message</button>

      let btn = document.getElementById('btn');
      btn.addEventListener('click', () => {
        Editor.log('on button clicked!');

Once we done, we can open the panel via'simple-package').

The simple panel is similar to web page, it is used when you want to integrate some web app to Cocos Creator.

results matching ""

    No results matching ""