LayaAir引擎學習日誌9---- LayaAir IDE中顯示文字Hello World（JS）

前面的部落格，我們已經講了如何下載安裝配置 LayaAir IDE 開發環境。接下來我們來看看如何建立一個 Hello World 專案，在控制檯列印輸出 Hello World 和在舞臺上顯示 Hello World 文字。

LayaAir IDE 支援三種語言來開發專案。此處我們以JavaScript 語言為例，其他兩種語言只是在編輯程式碼時語法稍有差異，在建立專案和釋出專案的使用上是一致的。

建立空專案

現在我們來學習 使用LayaAir IDE 建立一個空的專案來開始。

在新建專案頁面，選中 LayaAir 空專案模板。

 

分別輸入或選擇一下專案的名稱、路徑、語言型別、引擎版本，然後點選 建立 按鈕，就會建立一個空專案並開啟。

 

開啟一個專案時，預設會開啟程式碼模式，可以點選右上角的 編輯模式 切換至UI編輯模式。同理在UI編輯模式可以點選右上角的 程式碼模式 切換至程式碼編輯模式下。 

輸出 Hello World

在程式碼模式下，點選 src 目錄下的 預設生成的主檔案。
        在js檔案裡輸入程式碼如下，用於在除錯皮膚輸出文字“Hello world!”。 

執行專案Hello World

        在選單欄中點選 除錯 按鈕，會彈出預覽面版。在除錯控制檯會顯示專案中輸出的內容。
        本例項，點選除錯後，在除錯控制檯會輸出文字“Hello World!”。

 

        點選預覽視窗選單欄裡 解析度 下拉選單，可以選擇不同裝置螢幕的預覽效果。
        點選預覽視窗選單欄裡 螢幕方向 下拉選單，可以選擇橫豎屏的預覽效果。

 

顯示文字Hello World

        繼續編輯程式碼，在舞臺上新增一個文字，設定文字的內容的為“Hello World”，再設定一下文字的字型大小、文字顏色、對齊方式、寬高資訊等。
        關於Text 文字類的詳細屬性和介面說明請參考 Text 的API。

 

1 2 3 4 5 6 7 8 9 10

var Text = laya.display.Text; Laya.init(620, 400); Laya.stage.bgColor = "#323232"; //設定舞臺的背景顏色。 var text = new Text();          //例項化一個 Text 類，用於文字的顯示。 text.fontSize =30;              //設定文字的字型大小。 text.color ="#db7644";          //設定文字的顯示顏色。 text.size(200,100);             //設定文字的顯示區域大小。 text.pos(100,100);              //設定文字的顯示位置。 text.text="Hello World";        //設定文字的顯示內容字元。 Laya.stage.addChild(text);      //將文字新增到舞臺上。

  

執行專案

        在選單欄中點選 除錯 按鈕，彈出預覽面版。在預覽窗可以看到舞臺上顯示了我們剛剛新增文字“Hello World”。

 不懂的可以加我的QQ群： 172719352（LayaAir引擎交流群 ）歡迎你的到來哦，看了博文給點腳印唄，謝謝啦~~