【RM教學 2.0】RMMV – 初入腳本 JS基本 -變量宣告

在粉專上收集了大家比較想學習的內容部分,發現還是想知道如何撰寫腳本的需求較多,因此RM教學2.0會開始穿插一些腳本教學文章,已讓大家互相學習。

如果你對Maker製造機的教學有任何想法,也歡迎到此填寫問卷。
問卷連結

JS 基本介紹的部份,在教學系列就省略了,我們直接開始告知要會撰寫的基礎與內容,大致的方向會是快速讓大家了解JS的基本語法,然後儘快帶入MV的腳本教學。那就讓我們開始上課吧!

事前準備:文字編輯器 sublime text3

JS 變量宣告/ 基本型態

說明:在尚未進入教學之前,要先給各位RM作者小觀念,這邊指出的變量,請先不要跟RM產生聯想。妳可以當做我們單純在學習「程式」,避免有時候被誤導。

然後,練習撰寫請先下載文字編輯器,粽子在這邊推薦 sublime text3 或是你也可以下載 Nodepad++之類的,總之請不要用「筆記本」撰寫。那會大大提高debug難度。


開啟JS檔案

使用文字編輯器之後,開啟一個新檔案。並且另存為 XXX.js ,副檔名記得一定要是js喔。


練習宣告

JS 的變量基本上都是使用var 來宣告。
#變量是什麼?他就是一個程式認得的代號,所以不用太去鑽牛角尖解釋他。看久你就習慣了


實際寫看看

我們直接再編輯器中寫下程式

var x = 1;
var y = 2;

Tip : 「;」 是每個程式語句結尾的符號,請養成好習慣填寫(JS 不填不會噴錯,但寫久了…哩丟哉阿拉)

馬上來看結果

也太快!? 快一點你才有成就感嘛 總之我們把這隻js檔案另存到 專案路徑/js/plugins/ 目錄下看看,並且按下F10 把插件設定為on激活


執行遊戲專案

WTF!? 好啦,不要懷疑,跟著做就是了,把遊戲打開之後按下F8 開啟console工具。這是自己寫腳本時最重要的工具,請記住他如何呼叫出來。

或是你可以先安裝 Console 自動開啟插件 這樣以後開啟專案測試時,就會自動開啟consol 面板囉
RM腳本教學


測試剛剛撰寫的程式碼

承上,面板上有許多頁籤。 點選console , 這邊是最常用到用來確認資訊的地方
RM腳本教學

接著,我們剛剛撰寫了

var x = 1;
var y = 2;

現在要來測試是否寫成功了。 這時點下console 底下有 > 符號的地方,就可以輸入資料做測試
RM腳本教學

在此做以下動作
1. 輸入x -> 按下enter
2. 輸入y -> 按下enter

如果分別顯示1 與 2 則代表我們剛剛寫的插件,已經順利帶入遊戲中囉
RM腳本教學


回到JS的基礎部分

剛剛我們所撰寫的變量型態都是屬於數值 ,但其實JS中有著以下的變量型態(簡稱變態)

Tip : 先有概念,不要深追探討他是什麼。開始寫之後你會越來越了解

基本型別

  • 布林(boolean)
  • 數值(Number)
  • 字串(String)

複合型別

  • 陣列(Array)
  • 物件(object)

簡單型別

  • 空值(null)
  • 未定義(undefined)

特殊型別

  • 函式(function)

嘗試宣告各種型別

以上型別,基本上都可以使用 var進行宣告,我們先來學習基本的宣告方式
以下的內容剛接觸很容易看不懂,請不要死背,但要有概念


布林值:
布林值只有兩種, true / false 並且只接受小寫,類似我們在RM中常常使用的「開關」
var x = true; // x 為true


數值:
數值就是我們常見的1234..9
var x = 1234; // x 為1234


字串:
字串在宣告時,必須用單引號或雙引號包起來
var x = "我是粽子"; // x 為我是粽子


陣列:
陣列算是一種複合的資料型態,一個array 中可以囊括很多資料型態

基本宣告方式:
var x = new Array();
或是
var x = [ ];

而陣列的取值可以透過陣列位置來取用

var x = [1 , "粽子", true]; // 先宣告一個陣列x , 裡面包含 數值1, 字串"粽子", 布林值 true;

在console後台中,分別輸入不同內容,會顯示初不同的內容
x[0] // 會輸出 1
x[1] // 會輸出"粽子"
x[2] // 會輸出 true

Tip : x[0] 代表 x中的第0個位置的資料, 陣列的位置是從0開始計算

Tip : 陣列可以想像成一個可以塞值的容器,輸入陣列的位置就可以取得對應的值


物件:

宣告方式
var x = new Object() 或是 var x = {};

JS 中的物件相對複雜也相對重要,這邊不多做說明,你可以先有個概念,一個物件裡面可以擁有很多屬性。
你可以先在程式碼中撰寫以下功能。

var x = {};
x._a = 0;
x._b = "Maker製造機";
x._c = true;

然後到console中分別輸入以下內容,來看看會顯示什麼東西。

x
x._a
x._b
x._c

你會發現其實x 其實包含了x._a x._b x._c 三個屬性的內容,當然也可以包含函式(方法),為了避免混亂,我們不在此做太多詳細說明,試試看你就知道了。


空值/未定義:
空值與未定義,他們非常的相似。但又有一點落差。
null : 表示沒有對象,該處不應該有值
undefinded :表示缺少值,就是此處應該要有值,但沒有被定義。

宣告方式:
var x;

如果只這樣宣告,則在console 輸出x的時候,就會顯示undefined;


基礎的js 介紹,到此一段落。關於函式的部份,我們會在下一節進行教學。

回家作業

如果你是第一次看程式語法的朋友,請你一定要練習寫回家作業,程式碼學習一定要透過撰寫才能真正體會與了解。請不要看完之後點點頭,覺得懂了就不練習,這樣是無法進步的。

作業:
請撰寫js檔案,並套用到專案中的插件。
並在console面板分別印出 數值/布林/字串與陣列
陣列裡面必須最少要有兩個值在裡面

Tip: 值的部份可以隨意設定

這邊附上作業寫好大概會長怎樣,希望作者們一定要親自練習看看

EX:
假設我寫

var x =1 ;
var y = false;
var z = "Maker只造機"
var a = ["1111", true, 9527];

#哎呀…錯字了

印出來之後會象是這樣, 當然你可以隨便定義其他數字或是字串內容
RM腳本教學

下一篇我們會介紹JS的基本運算符,並在console 中練習w

#本系列教學如有錯誤,請予以指正。

發表迴響