--- title: Corona SDK app 開發教學 tags: Corona, NTPU description: 資工營Day2 --- # Corona SDK APP 開發 [TOC] ## Corona 是甚麼? - 2D 遊戲引擎 - 免費 :smile: - 支援多平台(web, android, windows) - 要申請帳號才能用 :angry: --- ## 環境建置 Corona 模擬器: [https://coronalabs.com/](https://coronalabs.com/) JRE: [https://java.com/zh_TW/download/](https://java.com/zh_TW/download/) Sublime Text 3: [https://www.sublimetext.com/3](https://www.sublimetext.com/3) --- ### Sublime Text 3 設定 --- 1. 安裝 *Sublime Text* Package Control, **Tools > Command Palette… > Install Package Control** (或是用快捷鍵 {Ctrl + Shift + P} 開啟 Command Palette) 3. 安裝完之後, 在 *Sublime Text* 裡面選擇 **Tools > Command Palette… > Package Control: Install Package** 4. 在搜尋欄裡面打 **Corona Editor**, 左鍵點擊安裝 5. 重新啟動 *Sublime Text* --- ### 將Lua檔案預設為Sublime Text開啟 1. 讓Windows系統顯示副檔名 ![](https://i.imgur.com/yNBOFRo.png) 取消勾選此項 ![](https://i.imgur.com/ZxOAATh.png) 2. 建立任意.lua檔案 ![](https://i.imgur.com/sVIvrSb.png) ![](https://i.imgur.com/4ZbDuMp.png) 3. 變更.lua檔案預設開啟程式 ![](https://i.imgur.com/gVFuWjF.png) ![](https://i.imgur.com/Q8Ca5Ve.png) ![](https://i.imgur.com/CR0pqB5.png) ![](https://i.imgur.com/c4TeAeg.png) 點擊確定並套用 ![](https://i.imgur.com/Vf0NB2Z.png) ![](https://i.imgur.com/Xy1zUBD.png) --- ## Hello World ### 建立專案 --- ![](https://i.imgur.com/CE5jj4n.png) ![](https://i.imgur.com/r2upOVT.png) 這邊會開啟四個視窗 ![](https://i.imgur.com/qcFfhiD.png) 如果你的畫面出現超大的模擬器，修改模擬器的解析度就好 ![](https://i.imgur.com/C32tKPZ.png) 我們主要看的兩個視窗縮放到適合大小就好 - 模擬器畫面 - Sublime Text 3 - **main.lua** ![](https://i.imgur.com/84o1GqP.png) ### 背景圖片 --- [earth.jpg (另存連結為...)](https://i.imgur.com/dZVEzba.jpg) ![](https://i.imgur.com/dZVEzba.jpg) 將上方圖片保存為earth.jpg, 放到跟main.lua同一個資料夾 ``` lua=1 ----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- local background = display.newImageRect( "earth.jpg", display.contentWidth, display.contentHeight ) background.x = display.contentCenterX background.y = display.contentCenterY ``` ![](https://i.imgur.com/HQEpf4e.png =300x) > 在Lua中, 變數的宣告方法為 **Local x = 1**, 其中x為變數名稱, 1為資料 > [**display.newImageRect()**](https://docs.coronalabs.com/api/library/display/newText.html) 產生新的圖片物件 > **earth.jpg** => 檔名 > [**display.contentWidth**](https://docs.coronalabs.com/api/library/display/contentWidth.html), [**display.contentHeight**](https://docs.coronalabs.com/api/library/display/contentHeight.html) 螢幕的寬與高 > [**display.contentCenterX**](https://docs.coronalabs.com/api/library/display/contentCenterX.html), [**display.contentCenterY**](https://docs.coronalabs.com/api/library/display/contentCenterY.html) 螢幕中心的X座標及Y座標 > 在Corona的世界中, 一個物件的X, Y給定如下: > ![](https://i.imgur.com/GMuMSsk.png =400x) > x, y為物件**中心**的座標 --- ### 顯示文字 --- ``` lua=11 local text = display.newText( "Hello World", display.contentCenterX, display.contentCenterY, native.systemFont, 40 ) text:setFillColor( 1, 0, 0 ) ``` ![](https://i.imgur.com/jE7Rjxw.png =300x) > [**display.newText()**](https://docs.coronalabs.com/api/library/display/newText.html) 產生新的文字物件 > **native.systemFont** => 系統預設字型 > 40 => 字型大小 > [**object:setFillColor()**](https://docs.coronalabs.com/api/type/ShapeObject/setFillColor.html) => 設定物件的顏色 (R, G, B) (0~1) --- ## 會動的小遊戲 Ballon --- 這個Project會用到三個圖片檔 | background.png | platform.png | balloon.png | | -------- | -------- | -------- | | 背景圖片 |平台/地板 | 氣球 | [下載 https://github.com/coronalabs/GettingStarted01/archive/master.zip](https://github.com/coronalabs/GettingStarted01/archive/master.zip) 同時開啟一個新的專案, 命名為**balloon** 並將三個圖檔放到ballon的資料夾(與main相同) ### 載入背景圖片 ```lua=1 ----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- local background = display.newImageRect( "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY ``` ![](https://i.imgur.com/Jzlytco.png =300x) ### 載入平台 ```lua=7 local background = display.newImageRect( "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY local platform = display.newImageRect( "platform.png", 300, 50 ) platform.x = display.contentCenterX platform.y = display.contentHeight-25 ``` ![](https://i.imgur.com/esYAZCJ.png =300x) ### 載入氣球 ```lua=15 local balloon = display.newImageRect( "balloon.png", 112, 112 ) balloon.x = display.contentCenterX balloon.y = display.contentCenterY ``` 這邊讓氣球稍微透明化, 設定氣球的`alpha = 0.8` ```lua=15 local balloon = display.newImageRect( "balloon.png", 112, 112 ) balloon.x = display.contentCenterX balloon.y = display.contentCenterY balloon.alpha = 0.8 ``` ![](https://i.imgur.com/sGXi3AW.png =300x) ### 加入物理引擎 Corona 預設就有方便的2D物理引擎讓我們用 要用Corona的任何套件, 都是用 `require("package name")` ```lua=20 local physics = require( "physics" ) physics.start() ``` 要讓物件受到物理引擎的影像, 必須要讓將普通的物件轉成物理物件, 使用`physics.addBody()`就可以做到 ```lua=20 local physics = require( "physics" ) physics.start() physics.addBody( platform, "static" ) ``` 第一個參數放要轉換的物件, 後面的`static`的意思是希望該物件不要受到物理效果的影響(如: 衝力, 重力) ```lua=20 local physics = require( "physics" ) physics.start() physics.addBody( platform, "static" ) physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } ) ``` 在這個應用中, 我們希望`balloon`是一個`dynamic`物件, 意思是`balloon`會受到重力的影像, 也會被偵測到碰撞. * 因為`balloon`幾乎是一個圓形的物件, 所以我們設定`radius = 50`, 這將會把`balloon`視為一個半徑50的物理物件, 可以根據圖片的大小不同更改這個值 * `bounce`這個值決定了物件在遇到碰撞時, 回饋的能量, 必須要是一個自然數(>0.0), 0.3代表碰撞時會回饋30%的能量. ### 推氣球 ```lua=26 local function pushBalloon() end ``` >在lua中, 建立函式的方法為 >```lua >local function function_name( ... ) > -- body >end >``` >括號`()`是必要的, 不管有沒有傳入 ```lua=26 local function pushBalloon() balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y ) end ``` 呼叫函式時, 給予`balloon`一個向上的衝力 `balloon.x, balloon.y`告訴物理引擎要在哪裡施力 ```lua=26 local function pushBalloon() balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y ) end balloon:addEventListener( "tap", pushBalloon ) ``` * 我們在設定事件的時候, 要告訴corona事件要發生在甚麼物件上面, 在這邊是`balloon` * 呼叫一個物件的函式時, 用的是`:`來呼叫, 在lua裡面這個叫做物件函式, 在冒號之前放物件本身, 物件後面放函式名稱`addEventListener` * 我們希望在滑鼠/觸控碰到氣球的時候, 呼叫剛剛寫好的`pushBalloon`, 所以在`addEventListener`裡面填入事件類型`"tap"`, 後面放希望呼叫的函式`pushBalloon` 以下是到目前為止的所有Code, 如果發現自己的氣球碰到不會動的話, 可以對照看看 ```lua= ----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- local background = display.newImageRect( "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY local platform = display.newImageRect( "platform.png", 300, 50 ) platform.x = display.contentCenterX platform.y = display.contentHeight-25 local balloon = display.newImageRect( "balloon.png", 112, 112 ) balloon.x = display.contentCenterX balloon.y = display.contentCenterY balloon.alpha = 0.8 local physics = require( "physics" ) physics.start() physics.addBody( platform, "static" ) physics.addBody( balloon, "dynamic", { radius=50, bounce=0.3 } ) local function pushBalloon() balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y ) end balloon:addEventListener( "tap", pushBalloon ) ``` ### 建立分數 一個遊戲怎麼能少了分數? 這邊我們定義`tapCount`, 紀錄玩家總共碰到氣球幾次, 碰到愈多次, 分數就愈高囉 :+1: ```lua=7 local tapCount = 0 local background = display.newImageRect( "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY ``` 建立文字 ```lua=7 local tapCount = 0 local background = display.newImageRect( "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY local tapText = display.newText( tapCount, display.contentCenterX, 20, native.systemFont, 40 ) ``` ![](https://i.imgur.com/KiDiRkh.png =300x) 因為背景的顏色太亮了, 改一下分數的顏色 ```lua=13 local tapText = display.newText( tapCount, display.contentCenterX, 20, native.systemFont, 40 ) tapText:setFillColor( 0, 0, 0 ) ``` ![](https://i.imgur.com/AsZ72pL.png =300x) 接下來我們要記錄點擊的次數, 在哪裡記錄呢? 只要修改一下`pushBalloon`就好了 :100: ```lua=31 local function pushBalloon() balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y ) tapCount = tapCount + 1 tapText.text = tapCount end ``` * `tapCount = tapCount + 1` 經過這行的運算 `tapCount` 就會增加1 * `tapText.text = tapCount` 透過更新`tapText`的成員`text`就可以直接更新畫面上文字了 ## 發布 Corona SDK的方便之處在於, 可以一鍵匯出成可執行檔，讓別人可以安裝執行。 | Android | Windows | HTML5(web) | | -------- | -------- | -------- | | .apk | .exe | .html | 在模擬器的視窗中, **File->Build** ![](https://i.imgur.com/fEWWLQ3.png =500x)