cocos2d-JS （三）Helloworld及Cocos Creater簡介

一.編輯器介紹

1）資源管理器：顯示了項目資源文件夾（assets）中的全部資源。這裏會以樹狀結構顯示文件夾並自動同步在操做系統中對項目資源文件夾內容的修改。您能夠將文件從項目外面直接拖拽進來，或使用菜單導入資源。

PS:項目中全部用到的資源都在其中，咱們的script腳本也在裏面

2）場景編輯器：用來展現和編輯場景中可視內容的工做區域。所見即所得的場景搭建工做都依靠場景編輯器中的顯示來完成

PS：遊戲就是一個場景到另外一個場景，很重要的一個概念~

3）層級管理器：樹狀列表的形式展現場景中的全部節點和他們的層級關係，全部在場景編輯器中看到的內容均可以在層級管理器中找到對應的節點條目，在編輯場景時這兩個面板的內容會同步顯示，通常咱們也會同時使用這兩個面板來搭建場景。

PS：咱們能夠把label放在精靈節點下，看咱們移動精靈label也跟着動了，有點像是繼承（有個爹是很重要的）

4）工具欄：上包括了場景編輯工具和預覽遊戲時的操做按鈕，最右邊顯示了遠程測試和調試時使用訪問地址，以及鏈接中的設備數。

PS:在192.168.0.103：7456附近有個二維碼，你用瀏覽器掃一掃，你會瞬間知道這個有多強大，前提是在一個局網裏

二.項目目錄介紹

如圖點擊這裏直接訪問項目文件夾

進入 Cocos Creator 項目後，您的項目文件夾將會包括如下結構：

ProjectName（項目文件夾）

├──assets

├──library

├──local

├──settings

├──temp

└──project.json

資源文件夾（assets）

assets 將會用來放置您遊戲中全部本地資源、腳本和第三方庫文件。只有在assets 目錄下的內容才能顯示在資源管理器中。assets 中的每一個文件在導入項目後都會生成一個相同名字的.meta 文件，用於存儲該文件做爲資源導入後的信息和與其餘資源的關聯。一些第三方工具生成的工程或設計原文件，如 TexturePacker 的.tps 文件，或 Photoshop 的.psd 文件，能夠選擇放在assets 外面來管理。

資源庫（library）

library 是將assets 中的資源導入後生成的，在這裏文件的結構和資源的格式將被處理成最終遊戲發佈時須要的形式。若是您使用版本控制系統管理您的項目，這個文件夾是不須要進入版本控制的。

當library 丟失或損壞的時候，只要刪除整個library 文件夾再打開項目，就會從新生成資源庫。

本地設置（local）

local 文件夾中包含該項目的本地設置，包括編輯器面板佈局，窗口大小，位置等信息。您不須要關心這裏的內容，只要按照您的習慣設置編輯器佈局，這些就會自動保存在這個文件夾。通常local 也不須要進入版本控制。

項目設置（settings）

settings 裏保存項目相關的設置，如構建發佈 菜單裏的包名、場景和平臺選擇等。這些設置須要和項目一塊兒進行版本控制。

project.json

project.json 文件和assets 文件夾一塊兒，做爲驗證 Cocos Creator 項目合法性的標誌。只有包括了這兩個內容的文件夾才能做爲 Cocos Creator 項目打開。而project.json 自己目前只用來規定當前使用的引擎類型和插件存儲位置，不須要用戶關心其內容。

三.下面我給你們演示一下，如何修改HelloWord

1.首先咱們移除原來的HelloWord組件

2.添加咱們的javascript腳本

PS：這就是組件化的好處，咱們assets其實就是一個數據庫，咱們想要script屬於哪一個元器件，就像我那樣直接拖拽就能夠了。你們也能夠直接在屬性檢查器中修改文本

3.咱們來看一下HelloWorld代碼

<pre name="code" class="javascript"><span style="font-family:KaiTi_GB2312;color: rgb(51, 51, 51); font-size: 24px;">cc.Class({
    extends: cc.Component,
    
    //屬性
    properties: {
        label: {
            //默認爲空
            default: null,
            //類型是 label標籤
            type: cc.Label
        },
        //顯示的值
        text: 'Hello, World!'
    },


    // 初始化
    onLoad: function () {
        this.label.string = this.text;
    },


    // 每一幀都會調用
    update: function (dt) {


    },
});

4.查看手冊：你們想要認真學習關於cocos creater能夠去看看 內置的手冊

幫助---->使用手冊，或是去官網查看

以上就是今天的內容~~~~~~~~~~~~~~~ 天天都會更新一點~~~~