Cocos-Tool-Tree 使用

最新推荐文章于 2025-06-05 09:06:25 发布

清淡的咸菜

最新推荐文章于 2025-06-05 09:06:25 发布

阅读量548

点赞数 9

文章标签： cocos2d

本文链接：https://blog.youkuaiyun.com/Java_oujinjie/article/details/135850353

版权

本文介绍了如何在Cocos-Tool-Tree环境中修改preview-template下的index.ejs文件，包括头部元数据设置和添加开发工具栏按钮，以便于开发者显示或隐藏CocosCreator的树视图组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cocos-Tool-Tree 使用

修改 preview-template 下： index.ejs

<html class="dark">
    <head>
        <link rel="icon" href="./favicon.ico" />
        <meta charset="utf-8" />
        <title><%=title%></title>
        <meta
            name="viewport"
            content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="full-screen" content="yes" />
        <meta name="screen-orientation" content="portrait" />
        <meta name="x5-fullscreen" content="true" />
        <meta name="360-fullscreen" content="true" />
        <meta name="renderer" content="webkit" />
        <meta name="force-rendering" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link rel="stylesheet" type="text/css" href="./index.css" />
    </head>
    <body>
        <%- include(cocosToolBar, {config: config}) %>
        <div style="display: flex;flex: auto;align-items: center;">
            <%- include ./dist/index.html %>
            <div id="content" class="content">
                <div class="contentWrap">
                    <div id="GameDiv" class="wrapper">
                        <div id="Cocos3dGameContainer">
                            <canvas id="GameCanvas" tabindex="-1" style="background-color: '';"></canvas>
                        </div>
                        <div id="splash">
                            <div class="progress-bar stripes"><span></span></div>
                        </div>
                        <div id="bulletin">
                            <div id="sceneIsEmpty" class="inner"><%=tip_sceneIsEmpty%></div>
                        </div>
                        <div class="error" id="error">
                            <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
                            <div class="error-main"></div>
                            <div class="error-stack"></div>
                        </div>
                    </div>
                </div>
                <p class="footer">
                    Created with <a href="https://www.cocos.com/products" target="_blank" title="Cocos Creator">Cocos Creator</a>
                </p>
            </div>
        </div>
        <%- include(cocosTemplate, {}) %>
    </body>
</html>
<script>
    document.getElementsByClassName('toolbar')[0].insertAdjacentHTML('afterbegin', '<div><button id="btn-show-tree">Tree</button></div>');
    const devtoolsBtn = document.getElementById('btn-show-tree');
    let isOpen = !!localStorage.getItem('ccc_devtools_show');
    toggle(isOpen);
    devtoolsBtn.addEventListener('click', () => {
        isOpen = !isOpen;
        toggle(isOpen);
    }, false);

    function toggle(isOpen) {
        const devApp = document.getElementById('dev-app');
        window.ccdevShow = isOpen;
        if (isOpen) {
            devApp.style.display = 'flex';
            devtoolsBtn.classList.add('checked');
            localStorage.setItem('ccc_devtools_show', 1);
        } else {
            devApp.style.display = 'none';
            devtoolsBtn.classList.remove('checked');
            localStorage.removeItem('ccc_devtools_show');
        }
    }
</script>